:root {
  /* Astet brand palette */
  --off-white: #F9F9F6;
  --off-black: #1D1D1D;
  --claret: #572D2F;
  --claret-deep: #3F2123;
  --claret-light: #6B3B3D;
  --app-header-h: 73px;

  --claret-tint: rgba(87, 45, 47, 0.08);
  --claret-tint-strong: rgba(87, 45, 47, 0.16);

  /* Semantic — dark theme on claret/chocolate brown */
  --bg: var(--claret);
  --ink: var(--off-white);
  --ink-soft: rgba(249, 249, 246, 0.78);
  --muted: rgba(249, 249, 246, 0.48);
  --line: rgba(249, 249, 246, 0.14);
  --line-soft: rgba(249, 249, 246, 0.07);
  --hover: rgba(249, 249, 246, 0.06);
  --danger: #E8B4B5;
  --ok: #C8DCC8;
  --accent: rgba(249, 249, 246, 0.55);
  --accent-rgb: 249, 249, 246;

  --font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
}

.muted { color: var(--muted); font-weight: 400; }
.hidden { display: none !important; }

/* All buttons are text-only by default */
button {
  font: inherit;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  transition: color 0.18s, opacity 0.18s;
}
button::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s;
}
button:hover::after { opacity: 0.6; }
button:active { opacity: 0.7; }

/* Primary CTA — slightly emphasized but still text-only with underline */
button.primary,
form button[type="submit"],
#modal-ok {
  color: var(--ink);
  font-weight: 600;
}
button.primary::after,
form button[type="submit"]::after,
#modal-ok::after {
  opacity: 1;
  bottom: 0;
}
button.primary:hover::after,
form button[type="submit"]:hover::after,
#modal-ok:hover::after { opacity: 0.6; }

button.ghost { color: var(--ink-soft); }
button.ghost:hover { color: var(--ink); }

button.link {
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.06em;
}
button.link:hover { color: var(--ink); }

button.danger {
  color: var(--danger);
  font-size: 11px;
}

/* Inputs — minimal underline style */
input, select, textarea {
  font: inherit;
  font-family: var(--font-sans);
  width: 100%;
  padding: 10px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  outline: none;
  transition: border-color 0.18s;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
/* The rule above turns off native appearance for the sake of the text fields,
   but a checkbox or radio with appearance:none loses its tick entirely: the
   box still paints, the state never shows, and every click reads as a no-op.
   Three screens had already patched this locally one at a time before the
   purchasing rows hit it again, so restore the native control once, here.
   Anything that wants to draw its own control opts out by declaring
   appearance:none itself, as .user-flag-row does. */
input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; }
input[type="radio"] { -webkit-appearance: radio; appearance: auto; }

input:focus, select:focus, textarea:focus {
  border-bottom-color: var(--ink);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-bottom-color: var(--ink-soft);
}

/* Kill Chrome / Edge / Safari autofill yellow box.
   The inset shadow paints the input background so it visually matches the page. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  transition: background-color 5000s ease-in-out 0s, border-color 0.18s;
}
.modal-card input:-webkit-autofill,
.modal-card input:-webkit-autofill:hover,
.modal-card input:-webkit-autofill:focus,
.modal-card input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--claret-deep) inset !important;
}
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 24px;
  cursor: pointer;
}
select option { background: var(--claret-deep); color: var(--ink); }
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.85);
  cursor: pointer;
  opacity: 0.6;
}
textarea { resize: vertical; min-height: 60px; }

.password-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.password-wrap input { padding-right: 32px; }
.password-toggle {
  position: absolute;
  right: 0;
  bottom: 6px;
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0;
  line-height: 0;
}
.password-toggle::after { display: none; }
.password-toggle:hover { color: var(--ink); }
.password-toggle svg { width: 16px; height: 16px; display: block; }

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
label input, label select, label textarea {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
}

/* Sections — no card chrome, just spacing */
.card {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.card + .card { margin-top: 8px; }
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

/* Brand */
.brand {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.brand-logo {
  display: block;
  height: 34px;
  width: auto;
  user-select: none;
}
.brand-tag {
  margin: 0 0 -1px 0;
  padding-left: 18px;
  border-left: 1px solid var(--line);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  line-height: 1;
  align-self: flex-end;
}
.brand.small {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.brand.small .brand-logo { height: 26px; }
.brand.small .brand-tag {
  padding-left: 0;
  margin: 0;
  border-left: 0;
  font-size: 9px;
  letter-spacing: 0.2em;
  align-self: flex-start;
}

/* Login */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}
.login-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
  background: transparent;
  border: 0;
}
.login-card .brand {
  margin-bottom: 24px;
}
.login-card .brand-logo { height: 32px; }
.login-card button[type="submit"] {
  margin-top: 12px;
  align-self: flex-start;
}
.error {
  color: var(--danger);
  font-size: 12px;
  min-height: 18px;
  margin: 0;
  letter-spacing: 0.02em;
}

/* App shell */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 40px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  z-index: 10;
  /* Solid chocolate (no transparency + no blur) — scrolling content used to
     bleed through the header as a lighter tint, which read as a bug.
     Use --claret (the correct chocolate #572D2F), NOT --claret-deep (which
     is #3F2123 and reads too dark against the rest of the page). */
  background: var(--claret, #572D2F);
}
#main-nav { display: flex; gap: 28px; justify-content: flex-start; flex: 1; margin-left: 32px; }
#main-nav button {
  padding: 4px 0;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
#main-nav button > span:first-child { text-align: left; }
#main-nav button:hover { color: var(--ink); }
#main-nav button:hover::after { opacity: 0; }
#main-nav button.active { color: var(--ink); }
#main-nav button.active::after {
  opacity: 1;
  bottom: -2px;
  height: 1px;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 10px;
  background: rgba(249,249,246,0.16);
  color: var(--ink);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  font-family: var(--font-sans);
}
/* "Soon" pill on nav tabs whose module is still in development */
.nav-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 8px;
  background: #b8975a;
  color: #1d1d1d;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  font-family: var(--font-sans);
}

/* Visual separation between shared tabs and admin/director-only tabs */
.nav-separator {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--line);
  align-self: center;
  margin: 0 6px;
  pointer-events: none;
}
#main-nav button.admin-only {
  position: relative;
}
#main-nav button.admin-only > span:first-child::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
  transition: background 0.18s, opacity 0.18s;
  opacity: 0.7;
}
#main-nav button.admin-only:hover > span:first-child::before,
#main-nav button.admin-only.active > span:first-child::before {
  background: var(--ink);
  opacity: 1;
}
#main-nav button:hover .nav-badge { background: rgba(249,249,246,0.24); }
#main-nav button.active .nav-badge { background: rgba(249,249,246,0.28); }

/* User menu dropdown */
.user-menu {
  position: relative;
  font-family: var(--font-sans);
}
.user-menu-trigger {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.15s;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  font-size: 13px;
}
.user-menu-trigger::after { display: none; }
.user-menu-trigger:hover { background: var(--hover); }

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  gap: 0;
}
#user-name {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  font-size: 14px;
  color: var(--ink);
}
#user-handle {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

.user-menu-chevron {
  color: var(--muted);
  transition: transform 0.2s, color 0.15s;
  flex-shrink: 0;
}
.user-menu-trigger:hover .user-menu-chevron { color: var(--ink); }
.user-menu-trigger[aria-expanded="true"] .user-menu-chevron {
  transform: rotate(180deg);
  color: var(--ink);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  background: var(--claret-deep);
  border: 1px solid var(--line);
  border-radius: 6px;
  z-index: 60;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  padding: 6px;
  animation: dropdown-in 0.15s ease-out;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-menu-profile {
  padding: 14px 14px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.user-menu-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin-bottom: 6px;
}
.user-menu-meta {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-menu-meta #menu-role {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9px;
  font-weight: 500;
}
.user-menu-sep { opacity: 0.5; }

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-weight: 400;
}
.user-menu-item::after { display: none; }
.user-menu-item:hover {
  background: rgba(249,249,246,0.06);
  color: var(--ink);
}
.user-menu-icon {
  width: 16px;
  display: inline-flex;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
}
.user-menu-item:hover .user-menu-icon { color: var(--ink); }

.user-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}

.user-menu-item-danger { color: var(--danger); }
.user-menu-item-danger .user-menu-icon { color: var(--danger); }
.user-menu-item-danger:hover {
  background: rgba(232,180,181,0.10);
  color: var(--danger);
}
.user-menu-item-danger:hover .user-menu-icon { color: var(--danger); }
.badge {
  font-family: var(--font-sans);
  font-size: 9px;
  background: transparent;
  color: var(--muted);
  padding: 0;
  border: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.badge.designer { color: var(--muted); }

#main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 56px;
}

.form { display: flex; flex-direction: column; gap: 22px; }
.hint {
  font-size: 11px;
  margin: 0;
  min-height: 16px;
  letter-spacing: 0.04em;
}
.hint.ok { color: var(--ok); }
.hint.err { color: var(--danger); }

.totals {
  display: flex;
  gap: 36px;
}
.totals span {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  gap: 4px;
}
.totals strong {
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.timesheet-card .totals strong {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0;
}

/* Tables */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  text-align: left;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
thead th:not(:first-child) { padding-left: 16px; }
tbody td {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--ink-soft);
}
tbody td:not(:first-child) { padding-left: 16px; }
tbody td strong { color: var(--ink); font-weight: 500; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { color: var(--ink); }

/* KPIs — typographic, no boxes */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.kpi {
  background: transparent;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kpi span {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.kpi small {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Charts */
.chart-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 40px;
}
.chart-card h3 { margin-bottom: 20px; }
.chart-card canvas { max-height: 280px; }

.filter-form {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.filter-form label { font-size: 9px; }
.filter-form input { padding: 6px 0 6px; min-width: 140px; }

/* Sticky timesheet header */
.timesheet-card .sticky-head {
  position: sticky;
  top: var(--app-header-h);
  background: var(--bg);
  z-index: 5;
  padding-top: 16px;
}

/* Timesheet */
.week-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.week-nav h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.week-nav-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.week-nav-controls button.link { font-size: 13px; padding: 4px 8px; }
.week-nav-controls #week-prev,
.week-nav-controls #week-next { font-size: 18px; }

.timesheet-filter {
  flex: 1 1 100%;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
  display: flex;
  align-items: center;
}
.timesheet-filter input[type="search"] {
  max-width: 360px;
  font-size: 13px;
  padding: 6px 0;
}
.timesheet-filter input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--muted);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 6l12 12M6 18L18 6" stroke="black" stroke-width="2" fill="none" stroke-linecap="round"/></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"><path d="M6 6l12 12M6 18L18 6" stroke="black" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') center/contain no-repeat;
  cursor: pointer;
}
.timesheet tr.is-filtered-out { display: none; }
.timesheet tr.filter-empty td.empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-style: italic;
  border-bottom: 0;
}

.timesheet-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}
.timesheet {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 760px;
}
.timesheet th, .timesheet td {
  padding: 0;
  border: 0;
  text-align: center;
  vertical-align: middle;
}
/* The day row that the user actually sees lives inside the sticky-head,
   not in the table — see .ts-day-row-only below. The original thead in
   the table stays in the DOM so the column widths stay aligned, but it
   is visually collapsed away. */
.timesheet thead { display: none; }
.timesheet.ts-day-row-only thead { display: table-header-group; }
.ts-day-row-wrap { margin-top: 8px; }
.timesheet.ts-day-row-only {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  min-width: 760px;
}
.timesheet.ts-day-row-only thead th {
  padding: 14px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  position: static;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
.timesheet thead th.col-project { text-align: left; padding-left: 0; }
.timesheet thead th.is-today {
  color: var(--ink);
  position: relative;
}
.timesheet thead th.is-today::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 24px;
  height: 1px;
  background: var(--ink);
}
.day-header {
  background: transparent;
  border: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.day-header.static { cursor: default; }
.day-lbl {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  font-weight: 500;
}
.day-num {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  text-transform: none;
  font-weight: 400;
}
.timesheet thead th.is-today .day-num { color: var(--ink); }
.day-hint {
  position: absolute;
  top: 0;
  right: 4px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
  line-height: 1;
  text-transform: none;
  font-weight: 400;
}
.day-header:hover .day-hint {
  opacity: 0.95;
  color: var(--ink);
}

.day-status-badge {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--claret-tint-strong, rgba(249,249,246,0.16));
  color: var(--ink);
  margin-top: 2px;
}
.day-status-badge.vacation { background: rgba(184,221,184,0.18); color: rgba(220,240,220,0.95); }
.day-status-badge.holiday { background: rgba(220,200,160,0.18); color: rgba(240,225,180,0.95); }
.day-status-badge.sick { background: rgba(232,180,181,0.18); color: rgba(240,200,200,0.95); }
.day-status-badge.permission { background: rgba(180,200,230,0.18); color: rgba(210,225,245,0.95); }

.day-status-badge.clearable {
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.day-status-badge.clearable:hover {
  opacity: 0.75;
  transform: scale(0.95);
}

.timesheet th.col-day.has-status { background: rgba(249,249,246,0.025); }
.timesheet td.col-day.has-status { background: rgba(249,249,246,0.025); }
.timesheet td.col-day.has-status input { color: var(--muted); }

/* Weekends — subtle striped/dimmed look */
.timesheet th.col-day.is-weekend,
.timesheet td.col-day.is-weekend {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(249,249,246,0.02) 0,
      rgba(249,249,246,0.02) 4px,
      transparent 4px,
      transparent 8px
    );
}
.timesheet thead th.col-day.is-weekend .day-num,
.timesheet thead th.col-day.is-weekend .day-lbl { color: var(--muted); }

/* Holidays — solid subtle tint */
.timesheet th.col-day.is-holiday,
.timesheet td.col-day.is-holiday {
  background: rgba(220,200,160,0.05);
}
.day-status-badge.holiday {
  background: rgba(220,200,160,0.18);
  color: rgba(240,225,180,0.95);
}

.timesheet .col-project { width: 28%; min-width: 220px; }
.timesheet .col-day { width: 8%; min-width: 60px; }
.timesheet .col-total { width: 8%; min-width: 60px; }
.timesheet .col-actions { width: 32px; min-width: 32px; }

.timesheet tbody td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.timesheet tbody td.col-project {
  text-align: left;
  padding-left: 0;
  padding-right: 12px;
  color: var(--ink-soft);
  font-size: 13px;
}
.timesheet tbody td.col-project strong {
  color: var(--ink);
  font-weight: 500;
  margin-right: 4px;
}
.timesheet tbody tr:hover td.col-project { color: var(--ink); }

.timesheet tbody tr.is-pinned td.col-project::before {
  content: '★';
  display: inline-block;
  margin-right: 6px;
  color: var(--muted);
  font-size: 10px;
  vertical-align: middle;
}

.timesheet input[type="number"] {
  width: 100%;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  padding: 8px 4px;
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  appearance: textfield;
  -moz-appearance: textfield;
  transition: background 0.15s, border-color 0.15s;
}
.timesheet input[type="number"]::-webkit-outer-spin-button,
.timesheet input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.timesheet input[type="number"]:hover {
  background: var(--hover);
}
.timesheet input[type="number"]:focus {
  background: rgba(249,249,246,0.1);
  border-color: var(--line);
  outline: none;
  box-shadow: none;
}
.timesheet td.is-today input[type="number"] { background: rgba(249,249,246,0.05); }
.timesheet td.is-weekend input[type="number"] { color: var(--muted); }

.timesheet td.col-day {
  position: relative;
}
.travel-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
  opacity: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
  transition: opacity 0.15s, color 0.15s;
}
.travel-toggle::after { display: none; }
.timesheet td.col-day:hover .travel-toggle { opacity: 0.55; }
.travel-toggle.is-travel {
  opacity: 1;
  color: var(--ink);
}
.travel-toggle:hover { color: var(--ink); opacity: 1; }
.timesheet td.col-day.is-travel input { font-style: italic; }

.timesheet input.saving { opacity: 0.5; }
.timesheet input.saved {
  background: rgba(200,220,200,0.12) !important;
  border-color: rgba(200,220,200,0.3) !important;
}
.timesheet input.err {
  background: rgba(232,180,181,0.15) !important;
  border-color: rgba(232,180,181,0.4) !important;
}

.timesheet .col-total {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0;
}
.timesheet tbody .col-total { color: var(--ink-soft); }
.timesheet tbody tr:hover .col-total { color: var(--ink); }

.timesheet tbody .col-actions { padding-right: 0; }
.timesheet tbody button.danger {
  font-size: 18px;
  padding: 0 6px;
  line-height: 1;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.timesheet tbody tr:hover button.danger { opacity: 1; }
.timesheet tbody button.danger:hover { color: var(--danger); }

.timesheet tfoot th {
  padding: 14px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.timesheet tfoot th.col-project {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
}
.timesheet tfoot th#grand-total {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.timesheet .empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
  font-style: italic;
}

/* Add project picker */
.add-project-wrap {
  position: relative;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.picker {
  position: relative;
  margin-top: 16px;
  max-width: 480px;
}
.picker input {
  margin-bottom: 0;
}
.picker ul {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  border-top: 1px solid var(--line-soft);
}
.picker li {
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink-soft);
  transition: color 0.15s, padding-left 0.15s;
}
.picker li:hover {
  color: var(--ink);
  padding-left: 8px;
}
.picker li strong { color: var(--ink); font-weight: 500; margin-right: 4px; }
.picker li:last-child { border-bottom: 0; }
.picker li.taken {
  cursor: not-allowed;
  opacity: 0.5;
}
.picker li.taken:hover {
  color: var(--ink-soft);
  padding-left: 0;
}

.picker-phase-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.picker-phase-head .link { font-size: 12px; padding: 0; }
#picker-selected-project {
  color: var(--ink);
  font-size: 13px;
}
#picker-selected-project strong { font-weight: 500; }
.picker-phase-prompt {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  padding: 8px 0;
}

.row-phase {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  border-radius: 8px;
  background: rgba(249,249,246,0.06);
  color: var(--ink-soft);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  vertical-align: middle;
}

/* Inline phase dropdown on each main project row */
.row-phase-add {
  margin-left: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--line);
  color: var(--muted);
  padding: 2px 18px 2px 4px;
  width: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  vertical-align: middle;
  background-position: calc(100% - 4px) 50%, calc(100% - 0px) 50%;
}
.timesheet tbody tr:hover .row-phase-add { opacity: 0.7; }
.row-phase-add:hover, .row-phase-add:focus {
  color: var(--ink);
  border-bottom-color: var(--ink-soft);
  opacity: 1 !important;
}

/* Sub-rows (phase entries indented under their main project row) */
.timesheet tbody tr.is-sub td.col-project {
  padding-left: 20px;
  color: var(--muted);
}
.row-sub-marker {
  display: inline-block;
  width: 14px;
  color: var(--muted);
  margin-right: 6px;
  font-size: 13px;
}
.row-sub-phase {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.timesheet tbody tr.is-sub:hover td.col-project { color: var(--ink); }
.timesheet tbody tr.is-sub td { border-bottom-style: dashed; }

/* Tasks */
.tasks-section { margin-top: 56px; }

.task-add {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 2fr) minmax(120px, 0.8fr) minmax(120px, 1fr) auto auto;
  gap: 14px;
  align-items: end;
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.task-assignee { font-size: 13px; }
.task-add input[type="date"] { font-size: 13px; }
.task-add select, .task-add input {
  margin: 0;
}

/* Importance picker — 4 progressive dots */
.importance-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.importance-picker button {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 14px;
  height: 14px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  opacity: 0.35;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.15s, opacity 0.15s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.importance-picker button::after { display: none; }
.importance-picker button:hover { opacity: 0.7; transform: scale(1.1); }
.importance-picker button.active {
  opacity: 1;
  color: var(--ink);
}
.importance-picker button.urgent {
  color: var(--danger);
}
.importance-picker.compact { gap: 4px; }
.importance-picker.compact button { width: 12px; height: 12px; font-size: 13px; }

/* Task list */
.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.task-item {
  display: grid;
  grid-template-columns: 28px 1fr auto 28px;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: opacity 0.2s;
}
.task-item:last-child { border-bottom: 0; }
.task-item.is-done { opacity: 0.45; }
.task-item.is-done .task-title { text-decoration: line-through; }

.task-item.is-subtask {
  padding-left: 42px;
  border-bottom-style: dashed;
}
.task-item.is-subtask .task-title { font-size: 13px; }
.task-item.is-subtask::before {
  content: '└';
  position: absolute;
  left: 22px;
  top: 14px;
  color: var(--muted);
  font-size: 14px;
}
.task-item { position: relative; }

.task-subtask-add {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.task-subtask-add::after { display: none; }
.task-item:hover .task-subtask-add { opacity: 1; }
.task-subtask-add:hover { color: var(--ink); }

.task-subtask-input {
  margin-top: 8px;
}
.task-subtask-input input {
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}

.task-check {
  background: transparent;
  border: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.task-check::after { display: none; }
.check-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ink);
  background: transparent;
  transition: border-color 0.15s, background 0.15s;
}
.task-check:hover .check-box { border-color: var(--ink-soft); }
.check-box.checked {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--claret);
}

.task-body { min-width: 0; }
.task-title {
  font-size: 14px;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 2px;
  word-wrap: break-word;
}
.task-meta {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.task-meta strong { color: var(--ink-soft); font-weight: 500; }
.task-person {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  letter-spacing: 0.14em;
  background: rgba(249,249,246,0.06);
  color: var(--muted);
}
.task-person.from { background: rgba(184,221,184,0.10); color: rgba(220,240,220,0.85); }
.task-person.to { background: rgba(180,200,230,0.10); color: rgba(210,225,245,0.85); }
.task-person strong { color: inherit; font-weight: 600; }

.task-due {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  letter-spacing: 0.14em;
  background: rgba(249,249,246,0.06);
  color: var(--ink-soft);
}
.task-due.today { background: rgba(220,200,160,0.16); color: rgba(240,225,180,0.95); }
.task-due.overdue { background: rgba(232,180,181,0.16); color: rgba(240,200,200,0.95); }

.task-check.disabled,
.task-check[disabled] {
  cursor: not-allowed;
  opacity: 0.4;
}

.task-delete {
  font-size: 18px;
  padding: 0 6px;
  line-height: 1;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.task-item:hover .task-delete { opacity: 1; }
.task-delete:hover { color: var(--danger); }

.task-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  list-style: none;
}

/* Group-by-project toggle button */
.toggle-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: none;
}
.toggle-link::after { display: none; }
.toggle-link:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
  background: var(--hover);
}
.toggle-link .toggle-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.15s;
}
.toggle-link.active {
  color: var(--ink);
  border-color: var(--ink);
}
.toggle-link.active .toggle-dot { background: var(--ink); }

/* Project group headers in task list */
.task-group-header {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0 8px;
  margin-top: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.task-group-header:first-child { margin-top: 0; }
.task-group-header strong {
  color: var(--ink);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
}
.task-group-name {
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  flex: 1;
  font-weight: 400;
}
.task-group-count {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.task-item.grouped {
  padding-left: 12px;
}

@media (max-width: 720px) {
  .task-add {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .task-item {
    grid-template-columns: 24px 1fr 28px;
  }
  .task-item .importance-picker {
    grid-column: 1 / -1;
    padding-left: 38px;
  }
}

/* Day status popover */
.day-popover {
  position: fixed;
  background: var(--claret-deep);
  border: 1px solid var(--line);
  padding: 14px;
  z-index: 50;
  min-width: 180px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  border-radius: 4px;
}
.day-popover-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 10px;
}
.day-popover-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.day-popover-options button {
  text-align: left;
  padding: 6px 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ink-soft);
  border-radius: 4px;
}
.day-popover-options button::after { display: none; }
.day-popover-options button:hover {
  background: rgba(249,249,246,0.06);
  color: var(--ink);
}
.day-popover-options button.active {
  color: var(--ink);
  background: rgba(249,249,246,0.05);
}

/* Filter tabs (Projects view) */
.head-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.filter-tabs {
  display: inline-flex;
  gap: 16px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}
.filter-tabs button {
  padding: 4px 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.filter-tabs button:hover { color: var(--ink-soft); }
.filter-tabs button:hover::after { opacity: 0; }
.filter-tabs button.active { color: var(--ink); }
.filter-tabs button.active::after {
  opacity: 1;
  bottom: -2px;
  height: 1px;
}

/* Quick action buttons in tables (archive/restore) */
.row-actions { display: inline-flex; gap: 16px; }

/* Share-credentials regenerate input row */
.share-pass-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.share-pass-row input {
  flex: 1;
  font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
  font-size: 14px;
}
#share-regenerate {
  flex-shrink: 0;
  padding: 6px 12px !important;
  font-size: 14px !important;
  letter-spacing: 0;
  text-transform: none;
}
#share-regenerate::after { display: none !important; }

/* Credentials view (after creating a designer) */
.cred-field { margin-bottom: 14px; }
.cred-field label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.cred-value-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(249,249,246,0.05);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.cred-value-row code {
  flex: 1;
  font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
  font-size: 13px;
  color: var(--ink);
  word-break: break-all;
  background: transparent;
  padding: 0;
}
.cred-copy {
  flex-shrink: 0;
  font-size: 10px !important;
  padding: 4px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cred-copy::after { display: none !important; }
.cred-copy:hover {
  border-color: var(--ink-soft) !important;
  color: var(--ink) !important;
  background: var(--hover);
}

/* Modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(29,29,29,0.7);
  display: grid; place-items: center;
  z-index: 100;
  padding: 24px;
  backdrop-filter: blur(4px);
  overflow-y: auto;            /* fall-back: if the modal-card cannot shrink, the overlay itself scrolls */
  overscroll-behavior: contain; /* don't propagate wheel events to the page behind */
}
.modal-card {
  background: var(--claret-deep);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 40px;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}
.modal-card h3 {
  font-family: var(--font-serif);
  text-transform: none;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: 28px;
  flex-shrink: 0;
}
#modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
  overflow-y: auto;            /* the inner body is the actual scroll container */
  flex: 1 1 auto;
  min-height: 0;               /* required for nested flex scrolling */
  overscroll-behavior: contain;
  /* leave a bit of right padding so the scrollbar doesn't sit on content */
  padding-right: 4px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

/* Project Control */
.pc-search {
  margin-bottom: 24px;
  max-width: 480px;
}
.pc-list { display: flex; flex-direction: column; gap: 0; }
.pc-list-item {
  display: grid;
  grid-template-columns: 28px 100px 1fr 24px;
  gap: 16px;
  align-items: center;
  padding: 16px 12px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.15s, padding-left 0.15s;
}
.pc-list-item.is-pinned {
  background: rgba(220,200,160,0.05);
}
.pc-list-item.is-pinned + .pc-list-item:not(.is-pinned) {
  border-top: 1px solid var(--line);
  margin-top: 2px;
}
.pc-pin {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  transition: color 0.15s, transform 0.1s;
  text-transform: none;
  letter-spacing: 0;
}
.pc-pin::after { display: none; }
.pc-pin:hover { color: var(--ink); transform: scale(1.15); }
.pc-list-item.is-pinned .pc-pin {
  color: rgba(220,200,160,0.95);
}
.pc-list-item.is-pinned .pc-pin:hover { color: rgba(240,225,180,1); }
.pc-list-item:hover {
  background: var(--hover);
  padding-left: 18px;
}
.pc-list-item:last-child { border-bottom: 0; }
.pc-list-code {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
}
.pc-list-name {
  font-size: 14px;
  color: var(--ink-soft);
}
.pc-list-arrow {
  color: var(--muted);
  font-size: 16px;
  transition: color 0.15s, transform 0.15s;
}
.pc-list-item:hover .pc-list-arrow {
  color: var(--ink);
  transform: translateX(4px);
}

.pc-project-info {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.pc-project-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.pc-field { display: flex; flex-direction: column; gap: 6px; }
.pc-field label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 500;
}
.pc-field textarea {
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 50px;
  padding: 6px 0;
}

@media (max-width: 720px) {
  .pc-project-fields { grid-template-columns: 1fr; }
}
.pc-project-info h2 { margin: 0 0 6px 0; }
.pc-proj-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
#pc-proj-code { font-family: var(--font-sans); font-weight: 500; color: var(--ink-soft); }

.pc-phases { display: flex; flex-direction: column; gap: 14px; }
.phase-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(249,249,246,0.02);
  transition: background 0.15s, border-color 0.15s;
}
.phase-card.is-done {
  background: rgba(184,221,184,0.05);
  border-color: rgba(184,221,184,0.25);
}
.phase-header {
  display: grid;
  /* status · title · est-end pill · dates · expand · delete */
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.phase-check {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.phase-check::after { display: none; }

/* Status stepper (done · delivered · approved) */
.status-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.status-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.step-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  text-transform: none;
  letter-spacing: 0;
}
.step-dot::after { display: none; }
.step-dot:hover {
  transform: scale(1.2);
  border-color: var(--ink-soft);
}
.step-dot.filled.step-done {
  background: rgba(220,200,160,0.85);
  border-color: rgba(220,200,160,0.85);
}
.step-dot.filled.step-delivered {
  background: rgba(180,200,230,0.85);
  border-color: rgba(180,200,230,0.85);
}
.step-dot.filled.step-approved {
  background: rgba(184,221,184,0.85);
  border-color: rgba(184,221,184,0.85);
}
.status-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--muted);
  min-width: 60px;
}
.status-stepper[data-current="done"] .status-label { color: rgba(220,200,160,0.95); }
.status-stepper[data-current="delivered"] .status-label { color: rgba(180,200,230,0.95); }
.status-stepper[data-current="approved"] .status-label { color: rgba(184,221,184,0.95); }
.phase-title-area { min-width: 0; }
.phase-title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
/* Editable phase name input: looks like a heading until you focus it. */
.phase-title-input {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 2px 0;
  width: 100%;
  letter-spacing: -0.005em;
}
.phase-title-input:focus {
  outline: 0;
  border-bottom: 1px solid rgba(249,249,246,0.3);
}
.phase-title-input::placeholder { color: var(--ink-soft); }
.phase-subtype {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 1px;
}
.phase-card.is-done .phase-title { text-decoration: line-through; opacity: 0.7; }
.phase-summary {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 2px;
}
.phase-assignees {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
}
.phase-assignee-chip {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(249,249,246,0.1);
  color: var(--ink-soft);
}
.phase-assignees-empty {
  font-size: 10px;
  font-style: italic;
}
.phase-assignees-edit {
  font-size: 10px;
  padding: 0;
  margin-left: 4px;
}
.phase-form-row { display: flex; gap: 12px; }
.phase-form-row > label { flex: 1; }
.phase-team-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px 0;
}
/* Phase quick-view modal (opened from the personnel calendar). */
.phase-quickview { display: flex; flex-direction: column; gap: 12px; }
.phase-quickview-subtype {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(249,249,246,0.45);
  margin-bottom: -8px;
}
.phase-quickview-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 2px 0;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.phase-quickview-meta {
  font-size: 11px;
  color: var(--ink-soft);
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.phase-quickview-meta strong { color: var(--ink); font-weight: 500; }
.phase-quickview-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
/* Section heading: serif, full contrast, with a soft rule under it so the
   message/list below clearly reads as the section's content. */
.phase-quickview-section-head {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
/* Empty state inside a section. Italics + faint background to read as a
   placeholder, not a heading. */
.qv-empty {
  font-size: 11.5px;
  font-style: italic;
  color: rgba(249,249,246,0.55);
  padding: 6px 10px;
  background: rgba(249,249,246,0.04);
  border-radius: 3px;
  margin: 0;
}
.qv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}
.qv-list li { display: flex; align-items: center; gap: 6px; }
.qv-list li.is-done { opacity: 0.7; text-decoration: line-through; }
.qv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(249,249,246,0.25);
  flex: 0 0 8px;
}
.qv-dot.is-done { background: var(--claret-light); }
/* Deliverables list inside the quickview */
.qv-deliv-list li {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 6px;
  align-items: center;
}
/* The line of component names is one cell wide, not a row of its own
   columns — otherwise it pushes the delete button off the end. */
.qv-deliv-list li.qv-subcomps { display: flex; }
.qv-deliv-label { font-size: 12px; }
.qv-deliv-date {
  font-size: 10px;
  color: var(--muted);
  background: rgba(249,249,246,0.06);
  padding: 1px 6px;
  border-radius: 3px;
}
.qv-deliv-del {
  font-size: 13px;
  padding: 0 4px;
  color: var(--muted);
}
.qv-deliv-del:hover { color: var(--claret-light); }
.qv-deliv-list [data-deliv-toggle] { cursor: pointer; }
.qv-deliv-add {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  margin-top: 6px;
  align-items: center;
}
.qv-deliv-add input[type="text"],
.qv-deliv-add input[type="date"] {
  padding: 5px 8px;
  font-size: 12px;
  background: rgba(249,249,246,0.06);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
}

