/* Admin-specific styles. Layered on top of shared.css. */

/* ── Centered "lock" card (login + first-run setup) ───────── */
.lock-screen {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 48px 36px;
}
.lock-card {
  width: 100%; max-width: 380px;
  background: #fff; border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  overflow: hidden;
}
.lock-head {
  background: var(--navy); color: var(--white);
  padding: 16px 20px;
}
.lock-head-title {
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.lock-head-sub {
  font-size: 10px; font-weight: 500; letter-spacing: 1.5px;
  color: rgba(232,224,208,.55); text-transform: uppercase; margin-top: 4px;
}
.lock-body {
  padding: 22px 20px 20px;
}
.lock-body .field-group { margin-bottom: 14px; }
.lock-body .text-input  { font-size: 13px; padding: 10px 12px; }
.lock-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px;
}
.lock-msg {
  font-size: 10.5px; line-height: 1.55;
  color: rgba(26,46,61,.55); margin-bottom: 14px;
}
.lock-msg.error { color: #a93226; }

/* Google sign-in button — official-style: white background, dark
   text, brand-color G mark on the left. Sized to match the lock
   card's primary action. */
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(26,46,61,.18);
  border-radius: 4px;
  padding: 10px 16px 10px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;
  color: #3c4043;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .1s;
  width: 100%;
  justify-content: center;
}
.btn-google:hover {
  background: #f8f9fa;
  border-color: rgba(26,46,61,.3);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.btn-google:active { transform: scale(.99); }
.btn-google svg { flex: 0 0 auto; }

/* ── Dashboard ────────────────────────────────────────────── */
.dash-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; gap: 12px;
}
.dash-actions {
  display: flex; align-items: center; gap: 10px;
}
.dash-sort-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(26,46,61,.5);
}
.dash-sort-select {
  width: auto; padding: 5px 9px; font-size: 11px;
}
.dash-title {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(26,46,61,.55);
}
.job-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.job-card {
  background: #fff; border-radius: 5px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04);
  display: flex; flex-direction: column;
}
.job-card-head {
  background: var(--navy); color: var(--beige); padding: 11px 14px;
  position: relative;
  cursor: pointer;       /* hint: double-click opens color picker */
  user-select: none;
}

/* Hidden color input behind the header. Activated by JS on dblclick of
   the header (input.click() opens the native picker). */
.card-color-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
  border: 0; padding: 0;
}
.job-card-client {
  font-size: 9px; font-weight: 700; letter-spacing: 2px;
  color: rgba(232,224,208,.55); text-transform: uppercase;
}
.job-card-project {
  font-size: 13px; font-weight: 600; margin-top: 2px;
  color: #fff; line-height: 1.3;
}
.job-card-range {
  font-size: 10px; letter-spacing: .3px;
  margin-top: 6px;
  color: rgba(232,224,208,.7);
}
/* Copy-link icon button in the colored card header. Sits above the
   card-color-input via z-index so the click reaches it. */
.job-card-link {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 3px;
  font-size: 12px; line-height: 1;
  color: inherit;
  opacity: .65;
  cursor: pointer;
  z-index: 2;
  transition: background .12s, opacity .12s;
}
.job-card-link:hover {
  background: rgba(255,255,255,.24);
  opacity: 1;
}
.job-card-body {
  padding: 11px 14px; flex: 1;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; color: rgba(26,46,61,.7);
}
.job-card-created {
  font-size: 10px; color: rgba(26,46,61,.5); letter-spacing: .3px;
}
.job-card-url {
  font-family: "SF Mono","Fira Code",monospace; font-size: 10px;
  color: rgba(26,46,61,.55); word-break: break-all; line-height: 1.4;
}
.job-card-foot {
  padding: 10px 14px; border-top: 1px solid rgba(26,46,61,.07);
  display: flex; gap: 6px; align-items: center;
  justify-content: space-between;
}
.job-card-foot-actions {
  display: flex; gap: 6px; align-items: center;
}
.job-card-foot .btn-ghost { padding: 4px 10px; font-size: 9px; }

/* Small red-outline Delete button in bottom-left of each job card */
.btn-card-del {
  background: none;
  border: 1px solid rgba(169,50,38,.4);
  border-radius: 3px;
  padding: 4px 10px;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #a93226;
  cursor: pointer;
  transition: all .12s;
}
.btn-card-del:hover {
  background: rgba(169,50,38,.07);
  border-color: rgba(169,50,38,.65);
}
.btn-card-del:active { transform: scale(.95); }

.empty-state {
  background: #fff; padding: 36px 24px; border-radius: 5px;
  text-align: center; color: rgba(26,46,61,.55);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.empty-state .field-label { margin-bottom: 12px; }

/* ── Job setup form ───────────────────────────────────────── */
.setup-shell {
  background: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
}
.setup-head {
  background: var(--navy); color: var(--beige);
  padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.setup-head-title {
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
}
.setup-body { padding: 22px 22px 8px; }

.section-block {
  border-top: 1px solid rgba(26,46,61,.08);
  padding-top: 24px; margin-top: 24px;
}
.section-block:first-child { border-top: none; padding-top: 0; margin-top: 0; }
/* Project form: more breathing room between sections — the form is
   already dense; a little extra padding makes the section starts
   feel intentional rather than crowded. */
#view-project-form .section-block { padding-top: 28px; margin-top: 28px; }
.section-title {
  font-size: 13px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--navy);
  margin-bottom: 16px;
  display: flex; align-items: baseline; gap: 10px;
}
/* Hairline trailing-line so the section-title reads as an actual
   section divider rather than just dense text. The pseudo-element
   sits to the right of the label and fills remaining width. */
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(26,46,61,.08);
  align-self: center;
}
.section-hint {
  font-size: 11px; color: rgba(26,46,61,.55);
  line-height: 1.55; margin-bottom: 14px;
  max-width: 760px;
}

.row-list { display: flex; flex-direction: column; gap: 8px; }
.row-list .editable-row {
  display: grid; align-items: center; gap: 10px;
  padding: 8px 10px; background: #f7f5ef; border-radius: 4px;
}
/* Activity / milestone row: swatch | label | (banner toggle) | delete */
.editable-row.row-type   { grid-template-columns: 32px 1fr auto auto; }
.editable-row.row-mile   { grid-template-columns: 32px 1fr auto; }
/* Delivery date: swatch | label | date | delete */
.editable-row.row-deliv  { grid-template-columns: 32px 1fr 150px auto; }

.row-list input.text-input {
  font-size: 12px; padding: 6px 9px;
  border-color: transparent; background: transparent;
}
.row-list input.text-input:hover { background: #fff; border-color: rgba(26,46,61,.18); }
.row-list input.text-input:focus { background: #fff; border-color: var(--navy); }

.btn-row-del {
  background: none; border: none; color: rgba(169,50,38,.45);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px;
  transition: color .12s;
}
.btn-row-del:hover { color: #a93226; }
.btn-add-row {
  /* Inline + left-aligned in both flex and grid parents. Without
     justify-self the button stretches to fill grid columns, which
     was the source of the "full-width add button" complaint. */
  align-self: flex-start;
  justify-self: start;
  margin-top: 6px;
  background: transparent; color: var(--navy);
  border: 1px solid rgba(26,46,61,.18);
  padding: 6px 12px; border-radius: 3px; font-family: var(--font);
  font-size: 10px; font-weight: 600; letter-spacing: .6px;
  text-transform: none; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-add-row:hover {
  background: rgba(26,46,61,.05);
  border-color: rgba(26,46,61,.4);
}

.banner-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 600; color: rgba(26,46,61,.6);
  letter-spacing: .8px; text-transform: uppercase; cursor: pointer;
  user-select: none;
}
.banner-toggle input[type="checkbox"] { cursor: pointer; }

/* Deliverable column blocks */
.dv-col-block {
  background: #f7f5ef; border-radius: 5px;
  padding: 12px 14px; margin-bottom: 10px;
  border-left: 4px solid var(--navy);
}
.dv-col-head-row {
  display: grid; grid-template-columns: 32px 1fr 1fr auto;
  gap: 10px; align-items: center; margin-bottom: 10px;
}
.dv-col-head-row .field-label { margin-bottom: 0; font-size: 8.5px; }
.dv-col-head-row select.select-input { font-size: 11px; padding: 6px 8px; }
.dv-col-head-row input.text-input { font-size: 12px; padding: 6px 9px; }

.dv-groups-list {
  display: flex; flex-direction: column; gap: 6px;
  padding-left: 8px; border-left: 2px solid rgba(26,46,61,.1);
  margin-bottom: 8px;
}
.dv-group-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px; align-items: center; padding: 6px 8px;
  background: #fff; border-radius: 3px;
}
.dv-group-row input.text-input {
  font-size: 11px; padding: 5px 8px;
  border-color: rgba(26,46,61,.12); background: #fff;
}

.setup-foot {
  padding: 16px 22px; border-top: 1px solid rgba(26,46,61,.08);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.setup-foot-right { display: flex; gap: 8px; }

/* ── From Estimate flow ──────────────────────────────────── */
.fe-radio-row {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12px; color: var(--navy);
}
.fe-radio-row label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}

.fe-file-input {
  font-size: 12px; padding: 8px 0; color: var(--navy);
}

/* Drag-and-drop upload zone */
.fe-drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 22px 20px;
  max-width: 420px;
  background: #f7f5ef;
  border: 2px dashed rgba(26,46,61,.22);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  user-select: none;
  outline: none;
  position: relative;
}
.fe-drop-zone:hover,
.fe-drop-zone:focus-visible {
  background: #f0ece1;
  border-color: rgba(26,46,61,.4);
}
.fe-drop-zone.is-dragover {
  background: #e8f1e9;
  border-color: var(--navy);
  border-style: solid;
}
.fe-drop-zone.has-file {
  border-style: solid;
  border-color: #1e8449;
  background: #f0f8f1;
  cursor: default;
}
.fe-drop-zone .fe-drop-empty  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fe-drop-zone .fe-drop-filled { display: none;  flex-direction: column; align-items: center; gap: 4px; }
.fe-drop-zone.has-file .fe-drop-empty  { display: none; }
.fe-drop-zone.has-file .fe-drop-filled { display: flex; }

.fe-drop-text {
  font-size: 13px; font-weight: 600; color: var(--navy);
  letter-spacing: .2px;
}
.fe-drop-sub {
  font-size: 11px; color: rgba(26,46,61,.55);
}
.fe-drop-check {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #1e8449; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
  margin-bottom: 4px;
}
.fe-drop-filename {
  font-size: 13px; font-weight: 600; color: var(--navy);
  word-break: break-all; text-align: center;
  max-width: 360px;
}
.fe-drop-filesize {
  font-size: 11px; color: rgba(26,46,61,.55);
}
.fe-drop-clear {
  margin-top: 6px;
  background: none;
  border: 1px solid rgba(169,50,38,.4);
  border-radius: 3px;
  padding: 3px 10px;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #a93226;
  cursor: pointer;
}
.fe-drop-clear:hover {
  background: rgba(169,50,38,.07);
  border-color: rgba(169,50,38,.65);
}

/* Per-platform delivery date rows */
.fe-deliv-row {
  display: grid; grid-template-columns: 1fr 180px;
  align-items: center; gap: 10px;
  padding: 8px 10px; background: #f7f5ef; border-radius: 4px;
}
.fe-plat-label {
  font-size: 12px; font-weight: 600; color: var(--navy);
}

/* Product blocks */
.fe-prod-block {
  background: #f7f5ef; border-radius: 5px;
  padding: 12px 14px; margin-bottom: 12px;
  border-left: 4px solid var(--navy);
}
.fe-prod-head {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 12px; margin-bottom: 10px;
}
.fe-prod-name { font-weight: 600; font-size: 13px; }

.fe-platforms {
  display: flex; flex-direction: column; gap: 8px;
  padding-left: 8px; border-left: 2px solid rgba(26,46,61,.1);
  margin-bottom: 8px;
}
.fe-plat-block {
  background: #fff; border-radius: 4px; padding: 10px 12px;
}
.fe-plat-head {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px; margin-bottom: 8px;
}
.fe-plat-name { font-size: 12px; font-weight: 600; }

.fe-variants {
  display: flex; flex-direction: column; gap: 5px;
  padding-left: 8px; border-left: 2px solid rgba(26,46,61,.07);
  margin-bottom: 6px;
}
.fe-var-row {
  display: grid; grid-template-columns: 80px 100px 1fr 70px auto;
  gap: 6px; align-items: center;
  padding: 5px 8px; background: #f7f5ef; border-radius: 3px;
}
.fe-var-row input.text-input {
  font-size: 11px; padding: 4px 7px;
}
.fe-add-var, .fe-add-plat {
  font-size: 9px; padding: 4px 8px;
}

/* Events list */
.fe-events-head {
  display: grid; grid-template-columns: 140px 56px 160px 1fr 28px;
  gap: 8px;
  padding: 0 10px 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(26,46,61,.5);
}
.fe-events-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 8px;
}
.fe-event-row {
  display: grid; grid-template-columns: 140px 56px 160px 1fr 28px;
  gap: 8px; align-items: center;
  padding: 5px 10px; background: #f7f5ef; border-radius: 3px;
}
.fe-event-row .text-input,
.fe-event-row .select-input {
  font-size: 11px; padding: 5px 8px;
}

