:root {
  --navy: #1f4265;
  --blue: #2e5f8f;
  --blue-2: #eaf1f7;
  --line: #d8dee4;
  --text: #1f2933;
  --muted: #637381;
  --bg: #f5f7fa;
  --card: #ffffff;
  --danger: #a63a3a;
  --warn: #a2691a;
  --good: #26764d;
  --shadow: 0 10px 28px rgba(31, 58, 95, 0.10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
.sidebar { background: var(--navy); color: #fff; padding: 20px 16px; display: flex; flex-direction: column; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 8px 4px 16px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.brand-logo { width: 64px; height: 42px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; }
.brand h1 { font-size: 20px; margin: 0; line-height: 1.1; }
.brand p { margin: 4px 0 0; color: rgba(255,255,255,0.78); font-size: 12px; }

.nav { display: grid; gap: 8px; }
.nav-btn { text-align: left; border: 0; padding: 12px 14px; border-radius: 10px; background: transparent; color: rgba(255,255,255,0.85); cursor: pointer; }
.nav-btn.active, .nav-btn:hover { background: rgba(255,255,255,0.13); color: #fff; }

.sidebar-note { margin-top: auto; background: rgba(255,255,255,0.10); padding: 12px; border-radius: 12px; font-size: 12px; display: grid; gap: 5px; }
.sidebar-note span { color: rgba(255,255,255,0.78); }

.main { min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid var(--line); padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 3; }
.topbar h2 { margin: 0; font-size: 28px; }
.topbar p { margin: 5px 0 0; color: var(--muted); }
.top-actions { display: flex; gap: 10px; }

.content { padding: 24px 28px 48px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 12px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.stat .num { font-size: 30px; font-weight: 750; color: var(--navy); }
.stat .label { color: var(--muted); margin-top: 4px; font-size: 13px; }

.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: 2fr 1fr 1fr 1fr; }
.grid.compact { gap: 9px; }
.full { grid-column: 1 / -1; }
.grow { flex: 1; }

.stack { display: grid; gap: 12px; }
.row-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px; }
.row-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search { min-width: 260px; }

.project-list { display: grid; gap: 12px; }
.project-card { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 12px; box-shadow: var(--shadow); cursor: pointer; }
.project-card:hover { border-color: var(--blue); }
.project-main h3 { margin: 0 0 5px; }
.project-main p { margin: 0; color: var(--muted); font-size: 14px; }
.project-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 650; background: var(--blue-2); color: var(--navy); }
.badge.overdue { background: #ffecec; color: var(--danger); }
.badge.today { background: #fff3df; color: var(--warn); }
.badge.done { background: #e8f7ef; color: var(--good); }
.badge.priority { background: #fff3df; color: var(--warn); }
.badge.internal { background: #f0f0f0; color: #555; }
.badge.client { background: #eaf1f7; color: var(--navy); }

.phase-list { display: grid; gap: 8px; }
.phase-row { display: grid; grid-template-columns: 220px 1fr 40px; align-items: center; gap: 12px; }
.phase-bar { height: 10px; background: var(--blue-2); border-radius: 999px; overflow: hidden; }
.phase-fill { height: 100%; background: var(--blue); border-radius: 999px; }

.workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.workflow-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.workflow-card h3 { margin: 0 0 6px; }
.workflow-card p { color: var(--muted); margin: 0 0 12px; }
.workflow-card .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

button, .button { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; background: #fff; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
button.primary, .button.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
button.secondary, .button.secondary { background: #fff; color: var(--navy); border-color: #b8c7d6; }
button.danger { background: #fff; color: var(--danger); border-color: #e1b7b7; }
button.small, .button.small { padding: 7px 10px; font-size: 12px; align-self: end; }
.icon-btn { border: 0; background: transparent; font-size: 28px; line-height: 1; padding: 0 5px; }
.inline-actions { margin: 6px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }

input, select, textarea {
  width: 100%;
  border: 1px solid #bfc8d2;
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff;
  color: var(--text);
  margin-top: 5px;
}
label { font-size: 12px; font-weight: 700; color: #4a5563; }
textarea { resize: vertical; min-height: 88px; }

.checkbox-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 6px; border: 1px solid #d8dee4; background: #fff; padding: 10px; border-radius: 12px; }
.checkbox-group label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; color: var(--text); }
.checkbox-group input { width: auto; margin: 0; }

dialog { width: min(1240px, calc(100vw - 28px)); max-height: calc(100vh - 28px); border: 0; border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.25); padding: 0; }
dialog::backdrop { background: rgba(15, 23, 42, 0.48); }
.dialog-form { padding: 0; }
.dialog-head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #fff; }
.dialog-head h2 { margin: 0; }
.dialog-head p { margin: 3px 0 0; color: var(--muted); }

.project-layout { display: grid; grid-template-columns: 300px 1fr; min-height: min(76vh, 760px); }
.wizard-rail { border-right: 1px solid var(--line); background: #fbfcfd; padding: 14px; overflow: auto; }
.wizard-main { padding: 18px 20px; overflow: auto; }
.step-btn { width: 100%; text-align: left; display: grid; gap: 4px; margin-bottom: 7px; border-radius: 12px; padding: 10px; }
.step-btn.active { border-color: var(--blue); background: var(--blue-2); }
.step-btn .title { font-weight: 800; }
.step-btn .meta { color: var(--muted); font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.step-status { font-size: 11px; border-radius: 999px; padding: 3px 7px; background: #f0f2f5; color: #555; width: fit-content; }
.step-status.completed { background: #e8f7ef; color: var(--good); }
.step-status.inprogress { background: #fff3df; color: var(--warn); }

.form-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.form-heading h3 { margin: 0; font-size: 24px; }
.form-heading p { margin: 5px 0 0; color: var(--muted); }
.form-body { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.form-section-title { margin: 0 0 12px; color: var(--navy); }
.acknowledgement { background: #fff9ed; border: 1px solid #f0d3a4; color: #72480d; border-radius: 12px; padding: 12px; margin: 16px 0; font-size: 13px; }

.dialog-actions { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); background: #fafbfc; position: sticky; bottom: 0; }
.signature-area { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.signature-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fbfcfd; }
.signature-label { display: block; margin-bottom: 8px; }
.signature-pad { width: 100%; height: 130px; border: 1px solid #bfc8d2; border-radius: 10px; background: #fff; touch-action: none; }
.signature-actions { margin-top: 8px; }

.lineitems { width: 100%; border-collapse: collapse; margin-top: 6px; }
.lineitems th, .lineitems td { border: 1px solid var(--line); padding: 6px; }
.lineitems th { background: var(--blue-2); color: var(--navy); font-size: 12px; }
.lineitems input { margin: 0; border-radius: 7px; padding: 7px; }

.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.table th, .table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; vertical-align: top; }
.table th { background: var(--blue-2); color: var(--navy); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.table tr:last-child td { border-bottom: 0; }
.empty { text-align: center; padding: 34px; color: var(--muted); background: #fff; border: 1px dashed #c7d1db; border-radius: 14px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-card { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px; box-shadow: var(--shadow); }
.backup-box { display: grid; gap: 12px; max-width: 850px; }
.codebox { width: 100%; height: 180px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }

.print-dialog { background: #fff; }
.print-actions { padding: 12px 20px; border-bottom: 1px solid var(--line); }
.print-page { max-width: 8.5in; margin: 0 auto; background: #fff; padding: 0.45in; color: #111; }
.print-brand { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--navy); padding-bottom: 12px; margin-bottom: 18px; }
.print-brand img { max-height: 56px; max-width: 230px; object-fit: contain; }
.print-page h1 { margin: 0; color: var(--navy); font-size: 24px; }
.print-page h2 { color: var(--navy); border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.print-field { display: grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eee; }
.print-field strong { color: #333; }
.print-signature { max-height: 90px; border: 1px solid #ddd; margin-top: 6px; display: block; }
.print-meta { color: #555; margin-top: 4px; }
.no-print {}

@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { align-items: flex-start; flex-direction: column; }
  .stats, .grid.two, .grid.three, .grid.four, .form-grid, .workflow-grid, .signature-area { grid-template-columns: 1fr; }
  .project-card { grid-template-columns: 1fr; }
  .search { min-width: 100%; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .phase-row { grid-template-columns: 1fr; }
  .project-layout { grid-template-columns: 1fr; }
  .wizard-rail { max-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }
  .checkbox-group { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; }
  body * { visibility: hidden; }
  #printFormDialog, #printFormDialog * { visibility: visible; }
  #printFormDialog { position: static; width: auto; max-height: none; box-shadow: none; border-radius: 0; }
  #printFormContent { position: absolute; left: 0; top: 0; width: 100%; }
  .no-print { display: none !important; }
  .print-page { padding: 0.35in; max-width: none; }
}


/* v3 printable/save-as-PDF form layout */
.print-dialog {
  background: #f5f7fa;
}

#printFormContent {
  background: #f5f7fa;
  padding: 18px;
}

.print-sheet {
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto 18px;
  background: #fff;
  color: #1f2933;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  page-break-after: always;
}

.print-topbar {
  height: .67in;
  background: #1f4265;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .45in;
}

.print-topbar h1 {
  margin: 0;
  font-size: 18px;
  letter-spacing: .02em;
  color: #fff;
}

.print-topbar .print-page-label {
  text-align: right;
  font-size: 9px;
  line-height: 1.35;
  opacity: .95;
}

.print-logo-strip {
  min-height: .82in;
  padding: .12in .45in;
  border-bottom: 1px solid #d8dee4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .2in;
}

.print-logo-strip img {
  max-height: .62in;
  max-width: 2.45in;
  object-fit: contain;
}

.print-logo-strip .print-center-note {
  text-align: center;
  color: #4a4a4a;
  font-size: 8px;
  line-height: 1.25;
}

.print-body {
  padding: .28in .45in .48in;
}

.print-section {
  margin-bottom: .18in;
}

.print-section-title {
  background: #eaf1f7;
  border: 1px solid #2e5f8f;
  color: #1f4265;
  font-weight: 800;
  font-size: 10.5px;
  padding: .065in .10in;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: .10in;
}

.print-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .09in .16in;
}

.print-field-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.print-field-box {
  min-height: .35in;
}

.print-field-box.full {
  grid-column: 1 / -1;
}

.print-field-label {
  font-weight: 800;
  color: #4a4a4a;
  font-size: 7.5px;
  margin-bottom: .025in;
}

.print-field-value {
  border: 1px solid #aeb7c2;
  background: #f9fafb;
  min-height: .22in;
  padding: .055in .07in;
  font-size: 8.2px;
  line-height: 1.28;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.print-field-value.tall {
  min-height: .52in;
}

.print-checkbox-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .03in .08in;
  border: 1px solid #aeb7c2;
  background: #f9fafb;
  padding: .06in .07in;
  min-height: .22in;
}

.print-check {
  font-size: 8px;
  line-height: 1.25;
}

.print-check .box {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid #4a4a4a;
  margin-right: 4px;
  vertical-align: -1px;
  text-align: center;
  line-height: 8px;
  font-size: 7px;
}

.print-ack {
  border: 1px solid #d7b56d;
  background: #fff9ed;
  color: #5f3f12;
  padding: .09in .10in;
  font-size: 8px;
  line-height: 1.35;
}

.print-signature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .14in;
}

.print-signature-card {
  min-height: .58in;
}

.print-signature-line {
  border: 1px solid #aeb7c2;
  background: #f9fafb;
  height: .42in;
  display: flex;
  align-items: center;
  padding: .03in .06in;
}

.print-signature-line img {
  max-height: .36in;
  max-width: 100%;
}

.print-lineitem-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 7.8px;
}

.print-lineitem-table th {
  background: #eaf1f7;
  color: #1f4265;
  border: 1px solid #aeb7c2;
  text-align: left;
  padding: .045in;
}

.print-lineitem-table td {
  border: 1px solid #aeb7c2;
  background: #f9fafb;
  padding: .045in;
  min-height: .18in;
}

/* In tfoot now, so it repeats at the bottom of every printed page instead of
   floating to the end of a two-page contract. */
/* Trimmed: as an absolutely positioned element this took no space in the
   flow and could print on top of the last line of content. In tfoot it
   reserves its height honestly, so the chrome around it is kept tight to give
   that space back to the document. */
.print-footer {
  margin: 0 .45in .10in;
  border-top: 1px solid #d8dee4;
  padding-top: .04in;
  font-size: 7px;
  line-height: 1.3;
  color: #4a4a4a;
}

.print-sheet-inner {
  position: relative;
  min-height: 11in;
}

/* The running-header table. thead and tfoot are repeated by the browser on
   every printed page; the cells carry no styling of their own so the sheet
   renders exactly as it did when these were plain divs.

   height, not min-height: a table cell stretches to fill the height the table
   is given, so on a one-page form the body cell expands and the footer still
   sits at the bottom of the sheet - which is what the old absolute positioning
   did. A longer form just grows past it. */
.print-running {
  width: 100%;
  height: 11in;
  border-collapse: collapse;
}
.print-running > thead { display: table-header-group; }
.print-running > tfoot { display: table-footer-group; }
.print-running > thead > tr > th,
.print-running > tfoot > tr > td,
.print-running > tbody > tr > td {
  padding: 0;
  border: 0;
  margin: 0;
  text-align: left;
  font-weight: inherit;
  vertical-align: top;
}

/* Client and job under the document title, inside the topbar that repeats on
   every page. A repeated header naming only the document would tell somebody
   holding page 2 what kind of thing it is but not whose.

   In the topbar rather than a strip of its own because the topbar is a fixed
   .67in holding one 18px line - this costs no height at all, and a strip cost
   enough to push three short forms onto a second page. */
.print-topbar-id { min-width: 0; }
.print-topbar-job {
  margin-top: .02in;
  font-size: 7.5px;
  line-height: 1.25;
  color: #dbe6f2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media print {
  @page {
    size: letter;
    margin: 0;
  }

  html, body {
    width: 8.5in;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body * {
    visibility: hidden !important;
  }

  #formPrintDialog,
  #formPrintDialog * {
    visibility: visible !important;
  }

  #formPrintDialog {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 8.5in !important;
    max-width: 8.5in !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  #printFormContent {
    padding: 0 !important;
    background: #fff !important;
  }

  .print-sheet {
    width: 8.5in !important;
    min-height: 11in !important;
    margin: 0 !important;
    box-shadow: none !important;
    page-break-after: always;
    break-after: page;
  }

  .print-sheet:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  .no-print,
  .dialog-head.no-print,
  .print-actions.no-print {
    display: none !important;
  }

  .print-field-value,
  .print-checkbox-list,
  .print-signature-line {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .print-topbar,
  .print-section-title,
  .print-logo-strip,
  .print-ack {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}


/* v4 project photo attachment styling */
.photo-upload-panel {
  border: 1px dashed #aeb7c2;
  background: #f9fafb;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.photo-card {
  border: 1px solid #d8dee4;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(31,58,95,.08);
}

.photo-card img {
  width: 100%;
  height: 135px;
  object-fit: cover;
  display: block;
  background: #eef2f6;
}

.photo-card-body {
  padding: 10px;
  display: grid;
  gap: 7px;
}

.photo-card-title {
  font-weight: 800;
  color: #1f2933;
  font-size: 13px;
}

.photo-card-meta {
  font-size: 12px;
  color: #637381;
  line-height: 1.35;
}

.photo-card-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.photo-preview-large {
  width: min(100%, 900px);
  max-height: 72vh;
  object-fit: contain;
  background: #111;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

.photo-proof-print-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .13in;
}

.photo-proof-item {
  border: 1px solid #aeb7c2;
  padding: .07in;
  background: #f9fafb;
  break-inside: avoid;
}

.photo-proof-item img {
  width: 100%;
  height: 2.25in;
  object-fit: cover;
  display: block;
  background: #eee;
  border: 1px solid #d8dee4;
}

.photo-proof-caption {
  font-size: 7.7px;
  line-height: 1.3;
  padding-top: .05in;
  color: #1f2933;
}

.photo-empty {
  border: 1px dashed #c7d1db;
  border-radius: 14px;
  background: #fff;
  padding: 28px;
  text-align: center;
  color: #637381;
}

@media print {
  .photo-proof-item img {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}


/* v5 role-based crew portal */
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.role-card {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(31, 58, 95, 0.10);
  cursor: pointer;
}

.role-card:hover, .role-card.active {
  border-color: #2e5f8f;
  background: #eaf1f7;
}

.role-card h3 {
  margin: 0 0 8px;
  color: #1f4265;
}

.role-card p {
  margin: 0;
  color: #637381;
  font-size: 14px;
}

.crew-project-list {
  display: grid;
  gap: 12px;
}

.crew-project-card {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(31, 58, 95, 0.10);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}

.crew-project-card h3 {
  margin: 0 0 6px;
}

.crew-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.crew-info-box {
  border: 1px solid #d8dee4;
  background: #f9fafb;
  border-radius: 12px;
  padding: 9px;
}

.crew-info-box .label {
  font-size: 11px;
  font-weight: 800;
  color: #637381;
  margin-bottom: 4px;
}

.crew-info-box .value {
  font-size: 13px;
  color: #1f2933;
  overflow-wrap: anywhere;
}

.crew-work-dialog {
  background: #fff;
}

.crew-work-content {
  padding: 18px 20px;
  max-height: 72vh;
  overflow: auto;
}

.crew-work-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}

.crew-summary-card {
  border: 1px solid #d8dee4;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(31, 58, 95, 0.08);
}

.crew-summary-card h3 {
  margin: 0 0 12px;
  color: #1f4265;
}

.crew-checklist {
  display: grid;
  gap: 8px;
}

.crew-checklist label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-weight: 600;
  color: #1f2933;
  font-size: 14px;
  border: 1px solid #d8dee4;
  border-radius: 12px;
  padding: 10px;
  background: #f9fafb;
}

.crew-checklist input {
  width: auto;
  margin: 2px 0 0;
}

.crew-photo-drop {
  border: 1px dashed #aeb7c2;
  background: #f9fafb;
  border-radius: 16px;
  padding: 14px;
}

.crew-photo-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.crew-photo-thumbs img {
  width: 100%;
  height: 86px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #d8dee4;
}

.crew-big-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.crew-big-actions button {
  min-height: 46px;
}

.crew-role-note {
  background: #fff9ed;
  border: 1px solid #f0d3a4;
  color: #72480d;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
}

@media (max-width: 960px) {
  .role-grid, .crew-work-grid, .crew-info-grid, .crew-big-actions {
    grid-template-columns: 1fr;
  }

  .crew-project-card {
    grid-template-columns: 1fr;
  }
}


/* v6 simplified two-view schedule/calendar and assignment styling */
.daily-calendar-shell {
  display: grid;
  gap: 16px;
}

.schedule-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(31,58,95,.08);
}

.schedule-controls label {
  min-width: 190px;
}

.day-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.day-stat {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 18px rgba(31,58,95,.07);
}

.day-stat .num {
  font-size: 24px;
  font-weight: 800;
  color: #1f4265;
}

.day-stat .label {
  color: #637381;
  font-size: 12px;
  margin-top: 2px;
}

.event-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.event-lane {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(31,58,95,.08);
  min-height: 230px;
}

.event-lane h3 {
  margin: 0 0 10px;
  color: #1f4265;
  font-size: 16px;
}

.schedule-job-card {
  border: 1px solid #d8dee4;
  border-radius: 14px;
  padding: 11px;
  background: #f9fafb;
  margin-bottom: 10px;
}

.schedule-job-card h4 {
  margin: 0 0 5px;
  color: #1f2933;
}

.schedule-job-card p {
  margin: 0 0 8px;
  color: #637381;
  font-size: 13px;
}

.assignment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 12px;
}

.assignment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 1px solid #d8dee4;
  background: #f9fafb;
  padding: 10px;
  border-radius: 12px;
}

.assignment-row .assignment-title {
  grid-column: 1 / -1;
  font-weight: 800;
  color: #1f4265;
}

.jobsite-header-card {
  border: 1px solid #d8dee4;
  background: #eaf1f7;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
}

.jobsite-header-card h3 {
  margin: 0 0 6px;
  color: #1f4265;
}

.jobsite-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.jobsite-event-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.jobsite-event-tab {
  border: 1px solid #b8c7d6;
  color: #1f4265;
  background: #fff;
}

.jobsite-event-tab.active {
  background: #1f4265;
  color: #fff;
  border-color: #1f4265;
}

@media (max-width: 1100px) {
  .event-lanes, .day-summary, .jobsite-quick-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .event-lanes, .day-summary, .jobsite-quick-grid, .assignment-grid, .assignment-row {
    grid-template-columns: 1fr;
  }

  .schedule-controls label {
    min-width: 100%;
  }
}


/* v7 admin handoff / release-to-schedule styling */
.handoff-panel {
  border: 1px solid #2e5f8f;
  background: #eaf1f7;
  border-radius: 16px;
  padding: 16px;
  margin-top: 18px;
}

.handoff-panel h4 {
  color: #1f4265;
  margin: 0 0 8px;
}

.handoff-panel p {
  margin: 0 0 12px;
  color: #4a4a4a;
}

.handoff-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.handoff-card {
  border: 1px solid #d8dee4;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
}

.handoff-card h5 {
  margin: 0 0 8px;
  color: #1f4265;
  font-size: 14px;
}

.handoff-card .small-note {
  font-size: 12px;
  color: #637381;
  line-height: 1.35;
  margin-top: 6px;
}

.handoff-ready {
  border-color: #26764d;
  background: #e8f7ef;
}

.handoff-warning {
  border-color: #a2691a;
  background: #fff9ed;
}

.handoff-missing {
  border-color: #a63a3a;
  background: #ffecec;
}

.work-status-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.work-status-draft { background: #f0f2f5; color: #555; }
.work-status-ready { background: #fff3df; color: #a2691a; }
.work-status-released { background: #eaf1f7; color: #1f4265; }
.work-status-inprogress { background: #fff3df; color: #a2691a; }
.work-status-completed { background: #e8f7ef; color: #26764d; }
.work-status-blocked { background: #ffecec; color: #a63a3a; }

@media (max-width: 960px) {
  .handoff-status-grid {
    grid-template-columns: 1fr;
  }
}


/* v8 cleaner wizard dropdown/accordion sections */
.wizard-main {
  background: #f5f7fa;
}

.clean-section {
  border: 1px solid #d8dee4;
  background: #fff;
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(31,58,95,.06);
}

.clean-section summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  background: #fff;
  color: #1f4265;
  font-weight: 850;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.clean-section summary::-webkit-details-marker {
  display: none;
}

.clean-section summary::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  color: #2e5f8f;
}

.clean-section[open] summary {
  background: #eaf1f7;
  border-bottom: 1px solid #d8dee4;
}

.clean-section[open] summary::after {
  content: "–";
}

.clean-section-body {
  padding: 16px;
}

.clean-section-note {
  color: #637381;
  font-size: 13px;
  line-height: 1.35;
  margin: -4px 0 12px;
}

.quick-summary-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.quick-summary-item {
  border: 1px solid #d8dee4;
  border-radius: 14px;
  padding: 10px;
  background: #fff;
}

.quick-summary-item .label {
  color: #637381;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 3px;
}

.quick-summary-item .value {
  color: #1f2933;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.release-center {
  border: 1px solid #2e5f8f;
  background: #f9fbfd;
  border-radius: 16px;
  padding: 14px;
}

.release-work-order.big-release {
  width: 100%;
  margin-top: 8px;
  min-height: 42px;
}

.release-card-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.release-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.release-card {
  border: 1px solid #d8dee4;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
}

.release-card.ready {
  border-color: #26764d;
  background: #f7fffa;
}

.release-card.warning {
  border-color: #a2691a;
  background: #fffaf2;
}

.release-card.missing {
  border-color: #a63a3a;
  background: #fff7f7;
}

.release-card h4 {
  margin: 0 0 8px;
  color: #1f4265;
}

.release-card .requirements {
  font-size: 12px;
  color: #637381;
  line-height: 1.35;
  margin-top: 8px;
}

.form-progress-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.form-progress-chip {
  border-radius: 999px;
  padding: 4px 8px;
  background: #f0f2f5;
  color: #555;
  font-size: 11px;
  font-weight: 750;
}

.form-progress-chip.done {
  background: #e8f7ef;
  color: #26764d;
}

.form-progress-chip.missing {
  background: #ffecec;
  color: #a63a3a;
}

@media (max-width: 960px) {
  .quick-summary-row,
  .release-card-grid {
    grid-template-columns: 1fr;
  }
}


/* v9 separate cabinet delivery vs cabinet install work order checklist styling */
.event-checklist-card {
  border: 1px solid #d8dee4;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(31,58,95,.08);
}

.event-checklist-card h3 {
  margin: 0 0 8px;
  color: #1f4265;
}

.event-checklist-card .event-note {
  color: #637381;
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 12px;
}

.event-completion-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.schedule-job-card .completion-warning {
  color: #a2691a;
  font-size: 12px;
  font-weight: 700;
  margin-top: 7px;
}

.schedule-job-card .completion-done {
  color: #26764d;
  font-size: 12px;
  font-weight: 700;
  margin-top: 7px;
}

@media (max-width: 720px) {
  .event-completion-row {
    grid-template-columns: 1fr;
  }
}


/* v10 intake-based scope routing */
/* A warning, not a panel. One line, amber rather than the old instructional
   blue, and only on screen when the scope is genuinely missing. */
.scope-missing {
  border-left: 4px solid #c08a2e;
  background: #fdf6e9;
  color: #7a5a15;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.scope-hidden-note {
  border: 1px dashed #c7d1db;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  color: #637381;
  text-align: center;
}

.step-filter-note {
  font-size: 11px;
  color: #777;
  margin-top: 4px;
}


/* v11 stone workflow / template prerequisite refinements */
.workflow-route-note {
  border: 1px solid #d7b56d;
  background: #fff9ed;
  color: #5f3f12;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.35;
}

.requirement-list {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.requirement-item {
  font-size: 12px;
  line-height: 1.35;
  padding: 5px 7px;
  border-radius: 9px;
  background: #f0f2f5;
  color: #555;
}

.requirement-item.done {
  background: #e8f7ef;
  color: #26764d;
  font-weight: 800;
}

.requirement-item.missing {
  background: #ffecec;
  color: #a63a3a;
  font-weight: 800;
}


/* v13 login and role-based access */
.login-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1f4265, #2e5f8f);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.login-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  padding: 24px;
  display: grid;
  gap: 14px;
}

.login-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #d8dee4;
}

.login-brand img {
  width: 78px;
  height: 52px;
  object-fit: contain;
}

.login-brand h1 {
  margin: 0;
  color: #1f4265;
  font-size: 22px;
}

.login-brand p {
  margin: 3px 0 0;
  color: #637381;
}

.login-note {
  background: #eaf1f7;
  border: 1px solid #b8c7d6;
  color: #1f4265;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
}

.login-error {
  color: #a63a3a;
  font-weight: 800;
  min-height: 20px;
}

.app-shell.locked {
  display: none;
}

.user-panel {
  background: rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
  font-size: 12px;
}

.user-panel span {
  display: block;
  color: rgba(255,255,255,.78);
  margin-top: 3px;
}

.user-panel button {
  width: 100%;
}

.role-hidden {
  display: none !important;
}

.user-management-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
}

.user-list-card {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(31,58,95,.08);
}

.user-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #d8dee4;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  background: #f9fafb;
}

.user-row h4 {
  margin: 0 0 4px;
  color: #1f4265;
}

.user-row p {
  margin: 0;
  color: #637381;
  font-size: 13px;
}

.permission-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.permission-item {
  border: 1px solid #d8dee4;
  border-radius: 12px;
  padding: 10px;
  background: #f9fafb;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.field-login-banner {
  border: 1px solid #2e5f8f;
  background: #eaf1f7;
  color: #1f4265;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  line-height: 1.35;
}

@media (max-width: 960px) {
  .user-management-grid {
    grid-template-columns: 1fr;
  }
}


/* v14 customer management */
.customer-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 16px;
}

.customer-card {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(31,58,95,.08);
}

.customer-list {
  display: grid;
  gap: 12px;
}

.customer-row {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(31,58,95,.08);
}

.customer-row h3 {
  margin: 0 0 5px;
  color: #1f4265;
}

.customer-row p {
  margin: 0;
  color: #637381;
  font-size: 14px;
  line-height: 1.4;
}

.customer-projects {
  margin-top: 10px;
  border-top: 1px solid #d8dee4;
  padding-top: 10px;
}

.customer-project-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eaf1f7;
  color: #1f4265;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  margin: 3px;
}

.customer-search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: end;
}

.customer-select-helper {
  background: #eaf1f7;
  border: 1px solid #b8c7d6;
  color: #1f4265;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  margin-bottom: 12px;
}

.linked-customer-box {
  border: 1px solid #d8dee4;
  background: #f9fafb;
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
}

@media (max-width: 960px) {
  .customer-layout {
    grid-template-columns: 1fr;
  }

  .customer-search-row {
    flex-direction: column;
    align-items: stretch;
  }
}


/* v15 enhanced user administration */
.user-profile-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}

.user-profile-card {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(31,58,95,.08);
}

.user-profile-card h3 {
  margin-top: 0;
  color: #1f4265;
}

.user-role-summary {
  display: grid;
  gap: 10px;
}

.user-role-box {
  border: 1px solid #d8dee4;
  background: #f9fafb;
  border-radius: 14px;
  padding: 12px;
}

.user-role-box h4 {
  margin: 0 0 5px;
  color: #1f4265;
}

.user-role-box p {
  margin: 0;
  color: #637381;
  font-size: 13px;
  line-height: 1.35;
}

.user-directory {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.user-profile-row {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(31,58,95,.08);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}

.user-profile-row h3 {
  margin: 0 0 5px;
  color: #1f4265;
}

.user-profile-row p {
  margin: 0;
  color: #637381;
  font-size: 13px;
  line-height: 1.4;
}

.user-credential-box {
  background: #fff9ed;
  border: 1px solid #f0d3a4;
  color: #72480d;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.35;
}

.user-status-active {
  background: #e8f7ef;
  color: #26764d;
}

.user-status-inactive {
  background: #ffecec;
  color: #a63a3a;
}

@media (max-width: 960px) {
  .user-profile-grid,
  .user-profile-row {
    grid-template-columns: 1fr;
  }
}


/* v16 admin vs designer split */
.restricted-stat {
  background: #f0f2f5;
  color: #637381;
}

.restricted-stat .num {
  color: #637381;
}

.restricted-note {
  border: 1px solid #d8dee4;
  background: #f9fafb;
  color: #637381;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 8px;
}

.role-badge-admin {
  background: #eaf1f7;
  color: #1f4265;
}

.role-badge-designer {
  background: #f3edf9;
  color: #68408b;
}

.role-badge-field {
  background: #fff3df;
  color: #a2691a;
}


/* v19 mobile optimization */
:root {
  --tap: 46px;
}

button,
input,
select,
textarea {
  font-size: 16px;
}

button,
.nav-btn,
.icon-btn,
input,
select {
  min-height: var(--tap);
}

input,
select,
textarea {
  width: 100%;
}

textarea {
  min-height: 110px;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 240px 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.two,
  .grid.three,
  .customer-layout,
  .user-profile-grid,
  .user-management-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  body {
    overflow-x: hidden;
  }

  .app-shell {
    display: block;
    min-height: 100vh;
    padding-bottom: 86px;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    height: auto;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.15);
  }

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

  .brand-logo {
    max-width: 54px;
    max-height: 44px;
  }

  .brand h1 {
    font-size: 18px;
    margin: 0;
  }

  .brand p {
    font-size: 11px;
    margin: 2px 0 0;
  }

  .sidebar-note {
    display: none;
  }

  .user-panel {
    margin-top: 8px;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .user-panel button {
    width: auto;
    padding: 8px 10px;
    min-height: 38px;
  }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: #1f4265;
    border-top: 1px solid rgba(255,255,255,.18);
    -webkit-overflow-scrolling: touch;
  }

  .nav-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    min-height: 40px;
  }

  .main {
    padding: 12px;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: -12px -12px 12px;
    padding: 12px;
    background: rgba(245,247,250,.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #d8dee4;
    display: grid;
    gap: 10px;
  }

  .topbar h2 {
    font-size: 22px;
  }

  .topbar p {
    font-size: 13px;
  }

  .top-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .content {
    padding: 0;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat {
    padding: 12px;
  }

  .stat .num {
    font-size: 24px;
  }

  .card,
  .project-card,
  .customer-card,
  .customer-row,
  .user-profile-card,
  .user-profile-row,
  .schedule-card,
  .release-card,
  .event-checklist-card {
    border-radius: 14px;
    padding: 12px;
  }

  .toolbar,
  .row-title,
  .inline-actions,
  .customer-search-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
  }

  .inline-actions button {
    width: 100%;
  }

  .table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  dialog {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .dialog-form,
  .crew-work-dialog {
    height: 100%;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .dialog-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid #d8dee4;
    padding: 12px;
  }

  .project-layout {
    display: block;
    overflow: auto;
    flex: 1;
  }

  .wizard-rail {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px;
    background: #f5f7fa;
    border-bottom: 1px solid #d8dee4;
    border-right: none;
    max-height: none;
  }

  .step-btn {
    min-width: 175px;
    flex: 0 0 auto;
    padding: 10px;
  }

  .wizard-main {
    padding: 12px;
  }

  .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #d8dee4;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .dialog-actions .grow {
    display: none;
  }

  .dialog-actions button {
    width: 100%;
  }

  #deleteProjectBtn {
    grid-column: 1 / -1;
  }

  .release-card-grid,
  .event-completion-row,
  .quick-summary-row {
    grid-template-columns: 1fr !important;
  }

  .schedule-lanes {
    grid-template-columns: 1fr !important;
  }

  .schedule-card {
    min-height: auto;
  }

  .crew-job-grid,
  .photo-grid {
    grid-template-columns: 1fr !important;
  }

  .photo-tile img {
    max-height: 220px;
    object-fit: cover;
  }

  .login-card {
    padding: 18px;
    border-radius: 16px;
  }

  .login-brand img {
    width: 62px;
  }
}

@media (max-width: 460px) {
  .stats {
    grid-template-columns: 1fr;
  }

  .top-actions {
    grid-template-columns: 1fr;
  }

  .dialog-actions {
    grid-template-columns: 1fr;
  }

  .step-btn {
    min-width: 150px;
  }
}

/* Make field cards easier on phones */
.schedule-job-card {
  touch-action: manipulation;
}

.schedule-job-card button,
.primary.small,
.secondary.small,
.danger.small {
  min-height: 42px;
}


/* =========================================================
   v20 Professional UI Polish
   ========================================================= */
:root {
  --navy-950:#0b1726;
  --navy-900:#10233a;
  --navy-800:#16365c;
  --navy-700:#1f4d7a;
  --stone-50:#f7f8fa;
  --stone-100:#eef2f5;
  --stone-200:#dde5eb;
  --ink-900:#101828;
  --ink-700:#344054;
  --ink-500:#667085;
  --gold-600:#b88746;
  --gold-500:#c89958;
  --green-600:#27805d;
  --red-600:#b42318;
  --shadow-soft:0 16px 45px rgba(16,24,40,.10);
  --shadow-card:0 10px 28px rgba(16,24,40,.08);
  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
  --focus-ring:0 0 0 4px rgba(200,153,88,.22);
}

* { box-sizing:border-box; }

html {
  background:linear-gradient(145deg,#edf1f5 0%,#f8fafc 38%,#eef2f7 100%);
}

body {
  color:var(--ink-900);
  background:
    radial-gradient(circle at 8% 8%,rgba(200,153,88,.14),transparent 28%),
    radial-gradient(circle at 90% 12%,rgba(31,77,122,.12),transparent 32%),
    linear-gradient(145deg,#f4f6f8,#eef2f5);
  letter-spacing:-.01em;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(16,24,40,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,24,40,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 70%);
  z-index:-1;
}

/* Shell / sidebar */
.app-shell { background:transparent; }

.sidebar {
  background:
    linear-gradient(180deg,rgba(16,35,58,.98),rgba(11,23,38,.98)),
    radial-gradient(circle at 20% 0%,rgba(200,153,88,.22),transparent 28%);
  color:#fff;
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:10px 0 30px rgba(16,24,40,.14);
}

.brand {
  padding:4px 4px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:14px;
}

.brand-logo { filter:drop-shadow(0 8px 18px rgba(0,0,0,.25)); }

.brand h1 {
  font-weight:850;
  letter-spacing:-.04em;
  line-height:1.02;
}

.brand p {
  color:rgba(255,255,255,.74);
  font-weight:600;
}

.sidebar-note {
  color:rgba(255,255,255,.68);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);
  padding:12px;
}

.user-panel {
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px rgba(255,255,255,.07);
}

#currentUserName { font-weight:850;color:#fff; }
#currentUserRole { color:rgba(255,255,255,.72); }

.nav { gap:7px; }

.nav-btn {
  border-radius:12px;
  color:rgba(255,255,255,.74);
  background:transparent;
  border:1px solid transparent;
  font-weight:800;
  letter-spacing:-.01em;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}

.nav-btn:hover {
  transform:translateX(2px);
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
}

.nav-btn.active {
  color:#0f2137;
  background:linear-gradient(135deg,#fff,#f3eadc);
  border-color:rgba(200,153,88,.48);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

/* Main header */
.main { background:transparent; }

.topbar {
  background:
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.76)),
    radial-gradient(circle at 80% 10%,rgba(200,153,88,.18),transparent 30%);
  border:1px solid rgba(194,204,214,.72);
  border-radius:var(--radius-xl);
  padding:20px 22px;
  box-shadow:var(--shadow-soft);
  margin-bottom:18px;
  backdrop-filter:blur(16px);
}

.topbar h2 {
  color:var(--navy-950);
  font-size:clamp(24px,2.4vw,34px);
  font-weight:850;
  letter-spacing:-.045em;
}

.topbar p {
  color:var(--ink-500);
  font-weight:600;
}

/* Finished product surfaces */
.card,
.project-card,
.customer-card,
.customer-row,
.user-profile-card,
.user-profile-row,
.schedule-card,
.release-card,
.event-checklist-card,
.clean-section,
.stat,
.dialog-form,
.crew-work-dialog,
.login-card {
  border:1px solid rgba(194,204,214,.78);
  box-shadow:var(--shadow-card);
}

.card,
.project-card,
.customer-card,
.customer-row,
.user-profile-card,
.user-profile-row,
.schedule-card,
.release-card,
.event-checklist-card,
.clean-section,
.stat {
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);
}

.card:hover,
.project-card:hover,
.customer-card:hover,
.customer-row:hover,
.user-profile-card:hover,
.user-profile-row:hover,
.schedule-card:hover {
  box-shadow:0 16px 36px rgba(16,24,40,.12);
}

.stat {
  position:relative;
  overflow:hidden;
  padding:18px;
}

.stat::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--gold-500),var(--navy-700));
}

.stat .num {
  color:var(--navy-950);
  font-weight:850;
  letter-spacing:-.045em;
}

.stat .label {
  color:var(--ink-500);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:11px;
}

/* Buttons and forms */
button,
.primary,
.secondary,
.danger {
  border-radius:12px;
  font-weight:850;
  letter-spacing:-.01em;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;
}

button:hover,
.primary:hover,
.secondary:hover,
.danger:hover { transform:translateY(-1px); }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:none;
  box-shadow:var(--focus-ring);
  border-color:rgba(200,153,88,.85)!important;
}

.primary {
  background:linear-gradient(135deg,var(--navy-800),var(--navy-700));
  border:1px solid rgba(31,77,122,.35);
  color:#fff;
  box-shadow:0 10px 22px rgba(31,77,122,.20);
}

.secondary {
  background:linear-gradient(135deg,#fff,#f7f8fa);
  border:1px solid rgba(194,204,214,.95);
  color:var(--navy-900);
}

.danger {
  background:linear-gradient(135deg,#fff5f4,#fee4e2);
  color:var(--red-600);
  border:1px solid rgba(180,35,24,.20);
}

label {
  color:var(--ink-700);
  font-weight:800;
}

input,
select,
textarea {
  background:#fff;
  color:var(--ink-900);
  border:1px solid rgba(194,204,214,.95);
  border-radius:12px;
  padding:11px 12px;
  box-shadow:inset 0 1px 0 rgba(16,24,40,.03);
}

/* Badges */
.badge,
.status-chip,
.work-status-pill,
.form-progress-chip {
  border-radius:999px;
  font-weight:850;
  letter-spacing:-.01em;
  border:1px solid rgba(194,204,214,.74);
  box-shadow:inset 0 1px rgba(255,255,255,.35);
}

.badge.done,
.status-chip.done,
.work-status-pill.completed,
.form-progress-chip.done {
  color:#075e45;
  background:#dff7eb;
  border-color:rgba(39,128,93,.28);
}

.badge.today,
.status-chip.today,
.work-status-pill.in-progress {
  color:#174a91;
  background:#e4efff;
  border-color:rgba(37,99,235,.24);
}

.badge.overdue,
.status-chip.overdue,
.work-status-pill.blocked {
  color:#971b12;
  background:#fee4e2;
  border-color:rgba(180,35,24,.25);
}

.work-status-pill.released,
.work-status-pill.ready {
  color:#8a5300;
  background:#fff3d6;
  border-color:rgba(200,153,88,.32);
}

/* Project / wizard polish */
.project-card { border-left:5px solid var(--navy-700); }

.project-card h3,
.customer-card h3,
.user-profile-card h3,
.schedule-card h3,
.clean-section h3,
.card h3 {
  color:var(--navy-950);
  letter-spacing:-.03em;
}

.project-meta,
.muted,
.help,
.clean-section-note,

.dialog-form,
.crew-work-dialog {
  overflow:hidden;
  border-radius:24px;
}

.dialog-head {
  background:
    linear-gradient(135deg,var(--navy-950),var(--navy-800)),
    radial-gradient(circle at 75% 15%,rgba(200,153,88,.35),transparent 30%);
  color:#fff;
  border-bottom:none;
}

.dialog-head h2,
.dialog-head p { color:#fff; }
.dialog-head p { opacity:.74; }

.project-layout { background:#f6f8fb; }

.wizard-rail {
  background:#fff;
  border-right:1px solid rgba(194,204,214,.80);
}

.step-btn {
  border-radius:14px;
  border:1px solid rgba(194,204,214,.72);
  background:#fff;
  box-shadow:0 2px 8px rgba(16,24,40,.04);
}

.step-btn:hover {
  background:#f8fafc;
  transform:translateY(-1px);
}

.step-btn.active {
  background:linear-gradient(135deg,#10233a,#1f4d7a);
  color:#fff;
  border-color:rgba(31,77,122,.55);
  box-shadow:0 12px 24px rgba(31,77,122,.22);
}

.step-btn .step-title { font-weight:850; }

.wizard-main {
  background:
    radial-gradient(circle at 90% 0%,rgba(200,153,88,.10),transparent 28%),
    #f6f8fb;
}

.clean-section { overflow:hidden; }

.clean-section-header {
  background:linear-gradient(135deg,#fff,#f8fafc);
  border-bottom:1px solid rgba(194,204,214,.60);
}

.release-card.ready {
  border-color:rgba(39,128,93,.30);
  background:linear-gradient(135deg,#fff,#f0fbf6);
}

.release-card.warning {
  border-color:rgba(200,153,88,.36);
  background:linear-gradient(135deg,#fff,#fff8e8);
}

.release-card.missing {
  border-color:rgba(180,35,24,.20);
  background:linear-gradient(135deg,#fff,#fff5f4);
}

/* Field schedule polish */
.schedule-card {
  background:linear-gradient(180deg,#fff,#fbfcfd);
  border-top:4px solid var(--navy-700);
}

.schedule-card h3 {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.schedule-job-card {
  border-radius:15px;
  border:1px solid rgba(194,204,214,.75);
  background:#fff;
  box-shadow:0 3px 10px rgba(16,24,40,.08);
}

.schedule-job-card:hover { border-color:rgba(31,77,122,.32); }

.completion-done,
.completion-warning {
  border-radius:12px;
  padding:8px 10px;
  font-weight:850;
}

.completion-done { background:#e7f8ef;color:#075e45; }
.completion-warning { background:#fff3d6;color:#8a5300; }

/* Photos */
.photo-tile {
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(194,204,214,.75);
  box-shadow:0 3px 10px rgba(16,24,40,.08);
}

/* Login */
.login-screen {
  background:
    radial-gradient(circle at 12% 12%,rgba(200,153,88,.22),transparent 28%),
    radial-gradient(circle at 92% 10%,rgba(31,77,122,.22),transparent 30%),
    linear-gradient(145deg,var(--navy-950),var(--navy-800));
}

.login-screen::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at center,#000 0%,transparent 74%);
}

.login-card {
  position:relative;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92)),
    radial-gradient(circle at 80% 0%,rgba(200,153,88,.18),transparent 30%);
  border-radius:28px;
  box-shadow:0 28px 70px rgba(0,0,0,.32);
}

.login-brand h1 {
  letter-spacing:-.055em;
  color:var(--navy-950);
}

.login-brand p {
  color:var(--ink-500);
  font-weight:650;
}

.login-subtitle {
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:14px;
  color:var(--navy-800);
  background:#f5eadc;
  border:1px solid rgba(200,153,88,.26);
  font-weight:800;
  font-size:13px;
}

.empty {
  border:1px dashed rgba(102,112,133,.28);
  background:rgba(255,255,255,.65);
  border-radius:var(--radius-lg);
  color:var(--ink-500);
}

/* Scrollbars */
* {
  scrollbar-width:thin;
  scrollbar-color:rgba(31,77,122,.35) rgba(16,24,40,.06);
}

::-webkit-scrollbar { width:10px;height:10px; }
::-webkit-scrollbar-track { background:rgba(16,24,40,.06);border-radius:999px; }
::-webkit-scrollbar-thumb { background:rgba(31,77,122,.35);border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:rgba(31,77,122,.55); }

/* Mobile polished view */
@media (max-width:820px) {
  body::before { background-size:32px 32px; }

  .sidebar {
    background:linear-gradient(135deg,var(--navy-950),var(--navy-800));
    box-shadow:0 8px 22px rgba(16,24,40,.18);
  }

  .brand {
    border-bottom:none;
    padding-bottom:8px;
    margin-bottom:4px;
  }

  .brand h1 { font-size:18px; }

  .user-panel {
    padding:8px;
    border-radius:14px;
  }

  .nav {
    background:linear-gradient(180deg,rgba(16,35,58,.98),rgba(11,23,38,.98));
    box-shadow:0 -12px 34px rgba(16,24,40,.26);
  }

  .nav-btn {
    min-height:42px;
    color:rgba(255,255,255,.78);
  }

  .nav-btn.active { transform:translateY(-1px); }

  .topbar {
    border-radius:0 0 22px 22px;
    margin-bottom:14px;
    box-shadow:0 8px 22px rgba(16,24,40,.10);
  }

  .topbar h2 { font-size:24px; }

  .card,
  .project-card,
  .customer-card,
  .customer-row,
  .user-profile-card,
  .user-profile-row,
  .schedule-card,
  .release-card,
  .event-checklist-card,
  .clean-section,
  .stat { border-radius:16px; }

  .dialog-form,
  .crew-work-dialog,
  .dialog-head { border-radius:0; }

  .wizard-rail { box-shadow:0 8px 18px rgba(16,24,40,.08); }

  .dialog-actions { box-shadow:0 -10px 28px rgba(16,24,40,.12); }
}

@media print {
  body { background:#fff!important; }
  .sidebar,.topbar,.nav,.dialog-actions { box-shadow:none!important; }
}


/* v21 Welcome Packet workflow form */
.workflow-info-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
    radial-gradient(circle at 100% 0%, rgba(200,153,88,.10), transparent 30%);
  border: 1px solid rgba(194,204,214,.78);
  border-left: 5px solid var(--gold-500, #c89958);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
}

.workflow-info-card h4 {
  margin: 0 0 8px;
  color: var(--navy-950, #0b1726);
  font-size: 18px;
  letter-spacing: -.03em;
}

.workflow-info-card p {
  margin: 8px 0;
  color: var(--ink-700, #344054);
  line-height: 1.48;
}

.workflow-info-card ul,
.workflow-info-card ol {
  margin: 10px 0 0 20px;
  padding: 0;
  color: var(--ink-700, #344054);
  line-height: 1.5;
}

.workflow-info-card li {
  margin: 7px 0;
}

.print-info-block {
  border: 1px solid #c2ccd6;
  border-left: 4px solid #c89958;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.print-info-block p {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.38;
}

.print-info-block ul,
.print-info-block ol {
  margin: 6px 0 0 18px;
  padding: 0;
  font-size: 12px;
  line-height: 1.38;
}

.print-info-block li {
  margin: 4px 0;
}


/* v22 Design & Rendering upload cards */
.file-upload-card {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  border: 1px solid rgba(194,204,214,.82);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
}

.file-upload-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.file-upload-head h4 {
  margin: 0;
  color: var(--navy-950, #0b1726);
  font-size: 18px;
  letter-spacing: -.03em;
}

.file-upload-head p {
  margin: 6px 0 0;
  color: var(--ink-500, #667085);
  line-height: 1.4;
}

.file-upload-card input[type="file"] {
  background: #fff;
  border: 1px dashed rgba(31,77,122,.35);
  padding: 14px;
}

.file-upload-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.stored-file-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(194,204,214,.72);
  border-radius: 14px;
  padding: 10px;
}

.file-thumb {
  width: 64px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eef2f5, #fff);
  border: 1px solid rgba(194,204,214,.72);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  color: var(--navy-800, #16365c);
}

.file-thumb.pdf {
  background: linear-gradient(135deg, #fff5f4, #fee4e2);
  color: #b42318;
}

.file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stored-file-main strong {
  display: block;
  color: var(--navy-950, #0b1726);
  word-break: break-word;
}

.stored-file-main p {
  margin: 4px 0 0;
  color: var(--ink-500, #667085);
  font-size: 12px;
}

.stored-file-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.small-empty {
  padding: 12px;
}

@media (max-width: 700px) {
  .stored-file-item {
    grid-template-columns: 54px 1fr;
  }

  .file-thumb {
    width: 54px;
    height: 48px;
  }

  .stored-file-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .stored-file-actions a,
  .stored-file-actions button {
    flex: 1;
    text-align: center;
  }

  .file-upload-head {
    display: grid;
  }
}


/* v23 automatic upload feedback and print attachments */
.upload-drop-zone {
  display: grid;
  gap: 4px;
  background: #fff;
  border: 1px dashed rgba(31,77,122,.38);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.upload-drop-zone:hover {
  background: #f8fafc;
  border-color: rgba(31,77,122,.65);
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
}

.upload-drop-zone input[type="file"] {
  border: 0;
  padding: 0;
  box-shadow: none;
}

.upload-drop-title {
  color: var(--navy-950, #0b1726);
  font-weight: 850;
}

.upload-drop-help {
  color: var(--ink-500, #667085);
  font-size: 12px;
  font-weight: 650;
}

.upload-status {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 850;
  color: var(--ink-500, #667085);
}

.upload-status.uploading {
  color: var(--navy-800, #16365c);
}

.upload-status.complete,
.upload-complete {
  color: #075e45;
}

.upload-status.failed {
  color: #b42318;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(31,77,122,.18);
  border-top-color: var(--navy-700, #1f4d7a);
  border-radius: 50%;
  display: inline-block;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.checkmark {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #dff7eb;
  color: #075e45;
  border: 1px solid rgba(39,128,93,.28);
  font-weight: 950;
  line-height: 1;
}

.upload-complete {
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 850;
}

.stored-file-item.uploaded {
  border-color: rgba(39,128,93,.22);
}

.print-attachment-index {
  page-break-before: auto;
}

.print-attached-page {
  page-break-before: always;
  break-before: page;
  min-height: 9.65in;
  padding: .15in 0;
}

.print-attached-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid #1f4265;
  padding-bottom: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #10233a;
}

.print-attached-header span {
  color: #667085;
  text-align: right;
}

.print-image-page {
  height: 8.75in;
  display: grid;
  place-items: center;
  border: 1px solid #c2ccd6;
  background: #fff;
}

.print-image-page img {
  max-width: 100%;
  max-height: 8.65in;
  object-fit: contain;
}

.print-pdf-page {
  height: 8.75in;
  border: 1px solid #c2ccd6;
  background: #f8fafc;
}

.print-pdf-page object {
  width: 100%;
  height: 100%;
}

.print-pdf-note {
  margin-top: 8px;
  color: #667085;
  font-size: 10px;
  line-height: 1.35;
}

@media print {
  .print-attached-page {
    page-break-before: always;
    break-before: page;
  }

  .print-image-page {
    border: 0;
    height: 8.9in;
  }

  .print-pdf-note {
    display: none;
  }
}


/* v24 2 MB upload limit feedback */
.upload-status.failed {
  background: #fff5f4;
  border: 1px solid rgba(180,35,24,.24);
  border-radius: 12px;
  padding: 10px 12px;
  color: #b42318;
}


/* v25 storage quota visibility */
.storage-meter {
  margin: 10px 0 4px;
  background: #f8fafc;
  border: 1px solid rgba(194,204,214,.78);
  border-radius: 14px;
  padding: 10px 12px;
}

.storage-meter-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-700, #344054);
  font-weight: 850;
}

.storage-bar {
  height: 8px;
  background: #e4e7ec;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.storage-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #27805d, #c89958);
  border-radius: inherit;
}

.storage-meter.warning .storage-bar span {
  background: linear-gradient(90deg, #c89958, #c46a1d);
}

.storage-meter.danger .storage-bar span {
  background: linear-gradient(90deg, #c46a1d, #b42318);
}

.storage-meter p {
  margin: 8px 0 0;
  color: var(--ink-500, #667085);
  font-size: 12px;
  line-height: 1.35;
}

.upload-status.failed .storage-meter {
  margin-top: 10px;
  background: #fff;
}


/* v27 flattened PDF attachment preview */
.print-rendering-status {
  margin: 24px;
  padding: 18px 20px;
  background: #f8fafc;
  border: 1px solid #c2ccd6;
  border-radius: 14px;
  color: #10233a;
  font-weight: 850;
  display: flex;
  align-items: center;
  gap: 10px;
}

.print-rendering-status.failed {
  color: #b42318;
  background: #fff5f4;
  border-color: rgba(180,35,24,.25);
}

.pdf-flattened-image img {
  display: block;
  margin: 0 auto;
  background: #fff;
}

.flattened-pdf-page .print-image-page {
  align-items: start;
}

@media print {
  .print-rendering-status {
    display: none;
  }

  .pdf-flattened-image img {
    max-width: 100%;
    max-height: 8.85in;
  }
}


/* v30 simplified Delivery / Installation field screen */
.simplified-field-view .crew-summary-card,
.simplified-field-view .event-checklist-card {
  border-left: 4px solid rgba(31,77,122,.35);
}

.field-job-notes {
  margin-top: 14px;
  background: #f8fafc;
  border: 1px solid rgba(194,204,214,.74);
  border-radius: 14px;
  padding: 12px;
}

.field-job-notes .label {
  font-size: 12px;
  font-weight: 850;
  color: var(--ink-500, #667085);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.field-job-notes .value {
  color: var(--ink-900, #101828);
  line-height: 1.45;
}

.field-completion-card textarea {
  min-height: 150px;
}

.field-completion-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 700px) {
  .field-completion-actions {
    grid-template-columns: 1fr;
  }
}


/* v32 Field Documents for Cabinet / Stone installs */
.field-documents-upload {
  margin-top: 14px;
  background: rgba(248,250,252,.88);
  border: 1px solid rgba(194,204,214,.78);
  border-radius: 16px;
  padding: 14px;
}

.field-documents-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.field-documents-head h5 {
  margin: 0;
  font-size: 16px;
  color: var(--navy-950, #0b1726);
  letter-spacing: -.025em;
}

.field-documents-head p {
  margin: 5px 0 0;
  color: var(--ink-500, #667085);
  line-height: 1.35;
}

.field-doc-drop {
  margin-bottom: 10px;
}

/* Separates the job's own documents from anything the office attached to this
   one work order. */
.crew-doc-subhead {
  margin: 14px 0 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #6b7684;
}

.field-documents-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.field-doc-item {
  border-color: rgba(31,77,122,.18);
}

.field-documents-crew {
  border-left: 4px solid var(--gold-500, #c89958) !important;
}

.crew-documents-list .stored-file-actions {
  min-width: 180px;
}

.crew-doc-item {
  background: linear-gradient(135deg, #fff, #f8fafc);
}

@media (max-width: 760px) {
  .field-documents-head {
    display: grid;
  }

  .crew-documents-list .stored-file-actions,
  .field-documents-list .stored-file-actions {
    min-width: 0;
  }
}


/* =========================================================
   v33 Finished Product UI / Graphics Polish
   Applies professional styling to newer workflow pieces.
   ========================================================= */

/* Global refinement */
body {
  font-feature-settings: "kern" 1, "liga" 1;
}

.main {
  min-width: 0;
}

.content {
  animation: softFadeIn .18s ease-out;
}

@keyframes softFadeIn {
  from { opacity: .72; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Better top-level buttons */
.top-actions .primary,
.top-actions .secondary {
  min-width: 112px;
}

#newProjectBtn::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-weight: 950;
}

#newProjectBtn {
  white-space: nowrap;
}

#printBtn::before {
  content: "▣";
  margin-right: 6px;
  opacity: .7;
}

/* Dashboard / schedule cards are more app-like */
.stats {
  gap: 14px;
}

.stat {
  min-height: 82px;
}

.stat .num {
  line-height: 1;
}

.project-list,
.customer-list,
.user-list {
  display: grid;
  gap: 12px;
}

/* Work order release cards */
.release-center {
  gap: 16px;
}

.release-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 18px;
}

.release-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--navy-700, #1f4d7a), var(--gold-500, #c89958));
  opacity: .72;
}

.release-card h4 {
  font-size: 18px;
  letter-spacing: -.035em;
  color: var(--navy-950, #0b1726);
  margin-bottom: 12px;
}

.release-card.ready::before {
  background: linear-gradient(90deg, #27805d, #7bc89b);
}

.release-card.warning::before {
  background: linear-gradient(90deg, #c89958, #f4c26d);
}

.release-card.missing::before {
  background: linear-gradient(90deg, #b42318, #f97066);
}

.release-card .requirements {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(248,250,252,.85);
  border: 1px solid rgba(194,204,214,.68);
}

.big-release {
  width: 100%;
  min-height: 48px;
}

/* Field Documents visual system */
.field-documents-upload,
.file-upload-card {
  position: relative;
  overflow: hidden;
}

.field-documents-upload::before,
.file-upload-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, rgba(31,77,122,.8), rgba(200,153,88,.8));
}

.field-documents-head h5,
.file-upload-head h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-documents-head h5::before {
  content: "📎";
  font-size: 16px;
}

.file-upload-head h4::before {
  content: "⬆";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-800, #16365c), var(--navy-700, #1f4d7a));
  border-radius: 7px;
  font-size: 13px;
}

.upload-drop-zone {
  border-width: 1.5px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92)),
    repeating-linear-gradient(45deg, rgba(31,77,122,.025) 0 8px, transparent 8px 16px);
}

.upload-drop-title {
  font-size: 14px;
}

.stored-file-item {
  box-shadow: 0 4px 14px rgba(16,24,40,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stored-file-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(16,24,40,.10);
  border-color: rgba(31,77,122,.28);
}

.file-thumb {
  font-size: 11px;
  letter-spacing: .04em;
}

.file-thumb.pdf span {
  color: #b42318;
}

.stored-file-actions .small {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Delivery / Install field screen */
.jobsite-header-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.88)),
    radial-gradient(circle at 95% 0%, rgba(200,153,88,.15), transparent 28%);
  border: 1px solid rgba(194,204,214,.78);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow-card, 0 10px 28px rgba(16,24,40,.08));
  position: relative;
  overflow: hidden;
}

.jobsite-header-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--navy-700, #1f4d7a), var(--gold-500, #c89958));
}

.jobsite-header-card h3 {
  margin: 0 0 5px;
  color: var(--navy-950, #0b1726);
  letter-spacing: -.04em;
  font-size: 22px;
}

.jobsite-event-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.jobsite-event-tab {
  border-radius: 999px;
  border: 1px solid rgba(194,204,214,.84);
  background: #fff;
  color: var(--navy-900, #10233a);
  padding: 10px 14px;
  min-height: 42px;
}

.jobsite-event-tab.active {
  background: linear-gradient(135deg, var(--navy-800, #16365c), var(--navy-700, #1f4d7a));
  color: #fff;
  border-color: rgba(31,77,122,.45);
  box-shadow: 0 8px 18px rgba(31,77,122,.22);
}

.crew-work-grid {
  gap: 16px;
}

.crew-summary-card,
.event-checklist-card {
  border-radius: 18px;
}

.crew-summary-card h3,
.event-checklist-card h3 {
  color: var(--navy-950, #0b1726);
  letter-spacing: -.035em;
}

.jobsite-quick-grid {
  gap: 10px;
}

.crew-info-box {
  background: linear-gradient(135deg, #fff, #f8fafc);
  border: 1px solid rgba(194,204,214,.72);
  border-radius: 14px;
  padding: 12px;
}

.crew-info-box .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--ink-500, #667085);
  font-weight: 850;
  margin-bottom: 5px;
}

.crew-info-box .value {
  color: var(--navy-950, #0b1726);
  font-weight: 800;
}

.field-completion-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
}

.field-completion-actions .primary::before {
  content: "✓";
  margin-right: 7px;
  font-weight: 950;
}

.field-completion-actions .danger::before {
  content: "!";
  margin-right: 7px;
  font-weight: 950;
}

.field-documents-crew h3::before {
  content: "📄";
  margin-right: 8px;
}

/* Schedule cards */
.schedule-card {
  min-height: 220px;
}

.schedule-job-card {
  padding: 14px;
  border-radius: 16px;
}

.schedule-job-card h4,
.schedule-job-card strong {
  color: var(--navy-950, #0b1726);
}

.schedule-job-card .primary.small {
  margin-top: 8px;
}

/* Dialogs */
dialog::backdrop {
  background: rgba(11,23,38,.48);
  backdrop-filter: blur(4px);
}

.dialog-actions {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
}

/* Forms look consistent after new additions */
.clean-section summary {
  font-weight: 850;
  color: var(--navy-950, #0b1726);
}

.clean-section-body {
  background: rgba(255,255,255,.72);
}

/* Make role-hidden always win */
.role-hidden {
  display: none !important;
}

/* Mobile refinement */
@media (max-width: 820px) {
  .topbar {
    gap: 10px;
  }

  .top-actions {
    grid-template-columns: 1fr;
  }

  #newProjectBtn,
  #printBtn {
    width: 100%;
  }

  .release-card {
    padding: 14px;
  }

  .field-documents-upload,
  .file-upload-card {
    padding: 14px;
  }

  .stored-file-item {
    align-items: start;
  }

  .jobsite-header-card {
    padding: 15px;
    border-radius: 16px;
  }

  .jobsite-header-card h3 {
    font-size: 20px;
  }

  .crew-summary-card,
  .event-checklist-card {
    border-radius: 16px;
  }

  .crew-info-box {
    padding: 11px;
  }

  .crew-work-dialog .dialog-actions {
    grid-template-columns: 1fr;
  }

  .crew-work-dialog .dialog-actions button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .stored-file-item,
  .field-doc-item,
  .crew-doc-item {
    grid-template-columns: 52px 1fr;
  }

  .stored-file-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .stored-file-actions .danger {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   v34 Professional Button / Full UI Consistency Pass
   ========================================================= */

/* Normalize all button/link actions */
button,
.primary,
.secondary,
.danger,
.action-btn,
a.primary,
a.secondary,
a.danger {
  font-family: inherit;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

button,
.primary,
.secondary,
.danger,
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border-radius: 12px;
  padding: 10px 14px;
  line-height: 1;
  cursor: pointer;
}

.action-btn {
  appearance: none;
  border: 1px solid rgba(194,204,214,.88);
  background: linear-gradient(135deg, #fff, #f8fafc);
  color: var(--navy-900, #10233a);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -.012em;
  box-shadow: 0 5px 14px rgba(16,24,40,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(16,24,40,.11);
  border-color: rgba(31,77,122,.28);
}

.action-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 4px rgba(200,153,88,.22));
}

.open-btn {
  color: #fff;
  border-color: rgba(31,77,122,.45);
  background: linear-gradient(135deg, var(--navy-800, #16365c), var(--navy-700, #1f4d7a));
  box-shadow: 0 8px 18px rgba(31,77,122,.22);
}

.download-btn {
  color: var(--navy-900, #10233a);
  border-color: rgba(31,77,122,.18);
  background:
    linear-gradient(135deg, #fff, #f4f8fc),
    radial-gradient(circle at 100% 0%, rgba(31,77,122,.10), transparent 32%);
}

.remove-btn {
  color: #971b12;
  border-color: rgba(180,35,24,.22);
  background: linear-gradient(135deg, #fff, #fff5f4);
}

.open-btn::before,
.download-btn::before,
.remove-btn::before {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  flex: 0 0 auto;
}

.open-btn::before {
  content: "↗";
  color: #fff;
  background: rgba(255,255,255,.18);
}

.download-btn::before {
  content: "↓";
  color: var(--navy-800, #16365c);
  background: rgba(31,77,122,.10);
}

.remove-btn::before {
  content: "×";
  color: #971b12;
  background: rgba(180,35,24,.10);
}

/* Standard file/document cards */
.stored-file-item,
.field-doc-item,
.crew-doc-item {
  grid-template-columns: 68px minmax(0, 1fr) auto;
  padding: 12px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,250,252,.94));
}

.stored-file-main {
  min-width: 0;
}

.stored-file-main strong {
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -.018em;
}

.stored-file-main p {
  font-weight: 600;
}

.stored-file-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.file-thumb {
  width: 58px;
  height: 58px;
  border-radius: 13px;
}

.file-thumb.pdf {
  border-color: rgba(180,35,24,.18);
  background:
    linear-gradient(135deg, #fff, #fff5f4),
    radial-gradient(circle at 100% 0%, rgba(180,35,24,.10), transparent 36%);
}

.file-thumb.pdf span {
  font-size: 12px;
  letter-spacing: .055em;
  font-weight: 950;
}

.upload-complete {
  background: rgba(223,247,235,.65);
  border: 1px solid rgba(39,128,93,.18);
  border-radius: 999px;
  padding: 4px 8px;
}

/* Make current dialog bottom actions feel like a real app footer */
.crew-work-dialog .dialog-actions,
.dialog-actions {
  border-top: 1px solid rgba(194,204,214,.74);
}

.crew-work-dialog .dialog-actions {
  gap: 10px;
  padding: 14px 18px;
}

#crewPreviewPhotoProofBtn::before {
  content: "◉";
  font-size: 12px;
  opacity: .65;
}

#crewSaveWorkBtn::before {
  content: "✓";
  font-weight: 950;
  opacity: .75;
}

/* Inputs / selects feel less browser-default */
input[type="file"] {
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  appearance: none;
  margin-right: 12px;
  border: 1px solid rgba(31,77,122,.22);
  background: linear-gradient(135deg, #fff, #f4f8fc);
  color: var(--navy-900, #10233a);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

input[type="file"]::file-selector-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(16,24,40,.10);
}

/* Cleaner upload/photo sections */
.crew-photo-drop,
.upload-drop-zone {
  background:
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,250,252,.94));
}

.crew-photo-drop {
  border: 1px dashed rgba(31,77,122,.24);
  border-radius: 18px;
  padding: 16px;
}

.crew-photo-drop .primary {
  min-width: 160px;
}

.crew-photo-drop .primary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}

/* Cards across the field UI */
.crew-summary-card,
.event-checklist-card,
.jobsite-header-card {
  border-color: rgba(194,204,214,.82);
}

.crew-summary-card:hover,
.event-checklist-card:hover {
  box-shadow: 0 16px 32px rgba(16,24,40,.10);
}

/* Better close icon */
.icon-btn {
  border-radius: 999px !important;
  min-width: 38px;
  min-height: 38px;
  padding: 0 !important;
  font-size: 22px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.icon-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.14);
  transform: rotate(0deg) scale(1.02);
}

/* But keep project modal close readable if in white areas */
.dialog-head .icon-btn {
  color: rgba(255,255,255,.86);
}

/* Topbar new project button no duplicate plus when browser text has + */
#newProjectBtn::before {
  content: "";
  background: transparent;
  width: 0;
  height: 0;
  margin: 0;
}

/* Professional empty states */
.empty,
.photo-empty {
  background:
    linear-gradient(135deg, rgba(255,255,255,.80), rgba(248,250,252,.70));
  border: 1px dashed rgba(31,77,122,.22);
  color: var(--ink-500, #667085);
  font-weight: 650;
}

/* Mobile: file cards become clean stacked app tiles */
@media (max-width: 760px) {
  .stored-file-item,
  .field-doc-item,
  .crew-doc-item {
    grid-template-columns: 58px 1fr;
    gap: 11px;
  }

  .stored-file-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stored-file-actions .action-btn,
  .stored-file-actions .small,
  .stored-file-actions a,
  .stored-file-actions button {
    width: 100%;
  }

  .stored-file-actions .remove-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .action-btn {
    min-height: 44px;
  }

  .file-thumb {
    width: 52px;
    height: 52px;
  }

  .crew-photo-drop {
    padding: 13px;
  }
}


/* =========================================================
   v35 Field Document Card Layout Fix
   Fixes file names getting squeezed vertically inside narrow
   Project Wizard release cards.
   ========================================================= */

/* Release-card upload areas are narrower than the main file library,
   so document cards need a stacked layout there. */
.release-card .field-documents-upload .stored-file-item,
.release-card .field-documents-upload .field-doc-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "thumb main"
    "actions actions";
  align-items: center;
  gap: 12px;
  width: 100%;
  overflow: hidden;
}

.release-card .field-documents-upload .file-thumb {
  grid-area: thumb;
  width: 58px;
  height: 58px;
}

.release-card .field-documents-upload .stored-file-main {
  grid-area: main;
  min-width: 0;
  width: 100%;
}

.release-card .field-documents-upload .stored-file-main strong {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.25;
}

.release-card .field-documents-upload .stored-file-main p {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.release-card .field-documents-upload .upload-complete {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
}

.release-card .field-documents-upload .stored-file-actions {
  grid-area: actions;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.release-card .field-documents-upload .stored-file-actions .action-btn,
.release-card .field-documents-upload .stored-file-actions a,
.release-card .field-documents-upload .stored-file-actions button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding-left: 10px;
  padding-right: 10px;
}

.release-card .field-documents-upload .field-documents-head {
  align-items: flex-start;
}

.release-card .field-documents-upload .field-documents-head .badge {
  flex: 0 0 auto;
}

/* Prevent any narrow project-wizard file card from forcing vertical text. */
.release-card .stored-file-main,
.release-card .stored-file-main strong,
.release-card .stored-file-main p {
  min-width: 0;
}

/* If a card becomes very narrow, stack the action buttons. */
@media (max-width: 980px) {
  .release-card .field-documents-upload .stored-file-actions {
    grid-template-columns: 1fr;
  }
}

/* Keep field-user document cards roomy and professional. */
.field-documents-crew .stored-file-item {
  grid-template-columns: 58px minmax(0, 1fr) auto;
}

.field-documents-crew .stored-file-main strong {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .field-documents-crew .stored-file-item {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .field-documents-crew .stored-file-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
}


/* v36 Spanish UI polish */
body[data-lang="es"] .nav-btn,
body[data-lang="es"] button,
body[data-lang="es"] .action-btn,
body[data-lang="es"] label,
body[data-lang="es"] .badge {
  letter-spacing: -.018em;
}

body[data-lang="es"] .stored-file-actions .action-btn {
  white-space: nowrap;
}

body[data-lang="es"] .topbar h2 {
  letter-spacing: -.05em;
}


/* =========================================================
   v39 Measure Sketch Pad Safe UI
   ========================================================= */
.sketchpad-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  border: 1px solid rgba(194,204,214,.82);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(16,24,40,.07);
}

.sketchpad-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--navy-700, #1f4d7a), var(--gold-500, #c89958));
}

.sketchpad-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sketchpad-card-head h4 {
  margin: 0;
  color: var(--navy-950, #0b1726);
  font-size: 18px;
  letter-spacing: -.035em;
}

.sketchpad-card-head h4::before {
  content: "▦";
  margin-right: 8px;
  color: var(--navy-700, #1f4d7a);
}

.sketchpad-card-head p {
  margin: 6px 0 0;
  color: var(--ink-500, #667085);
  line-height: 1.4;
}

.sketchpad-empty {
  border: 1px dashed rgba(31,77,122,.24);
  background: rgba(255,255,255,.74);
  border-radius: 14px;
  padding: 14px;
  color: var(--ink-500, #667085);
  font-weight: 650;
  margin-bottom: 12px;
}

.sketchpad-preview-wrap {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.sketchpad-preview-wrap img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(194,204,214,.82);
  border-radius: 14px;
}

.sketchpad-meta {
  color: var(--ink-500, #667085);
  font-size: 12px;
  font-weight: 700;
}

.measure-sketch-dialog {
  width: min(96vw, 1320px);
  max-height: 94vh;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(0,0,0,.26);
}

.measure-sketch-shell {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f6f8fb;
}

.measure-sketch-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(194,204,214,.78);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
}

.sketch-tool {
  min-height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff, #f8fafc);
  border: 1px solid rgba(194,204,214,.88);
  color: var(--navy-900, #10233a);
  padding: 9px 12px;
  font-size: 13px;
}

.sketch-tool.active {
  color: #fff;
  border-color: rgba(31,77,122,.45);
  background: linear-gradient(135deg, var(--navy-800, #16365c), var(--navy-700, #1f4d7a));
  box-shadow: 0 8px 18px rgba(31,77,122,.22);
}

.sketch-toolbar-spacer {
  flex: 1;
}

.measure-sketch-help {
  background: #fff8e8;
  border: 1px solid rgba(200,153,88,.28);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--ink-700, #344054);
  font-size: 13px;
  line-height: 1.4;
}

.measure-sketch-canvas-wrap {
  width: 100%;
  height: min(68vh, 760px);
  overflow: auto;
  background: #dfe7f0;
  border: 1px solid rgba(194,204,214,.85);
  border-radius: 16px;
  padding: 12px;
}

#measureSketchCanvas {
  width: 1200px;
  max-width: none;
  height: 800px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16,24,40,.12);
  touch-action: none;
  cursor: crosshair;
}

.sketch-print-image img {
  max-width: 100%;
  max-height: 8.75in;
  object-fit: contain;
}

@media (max-width: 820px) {
  .sketchpad-card-head {
    display: grid;
  }

  .measure-sketch-dialog {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .measure-sketch-shell {
    padding: 10px;
  }

  .measure-sketch-toolbar {
    align-items: stretch;
  }

  .sketch-tool,
  .measure-sketch-toolbar .small {
    flex: 1 1 calc(50% - 8px);
  }

  .sketch-toolbar-spacer {
    display: none;
  }

  .measure-sketch-canvas-wrap {
    height: 62vh;
  }
}

@media print {
  .sketch-print-page {
    page-break-before: always;
    break-before: page;
  }
}


/* =========================================================
   v40 Visible Measure Sketch Pad UI
   ========================================================= */
.sketchpad-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  border: 1px solid rgba(194,204,214,.82);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(16,24,40,.07);
}

.sketchpad-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--navy-700, #1f4d7a), var(--gold-500, #c89958));
}

.sketchpad-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sketchpad-card-head h4 {
  margin: 0;
  color: var(--navy-950, #0b1726);
  font-size: 18px;
  letter-spacing: -.035em;
}

.sketchpad-card-head h4::before {
  content: "▦";
  margin-right: 8px;
  color: var(--navy-700, #1f4d7a);
}

.sketchpad-card-head p {
  margin: 6px 0 0;
  color: var(--ink-500, #667085);
  line-height: 1.4;
}

.sketchpad-empty {
  border: 1px dashed rgba(31,77,122,.24);
  background: rgba(255,255,255,.74);
  border-radius: 14px;
  padding: 14px;
  color: var(--ink-500, #667085);
  font-weight: 650;
  margin-bottom: 12px;
}

.sketchpad-preview-wrap {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.sketchpad-preview-wrap img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(194,204,214,.82);
  border-radius: 14px;
}

.sketchpad-meta {
  color: var(--ink-500, #667085);
  font-size: 12px;
  font-weight: 700;
}

.measure-sketch-dialog {
  width: min(96vw, 1320px);
  max-height: 94vh;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(0,0,0,.26);
}

.measure-sketch-shell {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f6f8fb;
}

.measure-sketch-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(194,204,214,.78);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
}

.sketch-tool {
  min-height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff, #f8fafc);
  border: 1px solid rgba(194,204,214,.88);
  color: var(--navy-900, #10233a);
  padding: 9px 12px;
  font-size: 13px;
}

.sketch-tool.active {
  color: #fff;
  border-color: rgba(31,77,122,.45);
  background: linear-gradient(135deg, var(--navy-800, #16365c), var(--navy-700, #1f4d7a));
  box-shadow: 0 8px 18px rgba(31,77,122,.22);
}

.sketch-toolbar-spacer {
  flex: 1;
}

.measure-sketch-help {
  background: #fff8e8;
  border: 1px solid rgba(200,153,88,.28);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--ink-700, #344054);
  font-size: 13px;
  line-height: 1.4;
}

.measure-sketch-canvas-wrap {
  width: 100%;
  height: min(68vh, 760px);
  overflow: auto;
  background: #dfe7f0;
  border: 1px solid rgba(194,204,214,.85);
  border-radius: 16px;
  padding: 12px;
}

#measureSketchCanvas {
  width: 1200px;
  max-width: none;
  height: 800px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16,24,40,.12);
  touch-action: none;
  cursor: crosshair;
}

.sketch-print-image img {
  max-width: 100%;
  max-height: 8.75in;
  object-fit: contain;
}

@media (max-width: 820px) {
  .sketchpad-card-head {
    display: grid;
  }

  .measure-sketch-dialog {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .measure-sketch-shell {
    padding: 10px;
  }

  .measure-sketch-toolbar {
    align-items: stretch;
  }

  .sketch-tool,
  .measure-sketch-toolbar .small {
    flex: 1 1 calc(50% - 8px);
  }

  .sketch-toolbar-spacer {
    display: none;
  }

  .measure-sketch-canvas-wrap {
    height: 62vh;
  }
}

@media print {
  .sketch-print-page {
    page-break-before: always;
    break-before: page;
  }
}

/* =========================================================
   v41 Measure Sketch Pad — pro toolbar, side panel, status bar
   ========================================================= */
.sketch-secondary-row {
  gap: 8px;
}

.sketch-zoom-value {
  min-width: 48px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--navy-900, #10233a);
}

.sketch-scale-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-500, #667085);
  margin: 0;
}

.sketch-scale-label select {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(194,204,214,.88);
  padding: 4px 8px;
  font-size: 13px;
  background: #fff;
  color: var(--navy-900, #10233a);
}

.sketch-status-bar {
  background: #fff;
  border: 1px solid rgba(194,204,214,.78);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-700, #344054);
  min-height: 36px;
  display: flex;
  align-items: center;
}

.sketch-status-bar.live {
  background: linear-gradient(135deg, var(--navy-800, #16365c), var(--navy-700, #1f4d7a));
  color: #fff;
  border-color: rgba(31,77,122,.45);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.measure-sketch-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 10px;
  align-items: start;
}

.sketch-side-panel {
  background: #fff;
  border: 1px solid rgba(194,204,214,.78);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 200px;
}

.sketch-side-panel h4 {
  margin: 0;
  font-size: 14px;
  letter-spacing: -.02em;
  color: var(--navy-950, #0b1726);
}

.sketch-panel-empty {
  margin: 0;
  color: var(--ink-500, #667085);
  font-size: 13px;
  line-height: 1.45;
}

.sketch-panel-rows,
.sketch-panel-stats {
  display: grid;
  gap: 6px;
}

.sketch-panel-rows > div,
.sketch-panel-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px dashed rgba(194,204,214,.6);
  padding-bottom: 6px;
  font-size: 13px;
}

.sketch-panel-rows > div span,
.sketch-panel-stats > div span {
  color: var(--ink-500, #667085);
  font-weight: 650;
}

.sketch-panel-rows > div strong,
.sketch-panel-stats > div strong {
  color: var(--navy-950, #0b1726);
  text-align: right;
  overflow-wrap: anywhere;
}

.sketch-panel-actions {
  display: grid;
  gap: 8px;
}

.sketch-dxf-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-500, #667085);
}

@media (max-width: 980px) {
  .measure-sketch-body {
    grid-template-columns: 1fr;
  }

  .sketch-side-panel {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .sketch-secondary-row .small,
  .sketch-secondary-row .sketch-scale-label {
    flex: 1 1 calc(50% - 8px);
  }

  .sketch-scale-label select {
    flex: 1;
  }
}

/* =========================================================
   v42 Cloud Integration — sync pill, banners, migration card
   ========================================================= */
.cloud-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(194,204,214,.85);
  background: #fff;
  color: var(--ink-500, #667085);
  white-space: nowrap;
}

.cloud-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.cloud-status-saved,
.cloud-status-idle {
  color: #1a7f4b;
  border-color: rgba(26,127,75,.35);
  background: #eefaf3;
}

.cloud-status-saving {
  color: var(--navy-700, #1f4d7a);
  border-color: rgba(31,77,122,.35);
  background: #eef4fb;
}

.cloud-status-offline {
  color: #92600f;
  border-color: rgba(146,96,15,.35);
  background: #fff7e6;
}

.cloud-status-error {
  color: #b3261e;
  border-color: rgba(179,38,30,.4);
  background: #fdefee;
}

.cloud-banner {
  border-left: 4px solid var(--gold-500, #c89958);
}

.cloud-banner p {
  margin: 6px 0 0;
  color: var(--ink-500, #667085);
  line-height: 1.5;
}

.cloud-migrate-card {
  border-left: 4px solid var(--navy-700, #1f4d7a);
}

.cloud-migrate-status {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-700, #344054);
  overflow-wrap: anywhere;
}

.cloud-migrate-errors {
  color: #b3261e;
}

@media (max-width: 820px) {
  .cloud-status {
    display: none;
  }
}

/* =========================================================
   v43 Mobile / touch refinements (Android & tablets)
   Applies only on coarse-pointer (touch) devices; desktop
   mouse layouts are unchanged.
   ========================================================= */
@media (pointer: coarse) {
  button,
  .nav-btn,
  .sketch-tool,
  .action-btn,
  .step-btn,
  .icon-btn {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* prevents Android/iOS focus auto-zoom */
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-height: 0;
    width: 22px;
    height: 22px;
  }

  .inline-actions {
    gap: 10px;
  }

  .checkbox-group label {
    padding: 6px 0;
  }

  /* Larger scroll targets in the wizard rail */
  .step-btn {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* =========================================================
   v44 Sketch measurement input sheet (replaces window.prompt)
   Sits in the upper third of the sketch dialog so the Android
   soft keyboard (bottom half) never covers it.
   ========================================================= */
.measure-sketch-dialog {
  position: relative;
}

.sketch-sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(11, 23, 38, .48);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 9vh 16px 16px;
  border-radius: 24px;
}

.sketch-sheet-backdrop[hidden] {
  display: none;
}

.sketch-input-sheet {
  width: min(100%, 430px);
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  display: grid;
  gap: 10px;
}

.sketch-input-sheet h4 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--navy-950, #0b1726);
}

.sketch-sheet-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-500, #667085);
}

.sketch-sheet-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sketch-sheet-field input {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  border-radius: 12px;
  border: 2px solid rgba(31, 77, 122, .45);
  color: var(--navy-950, #0b1726);
}

.sketch-sheet-field input:focus {
  outline: none;
  border-color: var(--navy-700, #1f4d7a);
  box-shadow: 0 0 0 3px rgba(31, 77, 122, .18);
}

.sketch-sheet-unit {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink-500, #667085);
  white-space: nowrap;
}

.sketch-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sketch-sheet-chips:empty {
  display: none;
}

.sketch-chip {
  min-height: 42px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(194, 204, 214, .9);
  background: #f6f8fb;
  color: var(--navy-900, #10233a);
  font-weight: 750;
  font-size: 14px;
}

.sketch-chip:active {
  background: var(--navy-700, #1f4d7a);
  color: #fff;
}

.sketch-sheet-error {
  color: #b3261e;
  font-size: 13px;
  font-weight: 700;
  min-height: 18px;
}

.sketch-sheet-error:empty {
  display: none;
}

.sketch-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sketch-sheet-actions button {
  min-height: 48px;
  font-size: 15px;
}

@media (max-width: 820px) {
  .sketch-sheet-backdrop {
    padding-top: 5vh;
    border-radius: 0;
  }
}

/* =========================================================
   v45 Sketch Pad full-screen workspace layout
   Fixes: desktop dialog clipped at the global 1240px dialog cap
   (Save button / side panel cut off), and tablet fixed-height
   stack overflowing the viewport with no way to scroll.
   The sketch pad now behaves like a CAD workspace: toolbars are
   fixed rows, the drawing area takes all remaining space, and
   the graph paper auto-fits the screen on open.
   ========================================================= */
#measureSketchDialog {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
}

.measure-sketch-dialog {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.measure-sketch-dialog .dialog-head {
  flex: none;
}

.measure-sketch-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.measure-sketch-toolbar,
.sketch-status-bar,
.measure-sketch-help {
  flex: none;
}

.measure-sketch-body {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.measure-sketch-canvas-wrap {
  height: 100%;
  min-height: 0;
}

.sketch-side-panel {
  min-height: 0;
  max-height: 100%;
  overflow: auto;
}

.sketch-sheet-backdrop {
  border-radius: 0;
}

/* On short screens the status bar already shows per-tool hints;
   reclaim the help strip's height for the drawing area. */
@media (max-height: 800px) {
  .measure-sketch-help {
    display: none;
  }
}

/* Stacked (narrow) layout: drawing area keeps priority, panel below */
@media (max-width: 980px) {
  .measure-sketch-body {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .sketch-side-panel {
    max-height: 32vh;
  }
}

/* v45b — narrow screens: single-row scrollable toolbars, and the side
   panel only appears when an object is selected (drawing area first). */
@media (max-width: 980px) {
  .measure-sketch-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .measure-sketch-toolbar .sketch-tool,
  .measure-sketch-toolbar .small,
  .measure-sketch-toolbar .sketch-scale-label,
  .measure-sketch-toolbar .sketch-zoom-value {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .sketch-toolbar-spacer {
    display: none;
  }

  .sketch-side-panel:not(.has-selection):not(.has-takeoff) {
    display: none;
  }

  .measure-sketch-body {
    grid-template-columns: 1fr;
  }
}

/* v45c — keep Save Sketch always visible on narrow scrollable toolbars */
@media (max-width: 980px) {
  #saveSketchBtn {
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -10px 0 14px rgba(255, 255, 255, .95);
  }
}

/* v45d — the wrapped help strip costs too much height on narrow screens;
   the status bar already shows per-tool guidance there. */
@media (max-width: 980px) {
  .measure-sketch-help {
    display: none;
  }
}

/* v45e — center the graph paper in the drawing area when it's smaller
   than the available space (margin:auto stays scroll-safe when zoomed in). */
#measureSketchCanvas {
  display: block;
  margin: auto;
}

/* =========================================================
   v46 Design-system polish layer
   Purely visual: consistent tokens, rebuilt icon buttons,
   uniform interactive states, toasts, empty states.
   ========================================================= */
:root {
  --ph-radius-sm: 10px;
  --ph-radius-md: 14px;
  --ph-radius-lg: 18px;
  --ph-shadow-1: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .05);
  --ph-shadow-2: 0 8px 22px rgba(16, 24, 40, .09);
  --ph-shadow-3: 0 24px 60px rgba(11, 23, 38, .28);
  --ph-focus-ring: 0 0 0 3px rgba(31, 77, 122, .28);
  --ph-transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- uniform interactive states ---------- */
button,
.nav-btn,
.sketch-tool,
.action-btn,
.step-btn,
select,
input,
textarea {
  transition: background-color var(--ph-transition), border-color var(--ph-transition),
              box-shadow var(--ph-transition), color var(--ph-transition),
              transform 90ms ease;
}

button:focus-visible,
.nav-btn:focus-visible,
a:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--ph-focus-ring);
}

input:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--navy-700, #1f4d7a);
  box-shadow: var(--ph-focus-ring);
}

button:not(:disabled):active,
.sketch-tool:not(:disabled):active,
.action-btn:active {
  transform: scale(.975);
}

button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---------- proper icon close buttons ---------- */
.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(194, 204, 214, .55);
  background: rgba(255, 255, 255, .08);
  color: currentColor;
  font-size: 0;            /* hide the raw "×" glyph; bars below draw the icon */
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}

.icon-btn::before,
.icon-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.icon-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.icon-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }

.dialog-head .icon-btn {
  color: var(--ink-500, #667085);
  border-color: rgba(194, 204, 214, .8);
  background: #fff;
}

.dialog-head .icon-btn:hover {
  color: #b3261e;
  border-color: rgba(179, 38, 30, .4);
  background: #fdf1f0;
}

/* dark dialog headers (sketch pad) */
.measure-sketch-dialog .dialog-head .icon-btn {
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .25);
}

.measure-sketch-dialog .dialog-head .icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .22);
}

.icon-btn:focus-visible {
  box-shadow: var(--ph-focus-ring);
}

/* ---------- toasts (sync errors / notices) ---------- */
#appToastHost {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 4000;
  display: grid;
  gap: 10px;
  width: min(94vw, 460px);
  pointer-events: none;
}

.app-toast {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 250ms ease, transform 250ms ease;
  background: var(--navy-900, #10233a);
  color: #fff;
  border-radius: var(--ph-radius-md);
  padding: 13px 18px;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.45;
  box-shadow: var(--ph-shadow-3);
  border-left: 4px solid var(--gold-500, #c89958);
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.app-toast-error {
  border-left-color: #e2574c;
}

.app-toast-success {
  border-left-color: #2e9e6b;
}

/* ---------- consistent empty states ---------- */
.empty,
.sketchpad-empty,
.photo-empty {
  border: 1px dashed rgba(31, 77, 122, .25);
  background: rgba(246, 248, 251, .8);
  border-radius: var(--ph-radius-md);
  padding: 18px 16px;
  color: var(--ink-500, #667085);
  font-weight: 600;
  text-align: center;
}

/* ---------- card / dialog shadow consistency ---------- */
.card,
.crew-summary-card,
.sketchpad-card {
  box-shadow: var(--ph-shadow-1);
}

dialog {
  box-shadow: var(--ph-shadow-3);
}

/* ---------- subtle scrollbars ---------- */
.measure-sketch-canvas-wrap::-webkit-scrollbar,
.wizard-rail::-webkit-scrollbar,
.wizard-main::-webkit-scrollbar,
.sketch-side-panel::-webkit-scrollbar,
.measure-sketch-toolbar::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.measure-sketch-canvas-wrap::-webkit-scrollbar-thumb,
.wizard-rail::-webkit-scrollbar-thumb,
.wizard-main::-webkit-scrollbar-thumb,
.sketch-side-panel::-webkit-scrollbar-thumb,
.measure-sketch-toolbar::-webkit-scrollbar-thumb {
  background: rgba(31, 77, 122, .28);
  border-radius: 999px;
}

.measure-sketch-canvas-wrap::-webkit-scrollbar-track,
.wizard-rail::-webkit-scrollbar-track,
.wizard-main::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* v47 — "measure from which corner" toggle in the sketch input sheet */
.sketch-sheet-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sketch-sheet-sides button {
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid rgba(194, 204, 214, .9);
  background: #f6f8fb;
  color: var(--ink-700, #344054);
  font-weight: 750;
  font-size: 13.5px;
}

.sketch-sheet-sides button.active {
  background: linear-gradient(135deg, var(--navy-800, #16365c), var(--navy-700, #1f4d7a));
  border-color: rgba(31, 77, 122, .5);
  color: #fff;
}

/* v48 — sync indicator mirrored into dialog headers (dark background) */
.dialog-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dialog-sync-status {
  font-size: 11px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .92);
}

.dialog-sync-status.cloud-status-saved,
.dialog-sync-status.cloud-status-idle {
  color: #d6f5e4;
  border-color: rgba(120, 220, 170, .45);
  background: rgba(46, 158, 107, .28);
}

.dialog-sync-status.cloud-status-saving {
  color: #dcecff;
  border-color: rgba(150, 190, 240, .5);
  background: rgba(80, 130, 200, .3);
}

.dialog-sync-status.cloud-status-offline {
  color: #ffe6bf;
  border-color: rgba(230, 180, 110, .5);
  background: rgba(180, 120, 40, .3);
}

.dialog-sync-status.cloud-status-error {
  color: #ffd9d5;
  border-color: rgba(240, 150, 140, .55);
  background: rgba(200, 70, 60, .34);
}

@media (max-width: 620px) {
  .dialog-sync-status { display: none; }
}

/* =========================================================
   v49 — DESIGN SYSTEM (authoritative)

   Modern graphite shell + navy brand accent.

   This layer is the single source of truth for the app's
   appearance. It is deliberately last in the file so it wins
   the cascade over the accumulated v3–v48 patch layers.

   It changes appearance only — no class names, IDs, DOM
   structure, or behaviour hooks are altered.

   Structure:
     1. Tokens              6. Inputs
     2. Base / typography   7. Badges + status
     3. App shell           8. Data surfaces
     4. Surfaces / cards    9. Dialogs + wizard
     5. Buttons            10. Login  11. Sketch pad  12. Responsive
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKENS
   Legacy token names are remapped here so the ~5,000 lines of
   earlier CSS inherit the new palette without being rewritten.
   --------------------------------------------------------- */
:root {
  /* Graphite — the application shell (sidebar, dark headers) */
  --gr-950: #0b0c0f;
  --gr-900: #121419;
  --gr-850: #16181d;
  --gr-800: #1c1f26;
  --gr-750: #23272f;
  --gr-700: #2a2e37;
  --gr-600: #3d424d;
  --gr-500: #565c69;

  /* Neutrals — content surfaces */
  --n-0:   #ffffff;
  --n-25:  #fcfcfd;
  --n-50:  #f7f8f9;
  --n-100: #f1f2f4;
  --n-150: #eaecef;
  --n-200: #e4e6ea;
  --n-300: #d2d6dc;
  --n-400: #9ba1ac;
  --n-500: #6b717c;
  --n-600: #4e545e;
  --n-700: #383d45;
  --n-900: #16181d;

  /* Navy — brand accent, used for emphasis only */
  --ac-50:  #eef4fa;
  --ac-100: #dbe8f4;
  --ac-200: #b9d0e6;
  --ac-300: #8fb2d3;
  --ac-400: #4c82b5;
  --ac-500: #2e5f8f;
  --ac-600: #27527c;
  --ac-700: #1f4265;
  --ac-800: #183a56;
  --ac-900: #14293e;

  /* Semantic */
  --ok-fg:   #197a4b;
  --ok-bg:   #e9f6ef;
  --ok-bd:   #bce3ce;
  --warn-fg: #9a6414;
  --warn-bg: #fdf3e3;
  --warn-bd: #f0d8ab;
  --err-fg:  #b4271f;
  --err-bg:  #fdedec;
  --err-bd:  #f3c4c0;
  --info-fg: var(--ac-600);
  --info-bg: var(--ac-50);
  --info-bd: var(--ac-200);

  /* Radii — 10px cards per the chosen direction */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-pill: 999px;

  /* Elevation — hairline borders do the work, shadows stay quiet */
  --sh-1: 0 1px 2px rgba(16, 24, 40, .04);
  --sh-2: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --sh-3: 0 4px 12px rgba(16, 24, 40, .07);
  --sh-4: 0 12px 32px rgba(16, 24, 40, .10);
  --sh-pop: 0 24px 64px rgba(11, 12, 15, .24);

  /* Type */
  --f-sans: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system,
            BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;

  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-22: 22px;
  --t-26: 26px;
  --t-32: 32px;

  /* Spacing (4pt) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* Motion */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur: 160ms;

  --focus: 0 0 0 3px rgba(46, 95, 143, .28);

  /* ---- Legacy remaps: everything above v49 inherits these ---- */
  --navy:   var(--ac-500);
  --blue:   var(--ac-500);
  --blue-2: var(--ac-50);
  --line:   var(--n-200);
  --text:   var(--n-900);
  --muted:  var(--n-500);
  --bg:     var(--n-50);
  --card:   var(--n-0);
  --danger: var(--err-fg);
  --warn:   var(--warn-fg);
  --good:   var(--ok-fg);
  --shadow: var(--sh-2);

  /* v20 layer tokens — gold is retired, folded into the navy accent */
  --navy-950: var(--gr-950);
  --navy-900: var(--gr-900);
  --navy-800: var(--ac-700);
  --navy-700: var(--ac-600);
  --stone-50:  var(--n-50);
  --stone-100: var(--n-100);
  --stone-200: var(--n-200);
  --ink-900: var(--n-900);
  --ink-700: var(--n-600);
  --ink-500: var(--n-500);
  --gold-600: var(--ac-600);
  --gold-500: var(--ac-500);
  --green-600: var(--ok-fg);
  --red-600: var(--err-fg);
  --shadow-soft: var(--sh-3);
  --shadow-card: var(--sh-2);
  --radius-xl: var(--r-xl);
  --radius-lg: var(--r-lg);
  --radius-md: var(--r-md);
  --focus-ring: var(--focus);

  font-family: var(--f-sans);
}

/* ---------------------------------------------------------
   2. BASE / TYPOGRAPHY
   The v20 layer painted gradient meshes and a grid overlay
   across html/body. A professional surface is flat — those
   are removed here rather than layered over.
   --------------------------------------------------------- */
html {
  background: var(--n-50);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--n-50);
  color: var(--n-900);
  font-family: var(--f-sans);
  font-size: var(--t-14);
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

/* Kill the decorative grid overlay from the v20 layer */
body::before { content: none !important; display: none !important; }

h1, h2, h3, h4, h5 {
  font-weight: 640;
  letter-spacing: -0.021em;
  color: var(--n-900);
  margin: 0;
}
h1 { font-size: var(--t-26); line-height: 1.2; }
h2 { font-size: var(--t-22); line-height: 1.25; }
h3 { font-size: var(--t-16); line-height: 1.35; }
h4 { font-size: var(--t-14); line-height: 1.4; }

p { margin: 0; }

a {
  color: var(--ac-600);
  text-decoration: none;
  font-weight: 520;
  border-radius: var(--r-xs);
}
a:hover { color: var(--ac-700); text-decoration: underline; text-underline-offset: 2px; }

strong { font-weight: 620; }
code, pre, .codebox { font-family: var(--f-mono); }

hr { border: 0; border-top: 1px solid var(--n-200); margin: var(--s-5) 0; }

::selection { background: var(--ac-100); color: var(--ac-900); }

/* One consistent focus treatment everywhere */
:where(button, a, input, select, textarea, [tabindex], summary):focus-visible {
  outline: 2px solid var(--ac-500);
  outline-offset: 2px;
  box-shadow: var(--focus);
}
:where(button, a, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------
   3. APP SHELL — graphite sidebar, quiet topbar
   --------------------------------------------------------- */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  background: var(--n-50);
}

.sidebar {
  background: var(--gr-850) !important;
  color: var(--n-0);
  padding: var(--s-5) var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  border-right: 1px solid var(--gr-800);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-5);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: var(--n-0);
  border-radius: var(--r-md);
  padding: 5px;
  flex: none;
}
.brand h1 {
  font-size: var(--t-15);
  font-weight: 620;
  color: var(--n-0);
  letter-spacing: -0.017em;
  line-height: 1.2;
}
.brand p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, .48);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0;
}

.nav { display: grid; gap: 2px; }
.nav-btn {
  text-align: left;
  border: 0;
  padding: 9px var(--s-3);
  border-radius: var(--r-md);
  background: transparent;
  color: rgba(255, 255, 255, .66);
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: -0.008em;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
  width: 100%;
  box-shadow: none;
}
.nav-btn:hover {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
}
.nav-btn.active {
  background: rgba(255, 255, 255, .09);
  color: var(--n-0);
  font-weight: 570;
}
/* Accent marker earns the navy — the only brand colour in the rail */
.nav-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 17px;
  border-radius: 0 3px 3px 0;
  background: var(--ac-400);
}

.sidebar-note {
  margin-top: auto;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
  padding: var(--s-3);
  border-radius: var(--r-lg);
  font-size: var(--t-11);
  display: grid;
  gap: var(--s-1);
  line-height: 1.45;
}
.sidebar-note strong { color: rgba(255, 255, 255, .9); font-weight: 600; font-size: var(--t-12); }
.sidebar-note span { color: rgba(255, 255, 255, .46); }

.user-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
}
.user-panel > div { display: grid; gap: 1px; min-width: 0; }
.user-panel strong {
  color: var(--n-0);
  font-size: var(--t-13);
  font-weight: 570;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-panel span { color: rgba(255, 255, 255, .46); font-size: var(--t-11); }
.user-panel button {
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--t-12);
  padding: 6px 10px;
  flex: none;
}
.user-panel button:hover { background: rgba(255, 255, 255, .15); color: var(--n-0); }

/* ---- Topbar ---- */
.main { min-width: 0; background: var(--n-50); }

.topbar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--n-200);
  padding: var(--s-4) var(--s-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: none;
}
.topbar h2 {
  font-size: var(--t-22);
  font-weight: 640;
  letter-spacing: -0.024em;
  color: var(--n-900);
}
.topbar p {
  margin: 3px 0 0;
  color: var(--n-500);
  font-size: var(--t-13);
  font-weight: 450;
}
.top-actions { display: flex; gap: var(--s-2); align-items: center; flex: none; }

.content { padding: var(--s-6) var(--s-8) var(--s-16); }

/* ---------------------------------------------------------
   4. SURFACES
   --------------------------------------------------------- */
.card,
.row-card,
.workflow-card,
.form-card,
.project-card,
.stat {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.card { padding: var(--s-5); }
.card h3 {
  margin: 0 0 var(--s-4);
  font-size: var(--t-15);
  font-weight: 600;
  letter-spacing: -0.014em;
}

/* Stat tiles: the number is the hero, the label recedes */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.stat { padding: var(--s-4) var(--s-5); }
.stat .num {
  font-size: var(--t-32);
  font-weight: 650;
  color: var(--n-900);
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat .label {
  color: var(--n-500);
  margin-top: var(--s-2);
  font-size: var(--t-12);
  font-weight: 520;
  letter-spacing: -0.003em;
}

.row-card { padding: var(--s-4); }
.row-title { margin-bottom: var(--s-3); }
.row-title strong { font-size: var(--t-14); font-weight: 600; }

.workflow-card { padding: var(--s-5); }
.workflow-card h3 { margin: 0 0 var(--s-1); font-size: var(--t-15); }
.workflow-card p { color: var(--n-500); margin: 0 0 var(--s-4); font-size: var(--t-13); }

.project-card {
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project-card:hover {
  border-color: var(--n-300);
  box-shadow: var(--sh-3);
}
.project-main h3 { margin: 0 0 var(--s-1); font-size: var(--t-15); }
.project-main p { color: var(--n-500); font-size: var(--t-13); }

.toolbar { margin-bottom: var(--s-5); }
.filters { gap: var(--s-2); }

/* Empty states — quiet, not dashed-box loud */
.empty {
  text-align: center;
  padding: var(--s-12) var(--s-6);
  color: var(--n-500);
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  font-size: var(--t-13);
  box-shadow: var(--sh-1);
}

/* Phase / progress bars */
.phase-bar {
  height: 6px;
  background: var(--n-150);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.phase-fill {
  height: 100%;
  background: var(--ac-500);
  border-radius: var(--r-pill);
  transition: width 400ms var(--ease);
}

/* ---------------------------------------------------------
   5. BUTTONS
   One scale, one geometry. Navy is reserved for the single
   primary action on a screen.
   --------------------------------------------------------- */
button,
.button {
  font-family: var(--f-sans);
  font-size: var(--t-13);
  font-weight: 550;
  letter-spacing: -0.008em;
  border: 1px solid var(--n-300);
  border-radius: var(--r-md);
  padding: 8px 13px;
  background: var(--n-0);
  color: var(--n-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sh-1);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform 90ms var(--ease);
}
button:hover,
.button:hover {
  background: var(--n-50);
  border-color: var(--n-400);
  color: var(--n-900);
  text-decoration: none;
}
button:active,
.button:active { transform: translateY(0.5px); box-shadow: none; }

button:disabled,
.button:disabled,
button[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

button.primary,
.button.primary {
  background: var(--ac-500);
  color: var(--n-0);
  border-color: var(--ac-500);
  font-weight: 570;
  box-shadow: var(--sh-2);
}
button.primary:hover,
.button.primary:hover {
  background: var(--ac-600);
  border-color: var(--ac-600);
  color: var(--n-0);
}

button.secondary,
.button.secondary {
  background: var(--n-0);
  color: var(--n-700);
  border-color: var(--n-300);
}
button.secondary:hover,
.button.secondary:hover { background: var(--n-50); border-color: var(--n-400); color: var(--n-900); }

button.danger,
.button.danger {
  background: var(--n-0);
  color: var(--err-fg);
  border-color: var(--err-bd);
}
button.danger:hover,
.button.danger:hover { background: var(--err-bg); border-color: var(--err-fg); color: var(--err-fg); }

button.small,
.button.small { padding: 6px 10px; font-size: var(--t-12); }

.icon-btn {
  border: 0;
  background: transparent;
  color: var(--n-500);
  font-size: var(--t-18);
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  box-shadow: none;
  flex: none;
}
.icon-btn:hover { background: var(--n-100); color: var(--n-900); border: 0; }

.inline-actions { margin: var(--s-2) 0 var(--s-3); gap: var(--s-2); }

/* ---------------------------------------------------------
   6. INPUTS
   --------------------------------------------------------- */
input, select, textarea {
  width: 100%;
  font-family: var(--f-sans);
  font-size: var(--t-13);
  color: var(--n-900);
  border: 1px solid var(--n-300);
  border-radius: var(--r-md);
  padding: 8px 11px;
  background: var(--n-0);
  margin-top: var(--s-1);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
input:hover, select:hover, textarea:hover { border-color: var(--n-400); }
input:focus, select:focus, textarea:focus {
  border-color: var(--ac-500);
  box-shadow: var(--focus);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--n-400); }

input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ac-500);
  box-shadow: none;
  appearance: auto;
  -webkit-appearance: auto;
  flex: none;
}

/* Native select needs its chevron back after appearance:none */
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b717c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 32px;
}

label {
  font-size: var(--t-12);
  font-weight: 570;
  color: var(--n-600);
  letter-spacing: -0.003em;
}

textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

.search { min-width: 240px; }

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-2);
  border: 1px solid var(--n-200);
  background: var(--n-0);
  padding: var(--s-3);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 450;
  font-size: var(--t-13);
  color: var(--n-700);
  padding: 3px 0;
  cursor: pointer;
}

.acknowledgement {
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  color: var(--warn-fg);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-4) 0;
  font-size: var(--t-13);
  line-height: 1.5;
}

/* ---------------------------------------------------------
   7. BADGES + STATUS
   --------------------------------------------------------- */
:root {
  /* v46 layer tokens folded into the v49 system */
  --ph-radius-sm: var(--r-md);
  --ph-radius-md: var(--r-lg);
  --ph-radius-lg: var(--r-xl);
  --ph-shadow-1: var(--sh-1);
  --ph-shadow-2: var(--sh-3);
  --ph-shadow-3: var(--sh-pop);
  --ph-focus-ring: var(--focus);
  --ph-transition: var(--dur) var(--ease);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--r-sm);
  padding: 3px 7px;
  font-size: var(--t-11);
  font-weight: 570;
  letter-spacing: 0;
  line-height: 1.45;
  background: var(--n-100);
  color: var(--n-600);
  border: 1px solid var(--n-200);
  white-space: nowrap;
}
.badge.overdue  { background: var(--err-bg);  color: var(--err-fg);  border-color: var(--err-bd); }
.badge.today    { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.badge.priority { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.badge.done     { background: var(--ok-bg);   color: var(--ok-fg);   border-color: var(--ok-bd); }
.badge.client   { background: var(--info-bg); color: var(--ac-700);  border-color: var(--info-bd); }
.badge.internal { background: var(--n-100);   color: var(--n-600);   border-color: var(--n-200); }

/* Cloud sync pill — a dot plus a word, not a loud chip */
.cloud-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-12);
  font-weight: 540;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--n-200);
  background: var(--n-0);
  color: var(--n-600);
  box-shadow: none;
}
.cloud-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.cloud-status-saved,
.cloud-status-idle    { color: var(--ok-fg);   border-color: var(--ok-bd);   background: var(--ok-bg); }
.cloud-status-saving  { color: var(--ac-600);  border-color: var(--info-bd); background: var(--info-bg); }
.cloud-status-offline { color: var(--n-600);   border-color: var(--n-300);   background: var(--n-100); }
.cloud-status-error   { color: var(--err-fg);  border-color: var(--err-bd);  background: var(--err-bg); }
.cloud-status-saving::before { animation: v49pulse 1.1s var(--ease) infinite; }
@keyframes v49pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------------------------------------------------------
   8. DATA SURFACES
   --------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  font-size: var(--t-13);
}
.table th {
  background: var(--n-50);
  color: var(--n-600);
  font-size: var(--t-11);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .045em;
  text-align: left;
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--n-200);
  white-space: nowrap;
}
.table td {
  padding: 11px var(--s-4);
  border-bottom: 1px solid var(--n-150);
  color: var(--n-700);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--n-25); }

.lineitems { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: var(--s-2); font-size: var(--t-13); }
.lineitems th {
  text-align: left;
  font-size: var(--t-11);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--n-500);
  padding: 6px 8px;
  border-bottom: 1px solid var(--n-200);
}
.lineitems td { padding: 5px 8px; border-bottom: 1px solid var(--n-150); }

/* ---------------------------------------------------------
   9. DIALOGS + PROJECT WIZARD
   --------------------------------------------------------- */
dialog {
  border: 0;
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-pop);
  padding: 0;
  color: var(--n-900);
  background: var(--n-0);
}
dialog::backdrop {
  background: rgba(11, 12, 15, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.dialog-head {
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: 1px solid var(--n-200);
  background: var(--n-0);
}
.dialog-head h2 { font-size: var(--t-16); font-weight: 620; letter-spacing: -0.018em; }
.dialog-head p  { color: var(--n-500); font-size: var(--t-12); margin: 2px 0 0; }
.dialog-head-right { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.dialog-actions {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--n-200);
  background: var(--n-25);
  position: sticky;
  bottom: 0;
  z-index: 5;
}

/* ---- Wizard ---- */
.project-layout { grid-template-columns: 268px minmax(0, 1fr); }

.wizard-rail {
  border-right: 1px solid var(--n-200);
  background: var(--n-25);
  padding: var(--s-3);
  overflow: auto;
}

/* Step list reads as a checklist with clear state, not stacked buttons */
.step-btn {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 3px;
  margin-bottom: 2px;
  border-radius: var(--r-md);
  padding: 9px var(--s-3);
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--n-600);
}
.step-btn:hover { background: var(--n-100); border-color: transparent; color: var(--n-900); }
.step-btn.active {
  background: var(--n-0);
  border-color: var(--n-200);
  color: var(--n-900);
  font-weight: 570;
  box-shadow: var(--sh-1);
}
.step-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--r-xs);
  padding: 2px 5px;
  background: var(--n-100);
  color: var(--n-500);
  width: fit-content;
  border: 0;
}
.step-btn.active .step-status { background: var(--info-bg); color: var(--ac-600); }

.wizard-main { padding: var(--s-5) var(--s-6); overflow: auto; background: var(--n-0); }

.form-heading { margin-bottom: var(--s-5); }
.form-heading h3 { font-size: var(--t-18); font-weight: 630; letter-spacing: -0.02em; }
.form-heading p { color: var(--n-500); font-size: var(--t-13); margin-top: 3px; }

.form-body {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-1);
}
.form-section-title {
  margin: 0 0 var(--s-4);
  color: var(--n-900);
  font-size: var(--t-14);
  font-weight: 620;
  letter-spacing: -0.012em;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--n-150);
}

.form-grid { gap: var(--s-4); }

.signature-box {
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  background: var(--n-25);
}
.signature-pad {
  border: 1px dashed var(--n-300);
  border-radius: var(--r-md);
  background: var(--n-0);
}

/* ---------------------------------------------------------
   10. LOGIN — split screen
   --------------------------------------------------------- */
.login-screen {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--n-0) !important;
  z-index: 100;
  overflow: auto;
}
.login-screen::after { content: none !important; display: none !important; }

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-10) var(--s-8);
  background: var(--n-0);
  min-height: 100vh;
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(100%, 384px);
  background: var(--n-0) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  border: 0;
  padding: 0;
}
.login-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--n-0);
  border: 1px solid var(--n-200);
  padding: 5px;
}
.login-brand h1 {
  font-size: var(--t-22);
  font-weight: 640;
  letter-spacing: -0.028em;
  color: var(--n-900);
}
.login-brand p {
  color: var(--n-500);
  font-weight: 480;
  font-size: var(--t-13);
  margin-top: 2px;
}

.login-card label { display: grid; gap: 0; }

.login-note {
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  padding: 10px var(--s-3);
  font-size: var(--t-12);
  color: var(--n-500);
  line-height: 1.5;
}
.login-note strong { color: var(--n-700); font-weight: 600; font-family: var(--f-mono); font-size: var(--t-11); }

.login-card button.primary { width: 100%; padding: 10px var(--s-4); font-size: var(--t-14); margin-top: var(--s-1); }

.login-error {
  color: var(--err-fg);
  background: var(--err-bg);
  border: 1px solid var(--err-bd);
  border-radius: var(--r-md);
  padding: 9px var(--s-3);
  font-size: var(--t-13);
  font-weight: 500;
}
.login-error:empty { display: none; }

/* Media panel — generated brand imagery under a graphite scrim */
.login-media {
  position: relative;
  background: var(--gr-900);
  overflow: hidden;
  min-height: 100vh;
}
.login-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.login-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 15, .30) 0%, rgba(11, 12, 15, .58) 55%, rgba(11, 12, 15, .86) 100%);
}
.login-media-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--s-10) var(--s-10) var(--s-12);
  color: var(--n-0);
  display: grid;
  gap: var(--s-3);
}
.login-media-copy blockquote {
  margin: 0;
  font-size: var(--t-26);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.028em;
  max-width: 15em;
}
.login-media-copy span {
  font-size: var(--t-13);
  color: rgba(255, 255, 255, .62);
  font-weight: 480;
  max-width: 34em;
  line-height: 1.55;
}
.login-media-mark {
  position: absolute;
  top: var(--s-8);
  left: var(--s-10);
  z-index: 2;
  font-size: var(--t-12);
  font-weight: 580;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}

/* ---------------------------------------------------------
   11. SKETCH PAD — CAD-style workspace
   --------------------------------------------------------- */
.measure-sketch-dialog .dialog-head {
  background: var(--gr-850);
  border-bottom: 1px solid var(--gr-700);
}
.measure-sketch-dialog .dialog-head h2 { color: var(--n-0); font-size: var(--t-15); }
.measure-sketch-dialog .dialog-head p  { color: rgba(255, 255, 255, .5); }
.measure-sketch-dialog .dialog-head .icon-btn { color: rgba(255, 255, 255, .66); }
.measure-sketch-dialog .dialog-head .icon-btn:hover { background: rgba(255, 255, 255, .11); color: var(--n-0); }

.sketch-tool {
  border: 1px solid var(--n-300);
  background: var(--n-0);
  color: var(--n-700);
  border-radius: var(--r-md);
  font-size: var(--t-12);
  font-weight: 540;
  padding: 7px 11px;
  box-shadow: var(--sh-1);
}
.sketch-tool:hover { background: var(--n-50); border-color: var(--n-400); color: var(--n-900); }
.sketch-tool.active {
  background: var(--ac-500);
  border-color: var(--ac-500);
  color: var(--n-0);
  box-shadow: var(--sh-2);
}

.measure-sketch-canvas-wrap {
  background: var(--n-100);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
}

.sketch-side-panel {
  background: var(--n-25);
  border-left: 1px solid var(--n-200);
}
.sketch-side-panel h4 {
  font-size: var(--t-11);
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--n-500);
}

.sketch-status-bar {
  background: var(--gr-850);
  color: rgba(255, 255, 255, .74);
  border-top: 1px solid var(--gr-700);
  font-size: var(--t-12);
  font-family: var(--f-mono);
  letter-spacing: -0.01em;
}
.sketch-status-bar.live { color: var(--ac-300); }

.sketch-chip {
  background: var(--n-100);
  border: 1px solid var(--n-200);
  color: var(--n-600);
  border-radius: var(--r-sm);
  font-size: var(--t-11);
  font-weight: 540;
}

.sketch-input-sheet {
  background: var(--n-0);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-pop);
  border: 1px solid var(--n-200);
}
.sketch-sheet-backdrop { background: rgba(11, 12, 15, .55); }
.sketch-sheet-error { color: var(--err-fg); font-size: var(--t-12); font-weight: 540; }

/* ---------------------------------------------------------
   12. TOASTS / SCROLLBARS / RESPONSIVE
   --------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--n-400); background-clip: padding-box; border: 3px solid transparent; }

.sidebar { scrollbar-color: var(--gr-600) transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--gr-600); background-clip: padding-box; border: 3px solid transparent; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 224px minmax(0, 1fr); }
  .content { padding: var(--s-5) var(--s-5) var(--s-12); }
  .topbar { padding: var(--s-4) var(--s-5); }
  .project-layout { grid-template-columns: 216px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .login-screen { grid-template-columns: minmax(0, 1fr); }
  .login-media { display: none; }
  .login-panel { min-height: 100vh; padding: var(--s-8) var(--s-5); }
}

@media (max-width: 820px) {
  .topbar { padding: var(--s-3) var(--s-4); }
  .topbar h2 { font-size: var(--t-18); }
  .content { padding: var(--s-4) var(--s-4) var(--s-12); }
  .stat { padding: var(--s-3) var(--s-4); }
  .stat .num { font-size: var(--t-26); }
  .card, .form-body { padding: var(--s-4); }
  .wizard-main { padding: var(--s-4); }
}

/* Coarse pointers (field tablets) get larger hit targets */
@media (pointer: coarse) {
  button, .button { min-height: 40px; padding: 9px 14px; }
  button.small, .button.small { min-height: 34px; }
  .nav-btn { min-height: 42px; }
  input, select, textarea { min-height: 42px; font-size: var(--t-14); }
  .icon-btn { width: 40px; height: 40px; }
  .sketch-tool { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Print must stay clean — the shell never prints */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  body, html { background: #fff !important; }
  .card, .form-body, .table { box-shadow: none !important; border-color: #ddd !important; }
}

/* ---------------------------------------------------------
   13. SPECIFICITY + INTEGRATION CORRECTIONS

   a) Earlier layers style buttons through the .primary /
      .secondary / .danger / .action-btn classes (0,1,0), which
      outranks a bare `button` selector (0,0,1) no matter how
      late it is declared. The geometry below therefore repeats
      the class list so the v49 spec actually applies.

   b) app.js toggles the login screen with an inline
      style.display of "flex" / "none". Inline styles win over
      any stylesheet rule, and !important here would break the
      "none" case and pin the login screen permanently on top.
      So the split screen is built on flex to match what the
      script already sets — no JS change, hiding still works.
   --------------------------------------------------------- */

/* (a) Button geometry, at class specificity */
button,
.button,
.primary,
.secondary,
.danger,
.action-btn,
a.primary,
a.secondary,
a.danger {
  border-radius: var(--r-md);
  padding: 8px 13px;
  min-height: 0;
  gap: 6px;
  font-size: var(--t-13);
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -0.008em;
}

button.small,
.button.small,
.small.primary,
.small.secondary,
.small.danger {
  padding: 6px 10px;
  font-size: var(--t-12);
  min-height: 0;
}

.icon-btn {
  padding: 0;
  min-height: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  gap: 0;
}

/* Colour, also at class specificity */
.primary, a.primary {
  background: var(--ac-500);
  color: var(--n-0);
  border: 1px solid var(--ac-500);
  box-shadow: var(--sh-2);
}
.primary:hover, a.primary:hover { background: var(--ac-600); border-color: var(--ac-600); color: var(--n-0); }

.secondary, a.secondary {
  background: var(--n-0);
  color: var(--n-700);
  border: 1px solid var(--n-300);
}
.secondary:hover, a.secondary:hover { background: var(--n-50); border-color: var(--n-400); color: var(--n-900); }

.danger, a.danger {
  background: var(--n-0);
  color: var(--err-fg);
  border: 1px solid var(--err-bd);
}
.danger:hover, a.danger:hover { background: var(--err-bg); border-color: var(--err-fg); }

.action-btn {
  background: var(--n-0);
  color: var(--n-700);
  border: 1px solid var(--n-300);
  box-shadow: var(--sh-1);
}
.action-btn:hover { background: var(--n-50); border-color: var(--n-400); color: var(--n-900); }

/* Field tablets: restore comfortable targets, now deliberately */
@media (pointer: coarse) {
  button, .button, .primary, .secondary, .danger, .action-btn {
    min-height: 42px;
    padding: 10px 15px;
  }
  button.small, .button.small { min-height: 34px; }
  .icon-btn { width: 42px; height: 42px; min-height: 0; }
}

/* (b) Login split screen on flex */
.login-screen {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  padding: 0;
  gap: 0;
}
.login-panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-10) var(--s-8);
  background: var(--n-0);
}
.login-media {
  flex: 1.05 1 0;
  min-width: 0;
  position: relative;
  align-self: stretch;
}

@media (max-width: 900px) {
  .login-screen { flex-direction: column; }
  .login-media { display: none; }
  .login-panel { flex: 1 1 100%; padding: var(--s-8) var(--s-5); }
}

/* ---------------------------------------------------------
   14. EMPTY-STATE ILLUSTRATION SLOTS
   Drawn in CSS so every empty state matches exactly and the
   bundle carries no extra image weight.
   --------------------------------------------------------- */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  line-height: 1.55;
}
.empty::before {
  content: "";
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .55;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%236b717c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14a3 3 0 0 1 3-3h9l3 4h14a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H11a3 3 0 0 1-3-3z'/%3E%3Cpath d='M8 22h32' stroke='%232e5f8f'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   15. TAP TARGET RHYTHM
   The v19 mobile layer pinned min-height:var(--tap) (46px) on
   buttons, nav items, icon buttons, inputs and selects at every
   width, so desktop controls were taller than the type wanted
   and drifted out of step with each other. Retuning the single
   token fixes the rhythm everywhere: compact on mouse, generous
   on touch, where the 46px was actually earning its keep.
   --------------------------------------------------------- */
:root { --tap: 36px; }

@media (pointer: coarse) {
  :root { --tap: 44px; }
}

/* Selects and inputs share the button's vertical box on desktop */
input, select { min-height: var(--tap); }
.nav-btn { min-height: var(--tap); }

/* Context-specific empty-state icons where the markup distinguishes them */
.photo-empty, .sketchpad-empty, .sketch-panel-empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  color: var(--n-500);
  font-size: var(--t-13);
  line-height: 1.55;
}
.photo-empty::before, .sketchpad-empty::before, .sketch-panel-empty::before {
  content: "";
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .55;
}
.photo-empty::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%236b717c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16a3 3 0 0 1 3-3h5l3-4h10l3 4h5a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3z'/%3E%3Ccircle cx='24' cy='25' r='7' stroke='%232e5f8f'/%3E%3C/svg%3E");
}
.sketchpad-empty::before, .sketch-panel-empty::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%236b717c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='9' width='34' height='30' rx='2.5'/%3E%3Cpath d='M7 19h34M17 9v30' opacity='.55'/%3E%3Cpath d='M21 30l6-8 5 6' stroke='%232e5f8f'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   16. MOBILE SHELL COLLAPSE  (regression guard)
   Section 12's `max-width: 1100px` rule is declared later in
   this file than the original 960px / 820px collapse rules, so
   at phone widths it was winning and holding the sidebar at a
   fixed 224px while the main column was crushed — the page
   scrolled sideways. These restate the collapse after it, and
   release the sticky full-height sidebar, which only makes
   sense next to a scrolling main column.
   --------------------------------------------------------- */
@media (max-width: 960px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--gr-800);
  }
  .project-layout { grid-template-columns: minmax(0, 1fr); }
  .wizard-rail { border-right: 0; border-bottom: 1px solid var(--n-200); max-height: 240px; }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; overflow: visible; }
  body { overflow-x: hidden; }
}

/* ---------------------------------------------------------
   17. MOBILE NAV BAR  (regression guard)
   Below 820px the nav is a fixed, horizontally scrolling tab
   bar at the bottom of the screen. Section 3's unconditional
   `.nav { display: grid }` overrode that flex layout, so the
   fixed element sized to its content (998px) instead of the
   viewport and dragged the whole page sideways. Restored as
   flex here, and recoloured from the old navy to graphite.
   --------------------------------------------------------- */
@media (max-width: 820px) {
  .nav {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    background: var(--gr-850);
    border-top: 1px solid rgba(255, 255, 255, .09);
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }

  .nav-btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    border-radius: var(--r-md);
    padding: 8px 13px;
  }
  /* The rail marker is a left edge; on a horizontal bar it reads as an underline */
  .nav-btn.active::before {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 3px;
    transform: none;
    width: auto;
    height: 2px;
    border-radius: 2px;
  }

  /* Keep content clear of the fixed bar */
  .content { padding-bottom: calc(var(--s-16) + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------
   18. GRID BLOWOUT FIX  (pre-existing defect)
   Grid and flex items default to `min-width: auto`, so they
   refuse to shrink below their content's intrinsic width. On
   the dashboard this let a card size its track to ~970px
   inside a 319px column, and the whole page scrolled sideways
   on a phone. Present before this redesign — verified by
   A/B-ing the original stylesheet, which overflowed to 928px
   at a 375px viewport.

   `min-width: 0` lets the tracks resolve to the container, and
   overflow-wrap keeps long unbroken strings (emails, file
   names, job numbers) from re-creating the same blowout.
   --------------------------------------------------------- */
.grid,
.stats,
.grid > *,
.stats > *,
.stack > *,
.card,
.row-card,
.project-card,
.workflow-card,
.form-card,
.phase-row,
.phase-row > *,
.project-main,
.crew-info-grid > *,
.form-grid > *,
.workflow-grid > * {
  min-width: 0;
}

/* Long unbroken strings must wrap rather than widen their container */
.card h3,
.row-card,
.project-main h3,
.project-main p,
.stat .label,
.crew-info-box,
.form-card {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Tables are the one place sideways scrolling is correct —
   scroll the table, never the page. */
.table { display: block; overflow-x: auto; white-space: nowrap; }
.table thead, .table tbody { display: table; width: 100%; }

/* ---------------------------------------------------------
   19. SIDEBAR USER PANEL — collapsed name/role
   An older rule gives `.user-panel button` width:100% (reset to
   auto only below 820px), so on desktop the Log Out button
   claimed the whole row. Section 3's `min-width: 0` then let the
   name/role div shrink to literally 0px wide, and its text
   rendered outside its own box, on top of the button.

   The button sizes to its label; the name/role block takes the
   remaining space and truncates instead of collapsing.
   --------------------------------------------------------- */
.user-panel {
  gap: var(--s-3);
  align-items: center;
}
.user-panel > div {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.user-panel strong,
.user-panel span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-panel button,
.user-panel button.small,
.user-panel .secondary.small {
  width: auto;
  flex: 0 0 auto;
  align-self: center;
}

/* ---------------------------------------------------------
   20. VISUAL DEFECTS FOUND ON REVIEW
   --------------------------------------------------------- */

/* (a) [hidden] must actually hide.
   Section 7 gave .cloud-status `display: inline-flex`, which
   outranks the hidden attribute's UA `display: none` — so the
   sync pill rendered as a stray empty circle beside Print, and
   both dialog sync pills and the sketch sheet's side selector
   were visible when the app had hidden them. */
[hidden] { display: none !important; }

/* (b) Sidebar clipped its own footer.
   Section 3 set height:100vh + overflow-y:auto. At 700px tall
   the rail's content is ~770px, so the Log Out panel sat below
   the fold at 688-754 and was simply cut off. Pin the brand and
   the user panel, and let only the nav list scroll — the footer
   is then always reachable at any window height. */
.sidebar { overflow: hidden; }
.brand { flex: 0 0 auto; }
.nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}
.sidebar-note { margin-top: 0; flex: 0 0 auto; }
.user-panel { flex: 0 0 auto; }

/* On very short windows the promo note is the first thing to go,
   so the nav and the account footer keep their room. */
@media (max-height: 720px) {
  .sidebar-note { display: none; }
}

/* Restore normal flow once the rail stops being a full-height column */
@media (max-width: 960px) {
  .sidebar { overflow: visible; height: auto; }
  .nav { flex: none; min-height: auto; overflow: visible; }
  .sidebar-note { display: grid; }
}
@media (max-width: 820px) {
  .nav { overflow-x: auto; overflow-y: hidden; }
}

/* (c) Tables were clipping their own text.
   Section 18 added white-space:nowrap alongside overflow-x:auto,
   which truncated the Follow-Ups note column on a wide desktop.
   Cells wrap again; the block/auto pair still lets a genuinely
   wide table scroll itself rather than the page. */
.table { white-space: normal; }
.table th { white-space: nowrap; }

/* (d) Retire the legacy 4px gradient bar on every card.
   A navy accent stripe on each of the four stat tiles and every
   card below them is exactly the decoration this redesign set
   out to remove. */
.card::before,
.stat::before,
.project-card::before,
.customer-card::before,
.workflow-card::before,
.row-card::before { content: none !important; }

/* ---------------------------------------------------------
   21. WORKFLOW STAGES
   A stage screen stacks several forms. Each needs to read as
   its own document so it stays obvious what is being signed.
   --------------------------------------------------------- */
.stage-section {
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  background: var(--n-0);
  box-shadow: var(--sh-1);
  margin-bottom: var(--s-5);
  overflow: hidden;
}
.stage-section:last-child { margin-bottom: 0; }

.stage-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--n-25);
  border-bottom: 1px solid var(--n-200);
}
.stage-section-head h4 {
  margin: 0;
  font-size: var(--t-14);
  font-weight: 620;
  letter-spacing: -0.012em;
}
.stage-section-head p {
  margin: 3px 0 0;
  color: var(--n-500);
  font-size: var(--t-12);
  line-height: 1.5;
  max-width: 68ch;
}
.stage-section-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

/* The form body already carries a border as a standalone card; inside a
   section it is the section that provides the frame. */
.stage-section .form-body {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--s-5);
}
.stage-section-status {
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--n-150);
}

.rail-divider {
  font-size: var(--t-11);
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n-400);
  padding: var(--s-4) var(--s-3) var(--s-2);
  margin-top: var(--s-2);
  border-top: 1px solid var(--n-200);
}

@media (max-width: 820px) {
  .stage-section-head { flex-direction: column; gap: var(--s-3); }
  .stage-section-actions { width: 100%; }
  .stage-section .form-body { padding: var(--s-4); }
}

/* ---------------------------------------------------------
   22. SKETCH PAD MEASURING MODE
   --------------------------------------------------------- */
.sketch-mode-row { gap: var(--s-2); flex-wrap: wrap; }

.sketch-mode-label {
  font-size: var(--t-11);
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--n-500);
  flex: none;
}

/* Segmented control: the two modes are one choice, not two buttons */
.sketch-mode-switch {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--n-100);
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  flex: none;
}
.sketch-mode-btn {
  border: 0;
  background: transparent;
  color: var(--n-600);
  font-size: var(--t-12);
  font-weight: 550;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  box-shadow: none;
  min-height: 0;
  white-space: nowrap;
}
.sketch-mode-btn:hover { background: var(--n-0); color: var(--n-900); border: 0; }
.sketch-mode-btn.active {
  background: var(--n-0);
  color: var(--ac-700);
  box-shadow: var(--sh-1);
  border: 0;
}

.sketch-mode-help {
  font-size: var(--t-12);
  color: var(--n-500);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .sketch-mode-help { display: none; }
}

/* ---------------------------------------------------------
   23. INHERITED FIELDS
   A field carried forward from the form that captured it. It
   must read as settled rather than as an empty box waiting for
   input, without looking broken or disabled.
   --------------------------------------------------------- */
.field-inherited input,
.field-inherited select {
  background: var(--n-50);
  border-color: var(--n-200);
  color: var(--n-700);
  cursor: default;
  box-shadow: none;
}
.field-inherited input:hover,
.field-inherited select:hover { border-color: var(--n-300); }
/* Disabled selects grey out to near-invisible in some browsers */
.field-inherited select:disabled { opacity: 1; -webkit-text-fill-color: var(--n-700); }

.inherit-note {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: var(--t-11);
  color: var(--n-500);
  line-height: 1.45;
}
.inherit-note.pending { color: var(--n-400); font-style: italic; }

/* A value that no longer matches its source is usually a change order,
   so it is called out rather than left to be noticed. */
.inherit-note.changed {
  color: var(--warn-fg);
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  border-radius: var(--r-sm);
  padding: 5px 8px;
}
.field-overridden input,
.field-overridden select { border-color: var(--warn-bd); }

.link-btn {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--ac-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  box-shadow: none;
}
.link-btn:hover { color: var(--ac-700); background: transparent; border: 0; }

/* Note above a multi-form preview; never printed. */
.print-packet-note {
  max-width: 8.5in;
  margin: 0 auto var(--s-3);
  padding: 10px var(--s-4);
  background: var(--info-bg);
  border: 1px solid var(--info-bd);
  border-radius: var(--r-md);
  color: var(--ac-700);
  font-size: var(--t-12);
  font-weight: 520;
}

/* ---------------------------------------------------------
   24. WORKFLOW STAGE BOARD
   --------------------------------------------------------- */
.stage-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-3);
}

.stage-board-card {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
/* A stage holding live work earns the accent; empty stages stay quiet. */
.stage-board-card.has-work { border-color: var(--ac-200); }

.stage-board-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-3);
}
.stage-board-num {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--n-100);
  color: var(--n-600);
  font-size: var(--t-12);
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.has-work .stage-board-num { background: var(--ac-500); color: var(--n-0); }

.stage-board-head h3 { margin: 0; font-size: var(--t-15); }
.stage-board-head p {
  margin: 3px 0 0;
  color: var(--n-500);
  font-size: var(--t-12);
  line-height: 1.5;
}

.stage-board-count {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--n-100);
  color: var(--n-500);
  font-size: var(--t-12);
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.stage-board-count.active { background: var(--ac-50); color: var(--ac-700); }

.stage-board-forms { display: flex; flex-wrap: wrap; gap: 5px; }
.stage-form-pill {
  font-size: var(--t-11);
  font-weight: 520;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  border: 1px solid var(--n-200);
  background: var(--n-50);
  color: var(--n-600);
}
.stage-form-pill.client { background: var(--info-bg); border-color: var(--info-bd); color: var(--ac-700); }

.stage-board-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--n-150);
}
.stage-chip {
  display: grid;
  gap: 1px;
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--n-200);
  background: var(--n-0);
  min-height: 0;
  max-width: 100%;
}
.stage-chip:hover { border-color: var(--ac-400); background: var(--ac-50); }
.stage-chip strong {
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--n-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-chip span {
  font-size: var(--t-11);
  color: var(--n-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-board-empty { font-size: var(--t-12); color: var(--n-400); font-style: italic; }

/* ---------------------------------------------------------
   25. PHOTO VIEWER
   Photos are evidence — damage, punch items, proof of
   completion — so the viewer gives the image the whole screen
   and keeps the chrome out of the way.
   --------------------------------------------------------- */
.photo-count { font-size: var(--t-12); color: var(--n-500); font-weight: 520; }

/* The thumbnail itself is the button */
.photo-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
  cursor: zoom-in;
  border-radius: 0;
}
.photo-open img { display: block; width: 100%; transition: opacity var(--dur) var(--ease); }
.photo-open:hover img { opacity: .88; }

.photo-viewer-dialog {
  width: min(1400px, calc(100vw - 32px));
  max-width: none;
  height: min(92vh, 960px);
  max-height: none;
  padding: 0;
  background: var(--gr-900);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.photo-viewer-dialog::backdrop { background: rgba(11, 12, 15, .82); }

.photo-viewer { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.photo-viewer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--gr-700);
  flex: none;
}
.photo-viewer-head h2 { color: var(--n-0); font-size: var(--t-16); margin: 0; }
.photo-viewer-head p { color: rgba(255, 255, 255, .55); font-size: var(--t-12); margin: 3px 0 0; }
.photo-viewer-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.photo-viewer-actions .icon-btn { color: rgba(255, 255, 255, .7); }
.photo-viewer-actions .icon-btn:hover { background: rgba(255, 255, 255, .12); color: var(--n-0); }
.photo-viewer-actions .secondary {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .9);
  border-color: rgba(255, 255, 255, .16);
}
.photo-viewer-actions .secondary:hover { background: rgba(255, 255, 255, .18); color: var(--n-0); }

.photo-viewer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.photo-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
}

.photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  background: rgba(255, 255, 255, .12);
  color: var(--n-0);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none;
}
.photo-nav:hover { background: rgba(255, 255, 255, .24); color: var(--n-0); }
.photo-nav.prev { left: var(--s-4); }
.photo-nav.next { right: var(--s-4); }
.photo-nav[hidden] { display: none; }

.photo-viewer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--gr-700);
  color: rgba(255, 255, 255, .58);
  font-size: var(--t-12);
  flex: none;
}
.photo-viewer-foot span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 820px) {
  .photo-viewer-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
  .photo-nav { width: 40px; height: 40px; font-size: 22px; }
  .photo-viewer-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  .photo-viewer-foot span:last-child { text-align: left; }
}

/* ---------------------------------------------------------
   26. MONTH CALENDAR
   --------------------------------------------------------- */
.view-switch {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--n-100);
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
}
.view-switch-btn {
  border: 0;
  background: transparent;
  color: var(--n-600);
  font-size: var(--t-12);
  font-weight: 550;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  box-shadow: none;
  min-height: 0;
}
.view-switch-btn:hover { background: var(--n-0); color: var(--n-900); border: 0; }
.view-switch-btn.active { background: var(--n-0); color: var(--ac-700); box-shadow: var(--sh-1); border: 0; }

.calendar-shell {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--n-200);
  background: var(--n-25);
}
.cal-head h3 { margin: 0; font-size: var(--t-16); font-weight: 620; letter-spacing: -0.018em; }
.cal-nav { display: flex; gap: var(--s-2); align-items: center; }
.cal-count { font-size: var(--t-12); color: var(--n-500); font-weight: 520; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.cal-weekdays { border-bottom: 1px solid var(--n-200); background: var(--n-50); }
.cal-weekday {
  padding: 7px var(--s-2);
  font-size: var(--t-11);
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--n-500);
  text-align: center;
}

/* Six fixed rows so the grid keeps its height as you page through months. */
.cal-days { grid-auto-rows: minmax(104px, auto); }

.cal-cell {
  border-right: 1px solid var(--n-150);
  border-bottom: 1px solid var(--n-150);
  padding: 5px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.outside { background: var(--n-25); }
.cal-cell.today { background: var(--ac-50); }
.cal-cell.today .cal-daynum {
  background: var(--ac-500);
  color: var(--n-0);
  border-radius: var(--r-pill);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-daynum {
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--n-600);
  padding: 1px 3px;
}
.cal-cell.outside .cal-daynum { color: var(--n-300); }

.cal-events { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }

.cal-event {
  display: grid;
  gap: 0;
  text-align: left;
  padding: 3px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--info-bd);
  background: var(--info-bg);
  min-height: 0;
  box-shadow: none;
  min-width: 0;
  width: 100%;
}
.cal-event:hover { background: var(--ac-100); border-color: var(--ac-400); }
.cal-event-label {
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ac-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-event-project {
  font-size: var(--t-11);
  color: var(--n-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Work-order status colours the chip, matching the pills elsewhere */
.cal-event.status-completed { background: var(--ok-bg); border-color: var(--ok-bd); }
.cal-event.status-completed .cal-event-label { color: var(--ok-fg); }
.cal-event.status-blocked { background: var(--err-bg); border-color: var(--err-bd); }
.cal-event.status-blocked .cal-event-label { color: var(--err-fg); }

@media (max-width: 900px) {
  .cal-days { grid-auto-rows: minmax(76px, auto); }
  .cal-event-project { display: none; }
  .cal-head { flex-wrap: wrap; }
}

/* Measuring card on the field job screen */
.crew-measure-card { display: grid; gap: var(--s-3); }
.crew-measure-thumb {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
}
.crew-measure-meta { font-size: var(--t-12); color: var(--n-500); }
.crew-measure-empty {
  padding: var(--s-5);
  text-align: center;
  color: var(--n-500);
  font-size: var(--t-13);
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
}

/* ---------------------------------------------------------
   27. SKETCH PAD TOOLBARS ON FIELD SCREENS  (regression guard)
   A v45 rule sets flex-wrap:nowrap + overflow-x:auto on every
   .measure-sketch-toolbar below 980px. That is right for the
   tool palette, but the same rule applied to the row holding
   Close and Export DXF: at 375px that row is 641px wide, so
   Close sat at x=593 — off-screen, with nothing to indicate it
   had to be scrolled to. On a tablet the close button simply
   did not work.

   Only the tool palette scrolls now. Every row that holds an
   action wraps, so nothing can be pushed out of reach.
   --------------------------------------------------------- */
@media (max-width: 980px) {
  #sketchToolRow {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #sketchToolRow::-webkit-scrollbar { display: none; }

  .sketch-mode-row,
  .sketch-secondary-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* The spacer exists to push actions right on a wide toolbar. On a
     wrapped row it only creates a gap that shoves them onto their own
     line — or off the edge. */
  .sketch-mode-row .sketch-toolbar-spacer,
  .sketch-secondary-row .sketch-toolbar-spacer { display: none; }

  /* The scale select was taking 254px of a 354px row. */
  .sketch-scale-label {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--s-2);
  }
  .sketch-scale-label select { flex: 1 1 auto; min-width: 0; margin-top: 0; }

  /* Save and Close are the two that must never be unreachable. */
  #saveSketchBtn, #closeSketchBtn2 { flex: 1 1 auto; }
}

/* The close X must stay tappable whatever the head contains. */
.measure-sketch-dialog .dialog-head { gap: var(--s-3); }
.measure-sketch-dialog .dialog-head > div:first-child { min-width: 0; }
.measure-sketch-dialog .dialog-head h2,
.measure-sketch-dialog .dialog-head p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#closeMeasureSketchBtn { flex: 0 0 auto; }

/* ---------------------------------------------------------
   28. COLLAPSIBLE STAGE SECTIONS
   A stage stacks several forms and most visits touch one of
   them, so a stage arrives rolled up and the header is the
   handle. Collapsed sections keep their fields in the DOM -
   saving reads them straight off the inputs, so they are
   hidden, never unmounted.
   --------------------------------------------------------- */
.stage-section-head {
  cursor: pointer;
  align-items: center;
  user-select: none;
}
.stage-section-head:hover { background: var(--n-50); }

.stage-section-title {
  flex: 1 1 auto;
  min-width: 0;
}

.stage-section-toggle {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: calc(var(--s-2) * -1);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  box-shadow: none;
  color: var(--n-500);
  cursor: pointer;
}
.stage-section-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform .16s ease;
}
.stage-section-toggle:hover { background: var(--n-150); color: var(--n-700); }
.stage-section-toggle:focus-visible {
  outline: 2px solid var(--ac-500);
  outline-offset: 1px;
}
.stage-section.is-collapsed .stage-section-toggle svg { transform: rotate(-90deg); }

/* Rolled up, the section is just its header bar. */
.stage-section.is-collapsed .form-body { display: none; }
.stage-section.is-collapsed .stage-section-head { border-bottom: 0; }

/* A form carrying entries that nobody has set a status on still has to
   announce itself while it is closed. */
.stage-section-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ac-500);
  vertical-align: middle;
  margin-left: 2px;
}

@media (max-width: 820px) {
  /* The stacked header keeps the toggle and the title on one line; only the
     actions drop below. */
  .stage-section-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .stage-section-title { flex: 1 1 60%; }
  .stage-section-actions { width: 100%; flex-wrap: wrap; }
}

/* ---------------------------------------------------------
   29. ORDER TERMS ON THE APPROVAL FORMS
   The terms are part of what the client signs, so they sit on
   the form above the acknowledgement and print with it. On
   paper they must stay legible and must not split a clause
   across a page.
   --------------------------------------------------------- */
.form-terms {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  background: var(--n-25);
}
.form-terms-title {
  font-size: var(--t-12);
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n-600);
  margin-bottom: var(--s-3);
}
.form-terms-section { margin-bottom: var(--s-3); }
.form-terms-section:last-child { margin-bottom: 0; }
.form-terms-section h5 {
  margin: 0 0 4px;
  font-size: var(--t-12);
  font-weight: 620;
  color: var(--n-800);
}
.form-terms-section ul {
  margin: 0;
  padding-left: 1.1rem;
}
.form-terms-section li {
  font-size: var(--t-12);
  line-height: 1.55;
  color: var(--n-600);
  margin-bottom: 2px;
}

/* A hint under a field that feeds the printed terms. */
.field-help {
  margin: 4px 0 0;
  font-size: var(--t-11);
  line-height: 1.45;
  color: var(--n-500);
}

/* ---- printed ---- */
.print-terms {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #c2ccd6;
}
.print-terms-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #10233a;
  margin-bottom: 8px;
}
.print-terms-section {
  margin-bottom: 8px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.print-terms-section h5 {
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: #10233a;
}
.print-terms-section ul {
  margin: 0;
  padding-left: 14px;
}
.print-terms-section li {
  font-size: 9.5px;
  line-height: 1.45;
  color: #2b3a4d;
  margin-bottom: 1px;
}

/* =========================================================
   30. WORK ORDER ADVISORIES & "NOT NEEDED"

   Two additions to the release card.

   The advisory block lists what would normally already have
   happened before a crew is dispatched - the stone deposit,
   the slab order - without blocking anything, because the
   real order of those varies job to job. It is deliberately
   grey: a red chip here would read as a fault when template
   first and collect after is a normal way to run a job.

   "Not Needed" is a status for work this job does not have,
   so a skipped measure stops looking like a forgotten one.
   Also grey, and the card loses its coloured edge entirely.
   ========================================================= */

.work-status-notneeded {
  background: #f0f2f5;
  color: #6b7684;
  text-decoration: line-through;
}

.release-card.not-needed {
  opacity: .72;
}

.release-card.not-needed::before {
  background: linear-gradient(90deg, #c2ccd6, #e3e9ef);
}

.work-order-advisory {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(194, 204, 214, .9);
  font-size: 11.5px;
  line-height: 1.5;
  color: #5a6672;
}

.work-order-advisory strong {
  color: #3c4854;
}

.work-order-advisory .form-progress-mini {
  margin-top: 7px;
}

/* Outstanding, but not a problem. */
.form-progress-chip.note {
  background: #f0f2f5;
  color: #6b7684;
}

/* =========================================================
   31. VENDOR ORDER DEPOSIT GATE

   The terms the client signs say an order is not processed
   without the deposit. This is that sentence on screen: red
   while the money or the invoice number is missing, quiet
   green once the order can actually be placed.
   ========================================================= */

.vendor-gate {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.55;
}

.vendor-gate.blocked {
  background: #fff5f5;
  border: 1px solid #f3c9c4;
  border-left: 4px solid #b42318;
  color: #7c2018;
}

.vendor-gate.blocked strong {
  display: block;
  margin-bottom: 5px;
  color: #8a2a20;
}

.vendor-gate.blocked ul {
  margin: 0;
  padding-left: 18px;
}

.vendor-gate.blocked li {
  margin-bottom: 3px;
}

/* Left alone rather than downgraded - explains why the banner is showing on
   an order that is already marked complete. */
.vendor-gate.blocked p {
  margin: 7px 0 0;
  font-size: 11.5px;
  opacity: .85;
}

.vendor-gate.clear {
  background: #f1f9f4;
  border: 1px solid #cbe6d6;
  border-left: 4px solid #27805d;
  color: #256346;
}

/* A section heading inside a form, for the cabinet walkthrough block sitting
   above the overall sign-off on the same sheet. */
.workflow-info-card h4 {
  margin: 0 0 6px;
}


/* =========================================================
   32. SEND TO CLIENT

   The dialog that mints a document link, and the audit view
   for one that has been signed.

   The "copy this now" warning is not decoration. Only a hash
   of the token is stored, so a link genuinely cannot be shown
   again - and someone who assumes otherwise will close this
   dialog and lose it.
   ========================================================= */

/* [open] matters: display on the dialog element itself would override the UA
   rule that hides a closed dialog, and it would never close. */
.share-dialog { max-width: 720px; width: calc(100vw - 40px); }
.share-dialog[open] { display: flex; flex-direction: column; }

/* dialog { padding: 0 } is global so each dialog pads its own regions. This
   one is the only user of .dialog-body, and the rule was never written - the
   intro, the status banner and every link row sat flush against the edge.

   min-height: 0 is load-bearing: without it a flex child refuses to shrink
   below its content and the list grows the dialog past the screen instead of
   scrolling inside it. */
.dialog-body {
  padding: 18px 20px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* The head stays put while the list scrolls under it. */
.share-dialog[open] .dialog-head { flex: 0 0 auto; }

.share-intro {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #4a5867;
}

.share-generate {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid #e3e9ef;
}
.share-generate label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: #5a6672; }

.share-list-title {
  margin: 20px 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b7684;
}

/* ---------- a freshly minted link ---------- */

.share-new {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: #f1f9f4;
  border: 1px solid #cbe6d6;
}
.share-new-warn { font-size: 12.5px; font-weight: 800; color: #8a2a20; margin-bottom: 9px; }
.share-new-row { display: flex; gap: 8px; }
.share-new-row input {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 9px 10px;
  border: 1px solid #cbd5df;
  border-radius: 8px;
  background: #fff;
}
.share-new-note { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: #4a6357; }
.share-new-error {
  margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  background: #fff5f5; border: 1px solid #f3c9c4; color: #7c2018; font-size: 13px;
}

/* ---------- one link in the list ---------- */

.share-row {
  padding: 12px 14px;
  border: 1px solid #e3e9ef;
  border-radius: 12px;
  margin-bottom: 9px;
  background: #fff;
}
.share-row.signed  { border-left: 4px solid #27805d; background: #f8fcfa; }
.share-row.revoked,
.share-row.expired { opacity: .68; }
.share-row.voided  { border-left: 4px solid #a63a3a; background: #fffafa; }

.share-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-sent { font-size: 12px; color: #6b7684; flex: 1; }

.share-pill {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
}
.share-pill.active  { background: #eaf1f7; color: #1f4265; }
.share-pill.signed  { background: #e8f7ef; color: #26764d; }
.share-pill.expired { background: #f0f2f5; color: #6b7684; }
.share-pill.revoked { background: #ffecec; color: #a63a3a; }
.share-pill.voided  { background: #ffecec; color: #a63a3a; }

.share-meta { margin-top: 6px; font-size: 12px; color: #6b7684; }

/* The audit record. This is what gets read out if a signature is ever
   questioned, so it is plain text rather than anything clever. */
.share-audit { margin-top: 10px; font-size: 12px; line-height: 1.65; color: #33465c; }
.share-audit div { margin-bottom: 2px; }
.share-audit strong { display: inline-block; min-width: 78px; color: #10233a; }
.share-audit code { font-size: 11px; background: #eef2f6; padding: 1px 5px; border-radius: 4px; }
.share-audit-note { font-size: 11px; color: #8a94a0; }

/* The signature itself, at the size it was drawn - the office should be able
   to tell at a glance whether the right person signed. */
.share-signature-proof {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
}
.share-signature-proof img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-top: 4px;
}
.share-row.voided .share-signature-proof img { opacity: .4; filter: grayscale(1); }

.share-voided-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #fff4f4;
  border: 1px solid #f0d2d2;
  border-radius: 8px;
  color: #8f3a3a;
}
.share-void-action { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-void-action .danger { color: #a63a3a; border-color: #e8c4c4; }
.share-void-action .danger:hover { background: #ffecec; }

@media (max-width: 640px) {
  .share-new-row { flex-direction: column; }
  /* A phone loses 40px to the dialog inset already; 14px gutters keep the
     audit rows readable rather than wrapping every value. */
  .dialog-body { padding: 14px 14px 16px; }
  .share-dialog { width: calc(100vw - 20px); }
  .share-audit strong { min-width: 0; display: block; }
}

.publish-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #6b7684;
}

/* The client page status, in the Send to Client dialog.

   The page a client opens runs the app's own renderer and stylesheet, and
   those have to be in storage for their browser to fetch. When they are not,
   the client gets a blank page and nothing anywhere says why - which is
   exactly what happened the first time this was tested. Generating a link
   publishes automatically now; this line is so the state is visible rather
   than magic. */

.client-page-status {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.client-page-status:empty { display: none; }

.client-page-status.ready {
  background: #f1f9f4;
  border: 1px solid #cbe6d6;
  color: #256346;
}
.client-page-status.checking {
  background: #f5f8fb;
  border: 1px solid #d8e1ea;
  color: #4a5867;
}
.client-page-status.missing,
.client-page-status.stale {
  background: #fff8ed;
  border: 1px solid #f0dcbc;
  color: #7a5520;
}
.client-page-status.unknown {
  background: #f5f8fb;
  border: 1px solid #d8e1ea;
  color: #6b7684;
}
.client-page-status button { flex: none; }

/* =========================================================
   33. CLIENT LINK STATE

   A form that is out with a client, or has come back signed,
   has to say so where you already look - the stage section
   and the project card. Clients sign at nine on a Sunday and
   nothing else tells you.

   The locked pad is the important one. Once a link is sent,
   that signature box belongs to the client; an office
   signature in it is either a mistake or a forgery. Locking
   is not the enforcement - the database refuses to overwrite
   a signed one - it is so nobody does the work and only then
   finds out.
   ========================================================= */

.badge.share-badge {
  font-weight: 800;
  letter-spacing: .3px;
}
.badge.share-badge.signed   { background: #e8f7ef; color: #26764d; }
.badge.share-badge.awaiting { background: #fff3df; color: #a2691a; }

/* ---------- a signature pad that is not yours to sign ---------- */

.signature-box.locked {
  position: relative;
  opacity: .92;
}

.signature-box.locked .signature-pad {
  /* Not disabled - the restored signature must still be visible and must
     still print. Only the drawing is refused. */
  pointer-events: none;
  background: #f7f9fb;
  border-style: solid;
  border-color: #cbd5df;
}

.signature-locked-note {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f5f8fb;
  border: 1px solid #d8e1ea;
  font-size: 11.5px;
  line-height: 1.5;
  color: #4a5867;
}

/* ---- customer import preview ---- */
.customer-company { margin: 2px 0 0; color: var(--muted); font-weight: 600; }
.dialog-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; background: #fff; }
.import-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.import-stat { flex: 1 1 120px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.import-stat strong { display: block; font-size: 22px; line-height: 1.1; }
.import-stat span { color: var(--muted); font-size: 12px; }
.import-note { color: var(--muted); font-size: 13px; margin: 6px 0 12px; }
.import-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.import-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.import-table th, .import-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.import-table th { background: var(--blue-2, #f2f6fa); font-weight: 700; }
.import-table tr:last-child td { border-bottom: 0; }
.import-flags { margin: 6px 0 14px; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.import-flags li { margin-bottom: 3px; }

/* ---- keep me signed in ---- */
.login-card label.login-remember {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  /* The label is the tap target, not the 17px box inside it, so it keeps the
     same comfortable height every other control on this form has. */
  min-height: var(--tap, 44px);
  margin: 2px 0 4px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.login-card label.login-remember input {
  width: 17px;
  height: 17px;
  /* Inputs carry a min-height for touch targets, which stretches a checkbox
     into a tall rectangle. The whole label is clickable and keeps the tap
     area, so the box itself can be box-sized. */
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--navy, #1f4265);
  cursor: pointer;
}
.login-card label.login-remember span { line-height: 1.3; }

/* ---- countertop takeoff ---- */
.takeoff-figure { text-align: center; padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.takeoff-figure strong { display: block; font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.takeoff-figure span { color: var(--muted); font-size: 12px; }
.takeoff-rows strong { font-variant-numeric: tabular-nums; }
.takeoff-note { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 10px 0 0; }
.edge-toggle-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 6px; width: 100%; }
.edge-toggle-label { flex: 1 0 100%; color: var(--muted); font-size: 11px; }
.edge-toggle {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-height: 0;
}
.edge-toggle.on { background: var(--navy, #1f4265); border-color: var(--navy, #1f4265); color: #fff; }

/* ---- service zones on the schedule ---- */
.zone-summary { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; background: #fff; }
.zone-summary h4 { margin: 0 0 10px; font-size: 13px; }
.zone-week { display: flex; flex-wrap: wrap; gap: 8px; }
.zone-day { flex: 1 1 130px; border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px; }
.zone-day .zone-day-name { font-weight: 700; font-size: 12px; }
.zone-day .zone-day-area { color: var(--muted); font-size: 11px; display: block; margin-top: 1px; }
.zone-day .zone-day-count { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.zone-day.is-empty .zone-day-count { color: var(--muted); font-weight: 500; }
.zone-day.is-heavy { border-color: #c08a2e; background: #fdf6e9; }
/* Says who the zones are for, so a cabinet job with no flag is not a mystery. */
.zone-scope { color: var(--muted); font-size: 11px; margin: 2px 0 10px; line-height: 1.5; }
.zone-note { color: var(--muted); font-size: 12px; margin: 10px 0 0; line-height: 1.5; }
.zone-note + .zone-note { margin-top: 4px; }
.zone-flag { display: block; font-size: 11px; margin-top: 3px; font-weight: 700; }
.zone-flag.warn { color: #9a5b00; }
.zone-flag.info { color: var(--muted); font-weight: 600; }
.zone-cluster { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.zone-cluster strong { color: var(--ink, #1f2937); }

/* ---- per-side edge and splash controls ---- */
.edge-side-table { width: 100%; margin-top: 8px; }
.edge-side-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.edge-side-name { flex: 0 0 68px; font-size: 11px; color: var(--muted); }
.edge-chip {
  flex: 1 1 auto;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  /* A real tap target: these get used on a tablet, standing in a kitchen. */
  min-height: 34px;
  white-space: nowrap;
}
.edge-chip.t-finished { background: var(--navy, #1f4265); border-color: var(--navy, #1f4265); color: #fff; }
.edge-chip.t-appliance { background: #eaf1f7; border-color: #2e5f8f; color: #1f4265; }
.edge-chip.splash.on { background: #fdf6e9; border-color: #c08a2e; color: #7a5a15; }

/* ---- runs listed in the takeoff, each a way into its edges ---- */
.takeoff-runs { margin-top: 10px; }
.takeoff-run {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 5px;
  cursor: pointer;
  min-height: 0;
}
.takeoff-run:hover { border-color: var(--navy, #1f4265); }
.takeoff-run-name { font-weight: 700; font-size: 12px; }
.takeoff-run-meta { color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- the edge box ---- */
.edge-sheet { max-width: 420px; }
.edge-sheet-row { margin-bottom: 12px; }
.edge-sheet-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.edge-sheet-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.edge-sheet-btn {
  flex: 1 1 auto;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink, #1f2937);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-height: 40px;
  white-space: nowrap;
}
.edge-sheet-btn:hover { border-color: var(--navy, #1f4265); }
.edge-sheet-btn.on { background: var(--navy, #1f4265); border-color: var(--navy, #1f4265); color: #fff; }
.edge-sheet-note { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 8px 0 0; }

/* =========================================================
   Sketch viewer

   Reading a sketch is not editing one. This shows the saved image only, so
   nobody moves a run with a stray finger while trying to read a dimension.
   ========================================================= */

/* The saved preview is the obvious thing to tap, so it says so. */
.sketchpad-preview-wrap[role="button"] { cursor: zoom-in; }
.sketchpad-preview-wrap[role="button"]:focus-visible {
  outline: 2px solid var(--accent, #2e5f8f);
  outline-offset: 3px;
  border-radius: 16px;
}

#sketchViewerDialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 94vh;
  width: 1100px;
}
#sketchViewerDialog::backdrop { background: rgba(16,35,58,.55); }

.sketch-viewer {
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  border-radius: 18px;
  overflow: hidden;
  max-height: 94vh;
}

.sketch-viewer .dialog-head { padding: 16px 20px; }

/* The stage clips; the image inside it is what moves. touch-action none, or
   the browser scrolls the page instead of letting the drag pan the sketch. */
.sketch-viewer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  height: 70vh;
  overflow: hidden;
  background:
    linear-gradient(rgba(46,95,143,.06) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(46,95,143,.06) 1px, transparent 1px) 0 0 / 20px 20px,
    #fbfcfe;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}
.sketch-viewer-stage:active { cursor: grabbing; }

.sketch-viewer-stage img {
  max-width: none;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  /* Graph paper and hand lettering: keep the pixels crisp when magnified
     rather than smoothing a measurement into a smudge. */
  image-rendering: -webkit-optimize-contrast;
}

.sketch-viewer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--line, rgba(194,204,214,.6));
  background: var(--card, #fff);
}
.sketch-viewer-bar #sketchViewerZoom {
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 13px;
}
.sketch-viewer-bar #sketchViewerEditBtn { margin-left: auto; }

@media (max-width: 720px) {
  #sketchViewerDialog { width: 100vw; max-width: 100vw; max-height: 100vh; }
  .sketch-viewer { border-radius: 0; max-height: 100vh; }
  .sketch-viewer-stage { height: 62vh; }
}

/* The shared .dialog-head is styled for a dark header bar, so on the viewer's
   white card the title came out white on white - present, readable by a
   screen reader, invisible to everyone else. */
.sketch-viewer .dialog-head {
  background: var(--card, #fff);
  border-bottom: 1px solid var(--line, rgba(194,204,214,.6));
}
.sketch-viewer .dialog-head h2 {
  color: var(--ink, #10233a);
  font-size: 18px;
  margin: 0 0 2px;
}
.sketch-viewer .dialog-head p { color: var(--muted, #6b7a8d); margin: 0; }
.sketch-viewer .dialog-head .icon-btn { color: var(--ink, #10233a); }

/* =========================================================
   Job type chips

   Cabinets, countertops and a cabinet install are the three things the office
   sorts work by, so they get their own colours rather than another grey pill
   in a row of grey pills. Scope-not-set is deliberately the quietest: it is
   a gap in the intake form, not a kind of job.
   ========================================================= */
.badge.job-type { font-weight: 700; letter-spacing: .01em; }
.badge.job-type.cabinets { background: rgba(160,108,58,.14); color: #8a5a20; }
.badge.job-type.stone    { background: rgba(46,95,143,.14);  color: #24537f; }
.badge.job-type.install  { background: rgba(31,122,90,.14);  color: #1a6349; }
.badge.job-type.unknown  { background: rgba(135,148,165,.14); color: #6b7a8d; font-weight: 600; }