/* Bulk-import preview table */
.bulk-users-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.bulk-users-preview-table th,
.bulk-users-preview-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.bulk-users-preview-table th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.bulk-users-preview-table tr.is-ok td:first-child { color: #7AAA85; }
.bulk-users-preview-table tr.is-error td:first-child { color: #E07358; }
.bulk-users-preview-table .bulk-err {
  color: #E07358;
  font-size: 10px;
}

/* ---------- Project Control tabs (Phases / Gantt / People) ---------- */
.pc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line-soft);
  margin: 18px 0 14px;
}
.pc-tab {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
}
.pc-tab:hover { color: var(--ink); }
.pc-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- Gantt ---------- */
.gantt-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.gantt-wrap {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: transparent;
  /* gantt-scroll handles its own scroll; the wrap clips overflow visually */
  overflow: hidden;
}
.gantt-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh;
}
.gantt-inner {
  /* Width is set inline; this just holds header + body in a single grid that
     scrolls together horizontally so the day numbers stay aligned with bars. */
  display: block;
  min-width: 100%;
}
.gantt-header {
  display: flex;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid var(--line-soft);
}
.gantt-header-spacer {
  width: 220px;
  min-width: 220px;
  background: var(--bg);
  position: sticky;
  left: 0;
  z-index: 4;
  border-right: 1px solid var(--line-soft);
}
.gantt-header-cols { display: block; }
.gantt-months {
  display: flex;
  border-bottom: 1px solid rgba(249,249,246,0.08);
  height: 22px;
  align-items: center;
}
.gantt-month {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 10px;
  border-right: 1px solid rgba(249,249,246,0.08);
  line-height: 22px;
}
.gantt-days {
  display: flex;
  height: 30px;
}
.gantt-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid rgba(249,249,246,0.05);
  box-sizing: border-box;
}
.gantt-day-dow {
  font-size: 8.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-transform: uppercase;
  line-height: 1;
}
.gantt-day-num {
  font-family: var(--font-serif);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.1;
  margin-top: 1px;
}
.gantt-day.is-weekend { background: rgba(249,249,246,0.03); }
.gantt-day.is-weekend .gantt-day-dow,
.gantt-day.is-weekend .gantt-day-num { color: var(--muted); }
.gantt-day.is-today .gantt-day-num { color: var(--ink); font-weight: 500; }
.gantt-day.is-today {
  position: relative;
}
.gantt-day.is-today::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 14px; height: 1px;
  background: var(--ink);
}

.gantt-body { position: relative; }
.gantt-row {
  display: flex;
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid rgba(249,249,246,0.04);
}
.gantt-row:hover { background: rgba(249,249,246,0.02); }
.gantt-row-label {
  width: 220px;
  min-width: 220px;
  padding: 6px 12px;
  border-right: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink);
  position: sticky;
  left: 0;
  background: var(--bg);
  z-index: 2;
}
.gantt-row-sub {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 1px;
}
.gantt-row-track {
  position: relative;
  height: 34px;
}
.gantt-bar {
  position: absolute;
  top: 6px;
  height: 22px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
  transition: opacity 0.15s, transform 0.1s;
}
.gantt-bar:hover { opacity: 0.9; transform: translateY(-1px); }
.gantt-bar.is-done { opacity: 0.6; }
.gantt-bar-label {
  font-size: 10.5px;
  font-weight: 500;
  color: #1d1d1d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.gantt-today-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(249,249,246,0.45);
  z-index: 3;
  pointer-events: none;
}
.gantt-deliv-mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 4;
  color: #1d1d1d;
}
.gantt-deliv-mark path {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gantt-deliv-mark.is-done { color: rgba(244, 208, 63, 0.85); }

/* ---------- People panel ---------- */
.pc-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pc-people-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(249,249,246,0.03);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.pc-people-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--claret-light);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 14px;
  flex: 0 0 38px;
}
.pc-people-body { flex: 1; min-width: 0; }
.pc-people-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-people-lead {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--claret);
  color: var(--off-white);
  padding: 1px 5px;
  border-radius: 2px;
}
.pc-people-meta {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 2px 0 6px;
}
.pc-people-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.pc-people-phase-chip {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #1d1d1d;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Phase color tab + lead badge ---------- */
.phase-card { position: relative; padding-left: 12px; }
.phase-color-tab {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 5px;
  border-radius: 3px;
}
.phase-assignee-chip.is-lead {
  background: var(--claret-light);
  color: var(--off-white);
  font-weight: 500;
}
.phase-assignee-chip.is-lead em {
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.25);
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 4px;
}
.phase-date-emphasis input {
  font-weight: 600;
  border-bottom-color: var(--claret-light) !important;
}
.phase-date-emphasis span { color: var(--ink) !important; }

/* ---------- Phase deliverables inline ---------- */
.phase-delivs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.phase-deliv {
  font-size: 12px;
  padding: 4px 0;
}
.phase-deliv-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 8px;
  align-items: center;
}
.phase-deliv.is-done .phase-deliv-label { text-decoration: line-through; opacity: 0.7; }

/* How much of a submission exists, on the submission's own line. Quiet
   until it is complete, because a part-finished checklist is the normal
   state of work in progress and does not need shouting about. */
.deliv-count {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.deliv-count.is-full { color: var(--ink-soft); }

/* The checklist itself, indented under the submission it belongs to so the
   nesting is visible without a box around it. */
.subcomp-list {
  list-style: none;
  margin: 2px 0 0 18px;
  padding: 0 0 0 10px;
  border-left: 1px solid var(--line-soft);
}
.subcomp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}
.subcomp.is-done .comp-title { text-decoration: line-through; opacity: 0.5; }
.comp-tick {
  width: 14px !important;
  height: 14px;
  flex: 0 0 14px;
  margin: 0;
  cursor: pointer;
}
/* A counted component is done when the count is complete, so the tick
   reports rather than decides — it stays clickable as a shortcut to "all of
   them", which is what ticking it means. */
.comp-title { flex: 1; color: var(--ink-soft); min-width: 0; word-break: break-word; }
.comp-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(249,249,246,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.comp-dec, .comp-inc {
  background: transparent;
  border: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.comp-dec::after, .comp-inc::after { display: none; }
.comp-dec:hover, .comp-inc:hover { color: var(--ink); }
.comp-dec:disabled, .comp-inc:disabled { opacity: 0.3; cursor: not-allowed; }
.comp-progress {
  font-family: var(--font-sans);
  font-size: 11px;
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.comp-target { color: var(--muted); }
.comp-del {
  background: transparent;
  border: 0;
  padding: 0 4px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.comp-del::after { display: none; }
.subcomp:hover .comp-del { opacity: 1; }
.comp-del:hover { color: var(--danger); }

.subcomp-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 2px 0 6px 28px;
}
.subcomp-add input[type="text"] { flex: 1; font-size: 11px; padding: 3px 0; }
.subcomp-add .comp-target-input {
  width: 54px;
  flex: 0 0 54px;
  font-size: 11px;
  text-align: center;
  padding: 3px 4px;
}
.subcomp-add button { font-size: 10px; padding: 0; letter-spacing: 0.1em; }

/* In the quick view the checklist is read, not worked on, so it is a line
   of names rather than a list of controls. */
.qv-subcomps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 0 0 4px 22px;
  font-size: 10.5px;
}
.qv-subcomp.is-done { text-decoration: line-through; opacity: 0.55; }
.phase-deliv-label { color: var(--ink); }
.phase-deliv-date {
  font-size: 10px;
  color: var(--muted);
  background: rgba(249,249,246,0.06);
  padding: 1px 6px;
  border-radius: 3px;
}
.phase-deliv-del { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 4px; }
.phase-deliv-del:hover { color: var(--claret-light); }
.phase-deliv-empty { font-size: 11px; font-style: italic; }
.phase-deliv [data-deliv-toggle] { cursor: pointer; }
.phase-add-deliv {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  margin-top: 6px;
}

/* ---------- Subproject groups ---------- */
.sub-group {
  margin-bottom: 18px;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}
.sub-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  margin-bottom: 8px;
}
.sub-head--root { padding-bottom: 4px; }
.sub-toggle {
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.sub-name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  flex: 1;
}
.sub-count {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.sub-rename, .sub-delete, .sub-shift { font-size: 11px; }
.sub-shift { color: var(--ink-soft); }
.sub-shift:hover { color: var(--ink); }
.sub-body { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Project Calendar ---------- */
.projcal-wrap { overflow-x: auto; margin-top: 8px; }
.projcal {
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 100%;
}
.projcal th, .projcal td { padding: 0; border: 0; }
.projcal .pers-name-col {
  width: 240px; min-width: 240px;
  text-align: left;
  padding: 8px 12px 8px 0;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--bg);
  position: sticky; left: 0; z-index: 2;
  border-bottom: 1px solid var(--line-soft);
}
.projcal thead .pers-name-col {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.projcal .pers-day-head {
  width: 28px; min-width: 28px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.projcal td.pers-day {
  height: 28px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  vertical-align: middle;
  padding: 0 !important;
}
.projcal td.pers-day.is-weekend { background: rgba(249,249,246,0.03); }
.projcal td.pers-day.is-holiday { background: rgba(220,200,160,0.06); }
.projcal td.pers-day.is-today { box-shadow: inset 0 0 0 1px rgba(249,249,246,0.08); }
.projcal-row { cursor: pointer; }
.projcal-row .projcal-toggle {
  background: transparent; border: 0; color: var(--ink-soft);
  cursor: pointer; padding: 0 6px 0 0; font-size: 13px;
}
.projcal-phase-row .pers-name-col {
  padding-left: 32px;
  font-size: 11px;
  color: var(--muted);
}
.projcal-phase-row .pers-name-col.projcal-phase-name { color: var(--ink-soft); }
.projcal-project-row.is-expanded { background: rgba(249,249,246,0.02); }
.projcal-subhead-row td {
  background: rgba(249,249,246,0.07);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.projcal-subhead-row { cursor: pointer; }
.projcal-subhead-row:hover td { background: rgba(249,249,246,0.10); }
.projcal-subhead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 12px 8px 24px !important;
  letter-spacing: 0;
  font-style: normal;
}
.projcal-sub-toggle {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-soft);
  font-size: 11px;
  padding: 0 4px;
}
.projcal-sub-toggle-spacer { display: inline-block; width: 12px; }
.projcal-subhead-label { flex: 1; }
.projcal-subhead-count {
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 400;
}
.projcal-subhead-spacer { padding: 0; }
/* Distinguish the phase name as a thinner sans below the subproject head */
.projcal-phase-row .pers-name-col {
  padding-left: 48px !important;
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
}

/* ---------- Quick init ---------- */
.qi-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.qi-row {
  display: grid;
  grid-template-columns: 6px 1fr 70px auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(249,249,246,0.04);
  border-radius: 3px;
  font-size: 12px;
}
.qi-color { width: 6px; height: 22px; border-radius: 2px; }
.qi-label { color: var(--ink); }
.qi-weeks {
  width: 60px;
  padding: 3px 6px;
  background: rgba(249,249,246,0.06);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  font-size: 12px;
}
.qi-week-suffix { font-size: 10px; }
.qi-dates { font-size: 10px; font-family: var(--font-mono, monospace); }
.qi-remove { font-size: 13px; color: var(--muted); }
.qi-add-bar { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.qi-phase-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qi-phase-btn {
  font-size: 11px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  color: #1d1d1d;
  font-weight: 500;
  transition: transform 0.1s, opacity 0.12s;
}
.qi-phase-btn:hover { transform: translateY(-1px); opacity: 0.9; }

/* ---------- Day status trigger in timesheet ---------- */
.day-status-trigger {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  margin-top: 2px;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.12s, color 0.12s;
}
.day-status-trigger:hover { opacity: 1; color: var(--ink); }
.col-day:hover .day-status-trigger { opacity: 0.9; }

/* ---------- Extended project status pills ---------- */
.status-pill.pipeline { background: rgba(95, 141, 179, 0.2); color: #aec6da; }
.status-pill.pending  { background: rgba(184, 151, 90, 0.2); color: #d8b97a; }
.status-pill\.on\ hold,
.status-pill[class*="on hold"] { background: rgba(160, 91, 95, 0.2); color: #d49b9e; }
.status-pill.on { background: rgba(160, 91, 95, 0.2); color: #d49b9e; }

/* ---------- Sortable column headers ---------- */
#projects-table thead th[data-sort] {
  cursor: pointer;
  user-select: none;
}
#projects-table thead th[data-sort]:hover { color: var(--ink); }
#projects-table thead th[data-sort].is-sort-active::after {
  content: ' ▴';
  font-size: 9px;
  opacity: 0.7;
}
#projects-table thead th[data-sort].is-sort-active.is-sort-desc::after { content: ' ▾'; }

/* ---------- Estimated end pill ---------- */
.phase-est-end-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  padding: 6px 14px;
  background: rgba(122, 31, 42, 0.18);
  border: 1px solid rgba(122, 31, 42, 0.5);
  border-radius: 6px;
  margin-right: 12px;
  min-width: 80px;
  position: relative;
  cursor: pointer;
  transition: background 0.12s;
}
.phase-est-end-pill:hover { background: rgba(122, 31, 42, 0.28); }
.phase-est-end-pill.is-empty .phase-est-end-date { font-style: italic; opacity: 0.7; }
/* The date input lives invisibly inside the pill. pointer-events:none
   keeps it from swallowing clicks — clicks reach the pill (a div with
   role=button) and JS calls input.showPicker() to open the calendar. */
.phase-est-end-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 0;
  background: transparent;
}
.phase-est-end-lbl {
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.phase-est-end-date {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.phase-est-end-weeks {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ---------- Project leads chips under project header ---------- */
.pc-proj-leads {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pc-proj-leads-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-right: 2px;
}
.pc-proj-lead-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 9px;
  background: var(--claret-light);
  color: var(--off-white);
  border-radius: 999px;
  font-weight: 500;
}
.pc-proj-leads-empty { font-size: 11px; font-style: italic; }

/* ---------- Phase drag visuals ---------- */
.phase-color-tab[draggable] { cursor: grab; }
.phase-color-tab[draggable]:active { cursor: grabbing; }
.phase-card.is-dragging { opacity: 0.5; }
.sub-group.is-drop-hover {
  background: rgba(122, 31, 42, 0.06);
  outline: 2px dashed var(--claret-light);
  outline-offset: -2px;
  border-radius: 4px;
}

/* ---------- Submissions carry the phase, so they are given weight ---------- */
.phase-section--deliv h4 {
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.phase-section--deliv {
  background: rgba(122, 31, 42, 0.05);
  border-left: 3px solid var(--claret-light);
  padding: 10px 12px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 10px;
}
.phase-section--deliv .phase-deliv-label { font-weight: 500; }

/* Print-only block shown above the Gantt when exporting to PDF */
.print-only { display: none; }

/* ---------- Gantt print export ---------- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  /* Strategy: visibility:hidden everything on the page, then visibility:visible
     only the gantt container and its descendants. The parents of the gantt
     stay visible too (visibility:hidden does NOT affect descendants that
     explicitly set visible). Finally we lift the gantt to its own absolutely
     positioned layer at the top-left of the printed page so its position in
     the original DOM doesn't matter. */
  body.gantt-printing { background: white !important; color: #1d1d1d !important; }
  body.gantt-printing * { visibility: hidden !important; }
  body.gantt-printing #pc-gantt,
  body.gantt-printing #pc-gantt * { visibility: visible !important; }
  body.gantt-printing #pc-gantt {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    background: white;
    padding: 0;
  }
  /* The "Export PDF" toolbar shown in the on-screen view is hidden in print. */
  body.gantt-printing .gantt-toolbar { display: none !important; }
  body.gantt-printing .print-only { display: block !important; }
  /* Astet header for the printed PDF */
  body.gantt-printing .gantt-print-header {
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin-bottom: 6mm;
    padding-bottom: 4mm;
    border-bottom: 1px solid #ccc;
  }
  body.gantt-printing .gantt-print-logo {
    height: 14mm;
    width: auto;
    display: block;
  }
  body.gantt-printing .gantt-print-title-block { flex: 1; }
  body.gantt-printing .gantt-print-title {
    font-family: var(--font-serif);
    font-size: 18pt;
    color: #1d1d1d;
    line-height: 1.1;
  }
  body.gantt-printing .gantt-print-meta {
    font-size: 9pt;
    color: #555;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2mm;
  }
  /* Gantt body styled for white paper */
  body.gantt-printing .gantt-wrap {
    border: 1px solid #999 !important;
    background: white !important;
    overflow: visible !important;
    max-height: none !important;
    border-radius: 1mm;
    width: 100%;
  }
  body.gantt-printing .gantt-scroll {
    overflow: visible !important;
    max-height: none !important;
    width: 100%;
  }
  body.gantt-printing .gantt-inner { min-width: 100% !important; }
  body.gantt-printing .gantt-header,
  body.gantt-printing .gantt-header-spacer,
  body.gantt-printing .gantt-row-label {
    background: #f7f3ec !important;
    position: static !important;
  }
  body.gantt-printing .gantt-header { border-bottom-color: #999 !important; }
  body.gantt-printing .gantt-month  { color: #1d1d1d !important; border-right-color: #ccc !important; }
  body.gantt-printing .gantt-day-dow { color: #6b6b6b !important; }
  body.gantt-printing .gantt-day-num { color: #1d1d1d !important; }
  body.gantt-printing .gantt-day { border-right-color: #e5e5e5 !important; }
  body.gantt-printing .gantt-day.is-weekend { background: #f0eae0 !important; }
  body.gantt-printing .gantt-row {
    border-bottom-color: #e5e5e5 !important;
    page-break-inside: avoid;
  }
  body.gantt-printing .gantt-row-label { color: #1d1d1d !important; border-right-color: #ccc !important; }
  body.gantt-printing .gantt-row-sub  { color: #6b6b6b !important; }
  body.gantt-printing .gantt-bar-label { color: #1d1d1d !important; }
  body.gantt-printing .gantt-bar { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.gantt-printing .gantt-today-line { background: #1d1d1d !important; }
  /* Ensure printer respects background colors of the bars */
  body.gantt-printing * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

.phase-team-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.phase-team-option:hover {
  background: rgba(249,249,246,0.06);
}
.phase-team-option:has(input:checked) {
  background: rgba(122, 31, 42, 0.18);
  border-color: rgba(122, 31, 42, 0.4);
  color: var(--ink);
  font-weight: 500;
}
.phase-team-option input[type="checkbox"] { margin: 0; }
.phase-dates {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}
.phase-dates label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
}
.phase-dates input[type="date"] {
  padding: 4px 0;
  font-size: 12px;
  min-width: 130px;
}
.phase-expand, .phase-delete {
  background: transparent;
  border: 0;
  padding: 0 8px;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.phase-expand::after, .phase-delete::after { display: none; }
.phase-expand:hover { color: var(--ink); }
.phase-delete:hover { color: var(--danger); }

.phase-body {
  border-top: 1px solid var(--line-soft);
  padding: 18px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.phase-section h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 0 0 10px 0;
}

.phase-revs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
}
.phase-rev {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.phase-rev:last-child { border-bottom: 0; }
.phase-rev.is-done .rev-label { text-decoration: line-through; opacity: 0.5; }
.rev-check {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.rev-check::after { display: none; }
.rev-label { flex: 1; color: var(--ink-soft); }
.rev-del {
  background: transparent;
  border: 0;
  padding: 0 6px;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.rev-del::after { display: none; }
.phase-rev:hover .rev-del { opacity: 1; }
.rev-del:hover { color: var(--danger); }

.phase-rev .rev-label {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.rev-dates {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-shrink: 0;
}
.rev-date-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rev-date-field > span {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 500;
}
.rev-date-field input[type="date"] {
  font-size: 11px;
  padding: 2px 0;
  min-width: 96px;
  max-width: 110px;
}

.phase-add-rev {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 6px;
  border-top: 1px dashed var(--line-soft);
}
.phase-add-rev input {
  flex: 1;
  font-size: 12px;
  padding: 4px 0;
}
.phase-add-rev button {
  font-size: 10px;
  padding: 0;
  letter-spacing: 0.1em;
}

/* A completed checklist reads as completed. */
.subcomp.is-counter.is-done .comp-counter {
  background: rgba(184,221,184,0.08);
  border-color: rgba(184,221,184,0.3);
}

@media (max-width: 720px) {
  .phase-header { grid-template-columns: auto 1fr auto; }
  .phase-dates { grid-column: 1 / -1; }
  .phase-body { grid-template-columns: 1fr; }
}

/* Personnel calendar */
.month-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.month-nav h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.month-nav-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.month-nav-controls button.link { font-size: 13px; padding: 4px 8px; }
.month-nav-controls #pers-prev,
.month-nav-controls #pers-next { font-size: 18px; }

.pers-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.pers-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pers-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.pers-swatch.vac,
.pers-swatch.med,
.pers-swatch.timeoff { background: rgba(249,249,246,0.85); }
.pers-swatch.rem { background: rgba(184,179,168,0.9); }
.pers-swatch.proj { background: linear-gradient(135deg, #A9C9A4 0%, #C3B86A 35%, #D4925A 70%, #E07358 100%); }
.pers-swatch.pending {
  background: repeating-linear-gradient(
    45deg, rgba(249,249,246,0.7) 0, rgba(249,249,246,0.7) 3px,
    rgba(249,249,246,0.2) 3px, rgba(249,249,246,0.2) 6px
  );
}

.personnel-cal-wrap {
  overflow-x: auto;
  margin-top: 8px;
}
.personnel-cal {
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 100%;
}
.personnel-cal th, .personnel-cal td {
  padding: 0;
  border: 0;
}
.personnel-cal .pers-name-col {
  width: 160px;
  min-width: 160px;
  text-align: left;
  padding: 8px 12px 8px 0;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--bg);
  position: sticky;
  left: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line-soft);
}
.personnel-cal thead .pers-name-col {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.personnel-cal .pers-day-head {
  width: 28px;
  min-width: 28px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
  /* Force every day header to align identically from the top of the cell.
     Without this, when a th picks up `position: sticky` from the ancestor
     rule, some browsers reset vertical-align to baseline and single days
     drift down relative to their peers. */
  vertical-align: top !important;
  line-height: 1.1;
}
.personnel-cal .pers-day-head .pers-day-dow,
.personnel-cal .pers-day-head .pers-day-num { display: block; }
.pers-day-dow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.pers-day-num {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
  margin-top: 2px;
}
.pers-day-head.is-today .pers-day-num { color: var(--ink); }
/* Do NOT override `position` here — the parent thead th is sticky, and any
   more-specific position value knocks that day out of the sticky flow, which
   is exactly what made "today" fall out of line under the sticky header.
   `position: sticky` already establishes a containing block for the ::after
   below, so we don't need position: relative to anchor it. */
.pers-day-head.is-today::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 18px;
  height: 1px;
  background: var(--ink);
}
.pers-day-head.is-weekend .pers-day-dow,
.pers-day-head.is-weekend .pers-day-num,
.pers-day-head.is-holiday .pers-day-num { color: var(--muted); }
.pers-day-head.is-holiday {
  background: rgba(220,200,160,0.04);
}

.personnel-cal td.pers-day {
  height: 28px; /* baseline; table rows auto-grow if a cell needs more */
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  vertical-align: middle;
  /* The global `tbody td:not(:first-child) { padding-left: 16px }` rule has
     higher specificity than `.personnel-cal th, td { padding: 0 }` and was
     pushing the day cells inward — kill it explicitly for day cells. */
  padding: 0 !important;
}
/* Inner stacker: lets concurrent blocks split the cell vertically.
   position: relative (not absolute) so the inner takes part in the flow
   and pushes the row taller when there are 3+ stacked blocks. No horizontal
   margin so blocks of consecutive days butt against each other and read
   as one continuous bar. width:100% forces the inner to fill the table cell
   even when the cell uses vertical-align: middle. */
.pers-day-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 3px 0;
  min-height: 22px;
  width: 100%;
  box-sizing: border-box;
}
.personnel-cal td.pers-day.is-weekend {
  background: repeating-linear-gradient(
    135deg,
    rgba(249,249,246,0.02) 0, rgba(249,249,246,0.02) 3px,
    transparent 3px, transparent 6px
  );
}
.personnel-cal td.pers-day.is-holiday { background: rgba(220,200,160,0.06); }
.personnel-cal td.pers-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(249,249,246,0.08);
}
/* Drag-to-create selection highlight */
.personnel-cal td.pers-day.is-selecting {
  background: rgba(122, 31, 42, 0.22);
  box-shadow: inset 0 0 0 1px rgba(122, 31, 42, 0.5);
}
.personnel-cal td.pers-day { cursor: crosshair; }
body.is-cal-dragging,
body.is-cal-dragging * { user-select: none; cursor: crosshair !important; }

.pers-block {
  flex: 1 1 0;
  /* 6px keeps 3 stacked blocks inside the 22px inner (3*6 + 2 gaps = 20).
     With 4+ blocks the inner exceeds 22px and the row grows. */
  min-height: 6px;
  /* Square by default → days in the middle of a range butt seamlessly */
  border-radius: 0;
  /* Force the bar to span the full inner width (some browsers shrink flex
     items when the cross-axis size is not constrained explicitly). */
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pers-block.is-start { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.pers-block.is-end   { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.pers-block:hover { opacity: 0.85; }
/* Phase bars are clickable — let users know with a pointer cursor that
   overrides the crosshair drag-to-create inherited from the cell. */
.pers-block-phase {
  cursor: pointer;
  position: relative; /* anchor for the deliverable marker */
}
/* Deliverable marker: a yellow bookmark centered on the phase bar for the
   exact day the deliverable is due. Rendered as inline SVG so the V-cut at
   the bottom keeps its outline cleanly. */
.pers-deliverable-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  color: #1d1d1d;
}
.pers-deliverable-mark path {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pers-deliverable-mark.is-done { color: rgba(244, 208, 63, 0.85); }

/* Empty lane placeholder: keeps vertical position stable when an event
   doesn't cover this particular day. */
.pers-block-empty {
  background: transparent;
  cursor: default;
  pointer-events: none;
}

/* Time-off background by type (applied to the block itself, not the cell).
   This way lanes survive across days and don't clash with phase colors. */
.pers-block-time.type-vacation,
.pers-block-time.type-medical { background: rgba(249,249,246,0.85); }
.pers-block-time.type-remote  { background: rgba(184,179,168,0.9); }
.pers-block-time.is-pending {
  background: repeating-linear-gradient(
    45deg,
    rgba(249,249,246,0.5) 0, rgba(249,249,246,0.5) 3px,
    rgba(249,249,246,0.15) 3px, rgba(249,249,246,0.15) 6px
  );
}
.pers-block-time.is-cancel-req {
  outline: 1px dashed rgba(220,200,160,0.8);
  outline-offset: -2px;
}

/* Filters panel above the calendar */
.pers-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 12px 0 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pers-filter {
  position: relative; /* anchor for the floating dropdown list */
}
.pers-filter > summary {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 3px;
  background: rgba(249,249,246,0.04);
  list-style: none;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pers-filter > summary:hover {
  background: rgba(249,249,246,0.08);
  color: var(--ink);
}
.pers-filter[open] > summary {
  background: rgba(249,249,246,0.1);
  color: var(--ink);
}
.pers-filter.is-active > summary {
  background: rgba(122, 31, 42, 0.18);
  border-color: rgba(122, 31, 42, 0.4);
  color: var(--ink);
}
.pers-filter > summary::marker { content: ''; }
.pers-filter > summary::after { content: ' ▾'; opacity: 0.5; }
.pers-filter[open] > summary::after { content: ' ▴'; opacity: 0.5; }
.pers-filter-count {
  font-size: 9px;
  letter-spacing: 0.12em;
  opacity: 0.85;
  margin-left: 2px;
}
.pers-filter-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Float above the calendar instead of pushing it down */
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  padding: 10px 12px;
  background: var(--claret-deep);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.45);
  max-height: 280px;
  overflow-y: auto;
  font-size: 12px;
  min-width: 240px;
}
/* Search input shared by calendar filters and the team-picker modals */
.pers-filter-search,
.phase-team-search {
  position: sticky;
  top: -10px; /* counter the parent's padding so sticky pins flush at the top */
  width: 100%;
  background: var(--claret-deep);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--ink);
  outline: 0;
  margin: 0 0 4px 0;
  box-sizing: border-box;
}
.phase-team-search { position: relative; top: 0; background: rgba(249,249,246,0.06); margin-bottom: 8px; }
.pers-filter-search:focus,
.phase-team-search:focus { border-color: var(--claret-light); }
.pers-filter-search::placeholder,
.phase-team-search::placeholder { color: var(--muted); }
.pers-filter-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pers-filter-list label:hover {
  background: rgba(249,249,246,0.06);
}
.pers-filter-list label:has(input:checked) {
  background: rgba(122, 31, 42, 0.18);
  border-color: rgba(122, 31, 42, 0.4);
  color: var(--ink);
  font-weight: 500;
}
.pers-filter-list input[type="checkbox"] { margin: 0; }
.pers-filter-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
#pers-filters-reset {
  margin-left: auto;
  font-size: 11px;
}

.personnel-cal tbody tr:hover .pers-name-col { color: var(--ink); }

@media (max-width: 720px) {
  .personnel-cal .pers-name-col { width: 120px; min-width: 120px; font-size: 11px; }
  .personnel-cal .pers-day-head { width: 22px; min-width: 22px; }
  .pers-day-num { font-size: 11px; }
}

/* Offer revisor — results header */
.offer-results-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.offer-results-head h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: none;
  margin: 0;
}
.offer-results-head h3 span {
  color: var(--muted);
  font-style: italic;
  font-size: 14px;
}
#offer-new {
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 14px;
}

/* Vacations */
.allowance-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.allowance-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 16px 20px 18px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: background 0.18s, opacity 0.18s;
  text-transform: none;
  letter-spacing: 0;
}
.allowance-card::after { display: none; }
.allowance-card:not(.active) {
  opacity: 0.45;
}
.allowance-card:not(.active):hover {
  opacity: 0.8;
  background: rgba(249,249,246,0.04);
}
.allowance-card.active {
  opacity: 1;
  background: rgba(249,249,246,0.05);
}
.allowance-card.active::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 6px;
  height: 1px;
  background: var(--ink);
}
.allowance-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.allowance-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.allowance-amount strong {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.allowance-amount small {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.allowance-bar {
  height: 4px;
  background: rgba(249,249,246,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.allowance-fill {
  height: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: width 0.4s ease, background 0.2s ease;
}
.allowance-fill.low { background: rgba(220,200,160,0.85); }
.allowance-fill.full { background: rgba(232,180,181,0.85); }
.allowance-fill.no-cap {
  background: repeating-linear-gradient(
    45deg,
    rgba(230,200,180,0.6) 0,
    rgba(230,200,180,0.6) 6px,
    rgba(230,200,180,0.2) 6px,
    rgba(230,200,180,0.2) 12px
  );
}
.allowance-foot {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.vac-type-toggle {
  margin-bottom: 18px;
}

.vac-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(220px, 2fr) auto;
  gap: 16px;
  align-items: end;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.vac-form-medical {
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.7fr) minmax(220px, 2fr) auto;
}
.vac-form .vac-form-reason { grid-column: span 1; }

.vac-type-badge {
  display: inline-block;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 500;
  margin-right: 8px;
  vertical-align: middle;
}
.vac-type-badge.vacation { background: rgba(184,221,184,0.16); color: rgba(220,240,220,0.95); }
.vac-type-badge.medical { background: rgba(180,200,230,0.16); color: rgba(210,225,245,0.95); }
.vac-type-badge.remote { background: rgba(230,200,180,0.16); color: rgba(245,225,210,0.95); }
.vac-type-badge.studio-default {
  background: rgba(249,249,246,0.10);
  color: var(--ink);
  border: 1px solid rgba(249,249,246,0.18);
}
.vac-type-badge.cancel-requested {
  background: rgba(220,200,160,0.18);
  color: rgba(240,225,180,0.95);
  border: 1px solid rgba(220,200,160,0.28);
}

.vac-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 36px;
}
.vac-list-section { min-width: 0; }
.vac-list-section h3 { margin-bottom: 14px; }

.vac-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vac-empty {
  padding: 24px 0;
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
}
.vac-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.vac-item:last-child { border-bottom: 0; }

.vac-owner {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 6px;
}
.vac-owner .muted {
  font-size: 11px;
  margin-left: 6px;
}

.vac-main { flex: 1; min-width: 0; }
.vac-dates {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 4px;
}
.vac-days {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.vac-reason {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px;
  font-style: italic;
}

.vac-attachment {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  flex-wrap: wrap;
}
.vac-attachment a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: border-color 0.15s;
}
.vac-attachment a:hover { border-color: var(--ink); }
.vac-attachment.missing { color: var(--muted); }
.vac-attachment-note {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.vac-link-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vac-link-btn::after { display: none; }
.vac-link-btn:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
  background: var(--hover);
}

.vac-form-medical {
  grid-template-columns: minmax(140px, 0.8fr) minmax(100px, 0.6fr) minmax(180px, 1.4fr) minmax(180px, 1.4fr) auto;
}
.vac-form-file input[type="file"] {
  font-size: 12px;
  padding: 7px 0 5px;
  cursor: pointer;
}
.vac-form-file input[type="file"]::-webkit-file-upload-button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 10px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.vac-form-file input[type="file"]::-webkit-file-upload-button:hover {
  border-color: var(--ink-soft);
  background: var(--hover);
}
.vac-reviewer {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.04em;
}

.vac-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.vac-status {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.vac-status-pending { background: rgba(220,200,160,0.16); color: rgba(240,225,180,0.95); }
.vac-status-approved { background: rgba(184,221,184,0.18); color: rgba(220,240,220,0.95); }
.vac-status-rejected { background: rgba(232,180,181,0.16); color: rgba(240,200,200,0.95); }
.vac-status-cancelled { background: rgba(249,249,246,0.08); color: var(--muted); }

.vac-actions {
  display: flex;
  gap: 12px;
}
.vac-btn {
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.vac-btn::after { display: none; }
.vac-btn:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
}
.vac-btn-approve:hover {
  color: rgba(220,240,220,0.95);
  border-color: rgba(184,221,184,0.4);
  background: rgba(184,221,184,0.10);
}
.vac-btn-reject:hover {
  color: rgba(240,200,200,0.95);
  border-color: rgba(232,180,181,0.4);
  background: rgba(232,180,181,0.10);
}

@media (max-width: 720px) {
  .vac-form { grid-template-columns: 1fr; }
  .vac-item { flex-direction: column; align-items: stretch; }
  .vac-side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

/* Offer Revisor */
.upload-zone {
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  padding: 56px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.upload-zone:hover {
  border-color: var(--ink-soft);
  background: var(--hover);
}
.upload-zone.dragover {
  border-color: var(--ink);
  background: rgba(249,249,246,0.08);
  border-style: solid;
}
.upload-zone-icon {
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1;
}
.upload-zone-title {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}
.upload-zone .link {
  font-size: 14px;
  letter-spacing: 0.04em;
  display: inline-block;
}

.offer-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 16px;
}
.offer-file-icon { font-size: 18px; line-height: 1; }
.offer-file-pill .link { margin-left: 8px; }

.offer-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 16px 0;
}
.offer-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.offer-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.offer-results {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
}
.offer-results h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
  margin: 32px 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.offer-results h3:first-child { margin-top: 0; }
.offer-results h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 24px 0 10px 0;
  font-weight: 500;
}
.offer-results ul {
  margin: 0 0 16px 0;
  padding-left: 0;
  list-style: none;
}
.offer-results li {
  position: relative;
  padding: 8px 0 8px 22px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.offer-results li:last-child { border-bottom: 0; }
.offer-results li::before {
  content: '·';
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 18px;
  color: var(--ink);
  line-height: 1;
}
.offer-results strong { color: var(--ink); font-weight: 600; }
.offer-results em { font-style: italic; color: var(--ink); }
.offer-results code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(249,249,246,0.08);
}

/* User stack (full name + username) */
.user-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.user-stack-name { color: var(--ink); font-weight: 500; font-size: 14px; }
.user-stack-handle {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Status pills — minimal */
.status-pill {
  display: inline-block;
  padding: 0;
  background: transparent;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--muted);
}
.status-pill.active { color: var(--ink); }
.status-pill.active::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 6px;
  vertical-align: middle;
}
.status-pill.inactive::before, .status-pill.archived::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 6px;
  vertical-align: middle;
}

/* Scrollbar styling for the dark theme */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(249,249,246,0.15);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(249,249,246,0.25); }

/* Selection */
::selection { background: rgba(249,249,246,0.2); color: var(--ink); }

/* Client preview lives on an off-white background, so the global selection
   rule (off-white on off-white) would make selected text invisible. Scope a
   high-contrast selection for the preview surface. */
.client-preview ::selection,
.client-preview *::selection {
  background: var(--claret);
  color: var(--off-white);
}

/* Same problem on every other off-white sheet. These views used to sit on the
   chocolate background, where light-on-light selection read fine; they are
   light surfaces now, so the global rule painted selected text off-white on
   off-white and the highlight all but vanished. Flip the pair: off-black text
   under a soft dark tint, so selecting reads as a shadow over the words
   instead of erasing them. */
#vacations-view ::selection,
#vacations-view *::selection,
#project-calendar-view ::selection,
#project-calendar-view *::selection,
#pc-detail-view ::selection,
#pc-detail-view *::selection,
#prod-detail-view ::selection,
#prod-detail-view *::selection {
  background: rgba(29, 29, 29, 0.18);
  color: var(--off-black);
}

/* Medium screens: nav drops to its own row and scrolls horizontally */
@media (max-width: 1100px) {
  .app-header {
    flex-wrap: wrap;
    row-gap: 14px;
    align-items: center;
  }
  #main-nav {
    order: 3;
    flex: 1 1 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(249,249,246,0.18) transparent;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    transition: scrollbar-color 0.2s ease;
  }
  #main-nav:hover {
    scrollbar-color: rgba(249,249,246,0.4) rgba(249,249,246,0.06);
  }

  /* Webkit (Chrome, Edge, Safari) — refined scrollbar */
  #main-nav::-webkit-scrollbar {
    height: 6px;
    background: transparent;
  }
  #main-nav::-webkit-scrollbar-track {
    background: rgba(249,249,246,0.04);
    border-radius: 100px;
    margin: 0 24px;
  }
  #main-nav::-webkit-scrollbar-thumb {
    background: rgba(249,249,246,0.18);
    border-radius: 100px;
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: background 0.15s ease;
  }
  #main-nav:hover::-webkit-scrollbar-track {
    background: rgba(249,249,246,0.07);
  }
  #main-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(249,249,246,0.32);
  }
  #main-nav::-webkit-scrollbar-thumb:hover,
  #main-nav::-webkit-scrollbar-thumb:active {
    background: rgba(249,249,246,0.5);
  }
}

@media (max-width: 720px) {
  .app-header { flex-direction: column; align-items: stretch; padding: 20px; gap: 16px; }
  #main { padding: 28px 20px; gap: 40px; }
  .grid-2 { gap: 40px; }
  .modal-card { padding: 28px; }
}

/* Production module */
.prod-detail-actions { display: flex; gap: 12px; align-items: center; }
.prod-listing-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.prod-listing-header h2 { margin: 0 0 6px 0; }
.prod-listing-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  flex-wrap: wrap;
}
.prod-listing-meta strong { color: var(--ink); font-weight: 500; }
.prod-meta-dot { color: var(--line); }

.prod-items-wrap { overflow-x: auto; margin-bottom: 28px; }
.prod-items-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-size: 12px;
}
.prod-items-table thead th {
  text-align: left;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  white-space: nowrap;
}
.prod-items-table tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--ink-soft);
}
.prod-items-table tbody tr:hover td { color: var(--ink); }
.prod-items-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Headers align with the body cells of the same column: text cells get
   left-aligned headers; numeric cells (.num) get right-aligned headers. */
.prod-items-table thead th { text-align: left; }
.prod-items-table thead th.num { text-align: right; }
.prod-items-table tbody td:last-child { white-space: nowrap; }

/* Legacy per-row summary block (used only when there is a single .prod-summary
   child). The new two-column layout (Cost & margin / Pricing) is defined
   further below and takes over via the same selector. */
.prod-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prod-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-soft);
}
.prod-summary-row strong {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.prod-summary-total {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 4px;
}
.prod-summary-total span,
.prod-summary-total strong {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-size: 18px;
}

/* 2-column form grid for item edit modal */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-grid-2 .grid-span-2 { grid-column: 1 / -1; }
.modal-card:has(.form-grid-2) { max-width: 620px; }
.modal-card:has(.client-preview) { max-width: 1100px; padding: 28px; }
/* Modal chrome (title + Save/Cancel) keeps the default chocolate look.
   Only the body — where the preview content lives — gets the cream background.
   No padding here so the cover can extend edge to edge. */
.modal-card:has(.client-preview) #modal-body {
  background: var(--off-white);
  color: #1d1d1d;
  padding: 0;
  border-radius: 4px;
  overflow: auto;              /* clips to border-radius AND allows scrolling */
  gap: 0;                      /* no cream stripes between cover and page */
}
.modal-card:has(.client-preview) .cp-toolbar { padding: 14px 24px; margin-bottom: 0; }
.modal-card:has(.client-preview) .cp-page,
.modal-card:has(.client-preview) .cp-summary-page-wrap { padding: 22px 24px; }