/* Conflict groups (same-day same-type) */
.fe-conflicts {
  background: #fdf6ec; border-radius: 5px; padding: 12px 16px;
  border: 1px solid rgba(211,84,0,.18);
}
.fe-conflict-block {
  background: #fff; border-radius: 4px; padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 3px solid #d35400;
}
.fe-conflict-head {
  display: flex; gap: 12px; align-items: center;
  font-size: 11px; color: var(--navy); margin-bottom: 6px;
}
.fe-conflict-date { font-weight: 700; }
.fe-conflict-type {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(26,46,61,.6);
}
.fe-conflict-count { font-size: 10px; color: rgba(26,46,61,.55); }
.fe-conflict-events {
  list-style: disc; padding-left: 18px; margin: 0 0 8px;
  font-size: 11px; color: rgba(26,46,61,.85); line-height: 1.55;
}
.fe-conflict-actions { display: flex; gap: 6px; }
.fe-conflict-actions button { padding: 5px 10px; font-size: 9.5px; }
.fe-conflicts-bulk {
  display: flex; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid rgba(211,84,0,.15);
}
.fe-conflicts-bulk button { padding: 5px 12px; font-size: 9.5px; }

/* Day-load + unmapped warning panels (use the same style family) */
.fe-dayload, .fe-unmapped {
  background: #fdf2f2; border-radius: 5px; padding: 12px 16px;
  border: 1px solid rgba(169,50,38,.15);
}
.fe-dayload .section-title,
.fe-unmapped .section-title { color: #a93226; }

/* Warnings panel */
.fe-warnings {
  background: #fdf2f2; border-radius: 5px; padding: 12px 16px;
  border: 1px solid rgba(169,50,38,.15);
}
.fe-warnings-list {
  margin: 0; padding-left: 18px;
  font-size: 11px; color: rgba(26,46,61,.85); line-height: 1.55;
}
.fe-warnings-list li { margin-bottom: 4px; }

/* ════════════════════════════════════════════════════════════
   ESTIMATE BUILDER  -  document-preview aesthetic.

   Brand color (estimate UI + PDF): --ap-est-navy #0a3254
   The rest of the admin chrome stays --navy (#1a2e3d).

   All type uses the system sans stack (var(--font)), same as the
   rest of the app. Visual hierarchy comes from size, weight,
   color, and letter-spacing on uppercase labels.

   The editor is intentionally sparse so it reads as a draft of
   the printed estimate: white "paper" inside the dark setup-shell
   chrome, hairline rules instead of filled bands, all-caps small
   labels with letter-spacing, generous whitespace.
   Inputs are borderless by default; hover/focus reveals the affordance.
   ════════════════════════════════════════════════════════════ */

/* ─── List view ─────────────────────────────────────────────── */
.est-list-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.est-list-actions { display: flex; align-items: center; gap: 10px; }
.est-list-search { width: 220px; padding: 6px 10px; font-size: 11px; }

.est-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.est-card {
  background: #fff; border-radius: 5px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04);
  display: flex; flex-direction: column;
  border-top: 3px solid #0a3254;
}
.est-card-head {
  padding: 12px 14px 8px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.est-card-num {
  font-family: "SF Mono","Fira Code",monospace;
  font-size: 11px; font-weight: 700; color: #0a3254; letter-spacing: .8px;
}
.est-card-body {
  padding: 4px 14px 10px; flex: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.est-card-client {
  font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: rgba(26,46,61,.55);
}
.est-card-project { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.est-card-meta { margin-top: 6px; font-size: 10px; color: rgba(26,46,61,.55); letter-spacing: .3px; }
.est-card-total { font-size: 14px; font-weight: 700; color: #0a3254; margin-top: 4px; letter-spacing: .2px; }
.est-card-foot {
  padding: 9px 14px; border-top: 1px solid rgba(26,46,61,.07);
  display: flex; gap: 6px; align-items: center; justify-content: space-between;
}
.est-card-foot-actions { display: flex; gap: 6px; }
.est-card-foot .btn-ghost { padding: 4px 10px; font-size: 9px; }

.est-empty {
  background: #fff; padding: 36px 24px; border-radius: 5px;
  text-align: center; color: rgba(26,46,61,.55);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* ─── Builder shell + chrome bar ─────────────────────────────── */
.est-form-actions-right { display: flex; gap: 8px; align-items: center; }

.est-status-select {
  width: auto; padding: 4px 8px; font-size: 11px;
  background: rgba(255,255,255,.06); color: var(--beige);
  border-color: rgba(232,224,208,.25);
}
.est-status-select option { color: var(--navy); background: #fff; }

/* The estimate body is treated as a "paper" preview. Override the
   generic setup-body padding so the document fills more of the shell.
   Same treatment for the invoice form so both documents read like
   8.5x11 paper sitting on a beige frame. */
#view-estimate-form .setup-body,
#view-invoice-form  .setup-body,
#view-project-form  .setup-body {
  background: #fff;
  padding: 44px 56px 36px;
  max-width: 920px;
  margin: 0 auto;
}
#view-estimate-form .setup-shell,
#view-invoice-form  .setup-shell,
#view-project-form  .setup-shell {
  background: #f5f1e6;  /* light beige frame around the paper */
  padding-bottom: 0;
}

/* PDF view panels — inline PDF display replacing the old "Preview" tab */
#view-invoice-pdf  .setup-body,
#view-estimate-pdf .setup-body { padding: 0; overflow: hidden; }
#view-invoice-pdf  .setup-body iframe,
#view-estimate-pdf .setup-body iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 100px);
  border: none;
}

/* Strip the section-block dividers so the document flows as one piece */
#view-estimate-form .section-block,
#view-invoice-form  .section-block {
  border-top: none; padding-top: 0; margin-top: 28px;
}
#view-estimate-form .section-block:first-child,
#view-invoice-form  .section-block:first-child { margin-top: 0; }

/* Invoice-specific Balance Due bar — much shorter than the estimate's
   grand-total bar, with a smaller dollar amount. The label stays at
   roughly the same visual weight; the number is the thing that gets
   downsized so the bar reads as a polite footer rather than a
   trumpet blast. */
#view-invoice-form .est-totals-row.is-final {
  padding: 6px 22px;
  margin-top: 12px;
}
#view-invoice-form .est-totals-row.is-final .label {
  font-size: 10px;
}
#view-invoice-form .est-totals-row.is-final .value {
  font-size: 11px;
}

/* Tiny doc labels (replace .section-title for inline use) */
.est-doc-label {
  display: block;
  font-family: var(--font);
  font-size: 9.5px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: #0a3254;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(10,50,84,.18);
}
/* Inline meta beside a section label, e.g. "(56 total deliverables)"
   — same uppercase tracking but lighter weight so it reads as
   secondary info next to the heading. The number itself is an
   editable inline input so the user can override the auto-count. */
.est-doc-label-meta {
  font-weight: 500;
  color: rgba(10,50,84,.55);
  margin-left: 10px;
  letter-spacing: 1.6px;
}
.est-doc-label-meta-input {
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(10,50,84,.32);
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  width: 38px;
  text-align: center;
  padding: 0 2px;
  margin: 0 1px;
  outline: none;
  transition: border-bottom-color .12s, background .12s;
}
.est-doc-label-meta-input:hover {
  border-bottom-color: rgba(10,50,84,.55);
}
.est-doc-label-meta-input:focus {
  border-bottom-color: var(--navy);
  color: var(--navy);
  background: rgba(255,255,255,.55);
}

/* ─── PDF-preview header (mirrors the PDF header layout) ───── */
.est-doc-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-start; gap: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #0a3254;
  margin-bottom: 24px;
}
.est-doc-company {
  font-size: 11px; line-height: 1.6; color: var(--navy);
}
.est-doc-company div { letter-spacing: .1px; }
.est-doc-logo {
  width: 168px; height: auto; display: block;
}

/* Client + meta block (under the logo header) - tight document layout.
   Each client field reads as a line of text; the box only appears on
   hover/focus, matching the section title and stamp inputs. */
.est-doc-meta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px; align-items: flex-start;
  margin-bottom: 22px;
}
/* Client block - single column stack. Each line reads as a row of an
   address; box appears on hover/focus, matching the stamp inputs. */
.est-doc-client {
  display: flex; flex-direction: column;
  gap: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--navy);
  max-width: 320px;
}
/* City / State / Zip on one tight line - same visual rhythm as a
   real address line, but each field stays independently editable. */
.est-doc-client-citystate {
  display: grid;
  grid-template-columns: 1fr 32px 64px;
  gap: 3px;
}
.est-doc-client-citystate input { text-align: left; }