@media (max-width: 720px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* --- Production: inline-editable items table --- */
.prod-items-table.prod-items-edit thead th {
  text-align: left;
  white-space: nowrap;
}
.prod-items-table.prod-items-edit thead th { text-align: left; }
.prod-items-table.prod-items-edit thead th.num { text-align: right; }
.prod-items-table.prod-items-edit thead th.col-actions { width: 60px; }

.prod-items-table.prod-items-edit tbody td {
  padding: 6px 6px;
  vertical-align: middle;
}

/* widths */
.prod-items-table .col-ref { width: 60px; }
.prod-items-table .col-img { width: 48px; text-align: center; }
.prod-items-table .col-name { min-width: 110px; width: 130px; }
.prod-items-table .col-brand { width: 110px; }
.prod-items-table .col-qty { width: 58px; }
.prod-items-table .col-pvp { width: 88px; }
.prod-items-table .col-dto { width: 58px; }
.prod-items-table .col-nuestro { width: 92px; }
.prod-items-table .col-margen { width: 70px; }
.prod-items-table .col-final { width: 96px; }
.prod-items-table .col-total { width: 100px; }
.prod-items-table .col-actions { width: 74px; white-space: nowrap; }
.prod-items-table.prod-items-edit { min-width: 1050px; }

/* inline editable cell — match the visual weight of read-only text */
.prod-cell {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 5px 6px;
  transition: border-color .12s, background .12s;
}
select.prod-cell { color: var(--ink); }
.prod-cell:hover { border-color: var(--line-soft); }
.prod-cell:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.03);
}
.prod-cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.prod-cell.prod-cell-name { font-weight: 500; color: var(--ink); }
select.prod-cell {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
textarea.prod-cell { resize: vertical; min-height: 48px; }

/* image thumbnail */
.prod-thumb {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.03);
}
.prod-thumb.empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 18px;
  font-weight: 300;
  width: 40px;
  height: 40px;
}

/* drop / paste / click zone wrapping the thumbnail */
.prod-thumb-wrap {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 4px;
  transition: box-shadow .15s, transform .12s;
}
.prod-thumb-wrap:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.prod-thumb-wrap:hover { transform: scale(1.04); }
.prod-thumb-wrap.empty .prod-thumb.empty {
  border-style: dashed;
  border-color: var(--line);
}
.prod-thumb-wrap.empty:hover .prod-thumb.empty,
.prod-thumb-wrap.empty:focus .prod-thumb.empty {
  border-color: var(--accent);
  color: var(--ink);
}
.prod-thumb-wrap.drag-over {
  box-shadow: 0 0 0 2px var(--accent);
}
.prod-thumb-wrap.drag-over .prod-thumb { opacity: 0.6; }

.prod-thumb-wrap.uploading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: rgba(0,0,0,0.5) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 50 50'><circle cx='25' cy='25' r='20' fill='none' stroke='%23f9f9f6' stroke-width='4' stroke-dasharray='90 60' stroke-linecap='round'><animateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.9s' repeatCount='indefinite'/></circle></svg>") center / 20px no-repeat;
}

.prod-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.prod-thumb-wrap:hover .prod-thumb-remove,
.prod-thumb-wrap:focus .prod-thumb-remove { display: flex; }
.prod-thumb-remove:hover { color: var(--danger, #d05a5a); border-color: var(--danger, #d05a5a); }

/* Image lightbox (zoom on click) */
.prod-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: prodLightboxIn .14s ease-out;
}
.prod-lightbox.hidden { display: none; }
@keyframes prodLightboxIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.prod-lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 60px rgba(0,0,0,0.6);
  cursor: zoom-out;
}
.prod-lightbox-close,
.prod-lightbox-open {
  position: absolute;
  top: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--off-white);
  border: 0;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
}
.prod-lightbox-close { right: 24px; font-size: 26px; }
.prod-lightbox-open  { right: 74px; font-size: 18px; }
.prod-lightbox-close:hover,
.prod-lightbox-open:hover { background: rgba(255,255,255,0.22); }

/* Clicking the image itself closes the lightbox (the backdrop click closes too). */
.prod-lightbox-img { pointer-events: auto; }
.prod-lightbox-img:active { transform: scale(0.99); }

/* PDF "Plan" cell — same drop/click pattern, but file-style (no preview) */
.prod-pdf-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 80px;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px dashed var(--line);
  background: rgba(0,0,0,0.12);
  cursor: pointer;
  outline: none;
  transition: border-color .12s, background .12s, box-shadow .15s;
}
.prod-pdf-wrap:hover, .prod-pdf-wrap:focus {
  border-color: var(--ink-soft);
  background: rgba(0,0,0,0.22);
}
.prod-pdf-wrap.has-pdf {
  border-style: solid;
  border-color: var(--line-soft);
  background: rgba(255,255,255,0.04);
}
.prod-pdf-wrap.drag-over { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.prod-pdf-empty {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.prod-pdf-wrap:hover .prod-pdf-empty { color: var(--ink); }

.prod-pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--ink);
  font-size: 11px;
  max-width: 100%;
  overflow: hidden;
}
.prod-pdf-icon {
  display: inline-block;
  font-size: 8px;
  letter-spacing: 0.1em;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--bg);
  line-height: 1;
}
.prod-pdf-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  color: var(--ink-soft);
}
.prod-pdf-link:hover .prod-pdf-name { color: var(--ink); }
.prod-pdf-wrap.uploading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: rgba(0,0,0,0.5) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 50 50'><circle cx='25' cy='25' r='20' fill='none' stroke='%23f9f9f6' stroke-width='4' stroke-dasharray='90 60' stroke-linecap='round'><animateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.9s' repeatCount='indefinite'/></circle></svg>") center / 18px no-repeat;
}
.prod-pdf-wrap .prod-thumb-remove { display: none; }
.prod-pdf-wrap.has-pdf:hover .prod-thumb-remove,
.prod-pdf-wrap.has-pdf:focus .prod-thumb-remove { display: flex; }

/* Items toolbar (brand filter + count) */
.prod-items-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.prod-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.prod-filter-count {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* expand button — chevron rotates, count badge appears when item has extras */
.prod-expand-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 32px;
  height: 24px;
  padding: 0;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.prod-expand-btn:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}
.prod-expand-btn .prod-expand-chevron {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform .2s ease;
  transform: rotate(0deg);
}
.prod-expand-btn.is-open {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.prod-expand-btn.is-open .prod-expand-chevron {
  transform: rotate(90deg);
}

/* small count badge on the expand button when item has extras */
.prod-extras-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 9px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--bg);
}
.prod-expand-btn.is-open .prod-extras-count {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--ink);
}

.prod-del-item-btn {
  margin-left: 6px;
  font-size: 16px;
  line-height: 1;
}

.prod-item-row.is-expanded > td { background: rgba(255,255,255,0.03); }

/* Phase 3: option grouping — tint applied per row via inline --row-tint */
.prod-item-row.has-group > td { background-color: var(--row-tint); }
.prod-item-row.has-group.is-expanded > td {
  background-color: var(--row-tint);
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.025);
}
.prod-option-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--ink-soft);
  margin-right: 4px;
  cursor: help;
}
.prod-opt-move {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 10px;
  padding: 1px 3px;
  line-height: 1;
  vertical-align: middle;
}
.prod-opt-move:hover { color: var(--ink); }

/* Status dot: small colored disc at the left of the REF cell */
/* Status indicator as a thin vertical bar on the left edge of the row, not
   as a dot. Click cycles the status. */
.prod-status-dot {
  display: inline-block;
  vertical-align: middle;
  width: 4px;
  height: 22px;
  margin-right: 8px;
  padding: 0;
  border-radius: 2px;
  border: 0;
  background: currentColor;
  cursor: pointer;
  transition: transform .12s, opacity .12s;
}
.prod-status-dot:hover { transform: scaleX(1.5); }
.prod-status-proposed .prod-status-dot { color: #E8B45A; }   /* warm amber */
.prod-status-approved .prod-status-dot { color: var(--ok); }
.prod-status-cancelled .prod-status-dot {
  color: var(--muted);
  opacity: 0.5;
}

/* Cancelled rows: greyed + struck price */
.prod-item-row.prod-status-cancelled > td {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-color: rgba(249,249,246,0.35);
}
.prod-item-row.prod-status-cancelled .prod-status-dot,
.prod-item-row.prod-status-cancelled .prod-expand-btn {
  text-decoration: none;
  opacity: 1; /* keep buttons interactive */
}

/* "+ Option" button in detail panel header */
.prod-detail-panel-actions { display: inline-flex; gap: 14px; align-items: baseline; }
.prod-add-option {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Listings cards: compact single-row layout — title, dates and state share
   one line so the width is properly used and rows are noticeably shorter. */
.prod-list-item {
  display: grid;
  grid-template-columns: 64px 1fr auto auto 20px;
  gap: 14px;
  align-items: center;
  padding: 8px 12px !important;
}
.prod-list-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
  font-size: 13px;
}
.prod-list-count strong { font-size: 15px; }
.prod-list-count span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.prod-list-title strong {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.prod-list-dates {
  font-size: 10.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  justify-content: flex-end;
  text-align: right;
}
.prod-list-date em { font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; font-size: 9px; color: var(--muted); margin-right: 4px; }
.prod-list-date-sep { color: var(--line); margin: 0 2px; }
.prod-list-state-pill { font-size: 9px; padding: 2px 8px; cursor: default; }
.prod-list-state-pill:hover { background: transparent; }
@media (max-width: 720px) {
  .prod-list-item {
    grid-template-columns: 60px 1fr auto;
    grid-template-rows: auto auto;
  }
  .prod-list-dates { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ----- Phase 4: listing state pill + banner + lock ----- */
.prod-listing-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.prod-listing-state-pill:hover { border-color: var(--ink-soft); background: rgba(255,255,255,0.04); }
.prod-listing-state-pill .prod-state-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--state-color, var(--muted));
  border: 1px solid rgba(0,0,0,0.45);
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.15);
}
.prod-listing-state-pill.prod-state-draft    { --state-color: var(--muted); }
.prod-listing-state-pill.prod-state-sent     { --state-color: #E8B45A; }
.prod-listing-state-pill.prod-state-approved { --state-color: var(--ok); }
.prod-listing-state-pill.prod-state-closed   { --state-color: rgba(249,249,246,0.35); }

.prod-state-banner {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
  border-left: 3px solid;
}
.prod-state-banner.hidden { display: none; }
.prod-state-banner.is-sent {
  background: rgba(232, 180, 90, 0.10);
  border-left-color: #E8B45A;
  color: var(--ink);
}
.prod-state-banner.is-approved {
  background: rgba(200, 220, 200, 0.10);
  border-left-color: var(--ok);
  color: var(--ink);
}
.prod-state-banner.is-closed {
  background: rgba(249, 249, 246, 0.06);
  border-left-color: rgba(249,249,246,0.35);
  color: var(--ink);
}
.prod-state-banner em { font-style: italic; }

/* Locked mode (status = closed): disable all interactive controls inside the detail view */
.prod-detail-view.is-locked .prod-cell,
.prod-detail-view.is-locked input,
.prod-detail-view.is-locked select,
.prod-detail-view.is-locked textarea {
  pointer-events: none;
  background: transparent !important;
}
.prod-detail-view.is-locked .prod-cell { color: var(--ink-soft); }
.prod-detail-view.is-locked #prod-add-item,
.prod-detail-view.is-locked #prod-add-from-catalog,
.prod-detail-view.is-locked #prod-add-transport,
.prod-detail-view.is-locked #prod-add-charge,
.prod-detail-view.is-locked .prod-add-option,
.prod-detail-view.is-locked .prod-del-item-btn,
.prod-detail-view.is-locked [data-save-to-catalog],
.prod-detail-view.is-locked .prod-status-dot,
.prod-detail-view.is-locked .prod-thumb-remove,
.prod-detail-view.is-locked .prod-pdf-wrap.empty,
.prod-detail-view.is-locked [data-del-tg],
.prod-detail-view.is-locked [data-del-charge],
.prod-detail-view.is-locked [data-del-extra],
.prod-detail-view.is-locked [data-remove-img],
.prod-detail-view.is-locked [data-remove-pdf],
.prod-detail-view.is-locked [data-remove-extra-img],
.prod-detail-view.is-locked .prod-add-extra { display: none; }
.prod-detail-view.is-locked #prod-listing-state,
.prod-detail-view.is-locked #prod-brand-filter { pointer-events: auto; }

/* State picker modal */
.prod-state-picker { display: flex; flex-direction: column; gap: 8px; }
.prod-state-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.prod-state-option:hover { border-color: var(--ink-soft); background: rgba(255,255,255,0.05); }
.prod-state-option.is-current { border-color: var(--ink); background: rgba(255,255,255,0.06); }
.prod-state-option .prod-state-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--state-color, var(--muted));
  flex-shrink: 0;
}
.prod-state-option.prod-state-draft    { --state-color: var(--muted); }
.prod-state-option.prod-state-sent     { --state-color: #E8B45A; }
.prod-state-option.prod-state-approved { --state-color: var(--ok); }
.prod-state-option.prod-state-closed   { --state-color: rgba(249,249,246,0.35); }
.prod-state-option-label { font-size: 13px; text-transform: capitalize; }
.prod-state-option-hint { font-size: 11px; line-height: 1.4; }

/* + Add item / + From catalog: side by side */
.prod-add-row-multi { display: flex; gap: 12px; }
.prod-add-row-multi .prod-add-row-btn { flex: 1; }

/* ----- Catalog view ----- */
.prod-catalog-list { display: flex; flex-direction: column; gap: 8px; }
.prod-catalog-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
}
.prod-catalog-card:hover { border-color: var(--line); background: rgba(255,255,255,0.04); }
.prod-catalog-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-soft);
}
.prod-catalog-thumb.empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 16px;
}
.prod-catalog-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prod-catalog-name { font-size: 13px; color: var(--ink); }
.prod-catalog-meta { font-size: 11px; }
.prod-catalog-actions { display: inline-flex; gap: 10px; }

/* ----- Catalog picker modal ----- */
.catalog-picker-list {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.catalog-picker-row {
  display: grid;
  grid-template-columns: 20px 48px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(255,255,255,0.02);
}
.catalog-picker-row:hover { background: rgba(255,255,255,0.06); }
.catalog-picker-row input[type="checkbox"] { width: auto; margin: 0; }
.catalog-picker-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line-soft); }
.catalog-picker-thumb.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); background: rgba(255,255,255,0.04); }
.catalog-picker-body { min-width: 0; }
.catalog-picker-footer { display: flex; justify-content: flex-end; font-size: 11px; }

/* ----- Client preview modal ----- */
.client-preview { font-family: var(--font-sans); }
.cp-header { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.cp-header h3 { margin: 4px 0 6px; font-family: var(--font-serif); font-weight: 400; font-size: 22px; }
.cp-project { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; }
.cp-no-prices-hint { font-size: 11px; font-style: italic; margin-top: 4px; }
.cp-items { display: flex; flex-direction: column; gap: 12px; }
.cp-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cp-item:last-child { border-bottom: 0; }
.cp-img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line-soft); }
.cp-img.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); background: rgba(255,255,255,0.03); }
.cp-line1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cp-ref { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.cp-name { font-size: 14px; color: var(--ink); }
.cp-meta { font-size: 11px; color: var(--ink-soft); }
.cp-desc { font-size: 12px; line-height: 1.5; margin-top: 3px; }
.cp-price { text-align: right; }
.cp-price-unit { font-family: var(--font-serif); font-size: 16px; color: var(--ink); }
.cp-price-line { font-size: 10px; }
.cp-summary {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
}
.cp-summary > div { display: flex; justify-content: space-between; align-items: baseline; }
.cp-summary .cp-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: 18px;
}

/* ==========================================================
   Client preview / printable offer — Lobito-style layout
   ========================================================== */

.client-preview {
  font-family: var(--font-sans);
  color: #1d1d1d;
  background: var(--off-white);
}
.client-preview .muted { color: #777; }
.client-preview .cp-toolbar { color: #1d1d1d; border-bottom-color: #ddd; }

/* Toolbar with the Print button (hidden in print) */
.cp-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E5D0D2;
}
/* Print button: solid claret pill with off-white text so it pops on cream. */
#cp-print-btn {
  background: var(--claret);
  color: var(--off-white);
  border: 0;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s;
}
#cp-print-btn::after { display: none; }      /* kill the underline pseudo from button.primary */
#cp-print-btn:hover { background: var(--claret-deep); opacity: 1; }

/* ---------- COVER PAGE ---------- */
.cp-cover {
  background: var(--claret);
  color: var(--off-white);
  padding: 60px 56px 52px;
  min-height: 620px;            /* fits visible area without being overwhelming; print rules override to 260mm */
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 0;             /* full bleed — modal-body's radius clips the corners */
  margin: 0;                    /* no gap; the next page's padding handles spacing */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cp-cover-date {
  font-size: 18px;
  font-weight: 400;
}
.cp-cover-main { display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.cp-cover-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--off-white);
  text-transform: uppercase;
}
.cp-cover-client {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(249,249,246,0.7);
  margin-top: -22px;
}
.cp-cover-secondary { margin-top: 24px; }
.cp-cover-listing { font-size: 22px; font-weight: 300; margin-bottom: 4px; }
.cp-cover-tag {
  font-size: 14px;
  color: rgba(249,249,246,0.7);
}
.cp-cover-logo {
  width: 140px;
  height: auto;
  display: block;
}

/* ---------- INTERNAL PAGE WRAP (subtle cream pages with claret accents) ---------- */
.cp-page { padding: 8px 0 14px; background: var(--off-white); }

.cp-page-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--claret);
}
.cp-ph-logo {
  width: 78px;
  height: auto;
  display: block;
}
.cp-ph-tag {
  font-size: 10px;
  color: #555;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.cp-ph-section {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #555;
  margin-top: 10px;
}
.cp-ph-project { font-size: 11px; margin-top: 2px; color: #1d1d1d; }
.cp-ph-address { font-size: 10px; color: #555; }
.cp-ph-right {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--claret);
  font-weight: 600;
  text-transform: uppercase;
  align-self: end;
}

/* ---------- ITEMS TABLE (Lobito-style) ---------- */
.cp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
  table-layout: fixed;
}
.cp-table .cp-section-row td {
  background: var(--claret);
  padding: 8px 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--off-white);
  font-weight: 500;
  border-bottom: 1px solid var(--claret-deep);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cp-table thead th {
  text-align: left;
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--claret-deep);
  padding: 8px 6px 6px;
  border-bottom: 1px solid var(--claret);
  vertical-align: bottom;
  line-height: 1.25;
}
/* Headings all start at the left edge of their column, and so does the
   text under them. A column whose heading is right-aligned over left-aligned
   values reads as two columns, and the document is meant to be scanned down
   rather than added up in the head. Images keep their centring: a photograph
   has no reading edge. */
.cp-th-sub {
  display: block;
  font-size: 7.5px;
  color: #888;
  font-weight: 400;
  margin-top: 1px;
}
.cp-table .cp-group-row td {
  background: #F4E8E9;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--claret-deep);
  border-bottom: 1px solid #E5D0D2;
  border-top: 1px solid #E5D0D2;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cp-table tbody td {
  padding: 8px 6px;
  vertical-align: middle;
  border-bottom: 1px solid #EFE7E7;
  color: #1d1d1d;
}
/* Override the global tbody:hover rule that turns text off-white (invisible on cream). */
.cp-table tbody tr:hover td { color: #1d1d1d; }
.cp-table tbody tr:hover td.cp-c-ref { color: var(--claret-deep); }
.cp-c-ref {
  width: 50px;
  background: #FAF3F3;
  font-weight: 600;
  color: var(--claret-deep);
  text-align: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cp-c-loc { width: 78px; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.cp-c-img, .cp-c-mat { width: 88px; text-align: center; padding: 4px 4px; }
.cp-c-img img, .cp-c-mat img {
  display: inline-block;
  max-width: 72px;
  max-height: 56px;
  object-fit: contain;
  border-radius: 2px;
}
.cp-c-qty { width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.cp-c-dim { width: 60px; font-size: 8.5px; line-height: 1.4; }
.cp-c-bulb { width: 80px; font-size: 8.5px; }
/* New "Extras" column — replaces the legacy BULB column with a mini list */
.cp-c-extras { width: 110px; vertical-align: top; padding: 4px 4px !important; }
.cp-c-extras .cp-extra-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  line-height: 1.25;
  margin-bottom: 2px;
}
.cp-c-extras .cp-extra-mini-img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 1px;
  flex-shrink: 0;
}
.cp-c-extras .cp-extra-mini-noimg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.04);
  border-radius: 1px;
}
.cp-c-extras .cp-extra-mini-name {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Stand-alone status badges on top of each row's description column */
.cp-status-badge {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  margin: 0 0 4px 0;
}
.cp-status-badge.is-approved {
  background: #7AAA85;
  color: #1d1d1d;
}
.cp-status-badge.is-cancelled {
  background: #aaa;
  color: #1d1d1d;
}
.cp-item-row--cancelled td { opacity: 0.55; }
.cp-item-row--cancelled .cp-c-desc { text-decoration: line-through; }
.cp-item-row--cancelled .cp-c-desc .cp-status-badge { text-decoration: none; }
.cp-cancelled-price { color: var(--muted); font-style: italic; }

/* Summary table: clear separator row between subtotal and tax */
.cp-summary-subtotal-row td {
  border-top: 1px solid #999;
  padding-top: 6px !important;
  font-weight: 500;
}
.cp-c-desc { font-size: 9px; line-height: 1.4; }
.cp-c-price, .cp-c-total { width: 74px; text-align: right; font-variant-numeric: tabular-nums; }

/* Option badge inside the description cell */
.cp-option-badge {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #efe6e0;
  color: var(--claret-deep);
  padding: 2px 6px;
  border-radius: 2px;
  margin: 0 0 4px 0;
}
.cp-option-badge.is-approved {
  background: var(--claret);
  color: var(--off-white);
}
.cp-item-row--option .cp-c-ref,
.cp-item-row--option .cp-c-loc,
.cp-item-row--option .cp-c-desc {
  background: rgba(87, 45, 47, 0.02);
}
.cp-item-row--option-approved .cp-c-desc { font-weight: 600; }
.cp-item-row--option-approved .cp-c-ref,
.cp-item-row--option-approved .cp-c-loc,
.cp-item-row--option-approved .cp-c-desc {
  background: rgba(87, 45, 47, 0.06);
}
.cp-table tfoot .cp-foot-row td {
  padding: 10px 6px;
  border-top: 2px solid var(--claret);
  font-weight: 500;
}
.cp-table tfoot .cp-foot-label {
  text-align: right;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--claret-deep);
}
.cp-table tfoot .cp-foot-value {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--claret);
}

/* ---------- NOTES / DISCLAIMERS ---------- */
.cp-notes {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #E5D0D2;
  font-size: 8.5px;
  line-height: 1.5;
  color: #555;
}
.cp-notes-title {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--claret);
  margin-bottom: 6px;
}
.cp-notes p { margin: 2px 0; }
.cp-notes strong { color: var(--claret-deep); }

/* ---------- SUMMARY PAGE ---------- */
.cp-summary-page-wrap { margin-top: 30px; background: var(--off-white); }
.cp-summary-page { display: flex; flex-direction: column; gap: 30px; }
.cp-summary-section h4 {
  margin: 0 0 8px;
  background: var(--claret);
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--off-white);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cp-summary-section h4 .cp-pct {
  float: right;
  color: rgba(249,249,246,0.7);
  font-weight: 400;
}
.cp-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: #1d1d1d;
}
.cp-summary-table td {
  padding: 5px 12px;
  border-bottom: 1px solid #EFE7E7;
  color: #1d1d1d;            /* override the global "tbody td { color: var(--ink-soft) }" rule */
}
.cp-summary-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cp-summary-row-total td {
  font-weight: 600;
  font-size: 13px;
  border-top: 2px solid var(--claret);
  border-bottom: 0;
  padding-top: 8px;
  color: var(--claret-deep);
}
.cp-summary-row-total td.num { color: var(--claret); font-weight: 700; }
.cp-notes-summary { font-size: 9px; color: #555; }
.cp-notes-summary strong { color: var(--claret-deep); }

/* ==========================================================
   PRINT RULES — hide app chrome, render the offer at A4 size.
   ========================================================== */
@media print {
  @page { size: A4; margin: 14mm 12mm; }

  /* Hide everything outside the modal AND remove from layout flow,
     so the cover starts on page 1 instead of being pushed down by hidden content. */
  body > *:not(#modal) { display: none !important; }
  body::before, body::after { display: none !important; }   /* TEST banner & similar */

  /* Strip modal chrome */
  #modal {
    position: static !important;
    background: transparent !important;
    backdrop-filter: none !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .modal-card {
    position: static !important;
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--off-white) !important;
    color: #1d1d1d !important;
    box-shadow: none !important;
    display: block !important;
  }
  #modal-title, .modal-actions, .modal-card > h3, .no-print { display: none !important; }
  #modal-body {
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    background: var(--off-white) !important;
  }

  /* Cream subtle background for everything except the cover */
  html, body { background: var(--off-white) !important; }
  .client-preview { color: #1d1d1d !important; background: var(--off-white) !important; }
  .client-preview .muted { color: #6b6b6b !important; }
  .cp-page { background: var(--off-white) !important; }

  /* The cover keeps the chocolate brown background */
  .cp-cover {
    background: var(--claret) !important;
    color: var(--off-white) !important;
    height: 260mm;            /* fits inside A4 printable area (~269mm) */
    min-height: 260mm;
    margin: 0 !important;
    padding: 28mm 22mm 22mm !important;
    break-after: page;
    page-break-after: always;
    box-sizing: border-box;
  }
  .cp-cover * { color: var(--off-white) !important; }
  .cp-cover-client { color: rgba(249,249,246,0.75) !important; }

  /* Internal pages — white background, claret-family accents (brand colours) */
  .cp-page { background: white !important; }
  .cp-page-header {
    border-bottom: 1px solid var(--claret) !important;
    padding-bottom: 10px !important;
  }
  .cp-ph-logo { color: var(--claret) !important; font-family: var(--font-serif) !important; }
  .cp-ph-tag, .cp-ph-section, .cp-ph-address { color: #555 !important; }
  .cp-ph-right {
    color: var(--claret) !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
  }

  /* Items table */
  .cp-table thead th { color: var(--claret-deep) !important; border-bottom: 1px solid var(--claret) !important; }
  .cp-table thead th .cp-th-sub { color: #888 !important; }

  /* Top "OFFER" / section bar — solid claret like the cover, off-white text */
  .cp-table .cp-section-row td {
    background: var(--claret) !important;
    color: var(--off-white) !important;
    border-bottom: 1px solid var(--claret-deep) !important;
    font-weight: 500 !important;
  }

  /* Per-location group separator (e.g. "01 | LOBITO") — pale claret tint */
  .cp-table .cp-group-row td {
    background: #F4E8E9 !important;
    color: var(--claret-deep) !important;
    border-top: 1px solid #E5D0D2 !important;
    border-bottom: 1px solid #E5D0D2 !important;
    font-weight: 600 !important;
  }

  /* REF column — barely-tinted claret pill, same look as the original beige */
  .cp-c-ref {
    background: #FAF3F3 !important;
    color: var(--claret-deep) !important;
    font-weight: 600 !important;
  }

  .cp-table tbody td { color: #1d1d1d !important; border-bottom: 1px solid #EFE7E7 !important; }
  .cp-table tfoot .cp-foot-row td {
    border-top: 2px solid var(--claret) !important;
    color: var(--claret-deep) !important;
  }
  .cp-table tfoot .cp-foot-label { color: var(--claret-deep) !important; font-weight: 500 !important; }
  .cp-table tfoot .cp-foot-value { color: var(--claret) !important; font-weight: 700 !important; }

  /* Notes */
  .cp-notes { color: #555 !important; border-top: 1px solid #E5D0D2 !important; }
  .cp-notes-title { color: var(--claret) !important; letter-spacing: 0.14em; }
  .cp-notes strong { color: var(--claret-deep) !important; }

  /* Summary page */
  .cp-summary-page-wrap { break-before: page; page-break-before: always; }
  .cp-summary-section h4 {
    background: var(--claret) !important;
    color: var(--off-white) !important;
    letter-spacing: 0.14em !important;
  }
  .cp-summary-section h4 .cp-pct { color: rgba(249,249,246,0.7) !important; }
  .cp-summary-table td {
    border-bottom: 1px solid #EFE7E7 !important;
    color: #1d1d1d !important;        /* defeat the global tbody-td rule */
    padding: 6px 12px !important;
  }
  .cp-summary-row-total td {
    border-top: 2px solid var(--claret) !important;
    color: var(--claret-deep) !important;
    font-weight: 600 !important;
  }
  .cp-summary-row-total td.num { color: var(--claret) !important; font-weight: 700 !important; }
  .cp-notes-summary { color: #555 !important; }
  .cp-notes-summary strong { color: var(--claret-deep) !important; }

  /* Avoid rows being split across pages */
  .cp-item-row, .cp-group-row, .cp-foot-row { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; } /* repeat header on every page */
  tfoot { display: table-footer-group; }
}

/* Per-user feature access toggles (admin sees these in the user edit modal) */
.user-flags {
  margin-top: 4px;
  padding: 4px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
}
.user-flags-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  padding: 12px 0 6px;
}
.user-flags-group {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-soft);
}
.user-flags-group:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.user-flags-group-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 4px;
}
.user-flag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 2px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.user-flag-row:last-of-type { border-bottom: 0; }
.user-flag-row:hover { color: var(--ink); }

/* Minimalist toggle-style checkbox */
.user-flag-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background-color .18s, border-color .18s;
  flex: 0 0 auto;
  padding: 0;
}
.user-flag-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-soft);
  transition: transform .18s, background-color .18s;
}
.user-flag-row input[type="checkbox"]:hover { border-color: var(--ink-soft); }
.user-flag-row input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.user-flag-row input[type="checkbox"]:checked::after {
  transform: translateX(14px);
  background: var(--bg);
}

.user-flags-hint {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-top: 10px;
  letter-spacing: 0.02em;
}

/* Version history panel */
.prod-versions-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.prod-versions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
}
.prod-version-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  align-items: center;
}
.prod-version-row:hover { border-color: var(--line); background: rgba(255,255,255,0.04); }
.prod-version-code {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--ink);
}
.prod-version-meta {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.prod-version-label { color: var(--ink); }
.prod-version-actions { display: inline-flex; gap: 12px; }

/* Client preview options dialog */
.cp-options { display: flex; flex-direction: column; gap: 18px; }
.cp-opt-block { display: flex; flex-direction: column; gap: 8px; }
.cp-opt-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.cp-opt-radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
/* Bigger, button-like radios so they are obviously clickable */
.cp-opt-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: rgba(249,249,246,0.04);
  transition: background 0.12s, border-color 0.12s;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.cp-opt-radio-group label:hover {
  background: rgba(249,249,246,0.10);
}
.cp-opt-radio-group label:has(input:checked) {
  background: rgba(122, 31, 42, 0.22);
  border-color: rgba(122, 31, 42, 0.6);
  font-weight: 500;
}
.cp-opt-radio-group input {
  width: auto;
  margin: 0;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: radio;
}

/* Extras list inside each item card in the preview */
.cp-extras {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px 0 0;
  border-top: 1px dashed var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-extra {
  font-size: 11px;
  color: var(--ink-soft);
  padding-left: 14px;
  position: relative;
}
.cp-extra::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--muted);
}
.cp-extra-type {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: var(--ink);
  margin-right: 6px;
}

/* Mini extras-types list under item name in the main table */
.prod-mini-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
  padding-left: 6px;
}
.prod-mini-extra {
  display: inline-block;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--ink-soft);
}
.prod-mini-extra-fabric  { background: rgba(232, 180, 181, 0.18); color: #F0CFD0; }
.prod-mini-extra-finish  { background: rgba(240, 225, 180, 0.18); color: #F0E1B4; }
.prod-mini-extra-bulbs   { background: rgba(232, 180, 90, 0.18);  color: #F0C77A; }
.prod-mini-extra-leather { background: rgba(220, 200, 180, 0.18); color: #DCC8B4; }
.prod-mini-extra-other   { background: rgba(255,255,255,0.08);    color: var(--ink-soft); }

/* expanded panels container (lives outside the scrollable items wrap) */
.prod-item-details:empty { display: none; }
.prod-item-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0;
}
.prod-item-detail-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.025);
  padding: 16px 18px 18px;
}
.prod-detail-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.prod-detail-panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
}
/* Mini thumbnail in the detail panel header — sits left of REF + name */
.prod-detail-thumb {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line-soft);
}
.prod-detail-thumb-empty {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  background: rgba(0,0,0,0.10);
  border: 1px dashed var(--line-soft);
}
.prod-detail-ref {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
}
.prod-detail-name {
  font-size: 16px;
  color: var(--ink);
}
.prod-detail-close {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.prod-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 16px;
}
.prod-detail-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(249, 249, 246, 0.72);
}

/* "+ New brand" / "+ New manufacturer" inline links: off-white like buttons */
.prod-new-brand,
.prod-new-manuf {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
  padding-bottom: 1px;
  transition: color .12s, border-color .12s;
}
.prod-new-brand:hover,
.prod-new-manuf:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* <select> dropdown options — force readable contrast in the OS dropdown.
   Native option lists pick up browser/OS colors that often clash with the dark theme. */
.prod-cell option,
.prod-extra-cell option,
.prod-meta-select option,
select.prod-cell option {
  background: #2A1819;          /* darker than --bg so options stand apart from the page */
  color: var(--ink);
}
.prod-cell option:checked,
.prod-extra-cell option:checked,
.prod-meta-select option:checked {
  background: var(--ink);
  color: #2A1819;
}
.prod-detail-grid .grid-span-2 { grid-column: span 2; }
.prod-detail-grid .grid-span-4 { grid-column: 1 / -1; }
.prod-detail-grid .prod-cell {
  font-size: 12px;
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--line-soft);
}
.prod-detail-grid .prod-cell:focus {
  border-color: var(--accent);
  background: rgba(0,0,0,0.25);
}

/* + Add item button below the table */
.prod-add-row-wrap {
  margin: -8px 0 24px;
}
.prod-add-row-btn {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.prod-add-row-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: rgba(255,255,255,0.02);
}

/* Location header rows inside the items table */
.prod-loc-row > td {
  background: rgba(184, 110, 69, 0.10);
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
}
.prod-loc-row.is-unassigned > td {
  background: rgba(255, 255, 255, 0.025);
}
.prod-loc-row-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.prod-loc-drag {
  cursor: grab;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  user-select: none;
  letter-spacing: -2px;
}
.prod-loc-name-input {
  background: transparent;
  border: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  flex: 1;
  padding: 2px 4px;
  border-radius: 3px;
}
.prod-loc-name-input:focus {
  outline: none;
  background: rgba(255,255,255,0.06);
}
.prod-loc-name.prod-loc-unassigned {
  color: var(--muted);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  flex: 1;
}
.prod-loc-count {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.10em;
}
.prod-loc-del {
  opacity: 0;
  transition: opacity .15s;
}
.prod-loc-row:hover .prod-loc-del { opacity: 0.7; }
.prod-loc-row:hover .prod-loc-del:hover { opacity: 1; }

/* Drag & drop visual cues */
.prod-item-row.is-dragging,
.prod-loc-row.is-dragging { opacity: 0.4; }
.prod-loc-row.is-drop-target > td {
  background: rgba(184, 110, 69, 0.30);
  box-shadow: inset 0 2px 0 var(--accent);
}

@media (max-width: 900px) {
  .prod-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-detail-grid .grid-span-2 { grid-column: span 1; }
  .prod-detail-grid .grid-span-4 { grid-column: 1 / -1; }
}

/* Tax select in the listing meta line */
.prod-tax-toggle { display: inline-flex; align-items: center; gap: 6px; }
.prod-meta-select {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.prod-meta-select:hover { border-color: var(--accent); }
.prod-meta-select:focus { outline: none; border-color: var(--accent); }

/* Per-item comments block (inside expanded detail row) */
.prod-comments-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}
.prod-comments-head { margin-bottom: 8px; }
.prod-comments-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.prod-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.prod-comment {
  padding: 8px 10px;
  background: var(--claret-tint, rgba(249,249,246,0.04));
  border-radius: 4px;
  font-size: 12px;
}
.prod-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.prod-comment-author { font-weight: 600; font-size: 11px; }
.prod-comment-time { font-size: 10px; color: var(--muted); }
.prod-comment-del {
  margin-left: auto;
  font-size: 11px;
  padding: 0 4px;
  line-height: 1;
}
.prod-comment-body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}
.prod-mention {
  background: rgba(184, 151, 90, 0.18);
  color: var(--ink);
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 500;
}
.prod-comment-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}
.prod-comment-input-wrap { position: relative; }
.prod-comment-input {
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  resize: vertical;
  box-sizing: border-box;
}
.prod-comment-submit { padding: 8px 14px; font-size: 12px; }
.prod-mention-popover {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  max-height: 180px;
  overflow-y: auto;
  background: var(--claret-deep);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 50;
}
.prod-mention-popover.hidden { display: none; }
.prod-mention-option {
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid rgba(249,249,246,0.06);
}
.prod-mention-option:last-child { border-bottom: none; }
.prod-mention-option:hover,
.prod-mention-option.is-active { background: rgba(249,249,246,0.12); }
.prod-mention-option .muted { font-size: 10px; }

/* Per-item extras block inside expanded detail row */
.prod-extras-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}
.prod-extras-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.prod-extras-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.prod-extras-empty { padding: 8px 0; font-size: 11px; font-style: italic; }

.prod-extras-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}
.prod-extras-table .col-extra-img { width: 52px; text-align: center; }
.prod-extras-table .col-extra-type { width: 110px; }
.prod-extras-table .col-extra-brand { width: 140px; }
.prod-extras-table .col-extra-qty { width: 90px; }
.prod-extras-table .col-extra-unit { width: 120px; }
.prod-extras-table .col-extra-sub { width: 110px; }
.prod-extras-table tbody td.col-extra-img { padding: 4px 6px; vertical-align: middle; }
.prod-extras-table thead th {
  text-align: left;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.prod-extras-table thead th.num { text-align: right; }
.prod-extras-table tbody td {
  padding: 4px 6px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.prod-extras-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.prod-extras-table tbody tr:last-child td { border-bottom: 0; }
.prod-extra-cell {
  background: rgba(0,0,0,0.15);
  border: 1px solid transparent;
}
.prod-extra-cell:hover { border-color: var(--line-soft); }
.prod-extra-cell:focus { border-color: var(--accent); background: rgba(0,0,0,0.25); outline: none; }

/* Side sections: transport groups + extra charges */
.prod-side-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 8px 0 24px;
}
.prod-side-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.015);
}
.prod-side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.prod-side-head h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
}

/* Collapsible toggle for the whole side-card head */
.prod-side-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}
.prod-side-toggle:hover h3 { color: var(--ink); }
.prod-side-chevron {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
  color: var(--ink-soft);
  transition: transform .2s ease;
  transform: rotate(0deg);
}
.prod-side-toggle.is-open .prod-side-chevron {
  transform: rotate(90deg);
  color: var(--ink);
}
.prod-side-count {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.prod-side-count:empty { display: none; }

/* Collapsed body of the side card */
#prod-transport-list.hidden { display: none; }
.prod-side-card.is-collapsed .prod-side-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* Transport group cards */
/* ---------- Production: side-by-side layout for item table + detail panel ----------
   The listing editor breaks out of the app's centered .card constraint so
   both the items table AND the detail panel share the WHOLE viewport width.
   Without this, the detail panel used to squish the table because the
   container had a hard max-width. */
.prod-edit-layout {
  display: block; /* single column — table takes full width */
  align-items: start;
}
.prod-edit-layout .prod-items-wrap { min-width: 0; overflow-x: auto; }
/* Item detail panel floats over the right margin (fixed) so opening an
   item never squishes the table. It sits where the action rail is when
   closed — the rail collapses to a "+" icon (see .prod-add-rail rules)
   whenever the detail is open. */
.prod-edit-layout .prod-item-details {
  display: none;
}
.prod-edit-layout.has-detail .prod-item-details {
  display: block;
  position: fixed;
  top: calc(var(--app-header-h, 73px) + 16px);
  right: 20px;
  /* 380px was cutting the subtotal off the right edge. Wider by default,
     and the old width is now the floor rather than the fixed size. */
  width: 560px;
  min-width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - var(--app-header-h, 73px) - 32px);
  min-height: 240px;
  resize: both;
  overflow: auto;
  z-index: 30;
  background: var(--astet-off-white, #F9F9F6);
  border: 1px solid rgba(29,29,29,0.28);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.20);
}
@media (max-width: 1300px) {
  .prod-edit-layout.has-detail .prod-item-details { width: min(560px, calc(100vw - 32px)); }
}

/* ---------- Production: compact transport-group item chips with brand ----------
   Each item is one horizontal row: chip (ref · name · brand) on the left at
   ~40-50% width, extras chips flowing to the right immediately. When the item
   is already assigned to another transport group, the chip is dimmed and a
   small "in <group>" badge appears so the user doesn't duplicate. */
.prod-tg-items .prod-tg-item-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 0;
}
.prod-tg-items .prod-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.10);
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
  cursor: pointer;
  margin: 0;
  line-height: 1.2;
  transition: all .12s;
  flex: 0 1 44%;
  min-width: 0;
  max-width: 48%;
}
.prod-tg-items .prod-item-chip .prod-item-chip-name { flex: 1; min-width: 0; }
.prod-tg-items .prod-item-chip input[type="checkbox"] {
  margin: 0;
  transform: scale(0.85);
}
.prod-tg-items .prod-item-chip:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}
/* Selected ITEM in a transport group — visually identical to a selected
   extra chip (so click/state feedback feels uniform across both). */
.prod-tg-items .prod-item-chip.on {
  border-color: var(--ink-soft);
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  box-shadow: none;
}
.prod-tg-items .prod-item-chip.on .prod-item-chip-ref { color: var(--ink-soft); }
.prod-tg-items .prod-item-chip-ref {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--ink-soft);
}
.prod-tg-items .prod-item-chip-name {
  color: var(--ink);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-tg-items .prod-item-chip-brand {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(249,249,246,0.08);
  color: var(--muted);
  margin-left: 2px;
}
.prod-tg-items .prod-item-chip.on .prod-item-chip-brand {
  color: var(--ink-soft);
  background: rgba(0,0,0,0.18);
}
/* Extras chips sit to the RIGHT of the item chip on the same row (used to be
   below it, wasting vertical space). Wraps to next line when the row runs out
   of room. */
.prod-tg-items .prod-tg-extras {
  margin: 0;
  padding-left: 0;
  border-left: none;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.prod-tg-items .prod-extra-chip {
  font-size: 10px;
  padding: 1px 6px;
}

/* Item is already in another transport group — dim it and don't invite a
   second selection. The badge shows which group it belongs to. */
.prod-tg-items .prod-item-chip.is-elsewhere {
  opacity: 0.55;
  border-style: dashed;
}
.prod-tg-items .prod-item-chip.is-elsewhere:hover { opacity: 0.85; }
.prod-item-chip-used {
  font-size: 8.5px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(232, 180, 90, 0.18);
  border: 1px solid rgba(232, 180, 90, 0.5);
  color: var(--ink);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin-left: 4px;
}

/* ---------- Production: numeric inputs without arrow spinners ---------- */
.prod-cell[type="number"],
.prod-items-table input[type="number"],
.prod-extras-table input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.prod-cell[type="number"]::-webkit-outer-spin-button,
.prod-cell[type="number"]::-webkit-inner-spin-button,
.prod-items-table input[type="number"]::-webkit-outer-spin-button,
.prod-items-table input[type="number"]::-webkit-inner-spin-button,
.prod-extras-table input[type="number"]::-webkit-outer-spin-button,
.prod-extras-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Production: image thumb "armed" state (first click before picker) ---------- */
.prod-thumb-wrap.is-armed {
  outline: 2px solid var(--claret-light);
  outline-offset: -2px;
  background: rgba(122, 31, 42, 0.12);
}
.prod-thumb-wrap.is-armed::after {
  content: 'Paste image (Ctrl+V) or click again to browse';
  position: absolute;
  bottom: -22px;
  left: 0;
  font-size: 9px;
  color: var(--ink-soft);
  white-space: nowrap;
  pointer-events: none;
}
.prod-thumb-wrap { position: relative; }

/* ---------- Production: detail panel header — icon-only action buttons ---------- */
.prod-detail-panel-actions .icon-btn {
  font-size: 18px;
  padding: 4px 8px;
  line-height: 1;
  min-width: 32px;
  text-align: center;
}
.prod-detail-panel-actions .icon-btn:hover { color: var(--ink); }

/* ---------- Production: summary subtotal-before-tax row separator ---------- */
.prod-summary-subtotal {
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
  margin-top: 2px;
}
.prod-summary-subtotal strong { color: var(--ink); }
.prod-summary-total {
  border-top: 1px solid var(--ink-soft);
  padding-top: 8px;
  margin-top: 4px;
}

/* Two-column summary footer: Cost & margin (items only) on the left,
   full Pricing (incl. transport + extras + tax) on the right.
   Uses the same grid ratio and gap as .prod-side-sections above so the two
   inner cards line up vertically with (Transport groups | Extra charges). */
.prod-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  width: 100%;
  margin: 0 0 24px;
}
/* Personnel calendar — sticky header up to the row of days, then scroll the
   body. Two important prereqs so position:sticky works relative to the page:
   1) the wrap must NOT create its own vertical scroll container, or the
      thead will only stick within it (i.e. never). We disable overflow-x
      here — the table adapts to available width via table-layout: fixed.
   2) top must account for the global .app-header (73px on desktop) that is
      itself sticky at top: 0. */
.personnel-cal-wrap { overflow: visible; }
.personnel-cal { border-collapse: separate; border-spacing: 0; }
.personnel-cal thead th {
  position: sticky;
  top: var(--app-header-h, 73px);
  z-index: 6;
  background: var(--bg, #1f1c1a);
  box-shadow: 0 1px 0 var(--line);
}
.personnel-cal thead th.pers-name-col {
  left: 0;
  z-index: 7; /* corner cell sits above both axes */
}
.personnel-cal tbody td.pers-name-col {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--bg, #1f1c1a);
}
/* Profile-cell rows use colspan across the whole table — no need for left
   sticky, and we don't want it to fight the day columns. */

/* Active filter pills — shown right under the filter bar */
.pers-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 0;
  min-height: 0;
}
.pers-active-filters.has-filters {
  padding: 8px 0 12px;
  border-bottom: 1px dashed var(--line-soft);
  margin-bottom: 8px;
}
.pers-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.pers-filter-pill:hover {
  border-color: var(--ink-soft);
  background: rgba(255,255,255,0.08);
}
.pers-filter-pill-x {
  font-size: 13px;
  color: var(--muted);
  line-height: 1;
}
.pers-filter-pill:hover .pers-filter-pill-x { color: var(--ink); }

/* Profile group headers — Level 1 — flush left, strong tone */
.pers-profile-row > td {
  background: rgba(184, 110, 69, 0.10);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  padding: 4px 4px 4px 0 !important;
}
.pers-profile-cell {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding-left: 6px !important;
}
.pers-profile-toggle {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
}
.pers-profile-toggle:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.pers-profile-name {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink);
  flex: 1;
}
.pers-profile-count {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* User rows — Level 2 — indented from profile */
.pers-user-name-cell {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding-left: 28px !important;
}
.pers-user-toggle {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 3px;
}
.pers-user-toggle:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.pers-user-row.is-expanded > td { background: rgba(255,255,255,0.025); }
.pers-user-summary { padding-left: 8px !important; font-style: italic; }

/* Phase sub-rows — Level 3 — indented further */
.pers-user-phase-row > td { padding-top: 2px !important; padding-bottom: 2px !important; }
.pers-phase-sub-cell {
  font-size: 10px;
  padding-left: 56px !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}
/* Left column on a single-phase row: just a small color dot + the phase
   label. The full project + phase name floats above the bar (see below). */
.pers-phase-sub-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pers-phase-sub-name {
  color: var(--ink);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Floating title on top of a single phase bar (only rendered in single-phase
   rows). Allowed to overflow past the bar's start cell horizontally so long
   names stay readable; underlying day cells keep their own pointer-events. */
.pers-block-phase-title {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 1px;
  font-size: 10px;
  line-height: 1.1;
  color: var(--ink);
  background: rgba(31, 28, 26, 0.85);
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
  max-width: none;
  z-index: 2;
}
.pers-user-phase-row td.pers-day { overflow: visible; }
.pers-user-phase-row .pers-day-inner,
.pers-user-phase-row .pers-block { position: relative; }
/* Give the row a bit more height so the floating title doesn't crash into
   the previous row. */
.pers-user-phase-row { height: 28px; }
.pers-timeoff-row .pers-phase-sub-cell { padding-left: 56px !important; }

/* Hide-confirm popover (appears after a drag over an existing phase bar) */
.pers-hide-popover {
  position: fixed;
  z-index: 1000;
  width: 320px;
  background: var(--bg, #1f1c1a);
  color: var(--ink);
  border: 1px solid var(--ink-soft);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  font-size: 12px;
  line-height: 1.4;
}
.pers-hide-popover-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 8px;
}
.pers-hide-popover-body { margin-bottom: 12px; }
.pers-hide-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.pers-hide-popover-actions button {
  padding: 5px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.pers-hide-popover-actions button[data-act="confirm"] {
  background: var(--accent);
  color: #1d1d1d;
  border: 1px solid var(--accent);
  border-radius: 3px;
  cursor: pointer;
}
.pers-hide-popover-actions button[data-act="confirm"]:hover { filter: brightness(1.1); }

/* While a hide-drag is in progress, fade the bar underneath so the user can
   see the selection rectangle clearly. */
body.is-cal-dragging .pers-block-phase { opacity: 0.55; }

/* Designers page — inline Profile picker */
.users-profile-row { display: flex; align-items: center; gap: 6px; }
.users-profile-select {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 3px;
  min-width: 160px;
  cursor: pointer;
}
.users-profile-select:hover { border-color: var(--ink-soft); }
.users-profile-del {
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.55;
}
.users-profile-del:hover { opacity: 1; }
.user-profile-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--ink);
}

/* Access column — compact chips listing every active menu flag per user. */
.users-access-cell { max-width: 320px; }
.user-access-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
.user-access-chip {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: rgba(184, 110, 69, 0.18);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  line-height: 1.4;
  cursor: help;
}
.user-access-all {
  display: inline-block;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #1d1d1d;
  background: var(--accent);
  border-radius: 3px;
}

/* Hourly cost cell + modal — admin-only surface */
.users-rate-btn {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.users-rate-btn:hover { border-color: var(--accent); }
.users-rate-since {
  display: block;
  font-size: 9.5px;
  margin-top: 2px;
  letter-spacing: 0;
}

.hcost-modal h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.hcost-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hcost-history {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hcost-history li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
  font-size: 12px;
}
.hcost-history li.is-current {
  background: rgba(184, 110, 69, 0.12);
  border: 1px solid rgba(184, 110, 69, 0.5);
}
.hcost-rate {
  font-family: var(--font-mono, monospace);
  color: var(--ink);
  min-width: 90px;
}
.hcost-date {
  font-size: 11px;
  color: var(--muted);
  flex: 1;
}
.hcost-badge {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 1px 6px;
  border-radius: 8px;
}

/* Admin-only Analytics — Total cost KPI + Cost by project chart */
.kpi.kpi-cost { background: rgba(184, 110, 69, 0.08); border: 1px solid rgba(184, 110, 69, 0.35); }
/* NOTE the specificity: `.kpi span` in the KPI row sets font-serif at 44px
   for the big number, so a plain `.admin-only-hint` (which is itself a
   <span>) loses that battle. This selector explicitly overrides for spans
   used as the admin-only pill anywhere in the app. */
/* --- Project Control: phase tree & inline creation --- */

/* Empty-state CTA and "Add phase" button at the bottom of each sub-body.
   Both are dashed containers that read as clickable empty rows. */
.pc-phases-empty-cta,
.pc-phases-add-root {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 18px 20px;
  background: transparent;
  border: 1.5px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  margin-top: 8px;
}
.pc-phases-empty-cta { padding: 40px 20px; margin-top: 0; }
.pc-phases-empty-cta:hover,
.pc-phases-add-root:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: rgba(184, 110, 69, 0.04);
}
.pc-phases-empty-plus,
.pc-phases-add-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 14px;
  letter-spacing: 0;
}

/* Tree wrapping: children indent so hierarchy is obvious visually. */
.pc-phase-node { position: relative; margin-top: 4px; }
.pc-phase-node[data-depth="0"] { margin-top: 0; }
.pc-phase-node-card { position: relative; }
.pc-phase-node-children {
  padding-left: 28px;
  margin-top: 4px;
  border-left: 2px solid rgba(184, 110, 69, 0.30);
  margin-left: 12px;
}

/* Hover-visible "+ Add child" button below each card. Absolute-positioned
   at the bottom center; only shown on hover. */
.pc-phase-add-child {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--bg, #1f1c1a);
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.pc-phase-node-card:hover > .pc-phase-add-child {
  opacity: 1;
}
.pc-phase-add-child:hover {
  background: var(--accent);
  color: #1d1d1d;
  transform: translateX(-50%) scale(1.1);
}

/* Planned / actual weeks pills next to the phase type label. Planned is
   always shown (comes from the explicit duration_weeks); actual only after
   the phase gets a real end date. Colour-coded when the actual exceeds or
   undershoots the plan. */
.phase-weeks-pill {
  display: inline-block;
  padding: 0 6px;
  font-size: 9.5px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.5;
}
.phase-weeks-planned { color: var(--ink-soft); }
.phase-weeks-actual {
  background: rgba(122, 170, 133, 0.14);
  border-color: rgba(122, 170, 133, 0.45);
  color: var(--ink);
}
.phase-weeks-actual.is-over {
  background: rgba(232, 80, 80, 0.15);
  border-color: rgba(232, 80, 80, 0.55);
  color: #f4c4c4;
}
.phase-weeks-actual.is-under {
  background: rgba(200, 220, 200, 0.14);
  border-color: rgba(200, 220, 200, 0.45);
}

/* Leads entry: "+ Assign project leads" / "edit" replacing the header
   button. Minimalist inline link, no big button. */
.pc-proj-leads-add,
.pc-proj-leads-edit {
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
}
.pc-proj-leads-edit { margin-left: 8px; opacity: 0.6; }
.pc-proj-leads-edit:hover { opacity: 1; }

span.admin-only-hint,
.admin-only-hint {
  display: inline-block;
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  padding: 1px 5px !important;
  margin-left: 6px !important;
  background: rgba(184, 110, 69, 0.20);
  border-radius: 6px !important;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  vertical-align: middle;
  line-height: 1.4 !important;
}
/* Chart card header with a metric toggle on the right (Hours / Cost). */
.chart-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.chart-card-head h3 { margin: 0; }
.chart-metric-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background: rgba(0,0,0,0.15);
}
.chart-metric-toggle button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 3px 10px;
  border-radius: 2px;
}
.chart-metric-toggle button:hover { color: var(--ink); }
.chart-metric-toggle button.active {
  background: var(--accent);
  color: #1d1d1d;
}
.chart-metric-toggle button.active .admin-only-hint { background: rgba(0,0,0,0.15); color: #1d1d1d; }

/* Match the visual weight of .prod-side-card (Extra charges) so both rows
   line up cleanly. Same border / radius / padding / background. */
.prod-summary-block {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.015);
}
.prod-summary-block-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.prod-summary-cost {
  background: rgba(184, 110, 69, 0.07);
}
.prod-summary-margin-row {
  border-top: 1px solid var(--ink-soft);
  padding-top: 6px;
  margin-top: 4px;
}
.prod-summary-margin-row strong { color: var(--accent); }
.prod-summary-margin-pct {
  font-size: 10px;
  margin-left: 4px;
  letter-spacing: 0;
}
@media (max-width: 720px) {
  .prod-summary { grid-template-columns: 1fr; }
}