/* Estimate stamp - tighter spacing, label and input share a single line. */
.est-doc-stamp {
  min-width: 250px;
  display: grid; grid-template-columns: auto 1fr;
  gap: 1px 12px;
  align-items: baseline;
}
.est-doc-stamp .stamp-label {
  font-family: var(--font);
  font-size: 9.5px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: #0a3254;
  text-align: right;
  padding-top: 4px;
  white-space: nowrap;
}
.est-doc-stamp input {
  font-family: var(--font); font-size: 12px; color: var(--navy);
  text-align: right;
  padding: 2px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  width: 100%;
  line-height: 1.3;
}
.est-doc-stamp input:hover  { border-color: rgba(26,46,61,.15); background: #f9f7f2; }
.est-doc-stamp input:focus  { outline: none; border-color: var(--navy); background: #fff; }

/* Inline doc inputs - faint box always visible so each line clearly
   reads as an editable field. Box gets stronger on hover/focus. */
.est-doc-input,
#view-estimate-form .text-input.est-doc-input {
  border: 1px solid rgba(26,46,61,.12);
  background: #fbfaf6;
  font-size: 12px;
  color: var(--navy);
  padding: 3px 6px;
  border-radius: 3px;
  font-family: var(--font);
  line-height: 1.4;
}
.est-doc-input:hover  { background: #f5f1e6; border-color: rgba(26,46,61,.25); }
.est-doc-input:focus  { outline: none; background: #fff; border-color: var(--navy); }
.est-doc-input::placeholder { color: rgba(26,46,61,.30); font-style: italic; }

/* Project name - large, full-width inline */
.est-doc-projectname {
  font-family: var(--font);
  font-size: 20px; font-weight: 700; color: #0a3254;
  letter-spacing: .2px;
  margin: 6px 0 14px;
  padding: 4px 8px;
}
.est-doc-projectname::placeholder { font-style: italic; font-weight: 400; }

/* Scope summary textarea sits right under the project name -
   reads as document body text. */
.est-doc-scope-input {
  margin-top: 0;
  font-size: 12px; line-height: 1.55;
  min-height: 44px;
}
.est-scope-block { margin-top: 8px; }

/* Scope summary textarea reads as document text */
.est-doc-scope {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.6;
  color: var(--navy);
  border-radius: 3px;
  resize: vertical;
  min-height: 50px;
}
.est-doc-scope:hover { background: #f9f7f2; border-color: rgba(26,46,61,.15); }
.est-doc-scope:focus { outline: none; background: #fff; border-color: var(--navy); }
.est-doc-scope::placeholder { color: rgba(26,46,61,.30); font-style: italic; }

/* ─── Information Provided ─────────────────────────────────── */
.est-info-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.est-info-row {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap: 8px; align-items: center;
  padding: 4px 0;
}
.est-info-row::before {
  content: "-"; color: rgba(26,46,61,.55); font-size: 12px;
  text-align: center;
}
.est-info-row input.text-input { font-size: 12px; }
.est-info-row .btn-row-del { padding: 0 6px; }

/* ─── Sections (line item groups) - hairline aesthetic ─────── */
.est-section {
  margin-bottom: 22px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.est-section { transition: margin .15s ease, opacity .12s ease, height .15s ease; }
.est-section.is-dragging {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Section drop target opens a slot the size of the source section. */
.est-section.drop-before {
  margin-top: var(--est-drag-h, 60px);
  position: relative;
}
.est-section.drop-before::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--est-drag-h, 60px));
  height: calc(var(--est-drag-h, 60px) - 6px);
  margin: 3px 0;
  background: rgba(240, 236, 225, .70);
  border: 1px dashed rgba(10, 50, 84, .35);
  border-radius: 3px;
  pointer-events: none;
}
.est-section.drop-after {
  margin-bottom: var(--est-drag-h, 60px);
  position: relative;
}
.est-section.drop-after::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(-1 * var(--est-drag-h, 60px));
  height: calc(var(--est-drag-h, 60px) - 6px);
  margin: 3px 0;
  background: rgba(240, 236, 225, .70);
  border: 1px dashed rgba(10, 50, 84, .35);
  border-radius: 3px;
  pointer-events: none;
}

.est-section-head {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: #f0ece1;
  border-bottom: none;
  margin-bottom: 0;
  border-radius: 2px;
}
.est-section.is-headerless .est-section-head {
  background: transparent;
}
.est-drag-handle {
  display: flex;
  align-items: center; justify-content: center;
  cursor: grab; color: rgba(10,50,84,.55);
  font-size: 11px;
  user-select: none; line-height: 1;
  align-self: center;
  height: 24px;
  border-radius: 3px;
  touch-action: none;
}
.est-drag-handle:hover  { background: #ddd5be; color: #0a3254; }
.est-drag-handle:active { cursor: grabbing; background: #ccc4ad; }

.est-section-label-input {
  background: transparent; border: 1px solid transparent;
  color: #0a3254;
  font-family: var(--font);
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 3px 6px; border-radius: 3px;
  width: 100%;
}
.est-section-label-input::placeholder { color: rgba(10,50,84,.35); }
.est-section-label-input:hover  { background: #f9f7f2; border-color: rgba(26,46,61,.15); }
.est-section-label-input:focus  { outline: none; background: #fff; border-color: var(--navy); }

.est-section-del {
  background: none; border: none; color: rgba(26,46,61,.30);
  font-size: 14px; line-height: 1; padding: 2px 4px; cursor: pointer;
  transition: color .12s;
}
.est-section-del:hover { color: #0a3254; }

/* Section subtotal row: lives under the items, aligned to the items grid
   so the value sits beneath the LINE TOTAL column. Mirrors the PDF. */
.est-section-subtotal-row {
  display: grid;
  grid-template-columns: 24px minmax(0,1.0fr) minmax(0,2.4fr) 76px 60px 80px 38px;
  gap: 6px;
  padding: 7px 0 4px;
  border-top: 1px solid rgba(26,46,61,.10);
  margin-top: 2px;
}
.est-section-subtotal-row .label {
  grid-column: 5;
  text-align: right;
  font-family: var(--font);
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(26,46,61,.55);
  align-self: center;
  white-space: nowrap;
}
.est-section-subtotal-row .value {
  grid-column: 6;
  text-align: right;
  font-size: 12px; font-weight: 700; color: #0a3254;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* ─── Line items ───────────────────────────────────────────── */
/* Column grid: handle | service | description | rate-stepper | qty-stepper | total | del
   Stepper columns include the +/- buttons so they get explicit width. */
.est-items {
  display: flex; flex-direction: column; gap: 0;
}
.est-item-row {
  display: grid;
  grid-template-columns: 24px minmax(0,1.0fr) minmax(0,2.4fr) 76px 60px 80px 38px;
  gap: 6px;
  align-items: start;
  padding: 5px 0 5px 0;
  border-bottom: 1px solid rgba(26,46,61,.07);
}
.est-item-row:last-child { border-bottom: none; }
.est-item-row { transition: margin .15s ease, padding .15s ease, height .15s ease, opacity .12s ease; }

/* Source row while dragging: collapses to zero height. Other rows shift
   up to fill the gap, then a fresh slot opens at the drop target. */
.est-item-row.is-dragging {
  height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  opacity: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Drop target: opens a real slot the size of the source so the cursor
   sees other rows pushing out of the way (Trello-style). The slot is a
   pseudo-element rendered in the gap. --est-drag-h is set in JS to the
   source row's height when the drag starts. */
.est-item-row.drop-before {
  margin-top: var(--est-drag-h, 32px);
  position: relative;
}
.est-item-row.drop-before::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--est-drag-h, 32px));
  height: calc(var(--est-drag-h, 32px) - 4px);
  margin: 2px 0;
  background: rgba(240, 236, 225, .70);
  border: 1px dashed rgba(10, 50, 84, .35);
  border-radius: 3px;
  pointer-events: none;
}
.est-item-row.drop-after {
  margin-bottom: var(--est-drag-h, 32px);
  position: relative;
}
.est-item-row.drop-after::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(-1 * var(--est-drag-h, 32px));
  height: calc(var(--est-drag-h, 32px) - 4px);
  margin: 2px 0;
  background: rgba(240, 236, 225, .70);
  border: 1px dashed rgba(10, 50, 84, .35);
  border-radius: 3px;
  pointer-events: none;
}
.est-item-drag {
  display: flex;
  align-items: center; justify-content: center;
  cursor: grab; color: rgba(26,46,61,.40);
  font-size: 11px; line-height: 1;
  height: 26px; min-height: 26px;
  text-align: center;
  user-select: none;
  align-self: start;
  border-radius: 3px;
  /* No native draggable attribute - we use pointer events instead. */
  touch-action: none;
}
.est-item-drag:hover  { background: #ece6d5; color: #0a3254; }
.est-item-drag:active { cursor: grabbing; background: #ddd5be; }

/* Inline item inputs match the doc-input aesthetic */
.est-item-row .text-input {
  font-size: 11px; padding: 3px 7px;
  border: 1px solid transparent; background: transparent;
  color: var(--navy);
  line-height: 1.4;
}
.est-item-row .text-input:hover { background: #f9f7f2; border-color: rgba(26,46,61,.15); }
.est-item-row .text-input:focus { outline: none; background: #fff; border-color: var(--navy); }
.est-item-row .text-input.is-service { font-weight: 700; color: #0a3254; }
.est-item-row .text-input.is-numeric { text-align: right; }

/* Service type + description: textareas that auto-grow vertically
   so long values wrap into multiple lines instead of getting cut off.
   field-sizing handles modern browsers; JS fallback covers the rest. */
.est-item-row textarea.is-desc,
.est-item-row textarea.is-service {
  width: 100%;
  resize: none;
  overflow: hidden;
  min-height: 22px;
  field-sizing: content;
  font-family: var(--font);
  line-height: 1.4;
  word-break: break-word;
}
.est-item-row textarea.is-service {
  font-weight: 700;
  color: #0a3254;
}
.est-item-linetotal {
  font-size: 11px; font-weight: 700; color: var(--navy);
  text-align: right; padding: 8px 4px;
  align-self: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* Tabular figures everywhere a column of money or quantities lines up,
   so digits sit on the same vertical track. */
.est-item-row .text-input.is-numeric,
.est-stepper input,
.est-totals-row .value,
.est-section-subtotal-row .value,
.est-discount-input,
.est-tax-input {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.est-item-actions {
  display: flex; gap: 2px; align-items: center;
  align-self: center; justify-content: flex-end;
}
.est-item-dup, .est-item-del {
  background: none; border: none;
  color: rgba(26,46,61,.30);
  font-size: 13px; line-height: 1; cursor: pointer;
  padding: 6px 4px;
  border-radius: 3px;
  transition: color .12s, background .12s;
}
.est-item-dup:hover { color: #0a3254; background: #f0ece1; }
.est-item-del:hover { color: #a93226; background: rgba(169,50,38,.08); }

.est-items-foot {
  padding: 8px 0 0 22px;
  display: flex; justify-content: flex-start;
}

/* Column header (within each section) - very subtle */
.est-items-head {
  display: grid;
  grid-template-columns: 24px minmax(0,1.0fr) minmax(0,2.4fr) 76px 60px 80px 38px;
  gap: 6px;
  padding: 4px 0;
  font-family: var(--font);
  font-size: 8.5px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(26,46,61,.5);
}
.est-items-head .col-rate,
.est-items-head .col-qty,
.est-items-head .col-total { text-align: right; }

/* ─── Numeric stepper: large +/- buttons flanking a hidden-arrow input ── */
.est-stepper {
  display: grid;
  grid-template-columns: 16px 1fr 16px;
  align-items: stretch;
  border: 1px solid rgba(26,46,61,.10);
  border-radius: 3px;
  background: #fbfaf6;
  height: 22px;
  transition: background .12s, border-color .12s;
}
.est-stepper:hover            { background: #f9f7f2; border-color: rgba(26,46,61,.15); }
.est-stepper:focus-within     { background: #fff; border-color: var(--navy); }
.est-stepper input {
  border: none !important;
  background: transparent !important;
  text-align: center;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  color: var(--navy);
  padding: 0 2px !important;
  width: 100%;
  /* Hide native browser stepper arrows so our custom buttons aren't redundant */
  -moz-appearance: textfield;
  appearance: textfield;
}
.est-stepper input::-webkit-outer-spin-button,
.est-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.est-stepper input:focus { outline: none; }
.est-stepper-btn {
  background: transparent;
  border: none;
  color: rgba(10,50,84,.55);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background .12s, color .12s;
  user-select: none;
}
.est-stepper-btn:first-child { border-right: 1px solid rgba(26,46,61,.08); }
.est-stepper-btn:last-child  { border-left:  1px solid rgba(26,46,61,.08); }
.est-stepper-btn:hover  { background: #ece6d6; color: #0a3254; }
.est-stepper-btn:active { background: #e0d8c4; }

/* ─── Headerless section (empty label - hides the visual heading) ─── */
.est-section.is-headerless .est-section-head {
  border-bottom: none;
  padding-bottom: 0;
  opacity: .35;
  transition: opacity .15s;
}
.est-section.is-headerless .est-section-head:hover,
.est-section.is-headerless .est-section-head:focus-within {
  opacity: 1;
}
.est-section.is-headerless .est-section-subtotal {
  /* Hide the per-section subtotal when the heading is hidden -
     the user is asking for compact, run-on items. */
  visibility: hidden;
}

/* ─── Add section / add CO buttons ─────────────────────────── */
.est-add-section-row {
  display: flex; gap: 10px; margin-top: 16px;
  flex-wrap: wrap;
}
.est-add-section-row .btn-add-row {
  background: transparent; color: #0a3254;
  border: 1px dashed rgba(10,50,84,.35);
}
.est-add-section-row .btn-add-row:hover {
  background: #f9f7f2; border-color: rgba(10,50,84,.6);
}

/* ─── Change order block - same hairline aesthetic, just emphasized ─── */
.est-co-block {
  margin: 30px 0 4px;
  padding: 18px 0 4px;
  border-top: 2px solid #0a3254;
  border-bottom: 1px solid rgba(26,46,61,.10);
  background: transparent;
  border-radius: 0;
}
.est-co-band {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 12px; align-items: baseline;
  padding: 0 0 12px 0;
}
.est-co-band-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: #0a3254;
}
.est-co-band-num {
  background: transparent; color: #0a3254;
  border: 1px solid transparent;
  font-family: "SF Mono","Fira Code",monospace; font-size: 11px;
  font-weight: 700; letter-spacing: .5px;
  padding: 4px 10px; border-radius: 3px;
  width: 200px; min-width: 200px;
}
.est-co-band-num:hover { background: #f9f7f2; border-color: rgba(26,46,61,.15); }
.est-co-band-num:focus { outline: none; background: #fff; border-color: var(--navy); }

.est-co-band-date {
  background: transparent; color: var(--navy);
  border: 1px solid transparent;
  font-size: 11px; padding: 4px 8px; border-radius: 3px;
  font-family: var(--font);
}
.est-co-band-date:hover { background: #f9f7f2; border-color: rgba(26,46,61,.15); }
.est-co-band-date:focus { outline: none; background: #fff; border-color: var(--navy); }

.est-co-subtotal {
  font-size: 12px; font-weight: 700; color: #0a3254; letter-spacing: .3px;
  white-space: nowrap;
}
.est-co-del {
  background: none; border: none; color: rgba(26,46,61,.30);
  font-size: 14px; line-height: 1; padding: 2px 4px; cursor: pointer;
}
.est-co-del:hover { color: #0a3254; }

.est-co-reason {
  padding: 4px 0 14px;
}
.est-co-reason textarea {
  width: 100%; min-height: 44px; resize: vertical;
  padding: 8px 10px;
  border: 1px solid transparent;
  font-family: var(--font); font-size: 12px;
  font-style: italic;
  color: var(--navy);
  background: transparent; line-height: 1.55;
  border-radius: 3px;
}
.est-co-reason textarea:hover { background: #f9f7f2; border-color: rgba(26,46,61,.15); }
.est-co-reason textarea:focus { outline: none; background: #fff; border-color: var(--navy); }
.est-co-reason textarea::placeholder { color: rgba(26,46,61,.35); }

.est-co-sections { padding: 0; }
.est-co-sections .est-section { margin-bottom: 18px; }

/* ─── Totals block ─────────────────────────────────────────── */
.est-totals {
  margin-top: 22px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(26,46,61,.10);
  display: flex; flex-direction: column; align-items: stretch;
}
.est-totals > .est-totals-row:not(.is-final) {
  align-self: flex-end;
}
/* Three explicit columns: label | optional input controls | value.
   The middle column collapses to 0 when not needed. */
.est-totals-row {
  display: grid;
  grid-template-columns: 1fr auto 130px;
  align-items: baseline; gap: 18px;
  padding: 8px 0;
  font-size: 11px; color: var(--navy);
  width: 500px; max-width: 100%;
}
.est-totals-row .label {
  color: rgba(26,46,61,.65);
  text-align: right;
}
.est-totals-row .value {
  font-weight: 700;
  text-align: right;
}
/* Final ESTIMATE TOTAL: navy fill bar that spans the full content width.
   The visual anchor at the end of the document, mirroring the PDF.
   Use flex so the empty middle span (used by the input rows) collapses. */
.est-totals-row.is-final {
  margin-top: 10px; padding: 14px 22px;
  border-top: none;
  background: #0a3254;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  border-radius: 3px;
  gap: 12px;
}
.est-totals-row.is-final > :nth-child(2):empty { display: none; }
.est-totals-row.is-final .label {
  font-family: var(--font);
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  font-size: 10.5px; color: #e8e0d0;
  text-align: left;
}
.est-totals-row.is-final .value {
  color: #ffffff;
  font-family: var(--font);
  font-size: 20px; font-weight: 700;
  letter-spacing: .2px;
  text-align: right;
  min-width: auto;
}

.est-totals-controls {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
}

/* Discount + tax inputs - same look as inline doc inputs but explicit width */
.est-discount-input,
.est-tax-input {
  width: 88px; padding: 5px 8px;
  font-size: 12px; text-align: right;
  border: 1px solid transparent; background: transparent;
  color: var(--navy); border-radius: 3px;
  font-family: var(--font);
  /* Hide native browser stepper arrows (default control is too small to use) */
  -moz-appearance: textfield;
  appearance: textfield;
}
.est-discount-input::-webkit-outer-spin-button,
.est-discount-input::-webkit-inner-spin-button,
.est-tax-input::-webkit-outer-spin-button,
.est-tax-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.est-discount-input:hover, .est-tax-input:hover { background: #f9f7f2; border-color: rgba(26,46,61,.15); }
.est-discount-input:focus, .est-tax-input:focus { outline: none; background: #fff; border-color: var(--navy); }

.est-discount-toggle {
  display: inline-flex; gap: 0;
  border: 1px solid rgba(26,46,61,.18);
  border-radius: 3px; overflow: hidden;
  height: 28px;
}
.est-discount-toggle button {
  background: #fff; color: rgba(26,46,61,.6); border: none;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  padding: 4px 10px; cursor: pointer;
  transition: background .12s, color .12s;
  min-width: 28px;
}
.est-discount-toggle button.is-active { background: #0a3254; color: #fff; }
.est-discount-toggle button:hover:not(.is-active) { background: #f0eee8; }

/* ─── Notes & terms - inline doc textareas ─────────────────── */
.est-textarea {
  width: 100%; min-height: 60px; resize: vertical;
  padding: 8px 10px;
  border: 1px solid transparent;
  font-family: var(--font); font-size: 12px; color: var(--navy);
  background: transparent; line-height: 1.6;
  border-radius: 3px;
}
.est-textarea:hover { background: #f9f7f2; border-color: rgba(26,46,61,.15); }
.est-textarea:focus { outline: none; background: #fff; border-color: var(--navy); }
.est-textarea.is-long { min-height: 110px; }
.est-textarea::placeholder { color: rgba(26,46,61,.30); font-style: italic; }

/* Notes block doc label inset to match other doc labels */
.est-notes-block .est-doc-label,
.est-terms-block .est-doc-label { margin-top: 8px; }

.est-terms-block { margin-top: 12px; }
.est-terms-block .est-doc-label { margin-top: 18px; }
.est-terms-block .est-doc-label:first-child { margin-top: 0; }

/* Dirty Save button — keep navy (no rust) */
.btn-modal.is-dirty {
  background: var(--navy);
  color: var(--beige);
  box-shadow: 0 0 0 2px rgba(232,224,208,.5);
}
.btn-modal.is-dirty::after {
  content: " *";
}

/* Fast custom tooltip that shows ~200ms after hover via the
   data-tooltip attribute (replacing the slow native title= behavior) */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: var(--navy);
  color: var(--beige);
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease .15s, transform .12s ease .15s;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Drag ghost: a clone of the row/section that follows the cursor.
   The clone is a snapshot - inputs are disabled, no transitions, just
   visual. It sits on top of the page and never receives pointer events. */
.est-drag-ghost {
  background: #ffffff !important;
  border: 1px solid rgba(10,50,84,.18) !important;
  border-radius: 4px !important;
  box-shadow:
    0 8px 24px rgba(10,50,84,.18),
    0 2px 6px rgba(10,50,84,.12);
  opacity: .70 !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: none !important;
  /* Override the is-dragging collapse if the cloned node ever
     accidentally carries that class. */
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}
.est-drag-ghost.est-section {
  padding: 0 !important;
  overflow: hidden;
}
.est-drag-ghost.drop-before,
.est-drag-ghost.drop-after {
  box-shadow:
    0 8px 24px rgba(10,50,84,.18),
    0 2px 6px rgba(10,50,84,.12) !important;
}

/* Suppress the data-tooltip popovers while a drag is in progress -
   otherwise hovering over neighboring handles flashes "Drag to reorder"
   tooltips all over the place during the drag itself. */
body.is-dragging-active [data-tooltip]:hover::after,
body.is-dragging-active [data-tooltip]::after {
  display: none !important;
  opacity: 0 !important;
}

/* ────────────────────────────────────────────────────────────
   PHASE 2: Invoices + Clients
   ──────────────────────────────────────────────────────────── */

/* Close (X) button in the client form's setup-head. Mirrors the
   .modal-close treatment used in pop-up dialogs but sized for the
   slightly bigger setup-head height. */
.cli-close-btn {
  font-size: 20px;
  padding: 4px 8px;
  margin-left: auto;
  color: rgba(232,224,208,.7);
}
.cli-close-btn:hover { color: var(--beige); }

/* Status pills used in invoice list + client detail */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 9px 3px 7px;
  border-radius: 10px;
  line-height: 1;
}
/* Status pill iconography — non-color signal so Active vs Delivered
   read distinctly even with color stripped. ● = live/in-progress,
   ✓ = completed, ◌ = inert/archived, ⋯ = draft, → = in transit. */
.status-pill::before {
  content: "";
  display: inline-block;
  width: 9px; text-align: center;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.status-active::before      { content: "\25CF"; }   /* ● filled circle */
.status-delivered::before   { content: "\2713"; }   /* ✓ check */
.status-archived::before    { content: "\25CC"; }   /* ◌ dotted circle */
.status-approved::before    { content: "\2713"; }   /* ✓ legacy */
.status-awarded::before     { content: "\2713"; }   /* ✓ check — bid won */
.status-not_awarded::before { content: "\25CC"; }   /* ◌ dotted circle — bid done */
.status-draft::before       { content: "\22EF"; }   /* ⋯ ellipsis */
.status-sent::before        { content: "\2192"; }   /* → arrow */
.status-paid::before        { content: "\2713"; }   /* ✓ */
.status-draft { background: rgba(26,46,61,.10); color: rgba(26,46,61,.7); }
.status-sent  { background: rgba(46,109,164,.14); color: #2e6da4; }
.status-paid  { background: rgba(40,140,80,.14);  color: #287850; }

/* Global max-width for the main admin app views. Keeps content
   readable on wide monitors (lists don't stretch arbitrarily, form
   shells don't float in space) without affecting the lock screens.
   The estimate + invoice form's inner .setup-body still caps at
   920px for the paper-document feel — it sits centered inside the
   1200px shell. */
#view-dashboard,
#view-estimates,
#view-invoices,
#view-clients,
#view-projects,
#view-overview,
#view-reports,
#view-from-estimate,
#view-job-form,
#view-estimate-form,
#view-invoice-form,
#view-client-form,
#view-project-form {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
/* The list-toolbar already handles its own horizontal padding
   internally, so zero out the section padding when it's wrapping. */
#view-invoices .est-list-toolbar,
#view-clients  .est-list-toolbar,
#view-projects .est-list-toolbar,
#view-overview .est-list-toolbar,
#view-estimates .est-list-toolbar {
  padding-left: 0;
  padding-right: 0;
}

/* Invoice list container — block layout (vertical stack of rows),
   NOT the card-grid layout the .est-grid class provides. Each row is
   a full-width grid that distributes its own columns. */
.inv-grid {
  display: block;
}

/* Invoice list table */
.inv-row {
  display: grid;
  /* Checkbox | Invoice # | Project (wide) | Client | Date | Status | Amount | Actions */
  grid-template-columns: 28px 110px minmax(0, 2.2fr) minmax(0, 1fr) 90px 80px 110px 150px;
  gap: 14px;
  align-items: center;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--navy);
}
/* Grid cells default to min-width: auto, which is the content's
   intrinsic minimum width. When content is wider than the column
   allocation, the cell bullies neighbors out of place. Forcing
   min-width: 0 makes the column width authoritative — content
   either truncates or wraps but never displaces other cells. */
.inv-row > * { min-width: 0; }
.inv-row-head {
  background: transparent;
  border: none;
  font-size: 9px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  padding: 4px 14px;
  margin-bottom: 0;
}
.inv-row.is-clickable {
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.inv-row.is-clickable:hover {
  background: #faf8f2;
  border-color: rgba(26,46,61,.18);
}
.inv-row .inv-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Invoice number reads as a link so the click affordance is obvious */
.inv-cell-num {
  font-weight: 600;
  color: #2e6da4;
  text-decoration: underline;
  text-decoration-color: rgba(46,109,164,.4);
  text-underline-offset: 2px;
}
.inv-row.is-clickable:hover .inv-cell-num { text-decoration-color: #2e6da4; }
.inv-cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.inv-actions .btn-ghost {
  padding: 4px 9px;
  font-size: 9.5px;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.inv-grand-total {
  display: flex; justify-content: flex-end; align-items: baseline;
  gap: 16px; padding: 14px 14px 0;
  font-size: 11px; color: rgba(26,46,61,.6);
}
.inv-grand-amount {
  font-size: 14px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Invoice form line items grid */
.inv-form-row {
  display: grid;
  grid-template-columns: 110px 1fr 100px 80px 110px 36px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(26,46,61,.08);
}
.inv-form-head {
  font-size: 9px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: rgba(26,46,61,.55);
  border-bottom: 1px solid rgba(26,46,61,.18);
  padding-bottom: 6px;
}
.inv-form-row .inv-num { text-align: right; }
.inv-num-input { text-align: right; }
.inv-line-total { font-variant-numeric: tabular-nums; }
.btn-row-del {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: rgba(26,46,61,.4);
  padding: 0 4px; line-height: 1;
}
.btn-row-del:hover { color: #c0392b; }

/* Client list table */
.cli-grid { padding: 0; }
.cli-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 100px 100px 110px;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--navy);
  cursor: pointer;
}
.cli-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-row-head > * { white-space: nowrap; }
.cli-row[data-action="open"]:hover { background: #faf8f2; }
.cli-row-head {
  background: transparent; border: none; cursor: default;
  font-size: 9px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  padding: 4px 14px;
  margin-bottom: 0;
}
.cli-row-head:hover { background: transparent; }
.cli-num { text-align: right; font-variant-numeric: tabular-nums; }
.cli-cell-name { font-weight: 600; }

/* Client detail screen */
.cli-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.cli-stat {
  flex: 1;
  min-width: 130px;
  display: flex; flex-direction: column;
  background: #faf8f2;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 4px;
  padding: 10px 12px;
}
.cli-stat-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  margin-bottom: 4px;
}
.cli-stat-value {
  font-size: 16px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.cli-summary-empty {
  font-size: 11px; color: rgba(26,46,61,.55);
  font-style: italic; padding: 8px 0;
}

.cli-detail-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid rgba(26,46,61,.18);
  margin-bottom: 12px;
}
.cli-detail-tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--font);
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.cli-detail-tab:hover    { color: var(--navy); }
.cli-detail-tab.is-active{ color: var(--navy); border-bottom-color: var(--navy); }

.cli-detail-list { font-size: 11.5px; color: var(--navy); }
.cli-detail-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 100px 80px 100px;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(26,46,61,.08);
}
.cli-detail-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-detail-row.is-clickable {
  cursor: pointer;
  border-radius: 3px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
  transition: background .12s;
}
.cli-detail-row.is-clickable:hover { background: #faf8f2; }
.cli-detail-num {
  color: #2e6da4;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(46,109,164,.4);
  text-underline-offset: 2px;
}
.cli-detail-row.is-clickable:hover .cli-detail-num {
  text-decoration-color: #2e6da4;
}
.cli-detail-row[grid-template-columns] { display: grid; }   /* keep override */
.cli-detail-row.cli-detail-row-head {
  font-size: 9px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: rgba(26,46,61,.55);
  border-bottom: 1px solid rgba(26,46,61,.18);
}

/* Client typeahead floating panel (shared by estimate + invoice forms) */
.client-typeahead-panel {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(26,46,61,.18);
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(10,50,84,.18);
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--navy);
  z-index: 9999;
  max-height: 240px;
  overflow-y: auto;
}
.client-typeahead-row {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(26,46,61,.06);
}
.client-typeahead-row:last-child { border-bottom: none; }
.client-typeahead-row:hover,
.client-typeahead-row.is-active { background: #faf8f2; }
.client-typeahead-name    { font-weight: 600; }
.client-typeahead-company { font-size: 10px; color: rgba(26,46,61,.55); margin-top: 1px; }

/* Empty state for the sections list */
.est-empty-sections {
  padding: 24px;
  text-align: center;
  background: #f9f7f2;
  border: 1px dashed rgba(26,46,61,.18);
  border-radius: 4px;
  font-size: 11px;
  color: rgba(26,46,61,.55);
  margin-bottom: 12px;
}

/* ── Deck-import review banner ───────────────────────────────────
   Yellow callout pinned to the top of the estimate-form view when
   the deck analyzer flagged things worth a human glance — edit-only
   groups, complex VFX, V2 cuts, language versioning. Cleared on
   save and when opening an already-saved estimate. */
.est-review-banner {
  background: #fef7e0;
  border: 1px solid #e9c46a;
  border-left: 4px solid #d99e2b;
  border-radius: 4px;
  padding: 12px 16px 14px;
  margin-bottom: 18px;
  color: #5a4413;
  font-family: var(--font);
}
.est-review-banner[hidden] { display: none; }
.est-review-banner-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a6a1c;
  margin-bottom: 6px;
}
.est-review-banner-list {
  margin: 0; padding: 0 0 0 18px; list-style: disc;
  font-size: 11.5px; line-height: 1.55;
}
.est-review-banner-list li { margin-bottom: 4px; }
.est-review-banner-list li:last-child { margin-bottom: 0; }

/* ── From Estimate wizard: "or" divider between PDF drop and
   the saved-estimates dropdown. */
.fe-or-divider {
  display: flex; align-items: center;
  margin: 14px 0 10px;
  color: rgba(26,46,61,.45);
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
}
.fe-or-divider::before,
.fe-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(26,46,61,.14);
}
.fe-or-divider span {
  padding: 0 12px;
}

/* ── Deck Analyzer: paste-screenshot zone ───────────────────────
   Click-to-focus zone inside the paste modal. Users press Cmd+V
   to paste a screenshot; the empty/filled states mirror the
   existing FreshBooks PDF drop zone styling so the two flows feel
   like siblings. */
.deck-paste-zone {
  border: 2px dashed rgba(26,46,61,.28);
  border-radius: 6px;
  background: #fbfaf6;
  min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  cursor: text;
  transition: border-color .12s, background .12s;
  outline: none;
}
.deck-paste-zone:focus,
.deck-paste-zone:hover {
  border-color: var(--navy);
  background: #f6f3eb;
}
.deck-paste-zone.is-dragover { border-color: var(--navy); background: #eee9d9; }

.deck-paste-empty,
.deck-paste-filled { width: 100%; padding: 18px; text-align: center; }
.deck-paste-zone.is-filled .deck-paste-empty  { display: none; }
.deck-paste-zone:not(.is-filled) .deck-paste-filled { display: none; }

.deck-paste-icon {
  display: inline-block;
  background: var(--navy); color: var(--beige);
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  padding: 6px 12px; border-radius: 4px;
  margin-bottom: 12px;
}
.deck-paste-text {
  font-size: 12px; color: var(--navy);
  margin-bottom: 4px;
}
.deck-paste-sub {
  font-size: 10.5px; color: rgba(26,46,61,.55);
}

.deck-paste-filled img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 4px;
  border: 1px solid rgba(26,46,61,.18);
  display: block; margin: 0 auto 10px;
  background: #fff;
}
.deck-paste-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  font-size: 11px; color: rgba(26,46,61,.65);
}

/* ── Deck Analyzer: progress overlay ────────────────────────────
   Full-screen scrim while Claude is working through the deck. The
   inner card is centered and uses the same beige/navy palette as
   the rest of the admin tools. */
.deck-progress {
  position: fixed; inset: 0;
  background: rgba(26,46,61,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}
.deck-progress[hidden] { display: none; }

.deck-progress-card {
  background: var(--beige);
  color: var(--navy);
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 28px 28px 22px;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(10,50,84,.32);
  text-align: center;
  font-family: var(--font);
}
.deck-progress-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(26,46,61,.15);
  border-top-color: var(--navy);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: deck-spin 0.85s linear infinite;
}
@keyframes deck-spin {
  to { transform: rotate(360deg); }
}
.deck-progress-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.deck-progress-status {
  font-size: 12px;
  color: var(--navy);
  margin-bottom: 12px;
  min-height: 16px;
}
.deck-progress-hint {
  font-size: 10.5px;
  color: rgba(26,46,61,.6);
  line-height: 1.55;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────
   PHASE 3: DASHBOARD ("overview" tab) + PROJECTS tab
   ──────────────────────────────────────────────────────────── */

/* ── Status pills — extra colors for project + estimate states ── */
.status-active      { background: rgba(70,160,90,.16);  color: #3e9b54; }
.status-delivered   { background: rgba(40,140,80,.14);  color: #287850; }
.status-archived    { background: rgba(26,46,61,.10);   color: rgba(26,46,61,.55); }
/* Estimate vocabulary: awarded = bid won (green), not_awarded =
   bid lost (muted dark — not a failure state, just done). */
.status-awarded     { background: rgba(40,140,80,.14);  color: #287850; }
.status-not_awarded { background: rgba(26,46,61,.10);   color: rgba(26,46,61,.55); }
/* Legacy class kept for any stale markup; same color as awarded. */
.status-approved    { background: rgba(40,140,80,.14);  color: #287850; }

/* ── Dashboard (overview) ─────────────────────────────────── */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.ov-grid.ov-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ov-stat-card {
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 6px;
  padding: 18px 18px 16px;
}
.ov-stat-card.is-clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ov-stat-card.is-clickable:hover { border-color: rgba(26,46,61,.2); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ov-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  margin-bottom: 8px;
}
.ov-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.ov-stat-sub {
  font-size: 10.5px;
  color: rgba(26,46,61,.55);
  margin-top: 6px;
}

.ov-twocol {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.ov-panel {
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 6px;
  padding: 16px 18px 18px;
}
.ov-panel-head {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  border-bottom: 1px solid rgba(26,46,61,.08);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.ov-empty {
  padding: 12px 4px;
}

/* Revenue table */
.ov-rev-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) 100px;
  gap: 12px;
  align-items: center;
  padding: 7px 4px;
  font-size: 11.5px;
  color: var(--navy);
}
.ov-rev-row[data-client] { cursor: pointer; }
.ov-rev-row[data-client]:hover { background: rgba(26,46,61,.04); border-radius: 4px; }
.ov-rev-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  padding: 4px 4px 6px;
  border-bottom: 1px dashed rgba(26,46,61,.1);
}
.ov-rev-client {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.ov-rev-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ov-rev-bar {
  height: 6px;
  background: rgba(26,46,61,.06);
  border-radius: 3px;
  overflow: hidden;
}
.ov-rev-bar-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 3px;
}

/* Recent activity */
.ov-activity-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 90px 90px;
  gap: 12px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px dashed rgba(26,46,61,.08);
  font-size: 11.5px;
  color: var(--navy);
  cursor: pointer;
  transition: background .12s;
}
.ov-activity-row:last-child { border-bottom: none; }
.ov-activity-row:hover { background: #faf8f2; }
.ov-activity-kind {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
}
.ov-activity-main { min-width: 0; }
.ov-activity-title {
  font-weight: 600;
  color: #2e6da4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-activity-sub {
  font-size: 10.5px;
  color: rgba(26,46,61,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.ov-activity-pill { text-align: center; }
.ov-activity-date {
  text-align: right;
  font-size: 10.5px;
  color: rgba(26,46,61,.55);
  font-variant-numeric: tabular-nums;
}

/* ── Projects list ────────────────────────────────────────── */
.prj-grid { display: block; }
.prj-row {
  display: grid;
  /* Project (wide) | Client | Status | Linked | Tracked | Billed | Outstanding */
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) 80px 170px 100px 100px 110px;
  gap: 14px;
  align-items: center;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--navy);
}
/* Two-line project cell: name on top, project ID beneath as a muted
   typographic sibling (no chip box). */
.prj-cell-name-block { min-width: 0; }
.prj-cell-id-sub {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .4px;
  font-weight: 500;
  color: rgba(26,46,61,.5);
  font-variant-numeric: tabular-nums;
}
.prj-row.is-clickable:hover .prj-cell-id-sub { color: rgba(26,46,61,.7); }
.prj-row > * { min-width: 0; }
.prj-row-head {
  background: transparent;
  border: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  padding: 4px 14px;
  margin-bottom: 0;
}
.prj-row.is-clickable {
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.prj-row.is-clickable:hover {
  background: #faf8f2;
  border-color: rgba(26,46,61,.18);
}
.prj-cell-name {
  font-weight: 600;
  color: #2e6da4;
  text-decoration: underline;
  text-decoration-color: rgba(46,109,164,.4);
  text-underline-offset: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prj-row.is-clickable:hover .prj-cell-name { text-decoration-color: #2e6da4; }
.prj-cell-truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prj-cell-icons {
  display: flex;
  gap: 4px;
}
.prj-link-pill {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(26,46,61,.06);
  color: rgba(26,46,61,.35);
  line-height: 1;
}
.prj-link-pill.is-on {
  background: rgba(46,109,164,.14);
  color: #2e6da4;
}
.prj-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Project form ─────────────────────────────────────────── */
.prj-link-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prj-link-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(26,46,61,.025);
  border: 1px solid rgba(26,46,61,.06);
  border-radius: 4px;
}
.prj-link-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
}
.prj-link-body { min-width: 0; }
.prj-link-pick { width: 100%; }
.prj-link-card {
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.prj-link-card-title {
  font-size: 11.5px;
  color: var(--navy);
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.prj-link-card-meta {
  font-size: 10px;
  color: rgba(26,46,61,.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prj-link-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}
.prj-link-btn {
  padding: 4px 9px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.prj-link-empty {
  padding: 6px 0;
}
.prj-invoice-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.prj-invoice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 4px;
  padding: 8px 12px;
  gap: 10px;
}
.prj-invoice-meta { min-width: 0; flex: 1; }
.prj-invoice-num {
  font-size: 11.5px;
  color: var(--navy);
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prj-invoice-sub {
  font-size: 10.5px;
  color: rgba(26,46,61,.55);
  margin-top: 2px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.prj-invoice-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Actuals */
.prj-actuals {
  border: 1px solid rgba(26,46,61,.06);
  border-radius: 4px;
  background: #fff;
  margin-bottom: 18px;
  overflow: hidden;
}
.prj-actuals-empty {
  padding: 14px 14px;
}
.prj-actuals-head,
.prj-actuals-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 110px 110px 110px;
  gap: 12px;
  padding: 9px 14px;
  align-items: center;
  font-size: 11.5px;
  color: var(--navy);
}
.prj-actuals-head {
  background: rgba(26,46,61,.04);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
}
.prj-actuals-row + .prj-actuals-row {
  border-top: 1px dashed rgba(26,46,61,.08);
}
.prj-actuals-delta.is-over  { color: #c0392b; font-weight: 600; }
.prj-actuals-delta.is-under { color: #287850; }

/* Compact ID badge for grids/lists. Used in the Projects tab list
   and the Clients tab project history. */
.prj-id-badge {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(26,46,61,.06);
  border: 1px solid rgba(26,46,61,.12);
  border-radius: 3px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  color: rgba(26,46,61,.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Stacks the ID above the project name inside the .prj-cell-name
   cell — keeps the existing 7-column grid intact. */
.prj-cell-id {
  margin-bottom: 3px;
  line-height: 1;
}


/* ── Migration modal — wider than the default confirmModal so the
   preview table fits comfortably. Uses the same backdrop / card
   shell as ap-modal-root from shared.css; only overrides the
   width and adds table styling. */
.prj-migrate-modal-root .prj-migrate-card {
  max-width: 920px;
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.prj-migrate-modal-root .ap-modal-body { padding-bottom: 4px; }
.prj-migrate-table {
  flex: 1;
  overflow: auto;
  margin-top: 16px;
  border: 1px solid rgba(26,46,61,.10);
  border-radius: 4px;
}
.prj-migrate-year { padding: 8px 12px 12px; }
.prj-migrate-year + .prj-migrate-year {
  border-top: 1px solid rgba(26,46,61,.10);
}
.prj-migrate-year-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.65);
  margin-bottom: 6px;
}
.prj-migrate-row {
  display: grid;
  grid-template-columns: 100px 80px minmax(0, 2fr) minmax(0, 1.4fr) 100px 100px;
  gap: 12px;
  align-items: center;
  padding: 6px 4px;
  font-size: 11.5px;
  color: var(--navy);
}
.prj-migrate-row + .prj-migrate-row {
  border-top: 1px dashed rgba(26,46,61,.08);
}
.prj-migrate-row-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  border-bottom: 1px solid rgba(26,46,61,.18);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.prj-migrate-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prj-migrate-id {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .4px;
  color: rgba(26,46,61,.85);
}
.prj-migrate-name { color: var(--navy); }
.prj-migrate-client { color: rgba(26,46,61,.65); }
.prj-migrate-date { color: rgba(26,46,61,.65); font-variant-numeric: tabular-nums; }
.prj-migrate-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.prj-migrate-tag-new {
  background: rgba(46,109,164,.12);
  color: #2e6da4;
}
.prj-migrate-tag-update {
  background: rgba(26,46,61,.08);
  color: rgba(26,46,61,.7);
}

/* Contractors */
.prj-contractors-block {
  margin-top: 8px;
}
.prj-subhead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  margin-bottom: 8px;
}
.prj-contractor-head,
.prj-contractor-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 80px 90px 90px 90px 95px 32px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.prj-contractor-cost {
  font-variant-numeric: tabular-nums;
  color: rgba(26,46,61,.65);
}
.prj-contractor-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  border-bottom: 1px solid rgba(26,46,61,.18);
  padding-bottom: 6px;
}
.prj-contractor-row + .prj-contractor-row {
  border-top: 1px dashed rgba(26,46,61,.08);
}
.prj-contractor-total {
  font-variant-numeric: tabular-nums;
}
.prj-num-in {
  text-align: right;
}

/* Timesheet Links — token-generated contractor self-service. Same
   visual rhythm as .prj-contractor-row but with action buttons in
   place of the rate/hours inputs (data is read-only here). */
.prj-timesheet-block { margin-top: 18px; }
.prj-ts-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prj-ts-live {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: none;
  color: rgba(26,46,61,.45);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prj-ts-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5cb86a;
  box-shadow: 0 0 0 0 rgba(92,184,106,.5);
  animation: prj-ts-pulse 2s ease-in-out infinite;
}
.prj-ts-live:empty { display: none; }
@keyframes prj-ts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(92,184,106,.5); }
  50%      { box-shadow: 0 0 0 4px rgba(92,184,106,0); }
}
.prj-ts-head,
.prj-ts-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 80px 80px 60px 80px 90px auto auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
}
.prj-ts-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  border-bottom: 1px solid rgba(26,46,61,.18);
  padding-bottom: 6px;
}
.prj-ts-row + .prj-ts-row { border-top: 1px dashed rgba(26,46,61,.08); }
.prj-ts-row .prj-num { font-variant-numeric: tabular-nums; }

.prj-ts-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 130px 130px auto auto;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  padding: 10px;
  background: rgba(26,46,61,.04);
  border-radius: 4px;
}
.prj-ts-entries {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(26,46,61,.04);
  border-radius: 4px;
  font-size: 12px;
}
.prj-ts-entries-head,
.prj-ts-entry-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 60px 80px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}
.prj-ts-entries-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
}
.prj-ts-entry-row + .prj-ts-entry-row { border-top: 1px dashed rgba(26,46,61,.08); }
.prj-ts-entry-row .prj-num { font-variant-numeric: tabular-nums; text-align: right; }

.btn-ts-action {
  background: transparent;
  border: 1px solid rgba(26,46,61,.25);
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  color: rgba(26,46,61,.85);
}
.btn-ts-action:hover { background: rgba(26,46,61,.06); }

/* Collaborators (logged-in restricted-view users) — same visual
   rhythm as the timesheet contractor row but simpler: name +
   per-project rate + remove. */
.prj-collab-row,
.prj-collab-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 100px 80px 80px 32px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.prj-collab-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  border-bottom: 1px solid rgba(26,46,61,.18);
  padding-bottom: 6px;
}
.prj-collab-row + .prj-collab-row { border-top: 1px dashed rgba(26,46,61,.08); }
.prj-collab-row .prj-num { font-variant-numeric: tabular-nums; }
.prj-collab-add-form {
  display: grid;
  /* Name | Email | Rate | Add | Cancel */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 100px auto auto;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  padding: 10px;
  background: rgba(26,46,61,.04);
  border-radius: 4px;
}
.prj-handoff-block {
  margin-top: 18px;
}
.prj-handoff-block textarea {
  width: 100%;
  min-height: 100px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

/* ── Close Checklist ────────────────────────────────────────
   Three-stage flow. Each stage is a card with a header (number,
   title, status), then the items. Locked stages dim out. */
.prj-stage {
  background: rgba(26,46,61,.03);
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 4px;
  padding: 14px 16px;
  margin-top: 12px;
}
.prj-stage:first-child { margin-top: 0; }
.prj-stage.is-locked   { opacity: .5; pointer-events: none; }
.prj-stage.is-complete {
  background: rgba(40,140,80,.06);
  border-color: rgba(40,140,80,.18);
}
.prj-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.prj-stage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--beige);
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}
.prj-stage.is-complete .prj-stage-num { background: #287850; }
.prj-stage-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .2px;
}
.prj-stage-status {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
}
.prj-stage-status.is-complete { color: #287850; }

.prj-check-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px dashed rgba(26,46,61,.1);
}
.prj-check-item:first-of-type { border-top: none; }
.prj-check-item.is-na .prj-check-label { color: rgba(26,46,61,.45); text-decoration: line-through; }
.prj-check-label {
  font-size: 13px;
  color: var(--navy);
}

/* Real checkbox styled to match the AP palette. The checkbox is
   the primary state — checked or unchecked. N/A is a separate
   chip on the right that's mutually exclusive with checked. */
.prj-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid rgba(26,46,61,.35);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background .12s, border-color .12s;
}
.prj-checkbox:hover    { border-color: rgba(26,46,61,.55); }
.prj-checkbox:checked  {
  background: #287850;
  border-color: #287850;
}
.prj-checkbox:checked::before {
  content: "";
  width: 10px; height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* N/A toggle + clear (×) chip */
.prj-check-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prj-na-btn {
  background: #fff;
  border: 1px solid rgba(26,46,61,.2);
  border-radius: 3px;
  padding: 3px 8px;
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(26,46,61,.6);
  cursor: pointer;
  transition: all .12s;
}
.prj-na-btn:hover { background: rgba(26,46,61,.06); border-color: rgba(26,46,61,.4); }
.prj-na-btn.is-on {
  background: rgba(26,46,61,.55);
  border-color: rgba(26,46,61,.55);
  color: #fff;
}

.prj-check-extra {
  grid-column: 1 / -1;
  margin-top: 6px;
  display: grid;
  gap: 6px;
}
.prj-check-extra .text-input,
.prj-check-extra textarea {
  font-size: 12.5px;
  padding: 7px 9px;
}
.prj-check-extra-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 100px minmax(0, 1.2fr);
  gap: 8px;
}
.prj-check-extra-row select { font-size: 12.5px; padding: 7px 9px; }

/* Frame.io delivery links — list of {description, URL} rows so
   each link is labeled. Add/remove rows individually. */
.prj-frameio-list {
  display: grid;
  gap: 6px;
  margin-bottom: 6px;
}
.prj-frameio-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 8px;
  align-items: center;
}
.prj-frameio-row .text-input { font-size: 12.5px; padding: 7px 9px; }

/* RAID picker — pills list of selected drives + a single-pick
   dropdown that adds one and resets. Cleaner than a multi-select
   that requires Cmd-clicking. */
.prj-raid-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}
.prj-raid-pills:empty::before {
  content: "No RAIDs selected yet";
  font-size: 12px;
  color: rgba(26,46,61,.45);
  font-style: italic;
  align-self: center;
}
.prj-raid-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(26,46,61,.08);
  border: 1px solid rgba(26,46,61,.15);
  border-radius: 4px;
  padding: 4px 4px 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.prj-raid-pill button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: rgba(26,46,61,.5);
  padding: 0 4px;
  border-radius: 2px;
}
.prj-raid-pill button:hover { color: #b03b3b; background: rgba(176,59,59,.08); }
.prj-raid-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 4px;
}

.prj-stage3-prompt {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(46,109,164,.08);
  border: 1px solid rgba(46,109,164,.18);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--navy);
}
.prj-stage3-prompt strong { color: #2e6da4; }

/* Tab strip override: make sure projects + dashboard buttons size
   the same as the existing tabs (already inherits .tab-strip-btn). */

/* Responsive: stack the dashboard cards on narrower viewports */
@media (max-width: 900px) {
  .ov-grid, .ov-grid.ov-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-twocol     { grid-template-columns: minmax(0, 1fr); }
  .prj-row {
    grid-template-columns: minmax(0, 1fr) 90px 130px;
  }
  /* Hide Client (2), Linked (4), Tracked (5), Billed (6); keep
     Project, Status, Outstanding visible on small viewports. */
  .prj-row > :nth-child(2),
  .prj-row > :nth-child(4),
  .prj-row > :nth-child(5),
  .prj-row > :nth-child(6) { display: none; }
  .prj-row-head > :nth-child(2),
  .prj-row-head > :nth-child(4),
  .prj-row-head > :nth-child(5),
  .prj-row-head > :nth-child(6) { display: none; }
}

/* ── Phase 4: clickable pills + actuals refinements ────────── */
.prj-link-pill.is-clickable {
  cursor: pointer;
  transition: background .12s, color .12s, transform .08s;
}
.prj-link-pill.is-clickable:hover {
  background: #2e6da4;
  color: #fff;
}
.prj-link-pill.is-clickable:active {
  transform: scale(.95);
}

/* Sub-line under the Actual cell ("12.5 h") */
.prj-actuals-sub {
  font-size: 9.5px;
  color: rgba(26,46,61,.55);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Bottom totals row of the actuals table */
.prj-actuals-row.prj-actuals-total {
  background: rgba(26,46,61,.04);
  font-weight: 600;
  border-top: 1px solid rgba(26,46,61,.18);
}

/* ── Phase 4 v2: Actuals summary (single 3-stat block) ────── */
.prj-actuals-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 6px;
}
.prj-actuals-stat {
  display: flex;
  flex-direction: column;
}
.prj-actuals-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  margin-bottom: 6px;
}
.prj-actuals-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.prj-actuals-stat-value.is-over     { color: #c0392b; }
.prj-actuals-stat-value.is-under    { color: #287850; }
.prj-actuals-stat-value.is-positive { color: #287850; }
.prj-actuals-stat-value.is-negative { color: #c0392b; }

/* Contractor margin row sits directly under the Estimated/Actual/Delta
   summary as a second stat card. Slight top margin separates them
   visually without needing a divider. */
.prj-actuals-margin { margin-top: 8px; }
.prj-actuals-stat-sub {
  font-size: 10.5px;
  color: rgba(26,46,61,.55);
  margin-top: 4px;
}

/* ── Archived section divider in projects list ────────────── */
.prj-section-divider {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.5);
  padding: 18px 14px 6px;
  border-top: 1px solid rgba(26,46,61,.08);
  margin-top: 12px;
}

/* ── Phase 4 v3: per-project color accents ─────────────────── */

/* Inset 4px stripe on the left edge of each project row, colored
   from the project's --prj-color CSS var (set inline by JS, sourced
   from the tracker's published color_hex or a name-hash fallback).
   Adds no extra DOM and respects the row's existing border + radius. */
.prj-row {
  box-shadow: inset 4px 0 0 var(--prj-color, transparent);
  padding-left: 18px;   /* 14 + 4 to clear the stripe */
}
.prj-row.prj-row-head {
  box-shadow: none;     /* header has no project to color */
}

/* Swatch in the project form header (small dot next to the title). */
.prj-form-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ccc;
  border: 1px solid rgba(255,255,255,.18);
  flex-shrink: 0;
}

/* ── Phase A: view transitions ──────────────────────────────
   Subtle slide-in + fade when switching tabs or opening a form.
   Keyed off the [hidden] attribute that admin.js toggles, so no
   JS animation orchestration needed. The animation runs only on
   the section that just BECAME visible — closed sections don't
   animate (they're display:none anyway). */
@keyframes view-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
main .lock-screen,
main > section:not([hidden]) {
  animation: view-fade-in 160ms ease-out;
}
/* Don't animate views that contain document-style forms (estimate/
   invoice forms have lots of inputs and the slide can feel heavy on
   long content). The list/dashboard views still get the polish. */
#view-estimate-form:not([hidden]),
#view-invoice-form:not([hidden]),
#view-job-form:not([hidden]) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  main > section:not([hidden]) { animation: none; }
}

/* ── Phase C: bulk-select on list views ───────────────────── */
.inv-checkbox-cell {
  display: flex; align-items: center; justify-content: center;
}
.inv-checkbox-cell input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--navy);
}
.inv-row.is-selected {
  background: #f4ede0;
  border-color: rgba(26,46,61,.22);
}

/* Sticky action bar that appears above the list when 1+ rows are
   selected. Same horizontal alignment as the list to feel anchored. */
.bulk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--navy);
  color: var(--beige);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(26,46,61,.18);
  animation: view-fade-in 140ms ease-out;
}
.bulk-action-bar-count {
  font-size: 11.5px;
  letter-spacing: .3px;
  color: var(--beige);
}
.bulk-action-bar-count strong {
  font-weight: 700;
  margin-right: 4px;
}
.bulk-action-bar-meta {
  margin-left: 10px;
  color: rgba(232,224,208,.55);
  font-variant-numeric: tabular-nums;
}
.bulk-action-bar-actions {
  display: flex; gap: 6px;
}
.bulk-action-bar-actions .btn-ghost {
  border-color: rgba(232,224,208,.35);
  color: var(--beige);
  background: transparent;
}
.bulk-action-bar-actions .btn-ghost:hover {
  background: rgba(232,224,208,.1);
  border-color: var(--beige);
}

/* ── Phase D: global search modal ──────────────────────────── */
.search-modal {
  border: none;
  border-radius: 10px;
  padding: 0;
  width: 560px;
  max-width: 92vw;
  max-height: 70vh;
  background: #fff;
  box-shadow: 0 20px 56px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.12);
  overflow: hidden;
  margin: 8vh auto auto;
}
/* Only render the modal contents when the dialog is open. Without
   this, `display: flex` would override the browser's default
   `dialog:not([open]) { display: none }` rule and the modal would
   stay visible at all times. */
.search-modal[open] {
  display: flex; flex-direction: column;
}
.search-modal::backdrop {
  background: rgba(26,46,61,.45);
  backdrop-filter: blur(2px);
}
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(26,46,61,.08);
  flex-shrink: 0;
}
.search-icon {
  width: 18px; height: 18px;
  color: rgba(26,46,61,.45);
  flex-shrink: 0;
}
#search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 14px;
  color: var(--navy);
  background: transparent;
}
#search-input::placeholder { color: rgba(26,46,61,.4); }
.search-kbd {
  font-family: var(--font);
  font-size: 9px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 6px; border-radius: 3px;
  background: rgba(26,46,61,.07);
  color: rgba(26,46,61,.55);
}
.search-results {
  overflow-y: auto;
  flex: 1;
  min-height: 80px;
}
.search-empty {
  padding: 26px 18px;
  text-align: center;
  font-size: 11.5px;
  color: rgba(26,46,61,.5);
}
.search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  border-bottom: 1px solid rgba(26,46,61,.04);
}
.search-row:last-child { border-bottom: none; }
.search-row:hover,
.search-row.is-active {
  background: var(--hover-tint);
}
.search-row-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(26,46,61,.55);
  background: rgba(26,46,61,.05);
  border-radius: 4px;
  flex-shrink: 0;
}
.search-row.is-active .search-row-icon { color: var(--navy); }
.search-row-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.search-row-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-row-sub {
  font-size: 10.5px;
  color: rgba(26,46,61,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-row-kind {
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(26,46,61,.4);
  flex-shrink: 0;
}
.search-foot {
  display: flex; gap: 18px; justify-content: flex-end;
  padding: 9px 14px;
  border-top: 1px solid rgba(26,46,61,.08);
  background: #faf8f2;
  font-size: 9.5px;
  color: rgba(26,46,61,.5);
  flex-shrink: 0;
}
.search-foot kbd {
  font-family: var(--font);
  font-size: 9px; font-weight: 600;
  padding: 1px 5px; border-radius: 2px;
  background: rgba(26,46,61,.08);
  color: rgba(26,46,61,.65);
  margin: 0 2px;
}

/* ── Phase D2: dashboard / Today action callouts ─────────── */
.ov-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ov-action-card {
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-left: 3px solid var(--navy);
  border-radius: 6px;
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.ov-action-card:hover {
  background: var(--hover-tint);
  border-color: rgba(26,46,61,.18);
}
.ov-action-card:active { transform: scale(.99); }
.ov-action-card.ov-action-warn { border-left-color: #c0392b; }
.ov-action-card.ov-action-info { border-left-color: #2e6da4; }
.ov-action-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.ov-action-sub {
  font-size: 10.5px;
  color: rgba(26,46,61,.55);
  margin-top: 4px;
}

/* ── Phase D3: Reports tab ────────────────────────────────── */
.rep-twocol {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 14px;
}

/* Monthly bars */
.rep-bars {
  display: flex; flex-direction: column; gap: 6px;
}
.rep-bar-row {
  display: grid;
  grid-template-columns: 56px minmax(60px, 1fr) 90px;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 11px;
  color: var(--navy);
}
.rep-bar-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(26,46,61,.6);
}
.rep-bar-track {
  height: 8px;
  background: rgba(26,46,61,.06);
  border-radius: 4px;
  overflow: hidden;
}
.rep-bar-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 4px;
}
.rep-bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Profitability table */
.rep-projects-table { display: block; }
.rep-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 100px 100px 110px 90px;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 11.5px;
  color: var(--navy);
}
.rep-row > * { min-width: 0; }
.rep-row-head {
  background: transparent;
  border: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  padding: 4px 14px;
  margin-bottom: 0;
}
.rep-cell-name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rep-cell-truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rep-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rep-num.is-over  { color: #c0392b; font-weight: 600; }
.rep-num.is-under { color: #287850; }

/* ── Batch invoice import modal ───────────────────────────── */
.batch-modal {
  border: none;
  border-radius: 8px;
  padding: 0;
  width: 640px;
  max-width: 92vw;
  max-height: 80vh;
  background: #fff;
  box-shadow: 0 18px 56px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.12);
  overflow: hidden;
  margin: 6vh auto auto;
}
.batch-modal[open] {
  display: flex; flex-direction: column;
}
.batch-modal::backdrop { background: rgba(26,46,61,.5); }
.batch-modal .modal-body {
  padding: 16px 18px 18px;
  overflow-y: auto;
}
.batch-blurb {
  font-size: 11.5px;
  color: rgba(26,46,61,.7);
  line-height: 1.5;
  margin-bottom: 14px;
}

.batch-dropzone {
  border: 2px dashed rgba(26,46,61,.18);
  border-radius: 8px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  background: #faf8f2;
  transition: background .12s, border-color .12s;
  margin-bottom: 14px;
}
.batch-dropzone:hover,
.batch-dropzone:focus-visible {
  background: #f3eedf;
  border-color: rgba(26,46,61,.35);
}
.batch-dropzone.is-dragover {
  background: rgba(46,109,164,.08);
  border-color: #2e6da4;
  border-style: solid;
}
.batch-drop-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.batch-drop-sub {
  font-size: 10.5px;
  color: rgba(26,46,61,.55);
  margin-top: 4px;
}

.batch-list {
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 6px;
  padding: 4px;
  background: #fbfaf6;
}
.batch-empty {
  text-align: center;
  font-size: 11px;
  color: rgba(26,46,61,.5);
  padding: 18px 12px;
}
.batch-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  background: #fff;
  border-radius: 4px;
}
.batch-row-main { min-width: 0; }
.batch-row-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.batch-row-sub {
  font-size: 10px;
  color: rgba(26,46,61,.55);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.batch-row-saved  { background: rgba(70,160,90,.08); }
.batch-row-failed { background: rgba(192,57,43,.06); }
.batch-row-failed .batch-row-sub { color: #c0392b; }

.batch-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.batch-glyph-queued  { background: rgba(26,46,61,.06); color: rgba(26,46,61,.5); }
.batch-glyph-working { background: rgba(46,109,164,.14); color: #2e6da4;
  animation: batch-spin 1.2s linear infinite; }
.batch-glyph-saved   { background: rgba(70,160,90,.18); color: #287850; }
.batch-glyph-failed  { background: rgba(192,57,43,.18); color: #c0392b; }
@keyframes batch-spin { to { transform: rotate(360deg); } }

.batch-summary {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 4px;
  background: var(--navy);
  color: var(--beige);
  font-size: 11px;
  letter-spacing: .3px;
}
.batch-summary strong { color: #fff; font-weight: 700; }

/* Year break in the invoice list when sorted chronologically.
   Quiet uppercase label that visually anchors a year's worth of
   invoices below it, like a section header in a transcript. */
.inv-year-divider {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.5);
  padding: 18px 14px 6px;
  border-top: 1px solid rgba(26,46,61,.08);
  margin-top: 12px;
}
.inv-year-divider:first-child {
  border-top: none;
  padding-top: 4px;
  margin-top: 0;
}

/* Year-total footer — closes out each year's section in the invoice
   list. Right-aligned dollar amount in navy so the total pops as
   the answer to "how much did this year produce", with the small
   uppercase year label as quiet context to the left. */
.inv-year-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 14px;
  padding: 6px 14px 14px;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(26,46,61,.10);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
}
.inv-year-total-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* ── Card icon buttons (calendar + estimate cards) ────────── */
.btn-card-icon {
  width: 28px; height: 28px;
  border: 1px solid rgba(26,46,61,.18);
  border-radius: 4px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: rgba(26,46,61,.6);
  padding: 0;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.btn-card-icon:hover {
  background: var(--hover-tint);
  border-color: rgba(26,46,61,.35);
  color: var(--navy);
}
.btn-card-icon:active { transform: scale(.92); }
/* Trash variant — neutral at rest, red on hover so destructive
   intent is signaled only when the user lands on it. */
.btn-card-icon.is-danger:hover {
  background: rgba(192,57,43,.08);
  border-color: rgba(192,57,43,.4);
  color: #c0392b;
}

/* Clickable estimate-card body. Subtle hover lift mirrors the
   list-row hover pattern elsewhere in the suite. */
.est-card.is-clickable { cursor: pointer; }
.est-card.is-clickable:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.10), 0 6px 20px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.est-card { transition: box-shadow .14s, transform .14s; }

/* Calendar-card body becomes the open-target — body cursor signals
   that clicks open the calendar. The header is intentionally NOT a
   click target because it owns the dblclick color picker. */
.job-card-body[data-action="open"] {
  cursor: pointer;
  transition: background .12s;
}
.job-card-body[data-action="open"]:hover {
  background: var(--hover-tint);
}

/* Estimate card foot left cluster (duplicate + trash) */
.est-card-foot-left {
  display: flex; gap: 6px;
}

/* ── External Resources (project form) ────────────────────── */
.prj-ext-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 0;
}
.prj-ext-row + .prj-ext-row {
  border-top: 1px solid rgba(26,46,61,.06);
  margin-top: 4px;
}
.prj-ext-row-block {
  grid-template-columns: 1fr;
  align-items: start;
}
.prj-ext-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.6);
}
.prj-ext-body {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prj-ext-body .text-input { flex: 1; min-width: 0; }
.prj-ext-open { white-space: nowrap; padding: 6px 12px; }
.prj-ext-hint {
  grid-column: 2;
  margin: 0;
  font-size: 11px;
  color: rgba(26,46,61,.55);
}

/* Contractor Invoices inline list. Each row is label + URL +
   open shortcut + delete. Add-row pattern mirrors the Timesheet
   contractors block so muscle memory carries over. */
.prj-ci-list { margin: 8px 0 4px; }
.prj-ci-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 28px 28px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.prj-ci-row .text-input { font-size: 12px; padding: 6px 10px; }
.prj-ci-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--navy);
  font-size: 13px;
  background: rgba(26,46,61,.04);
  transition: background .12s, color .12s;
}
.prj-ci-open:hover { background: rgba(26,46,61,.1); }
.prj-ci-open.is-disabled { color: rgba(26,46,61,.25); cursor: not-allowed; }
.prj-ci-del {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(26,46,61,.15);
  border-radius: 3px;
  background: #fff;
  color: rgba(26,46,61,.6);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.prj-ci-del:hover {
  background: rgba(192,57,43,.08);
  border-color: rgba(192,57,43,.6);
  color: #c0392b;
}
.prj-ci-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto auto;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}
.prj-ci-add-form .text-input { font-size: 12px; padding: 6px 10px; }

/* Inline "label + sublabel" checkbox row used in Archive & Storage
   for the "RAID only" toggle. Sits below the HDD label / Storage
   inputs with deliberate vertical breathing room, so it reads as a
   modifier on the row above rather than the next field down. */
.prj-checkline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(26,46,61,.025);
  border: 1px solid rgba(26,46,61,.06);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
.prj-checkline:hover { background: rgba(26,46,61,.045); }
.prj-checkline input[type="checkbox"] { margin-top: 2px; }
.prj-checkline-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prj-checkline-body strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}
.prj-checkline-body .muted { font-size: 11px; color: rgba(26,46,61,.6); }
/* When raid_only is on, dim the HDD-label row above. */
.prj-archive-hdd-row.is-disabled { opacity: .45; }
.prj-archive-notes-group { margin-top: 14px; }

/* Two-line identity cell on the project's Collaborators row: name
   on top, email muted beneath. Falls back to single-line email when
   no name was provided at add time. */
.prj-collab-id { min-width: 0; }
.prj-collab-name {
  font-size: 12.5px; font-weight: 600; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prj-collab-email {
  font-size: 10.5px; color: rgba(26,46,61,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── PHASE 8: My Schedule (personal availability calendar) ─── */
.sch-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sch-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sch-nav-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}
.sch-month-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  min-width: 180px;
  text-align: center;
  letter-spacing: .2px;
}
.sch-today-btn {
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 6px 12px;
}
.sch-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  color: rgba(26,46,61,.65);
}
.sch-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sch-legend-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
}
.sch-legend-swatch-ring {
  background: transparent;
  border: 2px solid #2e6da4;
  border-radius: 50%;
  width: 10px; height: 10px;
}

/* Grid */
.sch-grid {
  background: #fff;
  border: 1px solid rgba(26,46,61,.1);
  border-radius: 5px;
  overflow: hidden;
}
.sch-week {
  display: block;
}
/* Slim weekend columns — mirror the project calendar's
   `.33fr 1fr 1fr 1fr 1fr 1fr .33fr` treatment. Sun + Sat
   compress so weekday cells get the lion's share of width. */
.sch-week-head {
  display: grid;
  grid-template-columns: .33fr 1fr 1fr 1fr 1fr 1fr .33fr;
  background: rgba(26,46,61,.04);
  border-bottom: 1px solid rgba(26,46,61,.1);
}
.sch-week-head .sch-weekday:first-child,
.sch-week-head .sch-weekday:last-child {
  background: rgba(26,46,61,.06);
  color: rgba(26,46,61,.4);
}
.sch-weekday {
  padding: 8px 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
}
.sch-week {
  position: relative;
  border-bottom: 1px solid rgba(26,46,61,.07);
}
.sch-week:last-child { border-bottom: none; }
.sch-week-days {
  display: grid;
  grid-template-columns: .33fr 1fr 1fr 1fr 1fr 1fr .33fr;
  min-height: 110px;
}
.sch-day.is-weekend {
  background: #faf8f4;
}
.sch-day.is-weekend.is-out { background: #eef1f6; }
.sch-day.is-weekend:hover { background: #f2f0ea; }
.sch-day.is-weekend .sch-day-num { color: rgba(26,46,61,.42); }
.sch-day {
  padding: 6px 8px 4px;
  border-right: 1px solid rgba(26,46,61,.07);
  cursor: pointer;
  position: relative;
  /* Reserve vertical room at top for the block-strips overlay so
     blocks don't crowd the day number on busy days. */
  padding-top: 28px;
  transition: background .12s;
}
.sch-day:last-child { border-right: none; }
.sch-day:hover { background: rgba(26,46,61,.025); }
.sch-day.is-out .sch-day-num { color: rgba(26,46,61,.25); }
.sch-day-num {
  position: absolute;
  top: 4px; left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}
.sch-day.is-today .sch-day-num {
  background: var(--navy);
  color: var(--beige);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  top: 2px; left: 6px;
}
.sch-day-dots {
  position: absolute;
  bottom: 4px; left: 8px;
  display: flex;
  gap: 3px;
  align-items: center;
}
.sch-day-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.sch-day-dot-more {
  font-size: 9px;
  font-weight: 600;
  color: rgba(26,46,61,.55);
  letter-spacing: .4px;
}

/* Block strips overlay each week row's day cells. CSS grid handles
   the horizontal spanning; absolute positioning keeps them above
   the day cells without blocking clicks on cells outside the strip. */
.sch-week-blocks {
  position: absolute;
  top: 22px; left: 0; right: 0;
  display: grid;
  grid-template-columns: .33fr 1fr 1fr 1fr 1fr 1fr .33fr;
  grid-auto-rows: 20px;
  row-gap: 2px;
  padding: 0 2px;
  pointer-events: none;
}
.sch-block {
  pointer-events: auto;
  background: var(--navy);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition: filter .12s;
}
.sch-block:hover { filter: brightness(1.08); }
.sch-block-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Derived blocks (auto-pulled from project calendars) read as
   subtler "context" markers — slight transparency + a diagonal
   stripe pattern overlay so they're clearly distinct from manually-
   placed availability blocks. Clicking jumps to the project. */
.sch-block.is-derived {
  opacity: .82;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.08) 0 6px,
    rgba(255,255,255,0)   6px 12px
  );
}
.sch-block.is-derived:hover { opacity: 1; }

/* Modal — slightly wider so the four fields fit two-up. */
.ap-modal-card-wide { max-width: 460px; width: 92vw; }
.sch-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.sch-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sch-modal-field .field-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.6);
}
.sch-modal-field .text-input {
  padding: 8px 10px;
  font-size: 13px;
}
/* Label spans the full width so a long block name fits. */
.sch-modal-field:first-child { grid-column: 1 / -1; }
.sch-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sch-modal-actions-right { display: flex; gap: 8px; }
.sch-modal-delete {
  color: #c0392b;
  border-color: rgba(192,57,43,.4);
}
.sch-modal-delete:hover {
  background: rgba(192,57,43,.08);
  border-color: rgba(192,57,43,.6);
}

/* Mobile: stack toolbar bits + legend. */
@media (max-width: 900px) {
  .sch-week-days { min-height: 90px; }
  .sch-block { font-size: 10px; }
  .sch-legend { gap: 10px; font-size: 10.5px; }
}

/* ── PHASE 4b: Archive tab ─────────────────────────────────── */
.arch-toolbar { margin-bottom: 6px; }
.arch-actions { flex-wrap: wrap; }
.arch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--navy);
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border: 1px solid rgba(26,46,61,.12);
  border-radius: 4px;
  background: #fff;
}
.arch-toggle:hover { border-color: rgba(26,46,61,.3); }
.arch-toggle input { margin: 0; }
.arch-btn { font-size: 11px; }

.arch-grid { display: block; }
.arch-row {
  display: grid;
  /* ID  | Name (wide) | Client | Year | Deliv | Archived | RAID | HDD */
  grid-template-columns:
    110px minmax(0, 3fr) minmax(0, 1.4fr) 60px 60px 110px
    minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid rgba(26,46,61,.08);
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 11.5px;
  color: var(--navy);
}
.arch-row > * { min-width: 0; }
.arch-row.is-deleted {
  opacity: .55;
  background: repeating-linear-gradient(
    -45deg,
    #fff 0, #fff 8px,
    rgba(26,46,61,.04) 8px, rgba(26,46,61,.04) 14px
  );
}
.arch-row-head {
  background: transparent;
  border: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(26,46,61,.55);
  padding: 4px 12px;
  margin-bottom: 0;
}
.arch-row-head .arch-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.arch-row-head .arch-sort:hover { color: var(--navy); }
.arch-row-head .arch-sort.is-active { color: var(--navy); }

.arch-cell-id   { cursor: pointer; }
.arch-cell-name {
  cursor: pointer;
  font-weight: 600;
  color: #2e6da4;
  text-decoration: underline;
  text-decoration-color: rgba(46,109,164,.4);
  text-underline-offset: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arch-cell-name:hover { text-decoration-color: #2e6da4; }
.arch-cell-truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arch-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.arch-input {
  width: 100%;
  padding: 4px 6px;
  font-size: 11px;
  font-family: inherit;
  color: var(--navy);
  background: rgba(26,46,61,.025);
  border: 1px solid transparent;
  border-radius: 3px;
  transition: background .12s, border-color .12s;
}
.arch-input:hover {
  background: #fff;
  border-color: rgba(26,46,61,.18);
}
.arch-input:focus {
  outline: none;
  background: #fff;
  border-color: #2e6da4;
  box-shadow: 0 0 0 2px rgba(46,109,164,.18);
}
.arch-locked {
  display: inline-block;
  padding: 3px 6px;
  font-size: 10.5px;
  background: rgba(26,46,61,.04);
  border-radius: 3px;
  color: rgba(26,46,61,.75);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.arch-locked.arch-locked-muted {
  background: transparent;
  border: 1px dashed rgba(26,46,61,.2);
  color: rgba(26,46,61,.55);
  font-style: italic;
}
.arch-raid-select {
  padding-right: 22px;
  background-position: right 6px center;
  background-size: 8px;
}

.arch-actions-cell {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.arch-row-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26,46,61,.15);
  border-radius: 3px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: background .12s, border-color .12s, color .12s;
}
.arch-row-btn:hover {
  background: rgba(26,46,61,.06);
  border-color: rgba(26,46,61,.4);
}
.arch-row-btn-danger:hover {
  background: rgba(192,57,43,.08);
  border-color: rgba(192,57,43,.6);
  color: #c0392b;
}
.arch-empty { padding: 22px 18px; }

@media (max-width: 1180px) {
  .arch-row {
    grid-template-columns:
      100px minmax(0, 2.4fr) minmax(0, 1.2fr) 50px 50px 100px
      minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    font-size: 10.5px;
    padding: 7px 10px;
  }
}