.prod-transport-card {
  border: 1px solid rgba(29,29,29,0.28);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--astet-off-white, #F9F9F6);
  color: var(--astet-off-black, #1D1D1D);
}
.prod-transport-card:last-child { margin-bottom: 0; }
/* Five things and a destination, in a card that is only half the width of
   the screen. A fixed grid put the address in a sixth column that was not
   there and squeezed the label down to three letters, so the row wraps
   instead: each field keeps a width it can be read at, and the ones that do
   not fit go to the next line. */
.prod-transport-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}
.prod-tg-label { flex: 1 1 140px; min-width: 110px; }
.prod-tg-amount { flex: 0 1 100px; }
.prod-tg-address { flex: 1 1 150px; min-width: 130px; }
.prod-transport-row .link.danger { margin-left: auto; white-space: nowrap; }
.prod-tg-collapse-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  line-height: 1;
  align-self: end;
  margin-bottom: 6px;
}
.prod-tg-collapse-btn:hover { color: var(--ink); }
.prod-tg-summary {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  align-self: end;
  margin-bottom: 8px;
  text-align: right;
  white-space: nowrap;
}
.prod-transport-card.is-collapsed .prod-tg-items,
.prod-transport-card.is-collapsed .prod-tg-notes { display: none; }
.prod-transport-card.is-collapsed .prod-transport-row { margin-bottom: 0; }
.prod-transport-row label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.prod-tg-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.prod-tg-item-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.prod-tg-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-left: 20px;
  padding-left: 0;
  border-left: none;
}
.prod-extra-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px 2px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  font-size: 10px;
  cursor: pointer;
  background: rgba(0,0,0,0.10);
  color: var(--ink-soft);
  transition: all .12s;
}
.prod-extra-chip input { margin: 0; cursor: pointer; }
.prod-extra-chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.prod-extra-chip.on {
  border-color: var(--ink-soft);
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
.prod-extra-chip .prod-mini-extra { margin: 0; }
.prod-extra-chip-text { font-size: 10px; }
.prod-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  font-size: 11px;
  cursor: pointer;
  background: rgba(0,0,0,0.1);
  color: var(--ink-soft);
  transition: all .12s;
}
.prod-item-chip input { margin: 0; cursor: pointer; }
.prod-item-chip:hover { border-color: var(--accent); color: var(--ink); }
.prod-item-chip.on {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 240, 225, 180), 0.12);
  color: var(--ink);
}
.prod-tg-notes {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* Extra charge row */
.prod-charge-row {
  display: grid;
  grid-template-columns: 1fr 120px auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.prod-charge-row:last-child { border-bottom: 0; }
.prod-charge-row .prod-cell { padding: 4px 8px; }

@media (max-width: 900px) {
  .prod-side-sections { grid-template-columns: 1fr; }
  .prod-tg-amount { flex: 1 1 100px; }
}

/* ==========================================================
   Project Funnel (CRM)
   ========================================================== */

/* Forecast strip — small stats row above the kanban */
.funnel-forecast { margin: 8px 0 14px; }
.funnel-forecast-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 6px;
}
.funnel-forecast-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
/* 6 principal stages + total = 7. Transversal stages don't get their own
   forecast tile (they're not part of the pipeline value). */
.funnel-forecast-item {
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: rgba(0,0,0,0.10);
  min-width: 0;
}
.funnel-forecast-stage {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funnel-forecast-count {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.funnel-forecast-weighted {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.funnel-forecast-total {
  background: rgba(184, 110, 69, 0.10);
  border-color: var(--accent);
}
@media (max-width: 900px) {
  .funnel-forecast-strip { grid-template-columns: repeat(4, 1fr); }
}

.funnel-filters { margin-bottom: 12px; }
.funnel-search-input {
  width: 100%;
  max-width: 320px;
  padding: 6px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}
.funnel-search-input:focus {
  border-color: var(--accent);
  outline: none;
}

.hidden { display: none !important; }

/* Kanban — scroll bar shown ABOVE the strip, mirrors the real scroll below.
   The strip itself no longer shows a native scrollbar (overflow-x: auto is
   still needed to actually scroll, but its bar is hidden via ::-webkit and
   scrollbar-width:none, so only the top mirror is visible). */
.funnel-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 12px;
  margin-bottom: 4px;
}
.funnel-scroll-top-inner,
.funnel-scroll-inner { height: 1px; }
.funnel-kanban-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(200px, 1fr)) repeat(2, minmax(180px, 0.85fr));
  gap: 8px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 8px;
  cursor: grab;
}
.funnel-kanban-strip.is-panning { cursor: grabbing; }
.funnel-kanban-strip::-webkit-scrollbar { display: none; }
.funnel-kanban-strip { scrollbar-width: none; }
.funnel-col {
  background: rgba(0,0,0,0.10);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 8px;
  min-height: 200px;
}
.funnel-col.is-transversal { background: rgba(255,255,255,0.02); }
.funnel-col.is-drop {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.funnel-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.funnel-col-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  font-weight: 500;
}
.funnel-col-count {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.funnel-col-body { display: flex; flex-direction: column; gap: 6px; }

.funnel-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: grab;
  transition: border-color .12s, background .12s;
  position: relative;
}
.funnel-card:hover {
  border-color: var(--ink-soft);
  background: rgba(255,255,255,0.06);
}
.funnel-card.is-dragging { opacity: 0.4; cursor: grabbing; }
.funnel-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.funnel-card-name {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funnel-card-aging {
  font-size: 9px;
  color: var(--muted);
  padding: 1px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.funnel-card-client {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funnel-card-meta {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.funnel-chip {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  letter-spacing: 0.02em;
}
.funnel-chip.muted { color: var(--muted); }
.funnel-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
  font-size: 11px;
}
.funnel-card-fees {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.funnel-card-owner {
  color: var(--ink-soft);
  font-size: 10px;
}
.funnel-card-next {
  font-size: 10px;
  margin-top: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  color: var(--ink-soft);
}
.funnel-card-next.ok {
  background: rgba(200, 220, 200, 0.08);
  border-color: rgba(200, 220, 200, 0.20);
}
.funnel-card-next.overdue,
.funnel-card-next.missing {
  background: rgba(232, 80, 80, 0.14);
  border-color: rgba(232, 80, 80, 0.55);
  color: #f4c4c4;
  font-weight: 500;
}
.funnel-card-overdue,
.funnel-card-missing { border-left: 3px solid rgba(232, 80, 80, 0.75); }

/* Table view */
.funnel-table { width: 100%; border-collapse: collapse; }
.funnel-table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  user-select: none;
}
.funnel-table thead th.num { text-align: right; }
.funnel-table thead th:hover { color: var(--ink); }
.funnel-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 12px;
  color: var(--ink);
}
.funnel-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.funnel-table tbody tr { cursor: pointer; transition: background .12s; }
.funnel-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.funnel-tr-overdue td,
.funnel-tr-missing td { background: rgba(232, 80, 80, 0.05); }
.funnel-tr-overdue .funnel-td-next,
.funnel-tr-missing .funnel-td-next { color: #f4c4c4; }

.funnel-stage-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(0,0,0,0.20);
  color: var(--ink);
}
.funnel-stage-pill.stage-won { border-color: rgba(122, 170, 133, 0.6); }
.funnel-stage-pill.stage-lost { border-color: rgba(232, 80, 80, 0.55); color: #f4c4c4; }
.funnel-stage-pill.stage-paused { color: var(--muted); }
.funnel-stage-pill.stage-nurture { border-color: rgba(200, 180, 220, 0.4); }

/* Ficha modal — 4-quadrant layout on wide screens, so all sections stay
   visible without scrolling. */
/* Widen the generic modal card when it hosts the Funnel ficha layout. */
.modal-card:has(.funnel-ficha-4col) {
  max-width: 1100px;
  padding: 28px 32px;
}
.funnel-ficha { max-height: 82vh; overflow-y: auto; padding-right: 6px; }
/* Left column: Identification / Commercial / Contact stacked.
   Right column: Follow-up spans the full height. */
.funnel-ficha-4col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "a d"
    "c d"
    "e d";
  gap: 18px 24px;
}
.funnel-quad-a { grid-area: a; }
.funnel-quad-c { grid-area: c; }
.funnel-quad-d { grid-area: d; }
.funnel-quad-e { grid-area: e; }
@media (max-width: 900px) {
  .funnel-ficha-4col { grid-template-columns: 1fr; grid-template-areas: "a" "c" "e" "d"; }
}
.funnel-ficha-section { margin-bottom: 0; }
.funnel-ficha-section h4 {
  margin: 0 0 8px 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.funnel-ficha-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}
.funnel-ficha-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
}
.funnel-ficha-grid input,
.funnel-ficha-grid select,
.funnel-ficha textarea {
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background: rgba(0,0,0,0.20);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}
.funnel-ficha-grid input:focus,
.funnel-ficha-grid select:focus,
.funnel-ficha textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.funnel-ficha-grid label.grid-span-2 { grid-column: 1 / -1; }
.funnel-inline { flex-direction: row !important; align-items: center; gap: 6px !important; }
.funnel-scope-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.funnel-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  font-size: 11px;
  color: var(--ink);
  cursor: pointer;
  background: rgba(0,0,0,0.15);
}
.funnel-scope-chip:has(input:checked) {
  background: rgba(184, 110, 69, 0.14);
  border-color: var(--accent);
}
.funnel-scope-chip input { margin: 0; }
.funnel-scope-chip.is-custom { padding-right: 4px; }
.funnel-scope-remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  margin-left: 2px;
}
.funnel-scope-remove:hover { color: var(--ink); }
.funnel-scope-add {
  padding: 4px 10px;
  border: 1px dashed var(--line-soft);
  background: transparent;
  color: var(--muted);
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.funnel-scope-add:hover { color: var(--ink); border-color: var(--accent); }

.funnel-mark-done-wrap { align-self: end; }
#fp-mark-done {
  padding: 6px 12px;
  background: rgba(122, 170, 133, 0.20);
  color: var(--ink);
  border: 1px solid rgba(122, 170, 133, 0.55);
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
#fp-mark-done:hover:not(:disabled) {
  background: rgba(122, 170, 133, 0.35);
  border-color: rgba(122, 170, 133, 0.85);
}
#fp-mark-done:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.funnel-inline > span { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink); }

/* Custom NDA toggle — a button styled as a checkbox+label pair, so the state
   is unambiguous and native checkbox styling can't get in the way. */
.funnel-nda-row { margin-top: 4px; }
.funnel-nda-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}
.funnel-nda-box {
  width: 16px; height: 16px;
  border: 1px solid var(--ink-soft);
  border-radius: 2px;
  background: transparent;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.funnel-nda-toggle[aria-pressed="true"] {
  background: rgba(122, 170, 133, 0.16);
  border-color: rgba(122, 170, 133, 0.65);
}
.funnel-nda-toggle[aria-pressed="true"] .funnel-nda-box {
  background: rgba(122, 170, 133, 0.95);
  border-color: rgba(122, 170, 133, 0.95);
}
.funnel-nda-toggle[aria-pressed="true"] .funnel-nda-box::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1d1d1d;
  font-size: 12px;
  font-weight: 700;
}
.funnel-nda-toggle:hover { border-color: var(--ink-soft); }

/* Scope of services (Commercial) — inline table with weeks/fees totals */
.funnel-scope-table-wrap { margin-top: 12px; }
.funnel-scope-table-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.funnel-scope-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.funnel-scope-table thead th {
  text-align: left;
  padding: 4px 6px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.funnel-scope-table thead th.num { text-align: right; }
.funnel-scope-table tbody td { padding: 3px 6px; }
.funnel-scope-table tbody input {
  width: 100%;
  padding: 4px 6px;
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}
.funnel-scope-table tbody input.num { text-align: right; font-variant-numeric: tabular-nums; }
.funnel-scope-table tbody input:focus { border-color: var(--accent); outline: none; }
.funnel-scope-row-del {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
}
.funnel-scope-row-del:hover { color: var(--ink); }
.funnel-scope-table tfoot td {
  padding: 6px 6px 3px;
  border-top: 1px solid var(--ink-soft);
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.funnel-scope-total-label {
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 9px;
  color: var(--muted);
}
.funnel-scope-table tfoot .num { text-align: right; }

/* Follow-up documents block */
.funnel-notes-label { display: block; margin-top: 10px; }
.funnel-docs-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.funnel-docs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.funnel-docs-add {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 10px;
  padding: 3px 8px;
  border: 1px dashed var(--line-soft);
  border-radius: 3px;
}
.funnel-docs-add:hover { color: var(--ink); border-color: var(--accent); }
.funnel-docs-add input[type="file"] { display: none; }
.funnel-docs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.funnel-docs-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
}
.funnel-docs-list a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.funnel-docs-list a:hover { text-decoration: underline; }
.funnel-doc-size { font-size: 10px; }

/* ===========================================================
   Transport view — printable listing per transport group
   =========================================================== */
.modal-card:has(.cp-tv-modal) {
  max-width: 1080px;
  padding: 24px 28px;
}
.cp-tv-modal { max-height: 82vh; overflow-y: auto; padding-right: 8px; }
.cp-tv-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-soft);
}
.cp-tv-toolbar button { padding: 6px 14px; }

.cp-transport-doc {
  background: #ffffff;
  color: #1d1d1d;
  padding: 32px 36px;
  border-radius: 4px;
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
}
.cp-tv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 2px solid #1d1d1d;
}
.cp-tv-header-brand {
  font-family: var(--font-serif, serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.cp-tv-header-doc {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 10px;
  color: #666;
  margin-top: 3px;
}
.cp-tv-header-right {
  text-align: right;
  font-size: 11px;
  line-height: 1.6;
}
.cp-tv-header-right strong { font-weight: 500; }

.cp-tv-group {
  page-break-after: always;
  margin-bottom: 32px;
}
.cp-tv-group:last-child { page-break-after: auto; }
.cp-tv-group-title {
  font-family: var(--font-serif, serif);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid #999;
}
.cp-tv-group-notes {
  font-size: 11px;
  color: #666;
  font-style: italic;
  margin-bottom: 10px;
}
.cp-tv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.cp-tv-table thead th {
  text-align: left;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
  color: #666;
  border-bottom: 1px solid #999;
  padding: 5px 6px;
}
.cp-tv-table thead th.cp-tv-c-qty { text-align: right; }
.cp-tv-table tbody td {
  vertical-align: top;
  padding: 8px 6px;
  border-bottom: 1px solid #ddd;
  font-size: 11px;
}
.cp-tv-c-num { width: 24px; color: #999; font-variant-numeric: tabular-nums; }
.cp-tv-c-img { width: 90px; }
.cp-tv-c-img img { max-width: 80px; max-height: 60px; border: 1px solid #eee; display: block; }
.cp-tv-c-ref { width: 80px; font-family: monospace; font-size: 10px; }
.cp-tv-c-desc { min-width: 220px; }
.cp-tv-c-desc strong { font-weight: 500; font-size: 12px; display: block; }
.cp-tv-brand { font-size: 10px; color: #555; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.cp-tv-brand em { font-style: normal; color: #888; }
.cp-tv-desc-body { font-size: 10.5px; color: #444; margin-top: 4px; line-height: 1.35; }
.cp-tv-extras { font-size: 10px; color: #555; margin-top: 4px; line-height: 1.4; }
.cp-tv-extras em { font-style: normal; color: #999; text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; margin-right: 4px; }
.cp-tv-c-dims { width: 130px; font-size: 10.5px; color: #333; }
.cp-tv-c-qty { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.cp-tv-empty { font-style: italic; color: #999; text-align: center; padding: 20px !important; }

/* Print scoping — only the document renders on paper. Everything else in the
   app (nav, toolbar, cancel button, other modals) is hidden. */
/* ===========================================================
   Purchase orders — one printable page per supplier
   =========================================================== */
.po-doc {
  background: #ffffff;
  color: #1d1d1d;
  padding: 32px 36px;
  border-radius: 4px;
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  margin-bottom: 18px;
  page-break-after: always;
}
.po-doc:last-child { page-break-after: auto; margin-bottom: 0; }
/* The sheet is white paper inside a claret modal, and the app's text colour
   is made for the modal. Everything on the paper reads black unless a rule
   below deliberately greys it. */
.po-doc, .po-doc * { color: #1d1d1d; }
.po-doc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid #572D2F;
}
.po-doc-brandmark {
  font-family: var(--font-display, serif);
  font-size: 20px;
  color: #572D2F;
  line-height: 1;
}
.po-doc-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-top: 6px;
}
.po-doc-head-right { font-size: 11px; line-height: 1.6; text-align: right; }
.po-doc-head-right strong { font-weight: 500; }

/* The address is the one thing on this sheet somebody acts on without
   reading the rest, so it is set apart from the header. */
.po-doc-address {
  border-left: 2px solid #572D2F;
  padding: 6px 0 6px 12px;
  margin-bottom: 16px;
  font-size: 11px;
  line-height: 1.5;
}
.po-doc-address-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
}
.po-doc-address strong { font-weight: 500; }

.po-doc-table { width: 100%; border-collapse: collapse; }
.po-doc-table thead th {
  background: #572D2F;
  color: #F9F9F6;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  text-align: left;
  padding: 7px 8px;
}
.po-doc-table thead th.po-doc-qty { text-align: right; }
.po-doc-table tbody td {
  border-bottom: 1px solid #eee;
  padding: 8px;
  vertical-align: top;
}
.po-doc-num { width: 24px; color: #999; font-variant-numeric: tabular-nums; }
.po-doc-img { width: 90px; }
.po-doc-img img { max-width: 80px; max-height: 60px; border: 1px solid #eee; display: block; }
.po-doc-ref { width: 80px; font-family: monospace; font-size: 10px; }
.po-doc-desc { min-width: 220px; }
.po-doc-desc strong { font-weight: 500; font-size: 12px; }
.po-doc-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(87, 45, 47, 0.08);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #572D2F;
  vertical-align: 1px;
}
.po-doc-brand { font-size: 10px; color: #555; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.po-doc-of { font-size: 10px; color: #888; margin-top: 2px; font-style: italic; }
.po-doc-body { font-size: 10.5px; color: #444; margin-top: 4px; line-height: 1.35; }
.po-doc-dims { width: 130px; font-size: 10.5px; color: #333; }
.po-doc-qty { width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
.po-doc-empty { font-style: italic; color: #999; text-align: center; padding: 20px !important; }
.po-doc-notes { margin-top: 14px; font-size: 10.5px; color: #444; line-height: 1.4; }

@media print {
  body * { visibility: hidden !important; }
  .cp-transport-doc, .cp-transport-doc *,
  .po-doc, .po-doc * { visibility: visible !important; }
  .po-doc {
    padding: 0 !important;
    background: #ffffff !important;
    color: #1d1d1d !important;
  }
  .po-doc-modal { max-height: none !important; overflow: visible !important; }
  .cp-transport-doc {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    padding: 0 !important;
    background: #ffffff !important;
    color: #1d1d1d !important;
  }
  .no-print { display: none !important; }
  .modal, .modal-card { position: static !important; padding: 0 !important; background: transparent !important; border: 0 !important; max-width: none !important; }
}

/* =========================================================================
   Production — listing editor palette (off-white section on chocolate app).
   Scoped to #prod-detail-view only. All prior claret-on-off-white styling
   inside the editor is neutralized so the palette flip is consistent.
   ========================================================================= */
#prod-detail-view {
  /* Local palette tokens — off-white surface, off-black text.
     No more chocolate accents inside the editor: every text reads black. */
  --astet-off-white: #F9F9F6;
  --astet-off-black: #1D1D1D;
  --astet-chocolate: #572D2F;

  background: var(--astet-off-white);
  color: var(--astet-off-black);
  /* Force plain Arial everywhere inside the editor — the app's serif
     display face reads too "editorial" against the white spreadsheet-y
     surface; Arial matches how tools like Excel/Numbers feel. */
  font-family: Arial, Helvetica, sans-serif;
  padding: 24px 28px 32px;
  border-radius: 8px;
  margin-top: 12px;
  position: relative;
}
#prod-detail-view * { font-family: inherit; }

/* Catch-all: everything inside the editor reads off-black by default. The
   app's global claret palette assumes a dark surface, so many selectors
   inherit color:var(--ink) (near-white) that becomes invisible on our new
   off-white background. Force the dark tone as the default and let a few
   specific selectors below (titles, chips) opt into chocolate or muted. */
#prod-detail-view,
#prod-detail-view * { color: var(--astet-off-black); }
#prod-detail-view input,
#prod-detail-view select,
#prod-detail-view textarea,
#prod-detail-view input::placeholder,
#prod-detail-view textarea::placeholder { color: var(--astet-off-black) !important; }
#prod-detail-view input::placeholder,
#prod-detail-view textarea::placeholder { opacity: 0.45; }
#prod-detail-view .muted,
#prod-detail-view .hint,
#prod-detail-view small { color: rgba(29,29,29,0.55) !important; }
/* Every text (headings, labels, table headers, etc.) reads off-black on the
   off-white surface. No more chocolate accents inside the editor. */
#prod-detail-view .prod-listing-title,
#prod-detail-view .prod-listing-project,
#prod-detail-view h1,
#prod-detail-view h2,
#prod-detail-view h3,
#prod-detail-view h4,
#prod-detail-view label,
#prod-detail-view .prod-side-head h3,
#prod-detail-view .prod-summary-block-title,
#prod-detail-view .prod-detail-panel-head,
#prod-detail-view .prod-tg-summary,
#prod-detail-view .prod-side-count,
#prod-detail-view .prod-detail-ref,
#prod-detail-view thead th { color: var(--astet-off-black) !important; }

/* Titles, subheads, metadata — chocolate. */
#prod-detail-view h1, #prod-detail-view h2, #prod-detail-view h3,
#prod-detail-view .prod-side-head h3,
#prod-detail-view .prod-summary-block-title {
  color: var(--astet-chocolate);
}
#prod-detail-view .prod-listing-project,
#prod-detail-view .prod-listing-title,
#prod-detail-view .prod-detail-panel-head,
#prod-detail-view .prod-tg-summary,
#prod-detail-view .prod-side-count,
#prod-detail-view label,
#prod-detail-view .muted,
#prod-detail-view .prod-detail-ref {
  color: var(--astet-chocolate);
}
#prod-detail-view .muted { opacity: 0.75; }

/* Body text (table cells, inputs, chips) — off-black. */
#prod-detail-view .prod-cell,
#prod-detail-view input,
#prod-detail-view select,
#prod-detail-view textarea,
#prod-detail-view td,
#prod-detail-view .prod-detail-name,
#prod-detail-view .prod-item-chip,
#prod-detail-view .prod-extra-chip {
  color: var(--astet-off-black);
}
#prod-detail-view input,
#prod-detail-view select,
#prod-detail-view textarea,
#prod-detail-view .prod-cell {
  background: rgba(29,29,29,0.03);
  border-color: rgba(29,29,29,0.14);
}
#prod-detail-view input:focus,
#prod-detail-view select:focus,
#prod-detail-view textarea:focus,
#prod-detail-view .prod-cell:focus {
  background: var(--astet-off-white);
  border-color: var(--astet-off-black);
  outline: none;
}
/* Transport groups / Extra charges / Cost & margin / Pricing / detail panel
   share the same off-white surface as the editor root; only their border
   separates them from the background, so the whole editor reads as one
   flat off-white surface partitioned by thin gray borders. */
#prod-detail-view .prod-side-card,
#prod-detail-view .prod-summary-block,
#prod-detail-view .prod-item-detail-panel {
  background: var(--astet-off-white);
  border: 1px solid rgba(29,29,29,0.28) !important;
  color: var(--astet-off-black);
}
#prod-detail-view .prod-side-card h3 { color: var(--astet-chocolate); }
#prod-detail-view .prod-detail-panel { background: transparent; }

/* Table lives on off-white; rows read as "floating" cards. */
#prod-detail-view .prod-items-table {
  border-collapse: separate;
  border-spacing: 0 6px;
}
#prod-detail-view .prod-items-table thead th {
  background: transparent;
  color: var(--astet-chocolate);
  border-bottom: 1px solid rgba(87,45,47,0.35);
  padding-bottom: 8px;
}
#prod-detail-view .prod-items-table tbody tr.prod-item-row {
  background: var(--astet-off-white);
  border-radius: 4px;
  transition: border-color .12s;
}
#prod-detail-view .prod-items-table tbody tr.prod-item-row td { background: var(--astet-off-white) !important; }
/* Thin gray borders around each item row — first/last cells carry the
   vertical borders so they don't stack on the border-spacing gaps. */
#prod-detail-view .prod-items-table tbody tr.prod-item-row td {
  border-top: 1px solid rgba(29,29,29,0.28) !important;
  border-bottom: 1px solid rgba(29,29,29,0.28) !important;
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
}
#prod-detail-view .prod-items-table tbody tr.prod-item-row td:first-child {
  border-left: 1px solid rgba(29,29,29,0.28) !important;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#prod-detail-view .prod-items-table tbody tr.prod-item-row td:last-child  {
  border-right: 1px solid rgba(29,29,29,0.28) !important;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
#prod-detail-view .prod-items-table tbody tr.prod-item-row:hover td { border-color: rgba(29,29,29,0.45) !important; }
/* Location header rows: transparent background so they blend into the
   off-white surface. Text is off-black like everything else. No borders
   so they read as a subtle heading, not a band. */
#prod-detail-view .prod-loc-row > td {
  background: transparent !important;
  color: var(--astet-off-black) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
#prod-detail-view .prod-loc-row .prod-loc-name,
#prod-detail-view .prod-loc-row .prod-loc-name-input,
#prod-detail-view .prod-loc-row .prod-loc-count,
#prod-detail-view .prod-loc-row .prod-loc-drag {
  background: transparent !important;
  color: var(--astet-off-black) !important;
}
#prod-detail-view .prod-loc-row .prod-loc-name-input:focus {
  background: rgba(0,0,0,0.04) !important;
}

/* Status band — horizontal chip in front of the REF cell. Horizontal so it
   sits above/beside REF and Item without crowding, and lets each row sit
   a couple of pixels shorter than a tall vertical band would. */
.prod-status-dot {
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 3px;
  border: 1px solid rgba(29,29,29,0.35);
  background: var(--status-color, rgba(160,160,160,0.4));
  cursor: pointer;
  vertical-align: middle;
  margin-right: 6px;
  padding: 0;
  transition: transform .1s;
}
.prod-status-dot:hover { transform: scale(1.06); }

/* Status picker popover — floats over everything. */
.prod-status-picker {
  position: fixed;
  z-index: 2000;
  background: var(--astet-off-white, #F9F9F6);
  color: var(--astet-off-black, #1d1d1d);
  border: 1px solid rgba(29,29,29,0.28);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  padding: 4px 0;
  max-height: 360px;
  overflow-y: auto;
}
.prod-status-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: inherit;
  text-align: left;
}
.prod-status-option:hover { background: rgba(87,45,47,0.08); }
.prod-status-option.is-current { background: rgba(87,45,47,0.12); font-weight: 500; }
.prod-status-option-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(29,29,29,0.25);
  flex-shrink: 0;
}
.prod-status-option-label { flex: 1; }

/* Floating action rail on the right margin (Add item / catalog / location). */
.prod-add-rail {
  position: fixed;
  top: calc(var(--app-header-h, 73px) + 120px);
  right: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--astet-chocolate, #572D2F);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  transition: all .18s ease;
}
.prod-add-rail-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--astet-chocolate, #572D2F);
  color: var(--astet-off-white, #F9F9F6);
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.prod-add-rail-btns { display: flex; flex-direction: column; gap: 6px; }
.prod-add-rail-btn {
  background: transparent;
  border: 1px solid rgba(249,249,246,0.35);
  color: #F9F9F6 !important; /* beat the #prod-detail-view * catch-all */
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s;
}
.prod-add-rail-btn:hover {
  background: #F9F9F6;
  color: #572D2F !important;
  border-color: #F9F9F6;
}
.prod-add-rail-toggle { color: #F9F9F6 !important; }
/* Collapsed state: only the "+" toggle shows. */
.prod-add-rail.is-collapsed {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.prod-add-rail.is-collapsed .prod-add-rail-btns { display: none; }
.prod-add-rail.is-collapsed .prod-add-rail-toggle { display: inline-flex; }
@media (max-width: 900px) {
  .prod-add-rail { right: 12px; top: auto; bottom: 24px; }
}

/* ============================================================
   Production editor — inputs, selects, and image placeholder
   ------------------------------------------------------------
   All form controls inside the editor use the same look as the
   status picker: white surface, black text, thin gray border.
   Native <option>s also get white/black so the OS dropdown
   matches instead of inheriting dark app colors.
   ============================================================ */
#prod-detail-view select,
#prod-detail-view input[type="text"],
#prod-detail-view input[type="number"],
#prod-detail-view input[type="url"],
#prod-detail-view input[type="date"],
#prod-detail-view input[type="email"],
#prod-detail-view textarea,
#prod-detail-view .prod-meta-select,
#prod-detail-view .prod-item-input {
  background: var(--astet-off-white) !important;
  color: var(--astet-off-black) !important;
  border: 1px solid rgba(29,29,29,0.28) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#prod-detail-view select {
  padding-right: 22px;
  /* Down-arrow drawn in SVG, off-black */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0 Z' fill='%231D1D1D'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 7px center !important;
  background-size: 8px 5px !important;
  background-color: var(--astet-off-white) !important;
}
#prod-detail-view select:hover,
#prod-detail-view input:hover,
#prod-detail-view textarea:hover {
  border-color: rgba(29,29,29,0.55) !important;
}
#prod-detail-view select:focus,
#prod-detail-view input:focus,
#prod-detail-view textarea:focus {
  outline: none !important;
  border-color: var(--astet-off-black) !important;
  box-shadow: 0 0 0 2px rgba(29,29,29,0.10) !important;
}
#prod-detail-view select option,
#prod-detail-view select optgroup {
  background: var(--astet-off-white) !important;
  color: var(--astet-off-black) !important;
}

/* Filters row above the editor table also uses the same look */
#prod-brand-filter,
#prod-status-filter,
.prod-filter-label .prod-meta-select {
  background: var(--astet-off-white) !important;
  color: var(--astet-off-black) !important;
  border: 1px solid rgba(29,29,29,0.28) !important;
}

/* Image placeholder — "Paste image (Ctrl+V) or click again to browse"
   text was white on off-white and invisible. Force black there. */
#prod-detail-view .prod-thumb-wrap.is-armed::after,
.prod-items-wrap .prod-thumb-wrap.is-armed::after {
  color: var(--astet-off-black, #1D1D1D) !important;
}

/* Empty image cell placeholder icon/label */
#prod-detail-view .prod-thumb.empty {
  color: var(--astet-off-black) !important;
  background: var(--astet-off-white) !important;
  border: 1px dashed rgba(29,29,29,0.35) !important;
}

/* ============================================================
   MORE dropdown (listing top actions)
   ============================================================ */
.prod-more-menu { position: relative; display: inline-block; }
.prod-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prod-more-caret { font-size: 0.8em; line-height: 1; }
.prod-more-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: var(--astet-off-white, #F9F9F6);
  color: var(--astet-off-black, #1D1D1D);
  border: 1px solid rgba(29,29,29,0.28);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  padding: 4px 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
}
.prod-more-dropdown.hidden { display: none; }
.prod-more-item {
  background: transparent;
  border: 0;
  color: var(--astet-off-black, #1D1D1D);
  text-align: left;
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}
.prod-more-item:hover { background: rgba(0,0,0,0.06); }
.prod-more-item.danger { color: #B00020; }
.prod-more-item.danger:hover { background: rgba(176,0,32,0.08); }

/* ============================================================
   Column-header tweaks: QTY sits over left-aligned numbers so
   the heading itself aligns left. Others remain right-aligned.
   ============================================================ */
#prod-detail-view .prod-items-table thead th.col-qty {
  text-align: left;
}
#prod-detail-view .prod-items-table td.col-qty {
  text-align: left;
}
#prod-detail-view .prod-items-table td.col-qty input {
  text-align: left;
}

/* ============================================================
   Item-row cells — "invisible input" look
   ------------------------------------------------------------
   Cells inside item rows drop their visible box entirely: no
   border, no fill, so the text sits directly on the off-white
   row. The input reveals itself only when the caret is inside
   it — a subtle 1px underline on focus, no boxed outline.
   ============================================================ */
#prod-detail-view .prod-items-table tbody .prod-cell,
#prod-detail-view .prod-items-table tbody input.prod-cell,
#prod-detail-view .prod-items-table tbody select.prod-cell,
#prod-detail-view .prod-items-table tbody textarea.prod-cell {
  background: transparent !important;
  color: var(--astet-off-black, #1D1D1D) !important;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  padding: 3px 4px !important;
  transition: background .1s, border-color .1s;
}
#prod-detail-view .prod-items-table tbody .prod-cell:hover {
  background: rgba(0,0,0,0.04) !important;
}
#prod-detail-view .prod-items-table tbody .prod-cell:focus {
  background: rgba(255,255,255,0.6) !important;
  border-color: rgba(29,29,29,0.55) !important;
  box-shadow: 0 0 0 2px rgba(29,29,29,0.08) !important;
  outline: none !important;
}
/* The select still needs its arrow visible, but on a transparent
   background — repaint over the earlier rule that forced off-white. */
#prod-detail-view .prod-items-table tbody select.prod-cell {
  background-color: transparent !important;
  padding-right: 18px !important;
}

/* ============================================================
   Extras asterisk on the price column — small, above baseline
   with a native tooltip on hover.
   ============================================================ */
.prod-price-star {
  color: var(--astet-off-black, #1D1D1D);
  font-weight: 700;
  cursor: help;
  margin-left: 2px;
  font-size: 0.85em;
}
.prod-price-star:hover { color: var(--astet-chocolate, #572D2F); }

/* ============================================================
   Larger item thumbnails
   ------------------------------------------------------------
   The image cell was 40×40 in a 48px column, so most of the row
   height (~58px) went to blank space around the picture. Bumped
   to 56×56 with a 62px column — fills the available vertical
   space without pushing row height, since the input padding
   already reserves that space.
   ============================================================ */
#prod-detail-view .prod-items-table .col-img { width: 62px !important; }
#prod-detail-view .prod-thumb,
#prod-detail-view .prod-thumb.empty,
#prod-detail-view .prod-thumb-wrap {
  width: 56px !important;
  height: 56px !important;
}

/* ============================================================
   Column headings — chocolate band with off-white text.
   Overrides the earlier transparent/off-black rule.
   ============================================================ */
#prod-detail-view .prod-items-table thead th {
  background: var(--astet-chocolate, #572D2F) !important;
  color: var(--astet-off-white, #F9F9F6) !important;
  border-bottom: 0 !important;
  padding: 8px 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}
#prod-detail-view .prod-items-table thead th:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
#prod-detail-view .prod-items-table thead th:last-child  { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

/* ============================================================
   Submissions module — top-level tabs, list, and detail modal
   ============================================================ */
.pc-toplvl-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}
.pc-toplvl-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
}
.pc-toplvl-tab:hover { color: var(--ink); }
.pc-toplvl-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--claret, var(--accent));
}

.pc-subs-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.pc-subs-filter {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 4px;
  font: inherit;
}
.pc-subs-list { display: flex; flex-direction: column; gap: 14px; }
.pc-subs-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

.pc-subs-tone-danger { color: var(--danger, #d05a5a); }
.pc-subs-tone-warn   { color: var(--warn, #E8B45A); }
.pc-subs-tone-accent { color: var(--accent, #C79662); }
.pc-subs-tone-muted  { color: var(--muted); }
.pc-subs-tone-ok     { color: var(--ok, #6EAA6E); }

/* Kanban board: three columns side-by-side. On narrow screens the board
   collapses into a horizontal scroll, so each column stays legible. */
.pc-subs-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.pc-subs-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pc-subs-col-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 12px;
}
.pc-subs-col-count {
  background: rgba(255,255,255,0.12);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
.pc-subs-col-body { display: flex; flex-direction: column; gap: 8px; }
.pc-subs-col-empty {
  padding: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  border: 1px dashed var(--line-soft);
  border-radius: 4px;
}

/* Card: one submission. Rounded rectangle with label, meta and the two
   D/A chips docked at the bottom. Click anywhere except the chips opens
   the detail modal. */
.pc-subs-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--muted);
  border-radius: 4px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .12s, border-color .12s, transform .05s;
}
.pc-subs-card:hover { background: rgba(255,255,255,0.06); }
.pc-subs-card:active { transform: translateY(1px); }
.pc-subs-card-danger { border-left-color: var(--danger, #d05a5a); }
.pc-subs-card-warn   { border-left-color: var(--warn, #E8B45A); }
.pc-subs-card-accent { border-left-color: var(--accent, #C79662); }
.pc-subs-card-ok     { border-left-color: var(--ok, #6EAA6E); }
.pc-subs-card-muted  { border-left-color: var(--muted); }

.pc-subs-card-project {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.pc-subs-card-label {
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pc-subs-card-meta { display: flex; justify-content: space-between; font-size: 11px; }
.pc-subs-card-reject {
  display: block;
  font-size: 10px;
  color: var(--danger, #d05a5a);
  font-style: italic;
}
.pc-subs-card-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-soft);
}
.pc-subs-card-state {
  margin-left: auto;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.pc-subs-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.pc-subs-chip-empty  { background: rgba(255,255,255,0.06); color: var(--muted); }
.pc-subs-chip-ok     { background: var(--ok, #6EAA6E); color: #fff; }
.pc-subs-chip-reject { background: var(--danger, #d05a5a); color: #fff; }
.pc-subs-chip-live {
  background: rgba(255,255,255,0.10);
  color: var(--ink);
  border: 1px dashed var(--warn, #E8B45A);
  cursor: pointer;
  transition: background .1s, transform .05s;
}
.pc-subs-chip-live:hover {
  background: var(--warn, #E8B45A);
  color: #1D1D1D;
  border-style: solid;
}
.pc-subs-chip-live:active { transform: scale(0.94); }

/* Sent strip lives below the board — collapsed by default, click to open. */
.pc-subs-sent-strip {
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}
.pc-subs-sent-toggle {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.pc-subs-sent-toggle:hover { color: var(--ink); }
.pc-subs-sent-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .pc-subs-board { grid-template-columns: 1fr; }
}

/* ============================================================
   Item Link field — text input with a small ↗ open button
   ============================================================ */
.prod-link-cell { display: flex; align-items: center; gap: 6px; }
.prod-link-cell input { flex: 1; min-width: 0; }
.prod-link-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--accent, #C79662);
  border: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1;
}
.prod-link-open:hover {
  background: var(--accent, #C79662);
  color: #1D1D1D;
}

/* ============================================================
   Client paid — meta-line input in the listing header
   ============================================================ */
.prod-client-paid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prod-meta-input {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  width: 90px;
  text-align: right;
}
.prod-meta-input:focus {
  outline: none;
  border-color: var(--accent, #C79662);
}
.prod-client-remaining { font-size: 11px; }

/* Summary block extras — payment progress bar */
.prod-summary-paid-full  { color: var(--ok, #6EAA6E); }
.prod-summary-paid-partial strong { color: var(--warn, #E8B45A); }
.prod-summary-paid-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin: 4px 0 0;
  overflow: hidden;
}
.prod-summary-paid-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ok, #6EAA6E), var(--accent, #C79662));
  transition: width .2s ease;
}

/* ============================================================
   Project Control detail view — production palette
   ------------------------------------------------------------
   Same off-white + off-black + chocolate accents as the
   Production editor. Phase colors (colorForPhase) survive
   because they're applied inline via style="background:…".
   ============================================================ */
#pc-detail-view {
  --astet-off-white: #F9F9F6;
  --astet-off-black: #1D1D1D;
  --astet-chocolate: #572D2F;
  background: var(--astet-off-white);
  color: var(--astet-off-black);
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 8px;
  padding: 24px 28px 32px;
  margin-top: 12px;
}
#pc-detail-view * { font-family: inherit; }

/* Catch-all: everything reads as off-black by default. Elements that
   deliberately sit on a colored surface (gantt header, colored bars, etc.)
   opt out further down with more specific rules. */
#pc-detail-view,
#pc-detail-view * {
  color: var(--astet-off-black) !important;
}

/* Placeholders in inputs stay legible-but-secondary. */
#pc-detail-view input::placeholder,
#pc-detail-view textarea::placeholder {
  color: rgba(29,29,29,0.35) !important;
}

/* Any inner button/link retains chocolate accent hover if it wants,
   but the base color is off-black — set explicitly to override the
   dark-theme defaults. */
#pc-detail-view .link,
#pc-detail-view .ghost {
  color: var(--astet-off-black) !important;
}
#pc-detail-view .link:hover,
#pc-detail-view .ghost:hover {
  color: var(--astet-chocolate) !important;
}

/* Rescue: elements that live on a chocolate/dark surface keep off-white text. */
#pc-detail-view .gantt-header,
#pc-detail-view .gantt-header *,
#pc-detail-view .gantt-months,
#pc-detail-view .gantt-months *,
#pc-detail-view .gantt-day,
#pc-detail-view .gantt-day *,
#pc-detail-view .gantt-month {
  color: var(--astet-off-white) !important;
}

/* Rescue: gantt bar labels sit on the bar's colored background — keep them
   readable in whatever contrast the bar's color demands. Default off-white. */
#pc-detail-view .gantt-bar,
#pc-detail-view .gantt-bar-label {
  color: var(--astet-off-white) !important;
}

/* Tab strip — inactive tabs muted, active tab chocolate accent. */
#pc-detail-view .pc-tab {
  color: rgba(29,29,29,0.55) !important;
}
#pc-detail-view .pc-tab.is-active {
  color: var(--astet-chocolate) !important;
}
#pc-detail-view .pc-tab {
  background: transparent;
  border-bottom: 2px solid transparent;
}
#pc-detail-view .pc-tab.is-active {
  border-bottom-color: var(--astet-chocolate);
}

/* Inputs/textareas inside the pc detail — same "invisible" feel as prod */
#pc-detail-view input[type="text"],
#pc-detail-view input[type="number"],
#pc-detail-view input[type="date"],
#pc-detail-view input[type="url"],
#pc-detail-view input[type="email"],
#pc-detail-view textarea,
#pc-detail-view select {
  background: #ffffff;
  color: var(--astet-off-black);
  border: 1px solid rgba(29,29,29,0.28);
  border-radius: 3px;
}
#pc-detail-view input:focus,
#pc-detail-view textarea:focus,
#pc-detail-view select:focus {
  outline: none;
  border-color: var(--astet-chocolate);
  box-shadow: 0 0 0 2px rgba(87,45,47,0.12);
}

/* Phase cards on the phases panel: white surface, thin border. Phase-type
   color still lives on the left accent stripe or wherever it was before. */
#pc-detail-view .pc-phase-node-card,
#pc-detail-view .phase-card {
  background: #ffffff;
  color: var(--astet-off-black);
  border: 1px solid rgba(29,29,29,0.20);
  border-radius: 6px;
}
#pc-detail-view .pc-phase-node-children {
  /* No nesting anymore — collapse any legacy children container */
  margin-left: 0 !important;
  border-left: 0 !important;
  padding-left: 0 !important;
}

/* Gantt palette: chocolate header strip, off-white body, dark day cells. */
#pc-detail-view .gantt-header,
#pc-detail-view .gantt-header-cols,
#pc-detail-view .gantt-months {
  background: var(--astet-chocolate);
  color: var(--astet-off-white);
}
#pc-detail-view .gantt-month {
  color: var(--astet-off-white);
  border-right: 1px solid rgba(255,255,255,0.15);
}
#pc-detail-view .gantt-day {
  background: var(--astet-chocolate);
  color: var(--astet-off-white);
  border-right: 1px solid rgba(255,255,255,0.10);
}
#pc-detail-view .gantt-day.is-weekend { background: rgba(0,0,0,0.15); }
#pc-detail-view .gantt-day.is-today { background: rgba(255,255,255,0.20); font-weight: 700; }
#pc-detail-view .gantt-body { background: var(--astet-off-white); }
#pc-detail-view .gantt-row {
  border-bottom: 1px solid rgba(29,29,29,0.10);
}
#pc-detail-view .gantt-row-label {
  background: var(--astet-off-white);
  color: var(--astet-off-black);
  border-right: 1px solid rgba(29,29,29,0.15);
}
#pc-detail-view .gantt-row-name { color: var(--astet-off-black); }
#pc-detail-view .gantt-row-sub { color: rgba(29,29,29,0.55); }
/* Per-day grid lines in the body — placed at the END of each day cell so
   they line up exactly with the header's border-right on each .gantt-day.
   The CSS var --gantt-day-w is set inline on .gantt-wrap by the renderer
   so it always matches the header's real day width. */
#pc-detail-view .gantt-row-track {
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--gantt-day-w, 24px) - 1px),
      rgba(29,29,29,0.10) calc(var(--gantt-day-w, 24px) - 1px),
      rgba(29,29,29,0.10) var(--gantt-day-w, 24px)
    ),
    var(--astet-off-white);
}

/* Visible horizontal scrollbar on the gantt — the browser default was
   transparent-on-transparent against the off-white surface, so it read as
   "no scroll possible". Chocolate thumb on a light track, ~10px tall. */
#pc-detail-view .gantt-scroll {
  scrollbar-color: var(--astet-chocolate) rgba(29,29,29,0.08);
  scrollbar-width: thin;
}
#pc-detail-view .gantt-scroll::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: rgba(29,29,29,0.06);
}
#pc-detail-view .gantt-scroll::-webkit-scrollbar-track {
  background: rgba(29,29,29,0.06);
  border-radius: 6px;
}
#pc-detail-view .gantt-scroll::-webkit-scrollbar-thumb {
  background: var(--astet-chocolate);
  border-radius: 6px;
  border: 2px solid var(--astet-off-white);
}
#pc-detail-view .gantt-scroll::-webkit-scrollbar-thumb:hover {
  background: #3F2123; /* claret-deep */
}
#pc-detail-view .gantt-scroll::-webkit-scrollbar-corner {
  background: rgba(29,29,29,0.06);
}
#pc-detail-view .gantt-today-line { background: var(--astet-chocolate); }

/* Interactive bar: cursor cues + edge handles. */
#pc-detail-view .gantt-bar {
  cursor: grab;
  user-select: none;
  transition: box-shadow .12s;
  position: relative;
}
#pc-detail-view .gantt-bar:active { cursor: grabbing; }
#pc-detail-view .gantt-bar:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.gantt-bar-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
  background: rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity .12s;
}
.gantt-bar:hover .gantt-bar-handle,
.gantt-bar.is-dragging .gantt-bar-handle {
  opacity: 1;
}
.gantt-bar-handle-l { left: 0;  border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.gantt-bar-handle-r { right: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
#pc-detail-view .gantt-row-track { cursor: crosshair; }
#pc-detail-view .gantt-row-track .gantt-bar { cursor: grab; }

/* ============================================================
   Phase card polish inside Project Control detail view
   ------------------------------------------------------------
   - Status dots stack vertically at the far left with a thin
     dark border so they read even when unfilled.
   - Phase name looks like plain off-black text; only shows an
     input-like border on hover/focus (so clicking on it is
     still the entry point to editing).
   ============================================================ */

/* Status dots: switch from horizontal row to vertical column */
#pc-detail-view .status-stepper {
  align-items: flex-start;
  flex-direction: row;
  gap: 6px;
}
#pc-detail-view .status-stepper .status-dots {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px;
  align-items: flex-start;
}
#pc-detail-view .status-stepper .step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  padding: 0;
  border: 1.5px solid rgba(29,29,29,0.75) !important;
  background: transparent;
  cursor: pointer;
  transition: transform .1s, background .12s;
}
#pc-detail-view .status-stepper .step-dot:hover { transform: scale(1.15); }
#pc-detail-view .status-stepper .step-dot.filled.step-done      { background: var(--ok, #6EAA6E); }
#pc-detail-view .status-stepper .step-dot.filled.step-delivered { background: var(--warn, #E8B45A); }
#pc-detail-view .status-stepper .step-dot.filled.step-approved  { background: var(--astet-chocolate); }
#pc-detail-view .status-stepper .status-label {
  align-self: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--astet-off-black);
}

/* Phase name input — reads as plain text until hovered/focused */
#pc-detail-view .phase-title-input {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--astet-off-black) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 4px 6px !important;
  border-radius: 3px !important;
  transition: background .12s, border-color .12s;
  box-shadow: none !important;
  width: 100%;
}
#pc-detail-view .phase-title-input::placeholder {
  color: var(--astet-off-black) !important;
  opacity: 1 !important;
  font-weight: 500;
}
#pc-detail-view .phase-title-input:hover {
  background: rgba(0,0,0,0.03) !important;
}
#pc-detail-view .phase-title-input:focus {
  background: #ffffff !important;
  border-color: rgba(29,29,29,0.28) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(87,45,47,0.10) !important;
}

/* Submission modal */
.subm-modal { display: flex; flex-direction: column; gap: 14px; }
.subm-meta { display: flex; gap: 12px; align-items: center; }
.subm-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.subm-status-muted  { background: rgba(255,255,255,0.08); color: var(--muted); }
.subm-status-warn   { background: rgba(232,180,90,0.15); color: var(--warn, #E8B45A); }
.subm-status-ok     { background: rgba(110,170,110,0.15); color: var(--ok, #6EAA6E); }
.subm-status-accent { background: rgba(199,150,98,0.15); color: var(--accent, #C79662); }
.subm-rejection {
  padding: 8px 12px;
  border-left: 3px solid var(--danger, #d05a5a);
  background: rgba(208,90,90,0.08);
  color: var(--ink);
  border-radius: 3px;
  font-size: 13px;
}
.subm-workflow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.subm-approval {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
}
.subm-approval-approved { border-color: var(--ok, #6EAA6E); }
.subm-approval-rejected { border-color: var(--danger, #d05a5a); }
.subm-approval-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.subm-approval-state {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 3px;
}
.subm-approval-state-approved { background: rgba(110,170,110,0.15); color: var(--ok, #6EAA6E); }
.subm-approval-state-rejected { background: rgba(208,90,90,0.15); color: var(--danger, #d05a5a); }
.subm-approval-state-pending  { background: rgba(255,255,255,0.06); color: var(--muted); }
.subm-approval-body { font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.subm-approval-locked { font-size: 11px; font-style: italic; }
.subm-approval-actions { display: flex; gap: 6px; }
.subm-approval-actions button { padding: 5px 10px; font-size: 12px; }

.subm-actions-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
}
.subm-revert-group { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.subm-revert-group select {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 3px;
}

.subm-history summary { cursor: pointer; font-weight: 500; padding: 4px 0; }
.subm-hist-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.subm-hist-row {
  display: grid;
  grid-template-columns: 130px 130px 120px 1fr;
  gap: 8px;
  font-size: 11px;
  padding: 3px 0;
  border-bottom: 1px dotted rgba(255,255,255,0.05);
}

@media (max-width: 720px) {
  .subm-workflow { grid-template-columns: 1fr; }
}

/* ============================================================
   Chocolate-background chips inside Project Control detail
   ------------------------------------------------------------
   Every chip whose background is claret/chocolate needs its text
   forced to off-white — the pc-detail-view catch-all paints
   everything off-black by default. Covers project-lead chips at
   the top and phase-assignee "is-lead" chips inside the cards.
   ============================================================ */
#pc-detail-view .pc-proj-lead-chip,
#pc-detail-view .pc-proj-lead-chip *,
#pc-detail-view .phase-assignee-chip.is-lead,
#pc-detail-view .phase-assignee-chip.is-lead * {
  color: var(--astet-off-white, #F9F9F6) !important;
}

/* Chevron for the phase-card expand button — matches production items
   and the project calendar toggles. */
#pc-detail-view .phase-expand {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  font: inherit;
}
#pc-detail-view .phase-expand-chevron {
  display: inline-block;
  transition: transform .15s ease;
  font-size: 12px;
  line-height: 1;
  color: var(--astet-off-black);
}
#pc-detail-view .phase-expand.is-open .phase-expand-chevron {
  transform: rotate(90deg);
}

/* Project name + Project info button share a row */
#pc-detail-view .pc-proj-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#pc-detail-view .pc-proj-info-btn {
  background: transparent;
  border: 1px solid rgba(29,29,29,0.28);
  color: var(--astet-off-black, #1D1D1D) !important;
  padding: 5px 12px;
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
#pc-detail-view .pc-proj-info-btn:hover {
  background: var(--astet-chocolate);
  color: var(--astet-off-white) !important;
  border-color: var(--astet-chocolate);
}

/* ============================================================
   Ranged assignees picker (Assign people to phase modal)
   ------------------------------------------------------------
   The app modal-card is chocolate; this picker plants an
   off-white "sheet" inside it. The modal is widened so the row
   (checkbox + name + from + to + copy) fits on one line.
   ============================================================ */
.modal-card:has(.phase-team-picker-ranged) {
  max-width: 720px !important;
  background: var(--astet-off-white, #F9F9F6) !important;
  color: var(--astet-off-black, #1D1D1D) !important;
}
.modal-card:has(.phase-team-picker-ranged) #modal-title,
.modal-card:has(.phase-team-picker-ranged) h3,
.modal-card:has(.phase-team-picker-ranged) p,
.modal-card:has(.phase-team-picker-ranged) p * {
  color: var(--astet-off-black, #1D1D1D) !important;
}
.modal-card:has(.phase-team-picker-ranged) .phase-team-search {
  background: #ffffff !important;
  color: var(--astet-off-black, #1D1D1D) !important;
  border: 1px solid rgba(29,29,29,0.28) !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  font: inherit;
  font-size: 13px;
}
/* Save and Cancel are styled for the chocolate modal, so on this light one
   they came out off-white on off-white: present, clickable, invisible. */
.modal-card:has(.phase-team-picker-ranged) #modal-cancel,
.modal-card:has(.phase-team-picker-ranged) #modal-ok {
  color: var(--astet-off-black, #1D1D1D) !important;
  border-bottom-color: rgba(29, 29, 29, 0.45) !important;
}
.modal-card:has(.phase-team-picker-ranged) #modal-cancel:hover,
.modal-card:has(.phase-team-picker-ranged) #modal-ok:hover {
  border-bottom-color: var(--astet-off-black, #1D1D1D) !important;
}

.phase-team-picker-ranged {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  background: var(--astet-off-white, #F9F9F6);
  border: 1px solid rgba(29,29,29,0.15);
  border-radius: 4px;
  padding: 4px;
  max-height: 55vh;
  overflow-y: auto;
}
.phase-team-row {
  display: grid;
  grid-template-columns: 22px minmax(140px, 1fr) 130px 130px 32px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 3px;
  color: var(--astet-off-black, #1D1D1D) !important;
  background: var(--astet-off-white, #F9F9F6);
}
.phase-team-row:hover { background: rgba(29,29,29,0.05); }
.phase-team-check {
  display: contents !important; /* let the checkbox + span sit in the row grid */
  color: var(--astet-off-black, #1D1D1D) !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
}
.phase-team-check input {
  margin: 0;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  padding: 0 !important;
  appearance: auto;
  -webkit-appearance: checkbox;
  box-sizing: border-box;
}
.phase-team-check span {
  color: var(--astet-off-black, #1D1D1D) !important;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phase-team-dates {
  display: contents !important;   /* each date input sits in its own grid cell */
}
.phase-team-dates input[type="date"] {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid transparent !important;
  border-radius: 3px;
  background: transparent !important;
  color: var(--astet-off-black, #1D1D1D) !important;
  width: 100%;
  box-sizing: border-box;
  transition: background .1s, border-color .1s;
  font-size: 12px;
}
.phase-team-dates input[type="date"]:hover {
  background: rgba(29,29,29,0.05) !important;
}
.phase-team-dates input[type="date"]:focus {
  outline: none;
  background: #ffffff !important;
  border-color: rgba(29,29,29,0.28) !important;
}
.phase-team-dates .muted { display: none; }
.phase-team-copy {
  background: transparent;
  border: 1px solid rgba(29,29,29,0.28);
  color: var(--astet-off-black, #1D1D1D) !important;
  padding: 3px 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  width: 30px;
}
.phase-team-copy:hover {
  background: var(--astet-chocolate);
  color: var(--astet-off-white) !important;
  border-color: var(--astet-chocolate);
}

/* ============================================================
   Project Calendar footer row (% unassigned per column)
   ============================================================ */
#project-calendar-view .projcal-footer-row td {
  border-top: 2px solid rgba(29,29,29,0.15) !important;
}
#project-calendar-view .projcal-footer-label {
  padding: 6px 12px !important;
  font-size: 11px !important;
  vertical-align: middle;
}
#project-calendar-view .projcal-footer-cell {
  vertical-align: middle;
  padding: 4px 0 !important;
  background: var(--astet-off-white) !important;
  text-align: center;
}
#project-calendar-view .projcal-footer-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
#project-calendar-view .projcal-footer-pct {
  font-weight: 700;
  font-size: 13px;
  color: var(--pct-tone, var(--astet-off-black)) !important;
}
#project-calendar-view .projcal-footer-count {
  font-size: 9px;
  letter-spacing: 0.06em;
}

/* Phase bar variant when a phase has an open revision — overlay a
   cross-hatch on top of its tone. Different pattern from the overrun
   (which is single-direction 45° stripes) so the two situations read
   as visually distinct. */
#project-calendar-view .pers-block-phase.is-in-revision {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.30) 0 3px,
      transparent 3px 8px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(29,29,29,0.20) 0 3px,
      transparent 3px 8px
    ) !important;
}

/* ============================================================
   Overrun (hatched) block — Project Calendar phase rows AND
   Project Control Gantt bars. Same visual language across both:
   diagonal stripes in the phase's tone so the "late" portion of
   a bar reads as a distinct texture without changing hue.
   ============================================================ */
#project-calendar-view .pers-block-overrun {
  --tone: var(--overrun-tone, rgba(199,150,98,0.6));
  background:
    repeating-linear-gradient(
      -45deg,
      var(--tone) 0 4px,
      rgba(255,255,255,0.5) 4px 8px
    ) !important;
  opacity: 0.85;
}
#pc-detail-view .gantt-bar-overrun {
  position: absolute;
  top: 6px;
  height: 22px;
  border-radius: 3px;
  --tone: var(--overrun-tone, rgba(199,150,98,0.6));
  background:
    repeating-linear-gradient(
      -45deg,
      var(--tone) 0 5px,
      rgba(29,29,29,0.10) 5px 10px
    );
  opacity: 0.75;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(29,29,29,0.15);
}

/* ============================================================
   Project Specifications tab
   ============================================================ */
.pc-specs-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pc-specs-table-wrap {
  border: 1px solid rgba(29,29,29,0.20);
  border-radius: 6px;
  overflow-x: auto;
  background: var(--astet-off-white, #F9F9F6);
}
.pc-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pc-specs-table thead th,
#pc-detail-view .pc-specs-table thead th,
#pc-detail-view .pc-specs-table thead th * {
  background: var(--astet-chocolate, #572D2F);
  color: var(--astet-off-white, #F9F9F6) !important;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  letter-spacing: 0.04em;
  font-size: 11px;
  text-transform: uppercase;
}
.pc-specs-table thead th:first-child { border-top-left-radius: 5px; }
.pc-specs-table thead th:last-child  { border-top-right-radius: 5px; }
.pc-specs-table tbody tr {
  border-top: 1px solid rgba(29,29,29,0.10);
}
.pc-specs-table tbody tr:hover {
  background: rgba(29,29,29,0.03);
}
.pc-specs-col-supplier   { width: 18%; }
.pc-specs-col-items      { width: 32%; }
.pc-specs-col-pct        { width: 100px; }
.pc-specs-col-comments   { width: auto; min-width: 160px; }
.pc-specs-col-claim      { width: 130px; }
.pc-specs-col-actions    { width: 32px; }
.pc-specs-table td { padding: 4px 6px; vertical-align: middle; }
.pc-specs-cell {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 4px 6px;
  font: inherit;
  color: var(--astet-off-black, #1D1D1D) !important;
  transition: background .12s, border-color .12s;
}
.pc-specs-cell:hover { background: rgba(29,29,29,0.05); }
.pc-specs-cell:focus {
  background: #ffffff;
  border-color: rgba(29,29,29,0.35);
  outline: none;
  box-shadow: 0 0 0 2px rgba(87,45,47,0.10);
}
.pc-specs-cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.pc-specs-claim {
  display: flex;
  flex-direction: row;   /* override the global `label { flex-direction: column }` */
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  min-height: 28px;   /* matches the input row height so it centers cleanly */
  line-height: 1;
  text-transform: none;   /* undo global label uppercase */
  letter-spacing: 0;
  font-weight: 400;
  color: var(--astet-off-black);
}
.pc-specs-claim input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
}
.pc-specs-claim-date {
  color: var(--astet-off-black, #1D1D1D);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.pc-specs-claim-date .muted { line-height: 1; }
.pc-specs-empty {
  text-align: center;
  padding: 24px;
  color: rgba(29,29,29,0.55) !important;
  font-style: italic;
}
.pc-specs-actions button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
}

/* ============================================================
   My Time (Vacations view) — production palette
   ============================================================ */
#vacations-view {
  --astet-off-white: #F9F9F6;
  --astet-off-black: #1D1D1D;
  --astet-chocolate: #572D2F;
  background: var(--astet-off-white);
  color: var(--astet-off-black);
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 8px;
  padding: 24px 28px 32px;
  margin-top: 12px;
}
#vacations-view * { font-family: inherit; }
#vacations-view,
#vacations-view * { color: var(--astet-off-black) !important; }
#vacations-view input::placeholder,
#vacations-view textarea::placeholder {
  color: rgba(29,29,29,0.35) !important;
}
#vacations-view input,
#vacations-view select,
#vacations-view textarea {
  background: #ffffff;
  color: var(--astet-off-black);
  border: 1px solid rgba(29,29,29,0.28);
  border-radius: 3px;
}
#vacations-view input:focus,
#vacations-view select:focus,
#vacations-view textarea:focus {
  outline: none;
  border-color: var(--astet-chocolate);
  box-shadow: 0 0 0 2px rgba(87,45,47,0.12);
}
#vacations-view h1,
#vacations-view h2,
#vacations-view h3,
#vacations-view h4,
#vacations-view label {
  color: var(--astet-off-black) !important;
}
#vacations-view .card-head h2 { color: var(--astet-off-black) !important; }
/* Primary buttons here are text-only with an underline (no filled background),
   so light text was painting off-white on the off-white sheet — the Request
   button simply vanished. Chocolate keeps it readable and marks it as the CTA
   against the off-black links around it; the underline follows via currentColor. */
#vacations-view .primary,
#vacations-view .primary * { color: var(--astet-chocolate) !important; }
#vacations-view .link,
#vacations-view .ghost { color: var(--astet-off-black) !important; }
#vacations-view .link:hover,
#vacations-view .ghost:hover { color: var(--astet-chocolate) !important; }

/* ============================================================
   Project Calendar — production palette
   ============================================================ */
#project-calendar-view {
  --astet-off-white: #F9F9F6;
  --astet-off-black: #1D1D1D;
  --astet-chocolate: #572D2F;
  background: var(--astet-off-white);
  color: var(--astet-off-black);
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 8px;
  padding: 24px 28px 32px;
  margin-top: 12px;
}
#project-calendar-view * { font-family: inherit; }
#project-calendar-view,
#project-calendar-view * { color: var(--astet-off-black) !important; }
#project-calendar-view input::placeholder,
#project-calendar-view textarea::placeholder {
  color: rgba(29,29,29,0.35) !important;
}
#project-calendar-view input,
#project-calendar-view select,
#project-calendar-view textarea {
  background: #ffffff;
  color: var(--astet-off-black);
  border: 1px solid rgba(29,29,29,0.28);
  border-radius: 3px;
}
#project-calendar-view .link,
#project-calendar-view .ghost { color: var(--astet-off-black) !important; }
#project-calendar-view .link:hover,
#project-calendar-view .ghost:hover { color: var(--astet-chocolate) !important; }
/* Wrap owns both scroll axes now. The header rows are sticky-top so the
   day/week/month labels + the group row stay in view while the body
   scrolls vertically; the pers-name-col already stays sticky-left.
   Height is capped to the viewport so the tab, filters and horizontal
   scrollbar remain visible even on very long calendars. */
#project-calendar-view .projcal-wrap {
  overflow-x: auto;
  overflow-y: auto;
  /* Reserve room for the app header, calendar toolbar, hint line and
     the horizontal scrollbar at the bottom of the wrap. The result is
     a shorter list on entry so the user always sees the horizontal
     scroll and only scrolls the wrap vertically for more projects. */
  max-height: calc(100vh - 320px);
  border-radius: 6px;
  scrollbar-color: var(--astet-chocolate) rgba(29,29,29,0.08);
  scrollbar-width: thin;
}
/* Sticky thead. Each th is its own sticky element with a solid off-white
   background. The two rows use adjacent top offsets — no vertical gap. */
#project-calendar-view .projcal thead th {
  position: sticky;
  z-index: 6;
  background: var(--astet-off-white) !important;
}
/* First thead row (month / quarter / week groups) is 32px tall including
   its border-bottom. It sits flush at the top of the scrolling wrap. */
#project-calendar-view .projcal thead tr:first-child th {
  top: 0;
  height: 32px;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid var(--astet-off-white) !important;
  /* Fine dark line drawn INSIDE the cell via inset shadow so no
     transparent pixel can appear where a border would sit. */
  box-shadow: inset 0 -1px 0 0 rgba(29,29,29,0.22);
}
/* Second thead row (day / week / month labels) starts at 32px — flush
   with the bottom of the first row — and paints a subtle drop shadow
   downward so the entire header reads as a raised strip over the body. */
#project-calendar-view .projcal thead tr:nth-child(2) th {
  top: 32px;
  border-top: 0 !important;
  /* Drop shadow: outer downward shadow gives the raised feel; the inner
     top shadow acts as a filler line so there is definitely no crack. */
  box-shadow:
    inset 0 1px 0 0 var(--astet-off-white),
    0 6px 10px -4px rgba(29,29,29,0.35);
}
/* Corner cell: sticky in both axes so PROJECT label stays anchored while
   the user scrolls either direction. */
#project-calendar-view .projcal thead .pers-name-col {
  z-index: 8 !important;
  position: sticky !important;
  left: 0 !important;
}
#project-calendar-view .projcal thead .projcal-group-corner {
  z-index: 8 !important;
  position: sticky !important;
  left: 0 !important;
}
#project-calendar-view .projcal-wrap::-webkit-scrollbar {
  height: 12px;
  background: rgba(29,29,29,0.06);
}
#project-calendar-view .projcal-wrap::-webkit-scrollbar-track {
  background: rgba(29,29,29,0.06);
  border-radius: 6px;
}
#project-calendar-view .projcal-wrap::-webkit-scrollbar-thumb {
  background: var(--astet-chocolate);
  border-radius: 6px;
  border: 2px solid var(--astet-off-white);
}
#project-calendar-view .projcal-wrap::-webkit-scrollbar-thumb:hover {
  background: #3F2123;
}
/* Ditch the global .projcal `table-layout: fixed` for this view — it took
   widths from the first thead row, which is the month/quarter group row
   with colspan cells, so the per-column widths declared inline in the
   day/week/month row were ignored. Auto-layout + explicit width+min-width
   on each th/td gets the layout right. */
#project-calendar-view .projcal {
  table-layout: auto !important;
  min-width: max-content;
}
#project-calendar-view .projcal th,
#project-calendar-view .projcal td {
  box-sizing: border-box;
}

/* All thead cells now on off-white with off-black text. Chocolate reads
   too dark for the "everything off-white" look Joaquin asked for. */
#project-calendar-view .projcal thead th,
#project-calendar-view .projcal thead th *,
#project-calendar-view .projcal thead .pers-name-col,
#project-calendar-view .projcal thead .pers-name-col *,
#project-calendar-view .projcal thead .pers-day-head,
#project-calendar-view .projcal thead .pers-day-head *,
#project-calendar-view .projcal .projcal-head,
#project-calendar-view .projcal .projcal-head * {
  background: var(--astet-off-white) !important;
  color: var(--astet-off-black) !important;
}

/* Sticky first column ("PROJECT") on body rows — off-white with off-black
   text. Each project row gets a subtle shadow to its right so the rail
   feels raised above the calendar body. */
#project-calendar-view .projcal tbody .pers-name-col,
#project-calendar-view .projcal tbody .pers-name-col * {
  background: var(--astet-off-white) !important;
  color: var(--astet-off-black) !important;
}
#project-calendar-view .projcal tbody .pers-name-col {
  border-bottom: 1px solid rgba(29,29,29,0.10) !important;
  position: sticky;
  left: 0;
  z-index: 5;
  box-shadow: none !important;
}
/* Rail shadow as an ::after inside the sticky column, so it paints on
   top of whichever next td has an opaque background (off-white body,
   gray project span, subhead spacer's tint, etc.). box-shadow on a
   sticky cell gets outweighed by opaque neighbors; this pseudo doesn't. */
#project-calendar-view .projcal tbody .pers-name-col::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 10px;
  background: linear-gradient(
    to right,
    rgba(29,29,29,0.25),
    rgba(29,29,29,0.10) 40%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 6;
}
/* Subhead body cells (per-column now, so weekend/holiday/today tints
   from .pers-day rules apply just like on project/phase rows). Give
   them a soft gray wash so the subhead reads as a "grouping" strip
   without hiding the today band or weekend/holiday markers. */
#project-calendar-view .projcal-subhead-row td.pers-day {
  background: rgba(29,29,29,0.06) !important;
}
#project-calendar-view .projcal-subhead-row td.pers-day.is-weekend {
  background: rgba(29,29,29,0.10) !important;
}
#project-calendar-view .projcal-subhead-row td.pers-day.is-holiday {
  background: rgba(199,150,98,0.16) !important;
}
#project-calendar-view .projcal .projcal-row .projcal-toggle {
  color: var(--astet-off-black) !important;
}
#project-calendar-view .projcal .projcal-phase-row .pers-name-col,
#project-calendar-view .projcal .projcal-phase-row .pers-name-col * {
  background: var(--astet-off-white) !important;
  color: rgba(29,29,29,0.60) !important;
}

/* Chevron toggle — same rotating-caret pattern used by production items. */
#project-calendar-view .projcal-toggle,
#project-calendar-view .projcal-sub-toggle {
  background: transparent;
  border: 0;
  padding: 4px 6px 4px 0;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#project-calendar-view .projcal-chevron {
  display: inline-block;
  transition: transform .15s ease;
  font-size: 11px;
  line-height: 1;
  color: var(--astet-off-black);
}
#project-calendar-view .projcal-toggle.is-open .projcal-chevron,
#project-calendar-view .projcal-sub-toggle.is-open .projcal-chevron {
  transform: rotate(90deg);
}

/* Body of the calendar (day cells): keep vertical dividers between
   columns but no horizontal separators inside the body — no lines between
   phases, and no line between a project/subhead row and its own phases. */
#project-calendar-view .projcal td.pers-day {
  background: var(--astet-off-white) !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
  border-right: 1px solid rgba(29,29,29,0.08) !important;
}
#project-calendar-view .projcal tbody .pers-name-col {
  border-bottom: 0 !important;
  border-top: 0 !important;
}
/* Single grouping line: a border-top on every project-row / subhead-row
   / footer-row that isn't first. That one line does the double duty of
   closing the previous group and opening the next — no border-bottom
   anywhere in the body, so the last phase of a project flows straight
   into the next project's header line. */
#project-calendar-view .projcal .projcal-project-row:not(:first-child) td,
#project-calendar-view .projcal .projcal-subhead-row:not(:first-child) td,
#project-calendar-view .projcal .projcal-footer-row td {
  border-top: 1px solid rgba(29,29,29,0.18) !important;
}
/* Same vertical rule in the header row so the day-of-week + number
   labels sit inside their own cell visually. */
#project-calendar-view .projcal thead .pers-day-head {
  border-right: 1px solid rgba(29,29,29,0.10) !important;
  border-bottom: 1px solid rgba(29,29,29,0.12) !important;
}
#project-calendar-view .projcal thead .projcal-group-cell {
  border-right: 1px solid rgba(29,29,29,0.12) !important;
}
#project-calendar-view .projcal td.pers-day.is-weekend {
  background: rgba(29,29,29,0.04) !important;
}
#project-calendar-view .projcal td.pers-day.is-holiday {
  background: rgba(199,150,98,0.10) !important;
}
/* Today marker: a single 3px chocolate band positioned absolutely inside
   the wrap. Placed by the renderer once the actual today column is laid
   out; spans the whole body height so it crosses every row (project row,
   subhead row, phase rows) uniformly. Per-cell ::after markers were leaving
   gaps under the subhead row's colspan spacer. */
#project-calendar-view .projcal td.pers-day.is-today {
  box-shadow: none !important;
}
#project-calendar-view .projcal-wrap {
  position: relative;
}
#project-calendar-view .projcal-today-band {
  position: absolute;
  width: 3px;
  background: var(--astet-chocolate);
  box-shadow: 0 0 0 1px rgba(29,29,29,0.06);
  pointer-events: none;
  z-index: 3;
}
/* Today's badge — chocolate pill wrapping both label lines. Needs to
   beat the thead-wide off-white override, hence !important on the pill
   background and matching selectors on the inner label spans. */
#project-calendar-view .projcal thead th .today-pill,
#project-calendar-view .projcal .today-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--astet-chocolate) !important;
  color: var(--astet-off-white) !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  line-height: 1;
}
#project-calendar-view .projcal thead th .today-pill *,
#project-calendar-view .projcal .today-pill * {
  color: var(--astet-off-white) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}
/* Subhead label cell only (not the spacer that runs across the calendar) */
#project-calendar-view .projcal-subhead-row .pers-name-col,
#project-calendar-view .projcal-subhead-row .pers-name-col * {
  background: var(--astet-off-white) !important;
  color: var(--astet-off-black) !important;
}

/* Bars/pills that already carry their own color keep white text */
#project-calendar-view [class*="phase-bar"],
#project-calendar-view [class*="phase-bar"] * {
  color: var(--astet-off-white) !important;
}

/* ============================================================
   Project Calendar toolbar: view switch + status chips + Today
   ============================================================ */
#project-calendar-view .projcal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}
#project-calendar-view .projcal-view-switch {
  display: inline-flex;
  border: 1px solid rgba(29,29,29,0.25);
  border-radius: 6px;
  overflow: hidden;
}
#project-calendar-view .projcal-view-btn {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  color: var(--astet-off-black) !important;
  cursor: pointer;
  border-right: 1px solid rgba(29,29,29,0.15);
}
#project-calendar-view .projcal-view-btn:last-child { border-right: 0; }
#project-calendar-view .projcal-view-btn:hover {
  background: rgba(29,29,29,0.05);
}
#project-calendar-view .projcal-view-btn.is-active {
  background: var(--astet-chocolate);
  color: var(--astet-off-white) !important;
  font-weight: 600;
}
#project-calendar-view .projcal-filters {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
#project-calendar-view .projcal-filter-chip {
  background: transparent;
  border: 1px solid rgba(29,29,29,0.28);
  color: var(--astet-off-black) !important;
  padding: 4px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  position: relative;
  padding-left: 20px;
}
#project-calendar-view .projcal-filter-chip::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--chip-tone, rgba(160,160,160,0.6));
  opacity: 0.5;
}
#project-calendar-view .projcal-filter-chip.is-on {
  background: var(--chip-tone, var(--astet-chocolate));
  border-color: var(--chip-tone, var(--astet-chocolate));
  color: #ffffff !important;
  font-weight: 600;
}
#project-calendar-view .projcal-filter-chip.is-on::before { opacity: 1; background: #ffffff; }
#project-calendar-view .projcal-today-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(29,29,29,0.28);
  color: var(--astet-off-black) !important;
  padding: 5px 12px;
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#project-calendar-view .projcal-today-btn:hover {
  background: var(--astet-chocolate);
  color: var(--astet-off-white) !important;
  border-color: var(--astet-chocolate);
}

/* Projects multi-select picker (button + dropdown) */
#project-calendar-view .projcal-projects-picker {
  position: relative;
}
#project-calendar-view .projcal-projects-btn {
  background: transparent;
  border: 1px solid rgba(29,29,29,0.28);
  color: var(--astet-off-black) !important;
  padding: 5px 12px;
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#project-calendar-view .projcal-projects-btn:hover {
  background: rgba(29,29,29,0.05);
}
#project-calendar-view .projcal-projects-caret { font-size: 10px; }
#project-calendar-view .projcal-projects-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  width: 300px;
  max-width: 90vw;
  background: var(--astet-off-white);
  border: 1px solid rgba(29,29,29,0.28);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#project-calendar-view .projcal-projects-dropdown.hidden { display: none; }
/* Every text node inside the dropdown paints off-black. Overrides any
   .link / .muted / label colors that leaked in from the app's global
   typography for this popover. Item code keeps its chocolate accent. */
#project-calendar-view .projcal-projects-dropdown,
#project-calendar-view .projcal-projects-dropdown *,
#project-calendar-view .projcal-projects-actions .link {
  color: var(--astet-off-black) !important;
}
#project-calendar-view .projcal-projects-actions .link {
  font-weight: 500;
}
#project-calendar-view .projcal-projects-actions .link:hover {
  color: var(--astet-chocolate) !important;
}
#project-calendar-view .projcal-projects-search {
  background: #ffffff !important;
  color: var(--astet-off-black) !important;
  border: 1px solid rgba(29,29,29,0.28) !important;
  padding: 6px 10px !important;
  border-radius: 3px !important;
  font: inherit;
  font-size: 12px;
}
#project-calendar-view .projcal-projects-search:focus {
  outline: none !important;
  border-color: var(--astet-chocolate) !important;
  box-shadow: 0 0 0 2px rgba(87,45,47,0.12) !important;
}
#project-calendar-view .projcal-projects-actions {
  display: flex;
  gap: 8px;
  font-size: 11px;
  padding: 0 2px;
}
#project-calendar-view .projcal-projects-list {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#project-calendar-view .projcal-projects-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  color: var(--astet-off-black) !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.3;
}
#project-calendar-view .projcal-projects-item:hover {
  background: rgba(29,29,29,0.05);
}
#project-calendar-view .projcal-projects-item.is-on {
  background: rgba(87,45,47,0.10);
}
#project-calendar-view .projcal-projects-item input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}
/* Item code — chocolate accent, needs to win over the dropdown catch-all
   defined a few rules up, so bump specificity with the parent selector. */
#project-calendar-view .projcal-projects-dropdown .projcal-projects-item-code,
#project-calendar-view .projcal-projects-item-code {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--astet-chocolate) !important;
  min-width: 42px;
}
#project-calendar-view .projcal-projects-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#project-calendar-view .projcal-projects-empty {
  padding: 12px;
  text-align: center;
  color: rgba(29,29,29,0.5);
  font-size: 11px;
  font-style: italic;
}

/* Groups header row (month labels spanning day/week columns) */
#project-calendar-view .projcal-group-corner {
  background: var(--astet-off-white) !important;
  border-bottom: 1px solid rgba(29,29,29,0.12) !important;
}
#project-calendar-view .projcal-group-cell,
#project-calendar-view .projcal-group-cell * {
  background: var(--astet-off-white) !important;
  color: var(--astet-off-black) !important;
  padding: 4px 8px !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid rgba(29,29,29,0.12) !important;
  border-right: 1px solid rgba(29,29,29,0.10) !important;
}
/* Per-view header cell tweaks — larger, spreadsheet-style headers to
   match the new column widths (130px in Days & Weeks, 260px in Months). */
#project-calendar-view .projcal-col-days,
#project-calendar-view .projcal-col-weeks,
#project-calendar-view .projcal-col-months {
  text-align: center;
  padding: 6px 8px !important;
}
#project-calendar-view .projcal-col-days .pers-day-dow,
#project-calendar-view .projcal-col-weeks .pers-day-dow {
  display: inline-block !important;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-right: 6px;
}
#project-calendar-view .projcal-col-days .pers-day-num {
  display: inline-block !important;
  font-size: 14px;
  font-weight: 500;
}
#project-calendar-view .projcal-col-weeks .pers-day-num {
  display: inline-block !important;
  font-size: 11px;
  font-weight: 500;
  color: rgba(29,29,29,0.60) !important;
  letter-spacing: 0;
  margin-left: 2px;
}
/* Weeks view: bring the W## + range onto a single centered line. */
#project-calendar-view .projcal-col-weeks {
  vertical-align: middle;
}
/* Months view: big centered month abbreviation. */
#project-calendar-view .projcal-col-months .pers-day-num {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* "+ Load more" edge cells + the buttons inside them. */
#project-calendar-view .projcal-more-corner,
#project-calendar-view .projcal-more-cell {
  background: var(--astet-off-white) !important;
  border-left: 1px solid rgba(29,29,29,0.10) !important;
  border-right: 1px solid rgba(29,29,29,0.10) !important;
  width: 34px;
  min-width: 34px;
  padding: 0 !important;
  vertical-align: middle;
  text-align: center;
}
#project-calendar-view .projcal-more-btn {
  background: transparent;
  border: 1px solid rgba(29,29,29,0.35);
  color: var(--astet-off-black) !important;
  border-radius: 999px;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
#project-calendar-view .projcal-more-btn:hover {
  background: var(--astet-chocolate);
  color: var(--astet-off-white) !important;
  border-color: var(--astet-chocolate);
}


/* ==========================================================================
   Time off — My Time / Team tabs
   The module used to stack "my requests" and "team requests" on one page.
   It is now two tabs: My Time keeps the original layout untouched, Team
   holds the approvals queue plus a roster of everyone the viewer can see.

   IMPORTANT: #vacations-view is a LIGHT off-white sheet, not the chocolate
   app background, and it forces `#vacations-view * { color: off-black
   !important }` on everything inside it. So every colour here is written for
   a light surface, and anything that needs to break out of that blanket text
   rule (the active tab, muted sub-labels, the count pill) has to say
   !important to win. Getting this wrong makes elements silently invisible.
   ========================================================================== */
.timeoff-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(29, 29, 29, 0.14);
  margin: 18px 0 20px;
}
.timeoff-tab {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Selected tab: full-strength text, heavier weight and a chocolate underline.
   The blanket off-black rule above means colour alone cannot carry this. */
#vacations-view .timeoff-tab {
  color: rgba(29, 29, 29, 0.42) !important;
  font-weight: 400;
}
#vacations-view .timeoff-tab:hover { color: rgba(29, 29, 29, 0.7) !important; }
#vacations-view .timeoff-tab.is-active {
  color: var(--astet-off-black) !important;
  font-weight: 600;
  border-bottom-color: var(--astet-chocolate);
}
/* Count of requests actually waiting on this person. */
.timeoff-tab-count {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 16px;
  text-align: center;
}
#vacations-view .timeoff-tab-count {
  background: var(--astet-chocolate);
  color: var(--astet-off-white) !important;
}

.team-section { margin-bottom: 34px; }
.team-section h3 { margin: 0 0 12px; }

.team-roster-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.team-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* The global `input { width: 100% }` would blow these out of the row. */
.team-filters .pc-search { margin-bottom: 0; width: 220px; max-width: 220px; }
.team-filters select { width: auto; min-width: 150px; }
/* The open dropdown list was black-on-black: the control is white here, but
   the global `select option { background: claret-deep }` stayed dark while
   the blanket rule painted the text off-black. Give the list a white sheet. */
#vacations-view select option {
  background: #ffffff;
  color: var(--astet-off-black);
}

.team-roster { display: flex; flex-direction: column; }
/* name | allowance | what's booked ahead | who approves them */
.team-row {
  display: grid;
  /* Five columns now: the last one is the way into the person record, and
     it is narrow because it holds one text button. */
  grid-template-columns: minmax(150px, 1.1fr) minmax(190px, 1.2fr) minmax(160px, 1.3fr) minmax(130px, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 14px 4px;
  border-top: 1px solid rgba(29, 29, 29, 0.12);
}
.team-row:first-child { border-top: 0; }

.team-person { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-name {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-meta {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#vacations-view .team-meta,
#vacations-view .team-allow-top small,
#vacations-view .team-allow-foot,
#vacations-view .team-trip small,
#vacations-view .team-trip.muted,
#vacations-view .user-approvers-hint {
  color: rgba(29, 29, 29, 0.5) !important;
}

.team-allow-top { display: flex; align-items: baseline; gap: 6px; }
.team-allow-top strong { font-size: 20px; }
.team-allow-top small { font-size: 11px; }
.team-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(29, 29, 29, 0.1);
  margin: 6px 0 5px;
  overflow: hidden;
}
.team-bar-fill { height: 100%; background: var(--astet-chocolate, #572D2F); }
.team-allow-foot { font-size: 11px; }
.team-pending {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9px;
  background: rgba(87, 45, 47, 0.1);
}
#vacations-view .team-pending { color: var(--astet-chocolate) !important; }

.team-upcoming { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.team-trip { display: flex; gap: 8px; align-items: baseline; }
.team-trip small { font-size: 10px; }
.team-trip.muted { font-style: italic; }

.team-approvers { display: flex; flex-wrap: wrap; gap: 4px; }
.team-chip {
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(29, 29, 29, 0.2);
  white-space: nowrap;
}
.team-chip.is-empty { font-style: italic; opacity: 0.75; }

/* ---------- Approver picker inside the Designers modal ----------
   This one lives in the dark modal, not on the light sheet, so it keeps the
   app-level tokens. */
.user-flags-group-wide { grid-column: 1 / -1; }
.user-approvers { margin-top: 10px; }
.user-approvers-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.user-approvers-title small {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  opacity: 0.75;
}
.user-approvers-list {
  max-height: 168px;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 4px 8px;
}
/* Same trap as every other picker: the app-wide `input { width: 100% }`
   stretches these checkboxes across the row unless nailed down. */
.user-approvers-list input[type="checkbox"],
.user-flag-row input[type="checkbox"] {
  width: 16px !important;
  height: 16px;
  flex: 0 0 16px;
}
.user-approvers-hint { font-size: 10px; color: var(--muted); margin-top: 5px; }

/* ---------- Hide-money toggle ----------
   Text-only button like the rest of the header actions. When hiding is ON it
   gains a dot so the state is readable at a glance — otherwise "Show rates"
   and "Hide rates" look like the same button and you cannot tell whether the
   numbers are currently masked or simply absent. */
.money-toggle.is-hiding::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: middle;
}

/* Vacation days/year sits among the checkbox rows, so the number input has to
   be pulled back from the app-wide `input { width: 100% }` the same way the
   checkboxes are. */
.user-days-row input[type="number"] {
  width: 58px !important;
  flex: 0 0 58px;
  text-align: right;
}

/* Permission badge + form bits. Permissions are statutory leave, not holiday,
   so the badge reads in a distinct tone from vacation/medical/remote. */
#vacations-view .vac-type-badge.permission {
  background: rgba(87, 45, 47, 0.12);
  color: var(--astet-chocolate) !important;
  border: 1px solid rgba(87, 45, 47, 0.25);
}
/* Checkbox in the form row — the app-wide `input { width: 100% }` again. */
/* The form lays its labels out as columns (caption over field); this one
   is a checkbox with its text beside it, so it opts back into a row. */
.vac-form-far {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  align-self: end;
  padding-bottom: 6px;
  white-space: nowrap;
}
.vac-form-far input[type="checkbox"] {
  width: 16px !important;
  flex: 0 0 16px;
  height: 16px;
}
.vac-form-kind select { min-width: 220px; }

/* ==========================================================================
   Time off — Calendar tab
   A wall-calendar month grid. Lives on the light #vacations-view sheet, so
   every colour here is written for an off-white background and anything that
   has to escape the view's blanket `color: off-black !important` says so.
   ========================================================================== */
.tcal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tcal-nav { display: flex; align-items: center; gap: 14px; }
.tcal-nav h3 { margin: 0; min-width: 190px; text-align: center; }
.tcal-tools { display: flex; align-items: center; gap: 12px; }
.tcal-tools .pc-search { margin-bottom: 0; width: 200px; max-width: 200px; }

.tcal-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tcal-key { display: inline-flex; align-items: center; gap: 6px; }
#vacations-view .tcal-key,
#vacations-view .tcal-key-muted { color: rgba(29, 29, 29, 0.55) !important; }
.tcal-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.tcal-dot.is-vacation   { background: var(--astet-chocolate, #572D2F); }
.tcal-dot.is-permission { background: #8B6DAE; }
.tcal-dot.is-medical    { background: #7A8B6D; }
.tcal-dot.is-remote     { background: rgba(29, 29, 29, 0.35); }

.tcal-weekdays,
.tcal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}
.tcal-weekdays {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
#vacations-view .tcal-weekdays { color: rgba(29, 29, 29, 0.5) !important; }
.tcal-weekdays > div { padding: 0 6px; }

/* 1px gap plus a background on the grid draws the rules — no borders to keep
   in sync when cells change state. */
.tcal-grid { background: rgba(29, 29, 29, 0.12); border: 1px solid rgba(29, 29, 29, 0.12); }
.tcal-cell {
  background: #fff;
  min-height: 104px;
  padding: 5px 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tcal-cell.is-blank { background: rgba(29, 29, 29, 0.03); }
.tcal-cell.is-weekend { background: rgba(29, 29, 29, 0.04); }
.tcal-cell.is-holiday { background: rgba(87, 45, 47, 0.07); }
.tcal-cell.is-today { box-shadow: inset 0 0 0 2px var(--astet-chocolate, #572D2F); }

.tcal-daynum {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tcal-hol {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#vacations-view .tcal-hol { color: var(--astet-chocolate) !important; }

.tcal-people { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.tcal-chip {
  font-size: 10px;
  line-height: 1.5;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
}
#vacations-view .tcal-chip.is-vacation   { background: rgba(87, 45, 47, 0.12);  border-left-color: var(--astet-chocolate); }
#vacations-view .tcal-chip.is-permission { background: rgba(139, 109, 174, 0.16); border-left-color: #8B6DAE; }
#vacations-view .tcal-chip.is-medical    { background: rgba(122, 139, 109, 0.16); border-left-color: #7A8B6D; }
#vacations-view .tcal-chip.is-remote     { background: rgba(29, 29, 29, 0.07);  border-left-color: rgba(29, 29, 29, 0.35); }
/* Pending requests are hatched so an approved and an unapproved day never
   look the same at a glance. */
.tcal-chip.is-pending {
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 3px,
    rgba(29, 29, 29, 0.14) 3px, rgba(29, 29, 29, 0.14) 6px);
}
.tcal-chip.is-dim { opacity: 0.25; }
.tcal-chip.is-hit { box-shadow: 0 0 0 1px rgba(29, 29, 29, 0.45); font-weight: 600; }

@media (max-width: 900px) {
  .tcal-cell { min-height: 76px; }
  .tcal-chip { font-size: 9px; }
}

/* Studio-closure line and the overflow toggle. */
#vacations-view .tcal-chip.is-closed {
  background: var(--astet-chocolate);
  color: var(--astet-off-white) !important;
  border-left-color: var(--astet-chocolate);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tcal-more {
  background: transparent;
  border: 0;
  padding: 1px 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
}
#vacations-view .tcal-more { color: rgba(29, 29, 29, 0.55) !important; }
#vacations-view .tcal-more:hover { color: var(--astet-chocolate) !important; }
.tcal-more::after { display: none; }

/* ==========================================================================
   Production — batch of 2026-09-15
   Lives inside #prod-detail-view, which is an off-white sheet, so colours are
   written for a light surface and anything fighting that view's blanket text
   rule says !important.
   ========================================================================== */

/* ---- Struck-through euro: "this line is not in the total" ---------------- */
.prod-no-total {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  overflow: visible;
}
.prod-no-total .prod-no-total-glyph {
  font-size: 12px;
  font-family: var(--font-sans);
  fill: currentColor;
}
.prod-no-total line {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
#prod-detail-view .prod-no-total,
.prod-items-table .prod-no-total { color: rgba(29, 29, 29, 0.5); }
/* On the row it sits beside the line total, which is the number it affects. */
.prod-no-total-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  opacity: 0.85;
}
.prod-status-option .prod-no-total { margin-left: auto; opacity: 0.6; }
/* The whole row reads as inactive when its status is out of the total. */
.prod-items-table tr.prod-item-row:has(.prod-no-total-wrap) .col-total strong {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.55;
}

/* ---- Closing chevron matches the opening one ----------------------------- */
.prod-expand-chevron.is-down { display: inline-block; transform: rotate(90deg); }

/* ---- Detail panel: drag handle + resize ---------------------------------- */
.prod-edit-layout.has-detail .prod-item-details .prod-detail-panel-head {
  cursor: grab;
  user-select: none;
}
.prod-edit-layout.has-detail .prod-item-details.is-dragging { cursor: grabbing; }
.prod-edit-layout.has-detail .prod-item-details.is-dragging .prod-detail-panel-head { cursor: grabbing; }
/* The native resize grip is nearly invisible on a light sheet; this corner
   mark shows the panel can be pulled bigger. */
.prod-edit-layout.has-detail .prod-item-details::after {
  content: "";
  position: sticky;
  bottom: 0;
  float: right;
  width: 12px;
  height: 12px;
  margin-top: -12px;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 45%, rgba(29,29,29,0.35) 45%, rgba(29,29,29,0.35) 55%, transparent 55%),
    linear-gradient(135deg, transparent 70%, rgba(29,29,29,0.35) 70%, rgba(29,29,29,0.35) 80%, transparent 80%);
}

/* ---- Transport group item picker: compact rows --------------------------- */
/* Was a stack of large bordered cards — unusable on a long listing. One line
   per item now, with a plain checkbox instead of a click-target box. */
.prod-tg-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid rgba(29, 29, 29, 0.14);
  border-radius: 4px;
  background: #fff;
}
.prod-tg-item-block {
  display: block;
  border: 0 !important;
  border-top: 1px solid rgba(29, 29, 29, 0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.prod-tg-item-block:first-child { border-top: 0 !important; }
.prod-tg-item-block:hover { background: rgba(29, 29, 29, 0.03) !important; }

.prod-tg-items .prod-item-chip {
  display: grid;
  grid-template-columns: 18px 72px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 3px 8px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
  min-height: 26px;
}
/* The app-wide `input { width: 100% }` stretched these across the row, which
   is why some of them looked broken or unclickable. */
.prod-tg-items input[type="checkbox"] {
  width: 14px !important;
  height: 14px;
  min-width: 14px;
  flex: 0 0 14px;
  margin: 0 !important;
  accent-color: var(--astet-chocolate, #572D2F);
  cursor: pointer;
}
.prod-tg-items .prod-item-chip.on { background: rgba(87, 45, 47, 0.07) !important; }
.prod-tg-items .prod-item-chip-ref {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-tg-items .prod-item-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-tg-items .prod-item-chip.is-elsewhere { opacity: 0.45; }

/* Extras hang under their item, indented so the nesting reads. */
.prod-tg-extras {
  padding: 0 8px 3px 34px !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.prod-tg-extras .prod-extra-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 6px !important;
  margin: 0 !important;
  border: 1px solid rgba(29, 29, 29, 0.14) !important;
  border-radius: 3px !important;
  background: transparent !important;
  font-size: 10px;
  line-height: 1.6;
  cursor: pointer;
  max-width: 100%;
}
.prod-tg-extras .prod-extra-chip.on { background: rgba(87, 45, 47, 0.07) !important; }
.prod-tg-extras .prod-extra-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* ---- Extra charges: one row per charge in the pricing summary ------------ */
.prod-summary-row.prod-summary-extra span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

/* ---- Transport picker: two overrides the earlier block did not win --------
   1. .prod-tg-item-block was still computing display:flex from a more
      specific rule, which pushed the chip 160px off the left edge.
   2. Both chips are <label> elements, and this app sets `label` to
      flex-direction: column — the same trap that stacked the Specs column.
      Without forcing row back, each extra chip renders 64px tall with its
      type and description on separate lines. */
.prod-tg-item-block { display: block !important; width: 100%; }
.prod-tg-items .prod-item-chip {
  width: 100%;
  flex-direction: row !important;
}
.prod-tg-extras .prod-extra-chip {
  flex-direction: row !important;
  align-items: center !important;
  height: auto;
  min-height: 0;
}
.prod-tg-extras .prod-extra-chip > * { flex: 0 0 auto; }
.prod-tg-extras .prod-extra-chip .prod-extra-chip-text { flex: 0 1 auto; }
/* The mini type tag was a stacked block; inline keeps it on the line. */
.prod-tg-extras .prod-mini-extra {
  display: inline-block !important;
  padding: 0 4px !important;
  margin: 0 !important;
  font-size: 9px;
  line-height: 1.6;
  border-radius: 2px;
}
/* A bare checkbox on white was almost invisible — give it an outline. */
.prod-tg-items input[type="checkbox"],
.prod-tg-extras input[type="checkbox"] {
  appearance: auto;
  outline: 1px solid rgba(29, 29, 29, 0.25);
  outline-offset: -1px;
  border-radius: 2px;
}

/* The base .prod-item-details carries `margin: 14px 0`. Once the panel is
   fixed-positioned and given a stored `top`, that margin is added on top of
   it — so every reopen after a drag walked the panel 14px further down the
   screen. Zero it while floating. */
.prod-edit-layout.has-detail .prod-item-details { margin: 0 !important; }

/* ==========================================================================
   Production — Compras (purchasing)
   Lives on the light #prod-detail-view sheet.
   ========================================================================== */
.prod-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(29, 29, 29, 0.14);
  margin: 4px 0 18px;
}
.prod-tab {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
}
#prod-detail-view .prod-tab { color: rgba(29, 29, 29, 0.42) !important; font-weight: 400; }
#prod-detail-view .prod-tab:hover { color: rgba(29, 29, 29, 0.7) !important; }
#prod-detail-view .prod-tab.is-active {
  color: var(--astet-off-black) !important;
  font-weight: 600;
  border-bottom-color: var(--astet-chocolate);
}

.buy-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.buy-head h3 { margin: 0; }
.buy-head-orders { margin-top: 34px; }
#prod-detail-view .buy-head-hint,
#prod-detail-view .buy-unpriced,
#prod-detail-view .buy-no-supplier { color: rgba(29, 29, 29, 0.5) !important; font-size: 11px; }

/* The headline comparison: estimate against what suppliers actually charged. */
.buy-totals { font-size: 12px; margin-left: auto; }
.buy-variance {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
#prod-detail-view .buy-variance { background: rgba(29, 29, 29, 0.07); }
#prod-detail-view .buy-variance.is-over  { background: rgba(232, 80, 80, 0.14);  color: #8C2F2F !important; }
#prod-detail-view .buy-variance.is-under { background: rgba(122, 170, 133, 0.18); color: #35603F !important; }

/* ---- Pending, grouped by supplier ---------------------------------------- */
.buy-pending { display: flex; flex-direction: column; gap: 12px; }
.buy-group {
  border: 1px solid rgba(29, 29, 29, 0.14);
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}
.buy-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  background: rgba(29, 29, 29, 0.035);
  border-bottom: 1px solid rgba(29, 29, 29, 0.1);
  font-size: 12px;
}
.buy-group-head .buy-create { margin-left: auto; }
.buy-group-items { display: flex; flex-direction: column; }
.buy-pend-row {
  display: grid;
  grid-template-columns: 18px 76px minmax(0, 1fr) 48px 96px;
  align-items: center;
  gap: 8px;
  padding: 3px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(29, 29, 29, 0.06) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 11px;
  min-height: 26px;
  cursor: pointer;
  /* label is flex-column app-wide; grid has to be forced back. */
  flex-direction: row !important;
}
.buy-pend-row:first-child { border-top: 0 !important; }
.buy-pend-row:hover { background: rgba(29, 29, 29, 0.03) !important; }
.buy-pend-row input[type="checkbox"],
.buy-lines input[type="checkbox"] {
  width: 14px !important;
  height: 14px;
  min-width: 14px;
  margin: 0 !important;
  accent-color: var(--astet-chocolate, #572D2F);
  outline: 1px solid rgba(29, 29, 29, 0.25);
  outline-offset: -1px;
  border-radius: 2px;
  cursor: pointer;
}
.buy-ref { font-variant-numeric: tabular-nums; opacity: 0.7; }
.buy-name, .buy-ref { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-qty, .buy-cost { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Orders --------------------------------------------------------------- */
.buy-orders { display: flex; flex-direction: column; gap: 16px; }
.buy-order {
  border: 1px solid rgba(29, 29, 29, 0.16);
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}
.buy-order-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(29, 29, 29, 0.035);
  border-bottom: 1px solid rgba(29, 29, 29, 0.1);
}
.buy-order-head .buy-ref-input { width: 150px !important; }
.buy-order-head .buy-status { width: auto !important; min-width: 130px; margin-left: auto; }
.buy-order-head .buy-del { margin-left: 4px; }

.buy-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(29, 29, 29, 0.08);
}
.buy-order-meta label {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#prod-detail-view .buy-order-meta label { color: rgba(29, 29, 29, 0.5) !important; }
.buy-order-meta input { width: 136px !important; font-size: 11px; }
.buy-order-meta input.num { width: 68px !important; }

.buy-lines { width: 100%; border-collapse: collapse; font-size: 11px; }
.buy-lines th {
  text-align: left;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(29, 29, 29, 0.1);
}
#prod-detail-view .buy-lines th { color: rgba(29, 29, 29, 0.5) !important; }
.buy-lines th.num, .buy-lines td.num { text-align: right; font-variant-numeric: tabular-nums; }
.buy-lines td { padding: 2px 8px; border-bottom: 1px solid rgba(29, 29, 29, 0.05); }
.buy-lines tr:last-child td { border-bottom: 0; }
.buy-lines .buy-agreed { width: 84px !important; text-align: right; }
#prod-detail-view .buy-lines .buy-est { color: rgba(29, 29, 29, 0.45) !important; }
.buy-lines .buy-recv { text-align: center; width: 44px; }

.buy-order-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-top: 1px solid rgba(29, 29, 29, 0.1);
  background: rgba(29, 29, 29, 0.02);
  font-size: 11px;
}

/* ---- Compras, global view ------------------------------------------------- */
.buy-global-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.buy-global-filters .pc-search { margin-bottom: 0; width: 260px; max-width: 260px; }
.buy-global-filters select { width: auto !important; min-width: 150px; }
.buy-only-open {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.buy-only-open input[type="checkbox"] {
  width: 15px !important;
  height: 15px;
  min-width: 15px;
  margin: 0 !important;
  accent-color: var(--astet-chocolate, #572D2F);
  cursor: pointer;
}

.buy-global-summary {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  margin-bottom: 12px;
}

.buy-global-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.buy-global-table th {
  text-align: left;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 8px;
  white-space: nowrap;
}
.buy-global-table th.num, .buy-global-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.buy-global-table td { padding: 6px 8px; border-top: 1px solid var(--line-soft); }
.buy-global-row { cursor: pointer; }
.buy-global-row:hover { background: var(--hover); }
/* A late order should be findable without reading every date. */
.buy-global-row.is-late td:first-child { box-shadow: inset 3px 0 0 #E85050; }

.buy-flag {
  display: inline-block;
  margin-left: 6px;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 8px;
  white-space: nowrap;
}
.buy-flag.is-late { background: rgba(232, 80, 80, 0.2); color: #E8B4B5; }
.buy-flag.is-due  { background: rgba(245, 167, 72, 0.2); color: #F5A748; }

.buy-status-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 9px;
  font-size: 10px;
  white-space: nowrap;
  background: var(--line);
}
.buy-status-draft         { background: rgba(160,160,160,0.25); }
.buy-status-sent,
.buy-status-confirmed     { background: rgba(94, 140, 176, 0.3); }
.buy-status-in_production { background: rgba(245, 167, 72, 0.28); }
.buy-status-shipped       { background: rgba(79, 176, 165, 0.3); }
.buy-status-received      { background: rgba(122, 170, 133, 0.32); }

/* ---- Specifications: the claimed checkbox --------------------------------
   The app-wide `input { width: 100% }` stretched this checkbox to fill its
   cell, which pushed the date out of the label you are clicking. Pinning the
   box and letting the date take the remaining room puts them back together. */
.pc-specs-claim input[type="checkbox"] {
  width: 15px !important;
  height: 15px;
  min-width: 15px;
  flex: 0 0 15px;
  margin: 0 !important;
  accent-color: var(--astet-chocolate, #572D2F);
  cursor: pointer;
}
.pc-specs-claim-date { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   Floating panels
   Shared by the Production item detail and the Project info sheet: a light
   sheet that stays open over the page, moves by its header and resizes from
   the corner. Deliberately not a modal — there is no overlay, so everything
   behind stays clickable while it is open.
   ========================================================================== */
.float-panel {
  position: fixed;
  top: calc(var(--app-header-h, 73px) + 16px);
  right: 20px;
  width: 620px;
  min-width: 420px;
  max-width: calc(100vw - 32px);
  height: 520px;
  min-height: 260px;
  max-height: calc(100vh - var(--app-header-h, 73px) - 32px);
  resize: both;
  overflow: hidden;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--astet-off-white, #F9F9F6);
  color: var(--astet-off-black, #1D1D1D);
  border: 1px solid rgba(29, 29, 29, 0.28);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  font-family: Arial, Helvetica, sans-serif;
}
.float-panel.hidden { display: none !important; }
.float-panel,
.float-panel * { color: var(--astet-off-black, #1D1D1D); }

/* Same again on the floating info sheet: the × that closes it was drawn in
   off-white on an off-white head, so the panel looked like it had no way
   out. */
.float-panel button.link {
  color: rgba(29, 29, 29, 0.55) !important;
  border-bottom-color: rgba(29, 29, 29, 0.35) !important;
}
.float-panel button.link:hover { color: var(--astet-off-black, #1D1D1D) !important; }
.float-panel .icon-btn {
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  border-bottom: 0 !important;
}

.float-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(29, 29, 29, 0.14);
  cursor: grab;
  user-select: none;
  flex: 0 0 auto;
}
.float-panel.is-dragging,
.float-panel.is-dragging .float-panel-head { cursor: grabbing; }
.float-panel-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.float-panel-title strong { font-size: 13px; }
.float-panel-sub {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, 0.5) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.float-panel-saved {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(29, 29, 29, 0.45) !important;
}
.float-panel textarea {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  resize: none;
  padding: 12px 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  background: #fff;
  color: var(--astet-off-black, #1D1D1D);
}
.float-panel textarea:focus { outline: none; }
.float-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid rgba(29, 29, 29, 0.14);
  flex: 0 0 auto;
}
.float-panel-foot .muted { font-size: 10px; color: rgba(29, 29, 29, 0.5) !important; }
.float-panel-foot .primary { color: var(--astet-chocolate, #572D2F) !important; }
/* The native resize grip is nearly invisible on a light sheet. */
.float-panel::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 45%, rgba(29,29,29,0.35) 45%, rgba(29,29,29,0.35) 55%, transparent 55%),
    linear-gradient(135deg, transparent 70%, rgba(29,29,29,0.35) 70%, rgba(29,29,29,0.35) 80%, transparent 80%);
}

/* min-width always beats max-width in CSS, so a flat floor pushed these
   panels wider than a narrow window and forced the page to scroll sideways.
   Capping the floor against the viewport keeps the intended minimum on any
   real screen and yields on small ones. */
.float-panel { min-width: min(420px, calc(100vw - 32px)); }
.prod-edit-layout.has-detail .prod-item-details { min-width: min(380px, calc(100vw - 32px)); }

/* ==========================================================================
   Left sidebar navigation
   The nav moved out of the header so the wide tables — Production, the
   calendars, Analytics — get the full width of the screen back. The rail
   collapses to nothing, and the landing hides it entirely because the module
   cards are the menu there.
   ========================================================================== */
.app-header { gap: 14px; }

/* Three lines, drawn rather than typed, so they sit on the baseline properly. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 18px;
  background: var(--ink-soft);
  border-radius: 1px;
  transition: background 0.18s;
}
.nav-toggle:hover span { background: var(--ink); }
.nav-toggle::after { display: none; }

.header-home {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0;
  margin-right: auto;
}
.header-home:hover { color: var(--ink); }

.app-sidebar {
  position: fixed;
  top: var(--app-header-h, 73px);
  left: 0;
  bottom: 0;
  width: 252px;
  padding: 18px 10px 24px;
  overflow-y: auto;
  border-right: 1px solid var(--line-soft);
  background: var(--bg);
  z-index: 20;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.app-sidebar #main-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}
.app-sidebar #main-nav button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.app-sidebar #main-nav button::after { display: none; }
.app-sidebar #main-nav button:hover { background: var(--hover); }
.app-sidebar #main-nav button.active {
  background: rgba(249, 249, 246, 0.1);
  color: var(--ink);
}
.app-sidebar #main-nav button > span:first-child { flex: 1 1 auto; }
/* The separator was a vertical hairline in a horizontal bar; on a column it
   has to lie flat. */
.app-sidebar .nav-separator {
  display: block;
  width: auto;
  height: 1px;
  margin: 10px 8px;
  background: var(--line-soft);
}

/* The rail floats over the left gutter instead of displacing the content.
   Reflowing #main every time the menu opened moved whatever was under the
   cursor, which read as the page jumping; nothing shifts now. */
body.nav-collapsed .app-sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
/* The landing carries the same rail as every other view — one menu, in one
   place, so it is never a surprise where it went. */

@media (max-width: 900px) {
  .app-sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
  body:not(.nav-collapsed) .app-sidebar {
    transform: none; opacity: 1; pointer-events: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  }
}

/* ==========================================================================
   Home / landing
   ========================================================================== */
.home-view { padding: 8px 0 40px; }
.home-hero { margin-bottom: 26px; }
.home-hero h1 { margin: 0 0 4px; font-size: 34px; }
.home-sub {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-news-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 18px 0;
}

.home-section-title {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-sans);
  font-weight: 500;
}
.home-news-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-news { display: flex; flex-direction: column; gap: 14px; }
.home-post {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.home-post:first-child { border-top: 0; }
.home-post.is-pinned { background: rgba(249, 249, 246, 0.035); border-radius: 5px; padding: 12px; }
.home-post-img { width: 92px; height: 92px; object-fit: cover; border-radius: 4px; flex: 0 0 92px; }
.home-post-body { min-width: 0; flex: 1 1 auto; }
.home-post-head { display: flex; align-items: baseline; gap: 8px; }
.home-post-head h4 { margin: 0; font-size: 14px; flex: 1 1 auto; }
.home-post-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.home-pin {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(249, 249, 246, 0.14);
  flex: 0 0 auto;
}
.home-post-meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 3px 0 6px;
}
.home-post-text { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-soft); }

/* Modal rows for the news editor — the app-wide input width rule again. */
.news-pin-row, .news-img-row { display: flex !important; align-items: center; gap: 8px; }
.news-pin-row { flex-direction: row !important; }
.news-pin-row input[type="checkbox"] {
  width: 15px !important;
  height: 15px;
  flex: 0 0 15px;
  margin: 0 !important;
}

/* ==========================================================================
   Brand lockup
   HUB now sits beside the wordmark instead of stacked under it, set in the
   serif at roughly half its height and letterspaced, which is the lockup
   Joaquin asked for. Built from the existing vector wordmark rather than a
   flat image, so it stays crisp at any size and recolours with the theme.
   ========================================================================== */


/* ==========================================================================
   Entry animation
   A full-bleed chocolate field holds the lockup in the middle, then clears as
   the logo flies to the header. The overlay is a plain colour rather than a
   blur so it cannot flash the half-painted page behind it.
   ========================================================================== */
.hub-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--claret, #572D2F);
  opacity: 1;
  transition: opacity 620ms ease 160ms;
  pointer-events: none;
}
.hub-intro.hidden { display: none !important; }
/* Fades out slightly after the flight starts, so the logo is already moving
   before the page appears underneath it. */
.hub-intro.is-leaving { opacity: 0; }

.hub-intro-lockup {
  position: fixed;
  transform-origin: top left;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  will-change: transform;
}

/* The lockup itself eases in on the spot before it travels. */
.hub-intro-lockup { opacity: 0; }
.hub-intro.is-in .hub-intro-lockup {
  opacity: 1;
  transition: opacity 420ms ease;
}



/* ==========================================================================
   Header layout: three zones, brand truly centred
   A flex row with space-between only centres the middle child when the two
   sides happen to weigh the same, which they never do — the user menu is far
   wider than the toggle. A 1fr/auto/1fr grid pins the brand to the centre of
   the page no matter what sits either side of it.
   ========================================================================== */
.app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
  min-width: 0;
}
.app-header .brand-lockup { justify-self: center; }
.app-header .user-menu { justify-self: end; }
/* The Home link no longer has to push anything; the grid does the spacing. */
.header-home { margin-right: 0; }

/* On the landing the rail is hidden, so the left zone holds only Home and the
   brand stays centred regardless. */
@media (max-width: 700px) {
  .app-header { gap: 10px; }

}

/* No label may wrap: two-line menu rows made the rail read as a list of
   paragraphs. nowrap guarantees it, and the badges are pinned so a long
   label cannot squeeze them.  */
.app-sidebar #main-nav button { white-space: nowrap; }
.app-sidebar #main-nav button > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar #main-nav .nav-badge,
.app-sidebar #main-nav .nav-soon { flex: 0 0 auto; }

/* Floating over the content needs a real edge and a shadow, otherwise the
   rail and the page behind it read as one surface. */
.app-sidebar {
  background: var(--claret, #572D2F);
  box-shadow: 6px 0 18px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   Brand lockup — the supplied artwork
   One PNG rather than the wordmark plus live text: reconstructing it put HUB
   in the wrong face and centred it against Astet instead of sitting on the
   same baseline. The file is 424x103 with transparency, so at the sizes used
   here it is still downscaling even on a 2x display and stays sharp.
   ========================================================================== */
.brand.brand-lockup { display: flex; align-items: center; }
.brand.brand-lockup .brand-logo {
  height: 30px;
  width: auto;
  display: block;
  user-select: none;
}
.brand-lockup-lg .brand-logo { height: 46px; }
.hub-intro-lockup .brand-logo {
  height: 30px;
  width: auto;
  display: block;
}
@media (max-width: 700px) {
  .brand.brand-lockup .brand-logo { height: 22px; }
}

/* One column now that the module cards are gone: the rail is the menu. The
   measure is capped so announcements read as a column instead of running the
   full width of the page. */
.home-news-col { max-width: 720px; }

/* ==========================================================================
   Time off — one person's record
   Lives in the modal, which is claret-deep, so it inherits the dark chrome
   tokens rather than the light sheet the Time off view sets up for itself.
   ========================================================================== */
.team-actions { display: flex; align-items: center; justify-content: flex-end; }
.tor-year {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.tor-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.tor-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
}
.tor-card-v { font-family: var(--font-serif); font-size: 21px; line-height: 1; color: var(--ink); }
.tor-card-l { font-size: 11px; color: var(--ink); }
.tor-card-s { font-size: 10px; color: var(--muted); }
.tor-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tor-table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0 8px 6px 0;
}
.tor-table td { padding: 7px 8px 7px 0; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.tor-table .tor-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Said beside the status, not instead of it: approved-and-taken and
   approved-for-November are both approved, and the difference is the
   reason anyone opens this. */
.tor-when {
  margin-left: 8px;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tor-when.is-ahead { color: rgba(220, 200, 160, 0.9); }
.tor-when.is-now { color: rgba(232, 180, 181, 0.95); }

/* ==========================================================================
   Purchasing — extras on their own lines
   An extra is bought like anything else, so it sits in the same list; the
   tag and the parent name are what stop a column of "Fabric" from being
   unreadable.
   ========================================================================== */
.buy-extra-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(139, 109, 174, 0.18);
  color: #6B4E8E;
  vertical-align: 1px;
}
.buy-extra-of { margin-left: 6px; font-size: 10px; opacity: 0.6; }
/* The selected count sits beside the supplier so the default — everything
   ticked — is stated rather than assumed. */
.buy-picked { margin-left: auto; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; }
.buy-toggle-all { margin-left: 12px; font-size: 11px; }
.buy-group-head .buy-create { margin-left: 12px; }
.buy-lines .buy-drop { width: 22px; text-align: right; }
.buy-lines .buy-line-del { opacity: 0; transition: opacity 0.15s; }
.buy-lines tr:hover .buy-line-del { opacity: 1; }

/* The record is a table, so it gets the room a table needs — the same
   :has() widening the other content-shaped modals use. */
.modal-card:has(.tor) { max-width: 660px; }
.tor-table .tor-dates { white-space: nowrap; }

/* A rejected or cancelled row is history, not time off: struck through and
   dimmed so it cannot be read as days somebody had. The status pill keeps
   its own colour — dimming the verdict would defeat the point. */
.tor-table tr.is-void td { color: var(--muted); }
.tor-table tr.is-void .tor-dates { text-decoration: line-through; }
.tor-why { margin-top: 2px; font-size: 10px; opacity: 0.8; }

/* The remove control in a person record. Hidden until the row is under the
   cursor: deleting somebody else's holiday should take a deliberate move,
   not sit there inviting a stray click. */
.tor-table .tor-act { width: 24px; text-align: right; }
.tor-del {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.tor-table tr:hover .tor-del { opacity: 1; }
.tor-del:hover { color: rgba(232, 180, 181, 0.95); }
.tor-del::after { display: none; }
.tor-locked { color: var(--muted); opacity: 0.4; }

/* ==========================================================================
   Email panel
   Lives in the modal, so it inherits the dark chrome tokens.
   ========================================================================== */
.modal-card:has(.em) { max-width: 760px; }
.em-mode {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 5px;
  margin-bottom: 18px;
  font-size: 12px;
  border: 1px solid var(--line-soft);
}
.em-mode strong { font-size: 12px; letter-spacing: 0.16em; }
/* Live is the one state where a mistake reaches real people, so it is the
   one that looks different. */
.em-mode-live { border-color: rgba(232, 180, 181, 0.5); background: rgba(232, 180, 181, 0.08); }
.em-mode-off { opacity: 0.75; }
.em-config { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 18px; font-size: 12px; }
.em-config dt { color: var(--muted); }
.em-config dd { margin: 0; }
.em-actions { display: flex; gap: 18px; align-items: center; margin-bottom: 10px; }
.em-result { font-size: 12px; min-height: 18px; color: var(--muted); margin-bottom: 18px; }
.em-result.is-bad { color: rgba(232, 180, 181, 0.95); }
.em-log-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.em-log { width: 100%; border-collapse: collapse; font-size: 11px; }
.em-log th {
  text-align: left;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0 8px 5px 0;
}
.em-log td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line-soft); vertical-align: top; }
.em-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.em-subject { max-width: 260px; }
.em-status { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.em-failed { color: rgba(232, 180, 181, 0.95); }
.em-logged { color: var(--muted); }
/* The reason a send failed is the useful part, so it is shown, not hidden
   behind a hover. */
.em-error { font-size: 10px; color: rgba(232, 180, 181, 0.8); margin-top: 2px; }

/* ==========================================================================
   Production — components
   A component used to be a row in a small table. It is now a thing with a
   reference, a name and a supplier, so it gets a card of its own, shaped
   like the items above it: same off-white surface, same soft lift, so the
   eye reads them as the same kind of object.
   Every field carries its own label. In a table the headings scrolled away
   from the values; with one card each there is nothing to align to anyway,
   and the label is where the explanation belongs.
   ========================================================================== */
.prod-comps { display: flex; flex-direction: column; gap: 10px; }
.prod-comp {
  background: #fff;
  border: 1px solid rgba(29, 29, 29, 0.10);
  border-radius: 6px;
  /* The lift the items have — enough to read as a separate surface, not
     enough to look like a dialog. */
  box-shadow: 0 1px 3px rgba(29, 29, 29, 0.10), 0 1px 1px rgba(29, 29, 29, 0.04);
  padding: 10px 12px 12px;
}
.prod-comp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-end;
}
/* Each field states how eagerly it grows, how willingly it shrinks, and the
   width below which it would rather wrap than be squeezed. */
.prod-comp .pc-f       { flex: 1 1 110px; }
.prod-comp .pc-f-ref   { flex: 0 1 100px; }
.prod-comp .pc-f-img   { flex: 0 0 58px; }
.prod-comp .pc-f-name  { flex: 3 1 160px; }
.prod-comp .pc-f-brand { flex: 2 1 140px; }
.prod-comp .pc-f-num   { flex: 0 1 100px; }
.prod-comp .pc-f-sub   { flex: 0 1 112px; }
.prod-comp .pc-del     { flex: 0 0 18px; }
/* The app-wide label rule stacks children; here that is exactly right —
   caption above field — but the gap and margin need pinning down. */
.prod-comp .pc-f {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px;
  margin: 0 !important;
  min-width: 0;
  max-width: 100%;
}
.prod-comp .pc-f > span {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
  /* The tooltip lives on the label, so the caption is the hover target. */
  cursor: help;
}
.prod-comp .pc-f input,
.prod-comp .pc-f select { width: 100% !important; }
.prod-comp .pc-f-num input { text-align: right; }
.prod-comp .pc-f-sub > span, .prod-comp .pc-f-sub output { text-align: left; }
.prod-comp .pc-f-sub output {
  display: block;
  padding: 6px 0 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.prod-comp .pc-f-img { align-items: flex-start; }
.prod-comp .pc-del {
  align-self: end;
  padding: 0 0 6px;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.prod-comp:hover .pc-del { opacity: 1; }
.prod-comp .pc-del::after { display: none; }

/* The description gets the whole width at the foot of the card, sitting just
   inside the lower edge: it is the one field people write sentences in, and
   a single-line cell was asking them not to. */
.prod-comp .pc-desc {
  display: block;
  width: 100% !important;
  margin-top: 10px;
  padding: 7px 9px !important;
  border: 1px solid rgba(29, 29, 29, 0.14) !important;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.45;
  resize: vertical;
  min-height: 42px;
}



/* The supplier behind a brand, said quietly underneath it. Smaller and
   lighter than the brand because it answers a different question — who to
   chase, not what it is — and because most of the time the brand is what
   people are reading for. */
.prod-supplier-pill {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 9px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  background: rgba(29, 29, 29, 0.06);
  color: rgba(29, 29, 29, 0.62);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  cursor: help;
}

/* ==========================================================================
   Suppliers screen
   A list and a form. No workflow, because there is none: these are contact
   details somebody needs to hand when an order goes out or a delivery is
   late.
   ========================================================================== */
.modal-card:has(.sup) { max-width: 880px; }
/* The form is a grid of short fields; at the default modal width it collapses
   to one column and becomes a very long scroll. */
.modal-card:has(.sup-form) { max-width: 700px; }
.sup-table .sup-name { font-weight: 500; }
.sup-table .sup-brands { max-width: 240px; }
.sup-table .sup-brands .prod-supplier-pill { margin: 1px 3px 1px 0; }
.sup-table .sup-act { text-align: right; white-space: nowrap; }

.sup-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 16px;
}
.sup-form .sup-f {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
  margin: 0 !important;
  min-width: 0;
}
.sup-form .sup-f > span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: help;
}
.sup-form .sup-f input, .sup-form .sup-f textarea { width: 100% !important; }
/* Notes runs the width of the form rather than sharing a row. */
.sup-form .sup-f-wide { grid-column: 1 / -1; }
.sup-danger {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
}

/* The pill is designed for the light sheet of a listing, where dark-on-pale
   is right. Inside the modal it is pale-on-dark, so the same element needs
   the opposite treatment or it disappears into the background. */
.sup-table .prod-supplier-pill {
  background: rgba(249, 249, 246, 0.12);
  color: rgba(249, 249, 246, 0.80);
}

/* Transport on an order: a charge rather than goods, so it is tagged
   differently from a component and picked rather than grouped. */
.buy-extra-tag.is-transport {
  background: rgba(183, 164, 214, 0.22);
  color: #5B4A7A;
}
/* The "one order" bar. Quiet, because it is a state of the screen rather
   than something that has gone wrong, but not so quiet that the missing
   orders go unexplained. */
.buy-focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(87, 45, 47, 0.07);
  font-size: 12px;
}
.buy-focus.hidden { display: none; }

/* The shipping row: the same shape as the money row above it, with the
   tracking link sitting where the eye already is. */
.buy-order-ship .buy-track-go {
  align-self: end;
  padding-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.buy-order-ship .prod-pdf-wrap { margin-top: 2px; }

/* Where a group is going, under the row that names it. */
.prod-tg-address { min-width: 150px; }
.prod-tg-addressline {
  font-size: 11px;
  padding: 2px 0 6px;
}

.buy-transport-pick {
  padding: 8px 0 2px;
  border-top: 1px solid rgba(29, 29, 29, 0.06);
}
.buy-transport-pick label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font-size: 11px;
}
.buy-transport-pick > label > span {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
  opacity: 0.6;
  white-space: nowrap;
  cursor: help;
}
.buy-transport-pick select { width: auto !important; min-width: 240px; }

/* The column picker in the preview options: collapsed by default, because
   most previews use the usual columns and the list is long. */
.cp-fields { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.cp-fields > summary { cursor: pointer; font-size: 12px; letter-spacing: 0.04em; }
.cp-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 14px;
  margin: 12px 0 8px;
}
.cp-fields .cp-field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  font-size: 12px;
}
.cp-fields .cp-field input[type="checkbox"] { width: 14px !important; min-width: 14px; margin: 0 !important; }
.cp-fields .cp-field small { opacity: 0.55; }
.cp-fields-foot { font-size: 11px; }

/* Everything in the client table reads from the left, images excepted. */
.cp-table thead th { text-align: left; }
.cp-table tbody td { text-align: left; }
.cp-table .cp-c-img, .cp-table .cp-c-mat,
.cp-table thead th.cp-c-img, .cp-table thead th.cp-c-mat { text-align: center; }
.cp-table .cp-c-qty, .cp-table .cp-c-price, .cp-table .cp-c-total { text-align: left; }
.cp-table .cp-foot-value { text-align: left; }

/* What the client said they had to spend, under the total it is measured
   against. */
.prod-summary-budget input {
  width: 92px !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.prod-summary-budget-diff strong { font-variant-numeric: tabular-nums; }
.prod-summary-budget-diff.is-over strong { color: rgba(176, 82, 84, 0.95); }
.prod-summary-budget-diff.is-under strong { color: rgba(90, 130, 95, 0.95); }

/* Save-to-catalogue sits beside delete on the component card, revealed on
   hover like the delete it stands next to. */
.prod-comp .pc-star {
  flex: 0 0 18px;
  align-self: end;
  padding: 0 0 6px;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.prod-comp:hover .pc-star { opacity: 0.55; }
.prod-comp .pc-star:hover { opacity: 1; }
.prod-comp .pc-star::after { display: none; }

/* Which brands a supplier carries, inside their own form — because that is
   where somebody already is when they think about it. */
.sup-brands-pick > span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: help;
}
.sup-brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 5px 14px;
  margin-top: 7px;
  max-height: 190px;
  overflow-y: auto;
}
.sup-brands-grid .sup-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  font-size: 12px;
}
.sup-brands-grid .sup-brand input[type="checkbox"] { width: 14px !important; min-width: 14px; margin: 0 !important; }
/* Where a brand currently sits, so moving it is never a surprise. */
.sup-brands-grid .sup-brand small { opacity: 0.55; font-size: 10px; }

/* The pill is now the way to set or change who supplies a brand. */
button.prod-supplier-pill { border: 0; cursor: pointer; font: inherit; font-size: 9px; }
button.prod-supplier-pill::after { display: none; }
button.prod-supplier-pill:hover { background: rgba(29, 29, 29, 0.12); }
/* A brand with nobody behind it stays silent until the cursor is over the
   cell: the absence of a pill is what says "we deal with the brand direct",
   and a permanent "+ supplier" on every such row would contradict it. */
button.prod-supplier-pill.is-empty { opacity: 0; transition: opacity 0.15s; }
td.col-brand:hover button.prod-supplier-pill.is-empty,
button.prod-supplier-pill.is-empty:focus { opacity: 0.75; }
/* On a component card there is room, and nothing else competing for
   attention, so the invitation to name a supplier is simply shown. */
.prod-comp button.prod-supplier-pill.is-empty { opacity: 0.75; }
.bs-hint { grid-column: 1 / -1; font-size: 11px; margin-top: -4px; }
.modal-card:has(.bs-form) { max-width: 460px; }

/* Why an item is not on the list, said once under the chips rather than
   repeated on every row that is missing. */
.prod-tg-hidden { font-size: 10px; padding: 4px 0 2px; cursor: help; }