:root {
  color-scheme: light;
  --ink: #1f2933;
  --muted: #667085;
  --line: #d9e1e8;
  --panel: #ffffff;
  --bg: #f4f7f9;
  --nav: #102a43;
  --nav-soft: #1f3d5a;
  --accent: #1f8a70;
  --accent-dark: #146356;
  --warning: #b7791f;
  --fabric: #8da66a;
  --button-primary-bg: #d8f1e8;
  --button-primary-border: #7cc7ad;
  --button-primary-ink: #0f5f4d;
  --button-secondary-bg: #eef8f3;
  --button-secondary-border: #b9dccd;
  --button-secondary-ink: #1f5d4d;
  --button-utility-bg: #edf6ff;
  --button-utility-border: #b7d5f0;
  --button-utility-ink: #234d73;
  --button-danger-bg: #fff1f1;
  --button-danger-border: #efb4b4;
  --button-danger-ink: #8f2b2b;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
}

input.readonly-input,
input[readonly] {
  background: #f4f7f9;
  color: var(--muted);
  cursor: default;
}

input.needs-reason,
textarea.needs-reason {
  background: #fff1f1;
  border-color: #efb4b4;
  box-shadow: 0 0 0 1px rgba(239, 180, 180, 0.35);
}

.needs-reason-label {
  color: #7f1d1d;
}

input.agent-unsaved-field,
select.agent-unsaved-field,
textarea.agent-unsaved-field {
  background: #fff8ed;
  border-color: #e7b56d;
  box-shadow: 0 0 0 1px rgba(231, 181, 109, 0.25);
}

.agent-unsaved-label {
  color: #7c4a03;
}

button {
  width: fit-content;
  max-width: 220px;
  border: 1px solid var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-ink);
  min-height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(16, 42, 67, .04);
}

button:not(.quote-line-card):not(.agent-company-card) {
  white-space: nowrap;
}

button.primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-ink);
}

button.secondary {
  background: var(--button-secondary-bg);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-ink);
}

button.utility {
  background: var(--button-utility-bg);
  border-color: var(--button-utility-border);
  color: var(--button-utility-ink);
}

button.danger {
  background: var(--button-danger-bg);
  border-color: var(--button-danger-border);
  color: var(--button-danger-ink);
}

button.saving {
  position: relative;
  padding-left: 34px;
  cursor: wait;
  opacity: 0.92;
}

.operation-processing {
  position: relative;
  padding-left: 34px;
  cursor: wait;
  opacity: 0.92;
}

button.saving::before,
.operation-processing::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

a.operation-processing {
  pointer-events: none;
}

html.operation-busy,
html.operation-busy * {
  cursor: wait !important;
}

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

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 6px;
  background: var(--button-secondary-bg);
  color: var(--button-secondary-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(16, 42, 67, .04);
}

.button-link.utility {
  background: var(--button-utility-bg);
  border-color: var(--button-utility-border);
  color: var(--button-utility-ink);
}

button.compact-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.15;
}

button.full-width {
  width: 100%;
  max-width: none;
}

button:hover {
  filter: brightness(.985);
}

button:disabled {
  cursor: not-allowed;
  opacity: .58;
  filter: grayscale(.15);
}

button.nav-item,
button.quote-line-card,
button.agent-company-card {
  max-width: none;
  box-shadow: none;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #102a43 0%, #f4f7f9 100%);
}

.login-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(16, 42, 67, .18);
}

.login-card h2 {
  margin: 8px 0 0;
}

.auth-loading-card {
  min-height: 164px;
}

.auth-loading-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}

.auth-loading-status h2 {
  margin: 0 0 3px;
}

.auth-loading-status .helper-text {
  margin: 0;
}

.auth-spinner {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 3px solid #cfe6df;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: auth-spin .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .auth-spinner {
    animation: none;
    border-top-color: #cfe6df;
    background: var(--primary);
    box-shadow: inset 0 0 0 7px #fff;
  }
}

.login-brand {
  color: var(--ink);
}

.login-brand .login-logo {
  display: block;
  width: 48px;
  height: auto;
  flex: 0 0 48px;
}

.login-brand p,
.login-card .helper-text {
  color: var(--muted);
}

.form-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #f0b7b7;
  border-radius: 6px;
  background: #fff5f5;
  color: #9b2c2c;
}

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

.mobile-menu-toggle,
.mobile-menu-backdrop {
  display: none;
}

.sidebar {
  background: var(--nav);
  color: #f8fafc;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

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

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--accent);
  border-radius: 6px;
  font-weight: 800;
}

.brand h1,
.brand p,
.topbar h2,
.topbar p {
  margin: 0;
}

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

.brand p,
.sidebar-note span,
.eyebrow,
label,
small {
  color: #a9bdd0;
  font-size: 13px;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav-item {
  width: 100%;
  background: transparent;
  color: #dce8f2;
  text-align: left;
  border-color: transparent;
  font-weight: 400;
}

.nav-item.active,
.nav-item:hover {
  background: var(--nav-soft);
  border-color: #315879;
}

.nav-item:disabled { opacity: .42; cursor: not-allowed; background: transparent; border-color: transparent; }

.nav-item-with-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-count-badge {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f4b7b7;
  color: #6f1515;
  font-weight: 800;
  text-align: center;
}

.customer-submissions-list { display: grid; gap: 10px; }
.customer-submission-card { border: 1px solid var(--border); padding: 12px; background: #fff; }
.customer-submission-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.customer-submission-heading h4, .customer-submission-heading p { margin: 4px 0 0; }
.customer-submission-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.submission-linked-status { color: #126b52; font-weight: 800; }
.customer-submission-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.customer-submission-actions input { flex: 1 1 320px; min-width: 220px; }
.submission-price-warning { margin-top: 10px; padding: 9px 11px; border: 1px solid #df9a9a; background: #fff0f0; color: #761b1b; font-weight: 700; }
.dsa-override-warning { margin: 10px 0; padding: 9px 11px; border: 1px solid #df9a9a; border-radius: 6px; background: #fff0f0; color: #761b1b; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dsa-override-warning[hidden] { display: none; }
.dsa-override-warning button { flex: 0 0 auto; }
.submission-review-note { margin-top: 10px; padding: 8px 10px; background: #eef6fb; border: 1px solid #b9d4e6; }

.sidebar-note {
  margin-top: auto;
  display: grid;
  gap: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, .08);
  border-radius: 6px;
}

.user-box {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
}

.user-box span {
  color: #a9bdd0;
  font-size: 13px;
}

.user-box button {
  min-height: 34px;
  padding: 0 10px;
}

.workspace {
  min-width: 0;
  padding: 24px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 16px;
  border: 1px solid #b7e2d6;
  border-radius: 6px;
  background: #ecfdf7;
  color: #134e42;
  box-shadow: 0 18px 40px rgba(16, 42, 67, .18);
  font-weight: 700;
}

.toast[hidden] {
  display: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -24px -24px 20px;
  padding: 18px 24px;
  background: rgba(244, 247, 249, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

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

.app-version-warning {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 2px solid #d97706;
  border-radius: 7px;
  background: #fff1c2;
  color: #6d3900;
  box-shadow: 0 4px 12px rgba(109, 57, 0, .14);
}

.app-version-warning[hidden] { display: none; }
.app-version-warning > div:first-child { display: grid; gap: 2px; }
.app-version-warning .app-version-warning-actions { display: flex; gap: 8px; }
.app-version-warning button {
  flex: 0 0 auto;
  border-color: #9a4d00;
  background: #9a4d00;
  color: #fff;
  font-weight: 800;
}

.app-version-warning button.utility {
  border-color: #9a4d00;
  background: #fffaf0;
  color: #6d3900;
}

.submission-files { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; padding: 9px; border: 1px solid #d6e2ea; border-radius: 6px; background: #f7fafc; }
.submission-files strong { margin-right: 3px; }

.internal-announcement-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #8bbfd5;
  border-left: 5px solid #167a9b;
  border-radius: 8px;
  background: linear-gradient(115deg, #effaff, #f4fbf8);
  color: #123e52;
  box-shadow: 0 5px 16px rgba(18, 62, 82, .10);
}

.internal-announcement-banner[hidden] { display: none; }
.internal-announcement-banner[data-level="important"] { border-color: #e4b25e; border-left-color: #c77700; background: #fff8df; color: #633a00; }
.internal-announcement-banner[data-level="urgent"] { border-color: #e49b9b; border-left-color: #b42318; background: #fff1f1; color: #6d1616; }
.internal-announcement-copy { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 3px 10px; }
.internal-announcement-copy > strong { font-size: 16px; }
.internal-announcement-copy > span:last-child { grid-column: 2; line-height: 1.4; }
.internal-announcement-label { grid-row: 1 / span 2; align-self: center; padding: 4px 8px; border-radius: 999px; background: rgba(22, 122, 155, .12); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.internal-announcement-actions { display: flex; flex: 0 0 auto; gap: 8px; }

.announcement-admin-panel { margin-bottom: 18px; }
.announcement-form { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(140px, .55fr) minmax(190px, .8fr) minmax(190px, .8fr); gap: 12px; align-items: end; margin-top: 16px; padding: 14px; border: 1px solid #cfe0e8; border-radius: 7px; background: #f8fbfc; }
.announcement-message-field { grid-column: span 3; }
.announcement-form textarea { width: 100%; resize: vertical; }
.announcement-form-actions { display: flex; align-items: end; min-height: 40px; }
.announcement-history { display: grid; gap: 8px; margin-top: 18px; }
.announcement-history-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.announcement-history-row p { margin: 5px 0; white-space: pre-wrap; }
.announcement-history-row small { color: var(--muted); }
.announcement-history-heading { display: flex; align-items: center; gap: 8px; }
.announcement-status { padding: 2px 7px; border-radius: 999px; background: #e9eef3; font-size: 11px; font-weight: 800; }
.announcement-status-live { background: #dff6eb; color: #176245; }
.announcement-status-scheduled { background: #e5f2ff; color: #155b8a; }
.announcement-status-expired, .announcement-status-inactive { color: #66717d; }

.quote-number-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  background: #fff;
  color: var(--nav);
  font-weight: 800;
  font-size: 14px;
}

.save-status {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.save-status.dirty {
  color: var(--warning);
}

.save-status.saving {
  color: var(--button-primary-ink);
}

.eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 700;
  margin: 0 0 6px;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

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

.view {
  display: none;
}

.view.active {
  display: block;
}

.splash-view { position: relative; min-height: calc(100vh - 130px); overflow: hidden; border: 1px solid var(--border); background: #d9e4ec; }
.splash-blueprints { position: absolute; inset: 0; background: #d9e4ec url("/assets/quoter-blueprint-splash.png") center / cover no-repeat; filter: saturate(.45) contrast(.78) brightness(1.12) blur(.45px); opacity: .62; transform: scale(1.01); }
.splash-card { position: relative; z-index: 1; width: min(560px, calc(100% - 48px)); margin: clamp(56px, 10vh, 120px) auto; padding: clamp(28px, 5vw, 48px); border: 1px solid rgba(255,255,255,.9); border-radius: 12px; background: rgba(255,255,255,.91); box-shadow: 0 24px 70px rgba(20,49,72,.24); backdrop-filter: blur(8px); text-align: center; }
.splash-card h2 { margin: 6px 0 10px; font-size: clamp(28px, 4vw, 40px); }
.splash-card > p:not(.eyebrow) { color: var(--muted); }
.splash-actions { display: flex; justify-content: center; gap: 12px; margin: 28px 0; }
.splash-actions button { min-width: 150px; min-height: 46px; }
.splash-autosave { display: grid; grid-template-columns: auto minmax(170px,220px); align-items: center; justify-content: center; gap: 12px; color: var(--text); }
.splash-card small { display: block; margin-top: 8px; color: var(--muted); }

.quote-grid {
  display: block;
}

#quoteView.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  align-items: start;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 16px;
}

.panel h3 {
  margin: 0 0 14px;
  font-size: 17px;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

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

.compact-header {
  margin-bottom: 10px;
}

.helper-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  margin: 4px 0 14px;
}

.fabric-pricing-fallback-notice {
  color: #9a5a00;
  font-weight: 700;
  margin: 8px 0 0;
}

.compact-help {
  font-size: 12px;
  line-height: 1.25;
  margin: 4px 0 8px;
}

.info-note {
  background: #eaf4ff;
  border: 1px solid #b8d7f3;
  border-radius: 6px;
  color: #1f4f78;
  padding: 7px 9px;
}

.ridge-layout-warning {
  margin: -2px 0 10px;
  padding: 8px 10px;
  border: 1px solid #e8a4ad;
  border-radius: 6px;
  background: #fff0f2;
  color: #7b2531;
  font-size: 12px;
  font-weight: 700;
}

.ridge-layout-warning::after {
  display: block;
  clear: both;
  content: "";
}

.ridge-layout-warning button {
  float: right;
  width: auto;
  min-height: 28px;
  margin: -4px -4px -4px 12px;
  padding: 4px 10px;
}

#fabricHipRidgeLayoutField.side-by-side select {
  border-color: #df7f8d;
  background: #fff0f2;
  color: #7b2531;
  font-weight: 700;
}

.quote-text-override-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 8px 0 12px;
  padding: 10px;
  background: #fbfdff;
}

.quote-text-override-panel.manual-override-active {
  border-color: #efb4b4;
  background: #fff7f8;
}

.quote-text-override-panel textarea {
  min-height: 92px;
  white-space: pre-wrap;
}

.quote-text-override-panel.manual-override-active textarea {
  background: #fff1f1;
  border-color: #efb4b4;
  box-shadow: 0 0 0 1px rgba(239, 180, 180, 0.35);
}

.quote-text-override-panel.manual-override-active h3,
.quote-text-override-panel.manual-override-active .helper-text {
  color: #7f1d1d;
}

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

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

.field-row.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-stacked-fields {
  display: grid;
  gap: 8px;
}

.field-row.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.email-placeholder-help {
  display: grid;
  gap: 10px;
  margin: 2px 0 14px;
  padding: 12px;
  border: 1px solid #c8d8e5;
  border-radius: 7px;
  background: #f6fafc;
}

.email-placeholder-help h5 {
  margin: 0 0 3px;
  font-size: 13px;
}

.email-placeholder-help p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.email-placeholder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

button.email-placeholder-chip {
  min-height: 28px;
  padding: 3px 9px;
  border-color: #b7d5f0;
  border-radius: 999px;
  background: #fff;
  color: #234d73;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  font-weight: 700;
}

button.email-placeholder-chip:hover,
button.email-placeholder-chip:focus-visible {
  background: #e7f3ff;
  border-color: #79acd2;
}

button.email-placeholder-chip.is-copied {
  background: #e5f6ef;
  border-color: #7cc7ad;
  color: #0f5f4d;
}

.non-structure-entry-row {
  grid-template-columns: minmax(160px, .75fr) minmax(280px, 2fr) 78px minmax(120px, .55fr) 90px;
  align-items: end;
}

.non-structure-qty-slot {
  display: block;
  min-width: 0;
  align-self: end;
}

.non-structure-entry-row > label,
.non-structure-qty-slot .qty-field {
  margin: 0;
}

.selected-line-identity {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) 138px 90px;
  gap: 10px;
  align-items: end;
}

.selected-line-identity:has(.dsa-quote-field:not([hidden])) {
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) 138px 78px minmax(58px, max-content);
}

.selected-line-identity:has(.steel-tbar-support-field:not([hidden])) {
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) 138px minmax(170px, 0.42fr) 78px minmax(58px, max-content);
}

.selected-line-identity:has(.steel-polygon-shape-field:not([hidden])) {
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 1fr) 138px minmax(140px, 0.45fr) 78px minmax(58px, max-content);
}

.structure-reference-button { margin-bottom: 8px; white-space: nowrap; }

.structure-style-field {
  color: var(--accent-dark);
  font-weight: 700;
}

.structure-style-field select {
  border: 2px solid var(--accent);
  padding: 7px 9px;
  background: #edf9f5;
  color: #123b33;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(31, 138, 112, .2);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.structure-style-field select:hover {
  border-color: var(--accent-dark);
  background: #e3f6ef;
  box-shadow: 0 2px 5px rgba(31, 138, 112, .25);
}

.structure-style-field select:focus {
  border-color: var(--accent-dark);
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 138, 112, .22);
}

.structure-style-field select.agent-unsaved-field {
  background: #fff8ed;
  border-color: #e7b56d;
  box-shadow: 0 0 0 2px rgba(231, 181, 109, .22);
}

.selected-line-identity label,
.steel-building-compact-row label {
  margin-bottom: 8px;
}

.field-slot {
  display: contents;
}

.field-slot[hidden] {
  display: none !important;
}

.qty-field input {
  text-align: center;
}

.selected-line-identity .bay-field,
.selected-line-identity .dsa-quote-field {
  margin-bottom: 8px;
}

.selected-line-identity .bay-field input {
  text-align: center;
}

.standard-dimension-row:has(#dimensionBaySlot:not([hidden])) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.standard-dimension-row.umbrella-dimension-layout {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(190px, 1.15fr) minmax(250px, 1.45fr);
  align-items: end;
}

.standard-dimension-row.umbrella-dimension-layout .umbrella-pitch-field,
.standard-dimension-row.umbrella-dimension-layout .umbrella-peak-note {
  margin-bottom: 8px;
}

.selected-line-identity .dsa-quote-field {
  align-self: end;
  min-height: 38px;
  white-space: nowrap;
}

.steel-roof-main-row {
  align-items: end;
}

.steel-building-compact-row {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(228px, max-content) minmax(190px, max-content) 94px 115px;
  gap: 10px;
  align-items: end;
}

.steel-building-compact-row:has(.steel-polygon-shape-field:not([hidden])) {
  grid-template-columns: minmax(140px, 0.8fr) minmax(280px, 1fr) minmax(228px, max-content) minmax(190px, max-content);
}

.steel-building-compact-row.pyramid-layout {
  grid-template-columns: minmax(180px, 260px) minmax(228px, max-content) minmax(190px, max-content);
  justify-content: start;
}

.steel-slope-field {
  min-height: 52px;
}

.steel-slope-field label {
  width: 70px;
}

.steel-slope-field #steelRoofHeightField,
.steel-slope-field #steelRoofLowHeightField {
  width: 98px;
}

.steel-roof-options-field {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  min-height: 52px;
  margin: 0 0 8px;
  padding: 5px 8px 6px;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.steel-roof-options-field legend {
  padding: 0 3px;
  color: var(--muted);
  font-size: 12px;
}

.steel-roof-options-field .checkbox-field {
  margin: 0;
  white-space: nowrap;
}

.steel-building-compact-row > [hidden] {
  display: none !important;
}

.steel-building-compact-row #steelBaySlot:empty {
  display: none;
}

.steel-building-compact-row .bay-field input {
  text-align: center;
}

.canopy-layout-row .checkbox-field {
  align-self: end;
  min-height: 38px;
}

.canopy-layout-row:has(#canopyBaySlot:empty) {
  grid-template-columns: minmax(220px, 320px) max-content;
}

.inline-cue {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-top: -2px;
  text-transform: uppercase;
}

.steel-dsa-field {
  align-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 8px;
}

.steel-dsa-field input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.steel-geometry-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 2px;
}

.slope-field {
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 0;
  border: 0;
  margin: 0 0 8px;
}

.slope-field legend {
  color: var(--muted);
  font-size: 14px;
  margin-right: 4px;
}

.slope-field label {
  width: 86px;
  margin-bottom: 0;
}

.max-purlin-field {
  min-width: 0;
}

.ring-purlin-controls-slot {
  display: contents;
}

.steel-geometry-row .purlin-adjustment-row:not(.ring-layout) {
  width: 100%;
  min-width: 0;
}

.purlin-adjustment-row.ring-layout {
  display: contents;
}

.purlin-adjustment-row.ring-layout > label {
  width: 190px;
  margin-bottom: 8px;
}

.purlin-adjustment-row.ring-layout > .info-note {
  align-self: end;
  width: min(440px, 100%);
  min-height: 38px;
  margin: 0 0 8px;
}

.interior-rafter-mode-field {
  width: 155px;
  margin-bottom: 8px;
}

.quote-header-top {
  align-items: start;
}

.quote-header-top label {
  margin-bottom: 0;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  margin-bottom: 12px;
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 12px;
  color: var(--ink);
}

.checkbox-field input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0;
}

.umbrella-rods-toggle {
  align-self: end;
  justify-self: start;
}

input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
}

#agentSelect {
  min-height: 38px;
}

textarea {
  resize: vertical;
}

select[multiple] {
  min-height: 96px;
}

.rep-summary {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
}

.rep-summary b {
  color: var(--ink);
}

.checkbox-list {
  display: grid;
  gap: 1px;
  min-height: 0;
  max-height: 128px;
  overflow: auto;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  padding: 4px 8px;
  background: #fff;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 26px;
  color: var(--ink);
  font-size: 13px;
}

.checkbox-row input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.checkbox-row span {
  display: block;
}

.inline-check {
  align-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  background: #f8fafc;
}

.freestyle-editor {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.freestyle-section {
  margin-top: 14px;
}

.freestyle-steel-pricing-basis {
  max-width: 360px;
}

.freestyle-section h4 {
  margin: 0;
  font-size: 15px;
}

.dynamic-lines {
  display: grid;
  gap: 10px;
}

.dynamic-line {
  padding: 12px;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  background: #fbfdff;
}

.dynamic-line .field-row {
  align-items: end;
}

.freestyle-post-main {
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) 70px 110px minmax(260px, 2.2fr) minmax(130px, 1fr);
  gap: 12px;
  align-items: end;
}

.freestyle-post-detail {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) repeat(2, 150px) minmax(0, 1fr) 110px;
  gap: 12px;
  align-items: end;
}

.freestyle-post-detail label:first-child {
  grid-column: 1;
}

.freestyle-post-detail label:nth-child(2) {
  grid-column: 2;
}

.freestyle-post-detail label:nth-child(3) {
  grid-column: 3;
}

.freestyle-post-detail button {
  grid-column: 5;
  align-self: end;
}

.freestyle-post-detail .dynamic-remove,
.freestyle-sail-detail .dynamic-remove {
  margin-bottom: 12px;
}

.freestyle-post-embedded {
  display: grid;
  grid-template-columns: 190px minmax(240px, 1fr) minmax(300px, 1.6fr);
  gap: 12px;
  align-items: end;
}

.freestyle-sail-main,
.freestyle-sail-detail {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 60px minmax(150px, 1.05fr) repeat(3, minmax(88px, .8fr));
  gap: 12px;
  align-items: end;
}

.freestyle-sail-detail {
  grid-template-columns: repeat(5, minmax(88px, 1fr)) 110px;
}

.sail-side-three-heading {
  display: flex;
  min-height: 18px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

button.double-triangle-update {
  min-height: 20px;
  padding: 1px 7px;
  font-size: 11px;
  line-height: 1;
}

button.double-triangle-update:disabled {
  opacity: .38;
  cursor: default;
}

.freestyle-metal-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) 70px 100px minmax(220px, 2fr) minmax(130px, 1fr) 95px 110px 90px;
  gap: 10px;
  align-items: end;
}

.freestyle-metal-row.no-footing {
  grid-template-columns: minmax(140px, 1.3fr) 75px 110px minmax(240px, 2fr) 100px 115px 90px;
}

.freestyle-metal-row.with-plates,
.freestyle-metal-row.no-footing.with-plates {
  grid-template-columns: minmax(130px, 1.2fr) 70px 100px minmax(210px, 1.8fr) minmax(130px, 1fr) 105px 95px 110px 90px;
}

.freestyle-metal-roof-row {
  display: grid;
  grid-template-columns: 130px minmax(170px, 1.4fr) minmax(220px, 1.8fr) 120px 90px;
  gap: 10px;
  align-items: end;
}

.freestyle-metal-bolt-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.3fr) 120px 150px minmax(220px, 1.5fr) 120px 90px;
  gap: 10px;
  align-items: end;
}

.freestyle-metal-bolt-value {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-weight: 700;
}

.freestyle-metal-row .dynamic-remove,
.freestyle-metal-roof-row .dynamic-remove,
.freestyle-metal-bolt-row .dynamic-remove {
  width: 90px;
  margin-bottom: 12px;
}

.additional-fabric-grid {
  display: grid;
  grid-template-columns: minmax(170px, 1.5fr) minmax(130px, 1fr) repeat(4, minmax(82px, .75fr)) 110px;
  gap: 10px;
  align-items: end;
}

.dynamic-remove {
  width: 110px;
  min-height: 38px;
  justify-self: end;
  align-self: end;
}

.line-additional-items,
.quote-additional-items,
.quote-freight-items,
.quote-attachments {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.route-mileage-card { margin: 10px 0 14px; padding: 12px; border: 1px solid #b9ccda; border-radius: 6px; background: #f6fafc; }
.route-mileage-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 8px; align-items: end; }
.route-mileage-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px; }
.route-mileage-status { color: #465d6d; font-size: 12px; font-weight: 700; }
.route-mileage-status.is-success { color: #17644f; }
.route-mileage-status.is-warning { color: #9a5311; }
.route-mileage-status.is-error { color: #a32929; }
@media (max-width: 1100px) { .route-mileage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.quote-attachments .section-header {
  align-items: center;
}

.quote-output-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #d8e2ee;
  border-radius: 6px;
  background: #f8fbfe;
}

.quote-output-options h3 {
  margin: 0;
}

.quote-output-options .helper-text {
  margin: 3px 0 0;
}

.quote-output-toggle-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 900px) {
  .quote-output-options {
    align-items: flex-start;
    flex-direction: column;
  }

  .quote-output-toggle-row {
    justify-content: flex-start;
  }
}

.quote-attachments .inline-actions button {
  max-width: none;
}

.attachment-pdf-progress {
  min-height: 17px;
  margin: 4px 0 0;
  color: #315f78;
  font-weight: 700;
}

#generateCustomerPdfBtn,
#createPreviewPdfAttachmentBtn {
  min-width: 236px;
}

#uploadAttachmentBtn {
  min-width: 122px;
}

.attachment-drop-zone {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 92px;
  margin: 10px 0;
  padding: 16px;
  border: 2px dashed #a9bfd2;
  border-radius: 8px;
  background: #f7fbfe;
  color: var(--nav);
  text-align: center;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.attachment-drop-zone span {
  color: var(--muted);
  font-size: 12px;
}

.attachment-drop-zone .attachment-email-drag-note {
  margin-top: 5px;
  color: #7c4c00;
  font-weight: 700;
}

.quote-attachments.attachment-drag-active .attachment-drop-zone {
  border-color: #008c72;
  background: #e9f8f3;
  box-shadow: 0 0 0 3px rgba(0, 140, 114, .14);
}

.quote-attachments.attachment-drag-active .attachment-drop-zone strong::before {
  content: "Drop to upload — ";
}

.attachment-list {
  display: grid;
  gap: 8px;
}

.attachment-row {
  display: grid;
  grid-template-columns: 82px 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  background: #fff;
}

.attachment-thumbnail,
.attachment-file-icon {
  width: 72px;
  height: 52px;
  border: 1px solid #d6e0e8;
  border-radius: 5px;
  background: #f2f6f9;
}

.attachment-thumbnail-wrap {
  position: relative;
  display: block;
  width: 72px;
  height: 52px;
}

.attachment-thumbnail {
  display: block;
  object-fit: contain;
}

.attachment-file-icon {
  display: grid;
  place-items: center;
  color: #607487;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.attachment-image-icon {
  color: #26775f;
  background: #eef8f4;
}

.attachment-pdf-icon {
  color: #a62929;
  background: #fff2f2;
}

.attachment-thumbnail-badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #ad2020;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .03em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.attachment-upload-status {
  grid-template-columns: 36px minmax(0, 1fr) 90px;
}

@media (max-width: 760px) {
  .attachment-row {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .attachment-email-check,
  .attachment-actions {
    grid-column: 1 / -1;
  }
}

.attachment-upload-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e8f0f6;
  color: var(--nav);
  font-weight: 900;
}

.attachment-upload-state {
  justify-self: end;
  font-size: 12px;
  font-weight: 800;
}

.attachment-upload-status.is-uploading {
  border-color: #78a9d0;
  background: #f3f8fc;
}

.attachment-upload-status.is-uploaded {
  border-color: #73bea8;
  background: #effaf6;
}

.attachment-upload-status.is-uploaded .attachment-upload-icon,
.attachment-upload-status.is-uploaded .attachment-upload-state {
  color: #08725f;
}

.attachment-upload-status.is-failed {
  border-color: #e4a2a2;
  background: #fff3f3;
}

.attachment-upload-status.is-failed .attachment-upload-icon,
.attachment-upload-status.is-failed .attachment-upload-state,
.attachment-upload-status.is-failed .attachment-main span {
  color: #a52a2a;
}

.attachment-email-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: 0;
  color: var(--nav);
  font-weight: 700;
}

.attachment-email-check input {
  width: 16px;
  min-height: 16px;
  height: 16px;
  margin: 0;
}

.attachment-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.attachment-main strong,
.attachment-main span {
  overflow-wrap: anywhere;
}

.attachment-main span {
  color: var(--muted);
  font-size: 13px;
}

.attachment-visual-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 14px;
  margin-top: 4px;
}

.attachment-quote-visual-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: 0;
  color: var(--nav);
  font-weight: 700;
}

.attachment-quote-visual-check input {
  width: 16px;
  min-height: 16px;
  height: 16px;
  margin: 0;
}

.attachment-visual-controls > label:not(.attachment-quote-visual-check) {
  display: grid;
  gap: 3px;
  min-width: min(300px, 100%);
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.attachment-visual-controls input[type="text"] {
  min-height: 34px;
}

.attachment-project-visual {
  border-color: #7ac9b2;
  background: #f1fbf7;
}

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

.attachment-move-button {
  min-width: 34px;
  padding-inline: 8px;
}

.additional-item-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 140px 150px 110px;
  gap: 12px;
  align-items: end;
}

.additional-steel-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) 90px 130px 110px;
  gap: 12px;
  align-items: end;
}

.additional-item-grid .dynamic-remove,
.additional-steel-grid .dynamic-remove {
  align-self: end;
  margin-bottom: 12px;
}

.quote-additional-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 120px 150px 110px;
  gap: 12px;
  align-items: end;
}

.additional-audit-stamp {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  margin-left: 8px;
}

.additional-item-grid .inline-check,
.quote-additional-grid .inline-check,
.quote-additional-grid .dynamic-remove {
  align-self: end;
}

.quote-freight-grid {
  display: grid;
  grid-template-columns: 28px minmax(190px, 1fr) 76px 76px 112px 82px;
  gap: 10px;
  align-items: end;
}

.quote-freight-grid .row-number {
  min-height: 38px;
  display: grid;
  align-content: center;
  align-self: start;
  font-weight: 700;
  color: var(--muted);
  margin-top: 22px;
}

.quote-freight-grid .dynamic-remove {
  align-self: start;
  margin-top: 22px;
  width: 82px;
}

.compact-dynamic-line {
  padding: 10px;
}

.freestyle-sail-detail input[readonly] {
  background: #eef3f7;
  color: var(--nav);
  font-weight: 700;
}

.readonly-field {
  background: #eef3f7;
  color: var(--muted);
}

.warning-text {
  margin: 2px 0 10px;
  color: #9a3412;
  font-size: 13px;
  font-weight: 700;
}

.warning-text[hidden] {
  display: none;
}

.agent-layout {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 10px;
  align-items: start;
}

.agent-layout .panel {
  min-width: 0;
}

.agent-layout form {
  width: min(720px, calc(100vw - 80px));
  max-width: 720px;
}

.agent-add-panel {
  padding: 12px;
  overflow: hidden;
}

.agent-add-panel:not([open]) {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
}

.agent-add-panel summary {
  width: fit-content;
  max-width: 220px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--button-primary-border);
  border-radius: 6px;
  background: var(--button-primary-bg);
  color: var(--button-primary-ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(16, 42, 67, .04);
  list-style: none;
}

.agent-add-panel summary::marker {
  content: "";
}

.agent-add-panel summary::-webkit-details-marker {
  display: none;
}

.agent-add-panel form {
  padding-top: 12px;
}

.agent-directory {
  display: grid;
  gap: 14px;
}

.agent-workbench {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.agent-company-column,
.agent-rep-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.agent-company-column {
  position: sticky;
  top: 104px;
}

.agent-search-field {
  margin-bottom: 0;
}

.agent-company-results {
  display: grid;
  gap: 10px;
}

.agent-column-heading,
.agent-company-heading,
.agent-rep-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.agent-column-heading {
  padding: 0 2px 4px;
}

.agent-column-heading h4,
.agent-rep-group-heading h4 {
  margin: 0;
  font-size: 15px;
}

.agent-column-heading span,
.agent-company-heading span,
.agent-rep-group-heading span,
.agent-empty-note {
  color: var(--muted);
  font-size: 13px;
}

.agent-rep-group {
  padding: 12px;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  background: #fff;
}

.agent-company-card {
  width: 100%;
  max-width: none;
  display: grid;
  gap: 6px;
  min-height: 0;
  padding: 12px;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.agent-company-card:hover,
.selected-agent-card {
  border-color: var(--accent);
  background: #ecfdf7;
}

.agent-card-meta,
.agent-match-note {
  color: var(--muted);
  font-size: 13px;
}

.portal-activity-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.portal-activity-list { display: grid; gap: 7px; }
.portal-activity-count { color: var(--muted); font-size: 13px; }
.portal-activity-row {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(150px, 1fr) 170px auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  background: #fff;
}
.portal-activity-main,
.portal-activity-who { display: grid; gap: 3px; min-width: 0; }
.portal-activity-main span,
.portal-activity-who span,
.portal-activity-company,
.portal-activity-time { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.portal-activity-outcome {
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef8f3;
  color: #1f5d4d;
  font-size: 11px;
  font-weight: 700;
}
.portal-activity-outcome.failed { background: #fff1f1; color: #8f2b2b; }

.agent-match-note {
  color: #1f4f78;
  font-weight: 700;
}

.agent-edit,
.agent-reps {
  display: grid;
  gap: 8px;
}

.agent-edit {
  margin-top: 10px;
}

.agent-edit label,
.rep-edit label {
  margin-bottom: 0;
}

.agent-rep-group {
  display: grid;
  gap: 10px;
}

.selected-agent-edit {
  grid-template-columns: minmax(210px, 1.2fr) minmax(120px, .65fr) 130px 150px minmax(220px, 1.2fr) 128px;
  align-items: end;
}

.selected-agent-edit label:nth-child(4) {
  grid-column: auto;
}

.rep-edit {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(190px, 1.3fr) 130px 110px 120px 190px 116px;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid #edf2f7;
  border-radius: 6px;
  background: #fbfdff;
}

.agent-unsaved-row {
  border-color: #e7b56d;
  background: #fffaf1;
}

.matched-rep-row {
  border-color: #b8d7f3;
  background: #f0f8ff;
}

.rep-edit button,
.agent-edit button {
  justify-self: start;
  min-height: 34px;
  white-space: nowrap;
}

.rep-edit button {
  justify-self: end;
  width: 128px;
}

.portal-access-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.portal-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid #d9e1e8;
  border-radius: 999px;
  background: #f4f7f9;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.portal-status-pending { background: #edf6ff; border-color: #b7d5f0; color: #234d73; }
.portal-status-active { background: #eef8f3; border-color: #b9dccd; color: #1f5d4d; }
.portal-status-suspended,
.portal-status-revoked { background: #fff1f1; border-color: #efb4b4; color: #8f2b2b; }

.portal-action-button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.portal-access-modal {
  width: min(680px, calc(100vw - 32px));
}

.portal-access-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.portal-access-summary > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.portal-access-summary span,
.portal-access-details dt {
  color: var(--muted);
  font-size: 12px;
}

.portal-access-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 12px 0 18px;
}

.portal-access-details div { display: grid; gap: 2px; }
.portal-access-details dd { margin: 0; font-weight: 700; }

.portal-pricing-access-control,
.portal-access-action-section {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.portal-access-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.portal-access-section-heading h4,
.portal-access-action-section h4 {
  margin: 0 0 3px;
  font-size: 15px;
}

.portal-access-section-heading p,
.portal-access-action-section p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.portal-pricing-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid #c9d7e2;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.portal-pricing-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.portal-pricing-toggle > span {
  display: grid;
  gap: 4px;
}

.portal-pricing-toggle strong { font-size: 14px; }
.portal-pricing-toggle small { color: var(--muted); line-height: 1.4; }

.portal-email-warning {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #efb4b4;
  border-radius: 6px;
  background: #fff1f1;
  color: #8f2b2b;
  font-size: 12px;
  line-height: 1.4;
}

.portal-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.agent-edit button.agent-save-needed,
.rep-edit button.agent-save-needed {
  min-width: 128px;
  border-color: #d79034;
  background: #fff2db;
  color: #7c4a03;
}

.agent-unsaved-note {
  display: none;
  align-self: center;
  color: #7c4a03;
  font-size: 12px;
  font-weight: 700;
}

.agent-unsaved-row .agent-unsaved-note {
  display: inline-block;
}

.agent-edit .agent-unsaved-note,
.rep-edit .agent-unsaved-note {
  grid-column: -2 / -1;
  justify-self: end;
}

.agent-empty-note {
  margin: 0;
  padding: 10px;
  border: 1px dashed #cfd8e3;
  border-radius: 6px;
  background: #fbfdff;
}

.toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 36px;
}

.toggles input {
  width: 16px;
  min-height: 16px;
}

.toggles label.is-disabled {
  color: #7b8794;
}

.selectable-option-details {
  display: grid;
  grid-template-columns: repeat(7, minmax(78px, 1fr));
  gap: 10px;
  align-items: end;
  margin: 8px 0 12px;
}

.selectable-option-details label {
  min-width: 0;
  margin: 0;
}

.selectable-option-details input {
  width: 100%;
}

.selectable-option-details .post-pad-height-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 145px;
  margin: 0;
  padding: 5px 9px 7px;
  border: 1px solid #c8d6e2;
  border-radius: 4px;
}

.selectable-option-details .post-pad-height-field[hidden] {
  display: none;
}

.selectable-option-details .post-pad-height-field legend {
  padding: 0 4px;
  font-size: 11px;
  color: #536779;
}

.selectable-option-details .post-pad-height-field label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.selectable-option-details .post-pad-height-field input {
  width: auto;
}

.selectable-option-details .option-override-reason {
  grid-column: span 2;
  min-width: 180px;
}

.field-row-full {
  grid-column: 1 / -1;
  margin: 0;
}

.quote-summary {
  position: sticky;
  top: 16px;
}

@media (min-width: 1280px) {
  #quoteView.active {
    align-items: start;
    max-height: calc(100vh - 124px);
    overflow: hidden;
  }

  .quote-grid {
    max-height: calc(100vh - 124px);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-gutter: stable;
  }

  .quote-summary {
    top: 104px;
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-gutter: stable;
  }
}

.visual-panel {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: center;
}

.visual-panel.no-structure-representation {
  grid-template-columns: 1fr;
}

.selected-structure-representation {
  display: grid;
  place-items: center;
  width: 140px;
  min-height: 120px;
}

.selected-structure-representation img {
  display: block;
  width: 132px;
  max-width: 100%;
  height: 112px;
  object-fit: contain;
}

.shade-visual {
  position: relative;
  height: 120px;
}

.canopy {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 110px;
  height: 86px;
  background: linear-gradient(135deg, #76905a 0 50%, var(--fabric) 50%);
  clip-path: polygon(50% 0, 100% 42%, 52% 100%, 0 45%);
  border: 1px solid rgba(0, 0, 0, .16);
  box-shadow: 0 22px 24px rgba(31, 41, 51, .16);
}

.post {
  position: absolute;
  width: 6px;
  height: 58px;
  background: #5b6470;
  border-radius: 5px;
}

.p1 { left: 9px; top: 58px; }
.p2 { right: 9px; top: 58px; }
.p3 { left: 63px; top: 78px; }
.p4 { left: 66px; top: 4px; height: 42px; }

.total-panel strong {
  display: block;
  font-size: 38px;
  line-height: 1.1;
  margin: 8px 0 16px;
}

.total-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  color: var(--muted);
}

.total-grid b {
  color: var(--ink);
}

.line-items {
  display: grid;
  gap: 8px;
  max-height: 390px;
  overflow: auto;
}

.cost-breakdown {
  overflow-x: auto;
}

.cost-breakdown h4 {
  margin: 10px 0 8px;
}

.selected-line-price-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  justify-content: stretch;
  gap: 18px;
  margin: 10px 0 14px;
  padding: 10px 14px;
  border: 1px solid #a7d8ca;
  border-radius: 6px;
  background: #edf9f5;
  color: #123b33;
}

.selected-line-price-summary .selected-line-price-label {
  font-size: 14px;
  font-weight: 700;
}

.selected-line-price-summary .selected-line-price-per-sf {
  color: #53657a;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.selected-line-price-summary strong {
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}

.selected-line-price-summary-bottom {
  margin: 16px 0 4px;
  border-top-width: 2px;
}

#expandedBreakdownContext.breakdown-line-context {
  color: #111827;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  padding: 8px 10px;
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f8fafc;
}

.info-strip small {
  color: var(--muted);
}

.steel-detail-table {
  margin-bottom: 16px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .48);
}

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

.modal-panel {
  width: min(1180px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.confirm-backdrop {
  z-index: 90;
  background: rgba(69, 26, 3, .52);
}

.confirm-panel {
  width: min(520px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  border: 2px solid #d97706;
  background: #fff8eb;
  color: #2f2210;
  box-shadow: 0 28px 80px rgba(69, 26, 3, .35);
}

.confirm-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid #d97706;
  border-radius: 50%;
  background: #ffedd5;
  color: #9a3412;
  font-size: 26px;
  font-weight: 900;
}

.confirm-panel .eyebrow {
  color: #9a3412;
}

.confirm-panel h3 {
  margin-bottom: 8px;
}

.confirm-message {
  margin: 0 0 18px;
  color: #3b2f1e;
  font-size: 15px;
  line-height: 1.45;
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.quote-preview-panel {
  width: min(1180px, 96vw);
}

.email-panel {
  width: min(760px, 96vw);
}

.design-contract-panel { width: min(1180px, 96vw); display: grid; gap: 13px; }
.design-contract-note { margin: 0; padding: 10px 12px; border: 1px solid #cfe1eb; border-radius: 6px; background: #f4f9fb; color: #36586c; }
.design-contract-panel > label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; }
.design-contract-panel > small { margin-top: -8px; color: var(--muted); }
.design-contract-panel textarea { width: 100%; min-height: 145px; resize: vertical; overflow-y: hidden; }
.design-contract-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.design-contract-summary div { min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: #f8fafb; }
.design-contract-summary span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.design-contract-summary strong { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.design-contract-locations { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: #f8fbfd; }
.design-contract-locations h4 { margin: 0; }
.design-contract-locations > label:not(.checkbox-row) { display: grid; gap: 5px; font-size: 12px; font-weight: 700; }
.design-contract-table-wrap { overflow-x: auto; }
.design-contract-table-wrap h4 { margin: 0 0 7px; }
.design-contract-table { width: 100%; min-width: 850px; border-collapse: collapse; font-size: 12px; }
.design-contract-table th, .design-contract-table td { padding: 7px 6px; border: 1px solid #b9c8d4; white-space: nowrap; text-align: left; }
.design-contract-table thead th { color: #fff; background: #24466f; }
.design-contract-table th:nth-child(3), .design-contract-table td:nth-child(3),
.design-contract-table th:nth-child(4), .design-contract-table td:nth-child(4),
.design-contract-table th:nth-child(5), .design-contract-table td:nth-child(5),
.design-contract-table th:nth-child(7), .design-contract-table td:nth-child(7) { text-align: center; }
.design-contract-table th:last-child, .design-contract-table td:last-child { text-align: right; }
.design-contract-table tfoot th { background: #edf3f7; }
.design-contract-actions { display: flex; gap: 9px; justify-content: flex-end; }
@media (max-width: 760px) { .design-contract-summary { grid-template-columns: 1fr; } }

.email-panel label {
  color: var(--muted);
}

.email-panel textarea,
.email-panel input {
  font-family: Arial, Helvetica, sans-serif;
}

.email-config-status {
  display: grid;
  gap: 3px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
}

.email-config-status:empty {
  display: none;
}

.email-config-status strong {
  color: var(--ink);
}

.email-config-status span {
  font-size: 13px;
}

.email-config-status.warning {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
}

.email-config-status.testing {
  border-color: var(--button-utility-border);
  background: var(--button-utility-bg);
  color: var(--button-utility-ink);
}

.email-config-status.ready {
  border-color: var(--button-primary-border);
  background: var(--button-primary-bg);
  color: var(--button-primary-ink);
}

.email-warnings {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.email-warnings:empty {
  display: none;
}

.email-warnings p {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  background: #fffbeb;
  color: #92400e;
  font-weight: 700;
}

.email-attachments {
  margin-top: 12px;
}

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

.email-rendered-preview {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.email-rendered-preview h4 {
  margin: 0 0 8px;
}

.email-rendered-preview .email-subsection-header span {
  color: var(--muted);
  font-size: 12px;
}

#emailRenderedPreview {
  padding: 12px;
  border: 1px solid #d7dee8;
  border-radius: 6px;
  background: #fff;
}

.email-mini-quote-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.email-mini-quote-table th,
.email-mini-quote-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #d7dee8;
  text-align: left;
  vertical-align: top;
}

.email-mini-quote-table th {
  background: #f1f5f9;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.email-mini-quote-table th:last-child,
.email-mini-quote-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.email-mini-quote-table .mini-total-row td {
  border-top: 2px solid #98a7ba;
  font-weight: 700;
}

.email-subsection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.email-attachments h4,
.email-history h4 {
  margin: 0;
}

.email-attachment-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  background: #f8fafc;
}

.email-attachment-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.email-attachment-main strong,
.email-attachment-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-attachment-main span {
  color: var(--muted);
  font-size: 13px;
}

.email-history {
  margin-top: 12px;
}

.email-history-row {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  background: #fbfdff;
}

.email-history-row span {
  color: var(--muted);
  font-size: 13px;
}

.email-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.email-status {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 700;
}

.email-status:empty {
  display: none;
}

.email-status.working {
  border-color: var(--button-utility-border);
  background: var(--button-utility-bg);
  color: var(--button-utility-ink);
}

.email-status.warning {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
}

.email-status.success {
  border-color: var(--button-primary-border);
  background: var(--button-primary-bg);
  color: var(--button-primary-ink);
}

.preview-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.quote-preview-content {
  max-height: calc(90vh - 170px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.quote-preview-content .customer-quote,
.quote-preview-content .internal-quote {
  margin: 0 auto;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 10px 26px rgba(16, 42, 67, .12);
}

.quote-preview-content .customer-quote {
  width: min(8.5in, 100%);
  min-height: 10.5in;
  padding: 28px;
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
}

.quote-preview-content .test-quote-banner,
.test-quote-banner {
  border: 1px solid #991b1b;
  color: #991b1b;
  background: #fef2f2;
  text-align: center;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 13px;
  padding: 5px 10px;
  margin-bottom: 10px;
}

.quote-preview-content .internal-quote {
  width: min(11in, 100%);
  min-height: 8in;
  padding: 24px;
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
}

.quote-preview-content .customer-quote header,
.quote-preview-content .internal-quote header,
.quote-preview-content .quote-parties {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #d1d5db;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.quote-preview-content .customer-quote .quote-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(190px, 1fr);
  grid-template-rows: repeat(3, minmax(18px, auto));
  align-items: start;
  column-gap: 18px;
  row-gap: 0;
  padding-bottom: 9px;
  margin-bottom: 11px;
}

.quote-preview-content .customer-quote header div:last-child,
.quote-preview-content .internal-quote header div:last-child {
  display: grid;
  gap: 4px;
  text-align: right;
}

.quote-preview-content .customer-quote .quote-logo-anchor {
  grid-column: 1;
  grid-row: 1 / 4;
  justify-self: start;
  align-self: start;
  min-width: 0;
}

.quote-preview-content .customer-quote .quote-company-line {
  grid-column: 2;
  justify-self: center;
  align-self: start;
  text-align: center;
  line-height: 18px;
  white-space: nowrap;
}

.quote-preview-content .customer-quote .quote-company-name {
  grid-row: 1;
  font-size: 15px;
  font-weight: 800;
}

.quote-preview-content .customer-quote .quote-company-address {
  grid-row: 2;
}

.quote-preview-content .customer-quote .quote-company-contact {
  grid-row: 3;
}

.quote-preview-content .customer-quote .quote-meta-row {
  grid-column: 3;
  display: grid;
  grid-template-columns: 54px 120px;
  column-gap: 6px;
  align-items: start;
  justify-self: end;
  align-self: start;
  line-height: 18px;
  min-width: 180px;
}

.quote-preview-content .customer-quote .quote-meta-identity {
  grid-row: 1;
  font-size: 15px;
  font-weight: 800;
}

.quote-preview-content .customer-quote .quote-meta-date {
  grid-row: 2;
}

.quote-preview-content .customer-quote .quote-meta-expires {
  grid-row: 3;
}

.quote-preview-content .customer-quote .quote-meta-row span:first-child {
  text-align: right;
}

.quote-preview-content .customer-quote .quote-meta-row span:last-child {
  text-align: right;
}

.quote-preview-content .internal-quote .quote-logo-block {
  display: grid;
  gap: 8px;
}

.quote-preview-content .quote-logo {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
}

.quote-notes-page {
  break-before: page;
  page-break-before: always;
}

.quote-notes-page-logo {
  display: flex;
  justify-content: center;
  margin: 0 0 22px;
}

.quote-preview-content .customer-quote h1,
.quote-preview-content .internal-quote h1 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.15;
}

.quote-preview-content .internal-quote h1 {
  color: #991b1b;
}

.quote-preview-content .customer-quote h2,
.quote-preview-content .internal-quote h2 {
  margin: 0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
}

.quote-preview-content .customer-quote p,
.quote-preview-content .customer-quote li,
.quote-preview-content .customer-quote span,
.quote-preview-content .customer-quote small,
.quote-preview-content .internal-quote p,
.quote-preview-content .internal-quote li,
.quote-preview-content .internal-quote span,
.quote-preview-content .internal-quote small {
  font-size: 12px;
  line-height: 1.45;
}

.quote-preview-content .quote-parties h2 {
  margin: 0 0 4px;
  color: #53657a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.quote-preview-content .quote-parties p {
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.quote-preview-content .customer-quote table,
.quote-preview-content .internal-quote table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  table-layout: fixed;
}

.quote-preview-content .customer-quote th,
.quote-preview-content .customer-quote td,
.quote-preview-content .internal-quote th,
.quote-preview-content .internal-quote td {
  border-bottom: 1px solid #d1d5db;
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
  word-break: normal;
}

.quote-preview-content .customer-quote th:nth-child(1),
.quote-preview-content .customer-quote td:nth-child(1) {
  width: 52px;
}

.quote-preview-content .customer-quote th:nth-child(2),
.quote-preview-content .customer-quote td:nth-child(2) {
  width: 52px;
}

.quote-preview-content .customer-quote th:last-child,
.quote-preview-content .customer-quote td:last-child,
.quote-preview-content .internal-quote th:last-child,
.quote-preview-content .internal-quote td:last-child {
  width: 120px;
  text-align: right;
}

.quote-preview-content .quote-extras-table {
  margin-top: 6px;
}

.quote-preview-content .quote-extras-table th:first-child,
.quote-preview-content .quote-extras-table td:first-child {
  width: auto;
}

.quote-preview-content .quote-extras-table th:last-child,
.quote-preview-content .quote-extras-table td:last-child {
  width: 120px;
  text-align: right;
}

.quote-preview-content .quote-total {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: flex-end;
  gap: 8px 24px;
  margin: 22px 0;
  font-size: 18px;
}

.quote-preview-content .quote-total span,
.quote-preview-content .quote-total strong {
  text-align: right;
}

.quote-project-visuals {
  margin: 22px 0;
  padding-top: 16px;
  border-top: 1px solid #d1d5db;
}

.quote-project-visuals h2 {
  margin: 0 0 10px;
}

.quote-project-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quote-project-visual-count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.quote-project-visual {
  display: grid;
  gap: 7px;
  margin: 0;
  break-inside: avoid;
}

.quote-project-visual img {
  display: block;
  width: 100%;
  height: 168px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  object-fit: contain;
}

.quote-project-visual-count-1 .quote-project-visual img {
  height: 250px;
}

.quote-project-visual figcaption {
  color: #374151;
  font-size: 11px;
  line-height: 1.35;
}

.quote-acceptance-block {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #111827;
  break-inside: avoid;
  page-break-inside: avoid;
}

.quote-acceptance-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
}

.quote-acceptance-party {
  display: grid;
  gap: 0;
}

.quote-acceptance-party strong {
  font-size: 12px;
}

.quote-acceptance-name-line,
.quote-acceptance-seller-name {
  min-height: 24px;
  border-bottom: 1px solid #111827;
  padding: 4px 2px 2px;
  font-size: 12px;
  font-weight: 700;
}

.quote-acceptance-seller-name {
  text-align: center;
}

.quote-acceptance-field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 22px;
  border-bottom: 1px solid #111827;
  align-items: end;
  font-size: 12px;
}

.quote-acceptance-signature-field {
  min-height: 44px;
}

.quote-acceptance-field span {
  padding: 2px;
}

.quote-acceptance-logo {
  display: block;
  width: 122px;
  max-width: 100%;
  height: auto;
  margin: 22px auto 0;
}

.preview-toolbar button {
  max-width: none;
}

.quote-preview-content .quote-line-summary td {
  padding-top: 9px;
}

.quote-line-footing-detail {
  display: inline-block;
  margin-top: 2px;
}

.quote-structures-table {
  table-layout: fixed;
}

.quote-structures-table .quote-line-col {
  width: 42px;
}

.quote-structures-table .quote-qty-col {
  width: 42px;
}

.quote-structures-table .quote-representation-col {
  width: 120px;
}

.quote-structures-table .quote-amount-col {
  width: 144px;
}

.quote-structures-table-v2 .quote-unit-price-col,
.quote-structures-table-v2 .quote-amount-col {
  width: 110px;
}

.quote-structures-table-v2 .quote-unit-price-cell,
.quote-structures-table-v2 .quote-amount-cell {
  text-align: right;
  white-space: nowrap;
}

.quote-representation-cell {
  width: 120px;
  text-align: center !important;
  vertical-align: middle !important;
}

.quote-structure-representation {
  display: block;
  width: 82px;
  max-width: 100%;
  height: 50px;
  margin: 0 auto;
  object-fit: contain;
}

.internal-summary-table th:nth-child(1),
.internal-summary-table td:nth-child(1) {
  width: 48px;
}

.internal-summary-table th:nth-child(3),
.internal-summary-table td:nth-child(3) {
  width: 96px;
}

.internal-summary-table th:nth-child(4),
.internal-summary-table td:nth-child(4) {
  width: 112px;
}

.internal-summary-table th:last-child,
.internal-summary-table td:last-child {
  width: 92px;
  text-align: right;
}

.internal-summary-table .internal-line-total-cell {
  white-space: nowrap;
}

.internal-summary-table .internal-line-sqft-cell {
  padding-right: 28px;
  white-space: nowrap;
  color: #53657a;
  font-weight: 600;
  text-align: right;
}

.quote-preview-content .quote-structure-row td,
.quote-preview-content .quote-option-subtotal td {
  background: #f3f5f7;
}

.quote-preview-content .quote-option-row.not-included td {
  color: #374151;
}

.not-included-text,
.included-in-price-text {
  display: inline-block;
  margin-left: 16px;
  font-style: italic;
  color: #111827;
}

.quote-preview-content .internal-line {
  border-top: 2px solid #111827;
  padding-top: 14px;
}

.expanded-cost-breakdown {
  max-height: calc(90vh - 130px);
  overflow: auto;
}

.expanded-cost-breakdown .data-table {
  min-width: 980px;
}

.override-box {
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
}

.override-box summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--nav);
}

.steel-override-select.system-recommendation {
  background: #eaf4ff;
  border-color: #b8d7f3;
}

.steel-override-select.manual-override {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.steel-override-select.steel-call-price,
.freestyle-steel-select.steel-call-price {
  background: #fff0f4;
  border-color: #e78aa5;
}

.steel-call-price-warning {
  display: block;
  margin-top: 3px;
  color: #a61b49;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.steel-call-price-warning[hidden] {
  display: none;
}

.visual-panel.two-post-hip-oversized {
  background: #fff0f4;
  border-color: #e78aa5;
}

.two-post-hip-oversized-warning {
  display: block;
  margin-top: 4px;
  color: #a61b49;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.two-post-hip-oversized-warning[hidden] {
  display: none;
}

.pyramid-support-panel {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.pyramid-support-panel h3 {
  margin: 0;
  font-size: 14px;
}

.pyramid-support-panel .helper-text {
  margin-bottom: 0;
  font-size: 12px;
}

.pyramid-post-total {
  margin: 0;
  white-space: nowrap;
}

.pyramid-support-fields {
  display: grid;
  grid-template-columns: minmax(145px, 0.8fr) minmax(145px, 0.8fr) minmax(190px, 1.1fr) minmax(220px, 1.3fr) minmax(180px, 0.9fr);
  gap: 10px;
  align-items: end;
  margin-top: 8px;
}

.pyramid-support-fields input,
.pyramid-support-fields select {
  min-width: 0;
}

#pyramidRafterExtentSlot {
  display: contents;
}

.pyramid-support-fields .interior-rafter-mode-field {
  width: 100%;
  min-width: 0;
  margin-bottom: 12px;
}

.pyramid-support-fields .interior-rafter-mode-field select {
  width: 100%;
}

@media (max-width: 900px) {
  .pyramid-support-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.warning-box {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #f3b8b8;
  background: #fff1f1;
  border-radius: 6px;
  color: #7f1d1d;
  font-size: 13px;
}

.pyramid-large-post-warning {
  margin: 8px 0;
  background: #fff0f4;
  border-color: #e78aa5;
  color: #a61b49;
  font-weight: 700;
}

.topbar-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.quote-warning-pill {
  width: auto;
  max-width: min(520px, 52vw);
  min-height: 0;
  padding: 3px 9px;
  border: 1px solid #f3b8b8;
  border-radius: 999px;
  background: #fff1f1;
  color: #7f1d1d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-warning-pill[hidden] {
  display: none;
}

.line-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f7;
}

.quote-lines-list {
  display: grid;
  gap: 8px;
}

.quote-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: stretch;
}

.quote-line-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-height: 62px;
  text-align: left;
  border-color: var(--line);
  background: #fff;
}

.quote-line-move-controls {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}

.quote-line-move-button {
  width: 42px;
  min-width: 42px;
  min-height: 29px;
  padding: 2px;
  font-size: 18px;
  line-height: 1;
}

.quote-line-card.active {
  border-color: var(--accent);
  background: #eef8f5;
  box-shadow: inset 4px 0 0 var(--accent);
}

.quote-line-card span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.quote-line-card small {
  color: var(--muted);
}

.quote-line-card .quote-line-price-per-sf {
  display: block;
  align-self: center;
  flex: 0 0 auto;
  margin-left: auto;
  margin-top: -19px;
  margin-right: 34px;
  color: #53657a;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.quote-line-prices {
  display: grid;
  gap: 4px;
  flex: 0 0 190px;
  min-width: 190px;
  color: var(--ink);
  font-size: 15px;
}

.quote-line-prices b,
.quote-line-prices > span {
  display: grid;
  grid-template-columns: minmax(72px, max-content) minmax(92px, 1fr);
  gap: 14px;
  align-items: baseline;
}

.quote-line-prices b span:last-child,
.quote-line-prices > span span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quote-line-prices > span {
  color: var(--muted);
}

@media (max-width: 720px) {
  .quote-line-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-line-move-controls {
    grid-template-columns: 42px 42px;
    grid-template-rows: 34px;
    justify-content: end;
  }
}

.selected-line-item {
  background: #eef8f5;
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
}

.line-item span,
.saved-quote-main span {
  display: grid;
  gap: 4px;
}

.line-item small,
.saved-quote small {
  color: var(--muted);
}

.saved-list {
  display: grid;
  gap: 10px;
}

.quote-library-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(120px, .7fr) minmax(150px, .9fr) minmax(130px, .75fr) minmax(130px, .75fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 6px;
}

.quote-library-filters label {
  margin-bottom: 0;
}

.quote-library-filters button {
  min-height: 40px;
}

.quote-library-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.quote-library-refresh-button {
  margin-left: auto;
}

.quote-library-refresh-status {
  margin: 0;
  white-space: nowrap;
}

.quote-library-sort button.active {
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.22);
}

.saved-quote {
  display: grid;
  gap: 12px;
  border-radius: 6px;
  border: 1px solid #d9e1e8;
  padding: 12px;
  background: #fff;
}

.quote-family-card {
  display: grid;
  gap: 8px;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  background: #fff;
  padding: 10px 12px 12px;
}

.quote-family-header {
  display: grid;
  grid-template-columns: 130px minmax(260px, 1fr) minmax(220px, auto);
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4ebf2;
}

.quote-family-header h4 {
  margin: 0;
  font-size: 17px;
}

.quote-family-header small,
.quote-family-latest span {
  color: var(--muted);
  font-size: 12px;
}

.quote-family-latest {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  min-width: 220px;
}

.quote-family-revisions {
  display: grid;
  gap: 7px;
}

.quote-family-revisions .saved-quote {
  margin-left: 14px;
  border-color: #e1e8ef;
}

.quote-family-revisions .saved-quote.locked-revision {
  background: #f7fafc;
}

.latest-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  width: 62px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e8f6ef;
  color: #166534;
  font-size: 11px;
  font-weight: 700;
}

.manual-adjustment-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  width: 140px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8f2ff;
  color: #174f8a;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.manual-adjustment-slot {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.saved-quote.active-draft {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}

.revision-row {
  gap: 6px;
  padding: 9px 10px;
}

.revision-top-line {
  display: grid;
  grid-template-columns: 58px 70px 190px 150px minmax(90px, auto);
  align-items: center;
  gap: 8px;
}

.revision-label {
  white-space: nowrap;
}

.latest-slot {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.revision-meta-line {
  display: grid;
  grid-template-columns: minmax(180px, 1.15fr) minmax(150px, 1fr) minmax(150px, 1fr);
  gap: 14px;
  align-items: center;
  max-width: 760px;
}

.revision-party {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13px;
}

.revision-customer {
  font-weight: 700;
}

.revision-agent {
  font-weight: 700;
}

.saved-quote-main,
.saved-quote-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.saved-quote-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.saved-quote-actions button {
  min-height: 34px;
  padding: 7px 10px;
  max-width: none;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eaf0f7;
  color: var(--nav);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill.final {
  background: #e8f6ef;
  color: #166534;
}

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

.catalog-columns h4 {
  margin: 0 0 10px;
}

.catalog-columns p {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid #edf2f7;
}

.catalog-columns span {
  color: var(--muted);
  font-size: 13px;
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.source-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 12px;
  background: #fff;
}

.reference-toolbar { display: flex; gap: 10px; margin-bottom: 18px; }
.reference-toolbar input { flex: 1; max-width: 520px; }
.reference-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.reference-group { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fff; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; align-items: stretch; }
.reference-group.active { border-top: 4px solid var(--accent); }
.reference-group.coming-soon { background: #f8fafc; }
.reference-group-heading, .reference-title-row, .reference-actions, .reference-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reference-group-heading { grid-column: 1 / -1; }
.reference-group-heading h4, .reference-title-row h3 { margin: 0; }
.reference-group-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.reference-group-heading > span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.reference-structure-card { width: 100%; max-width: none; min-width: 0; margin: 0; padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; justify-content: stretch; align-items: center; text-align: left; white-space: normal !important; background: #f2fbf7; border: 1px solid #b9dfce; }
.reference-structure-card > span:first-child { display: grid; min-width: 0; gap: 4px; overflow-wrap: anywhere; }
.reference-structure-card .reference-status { justify-self: end; white-space: nowrap; }
.reference-structure-card small { color: var(--muted); }
.structure-reference { max-width: 980px; }
.reference-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #e5e7eb; color: #374151; }
.reference-status.current { background: #dcfce7; color: #166534; }
.reference-status.stale { background: #fee2e2; color: #991b1b; }
.reference-status.draft { background: #fef3c7; color: #92400e; }
.reference-status.reviewed { background: #dbeafe; color: #1e40af; }
.reference-warning { display: grid; gap: 3px; margin: 16px 0; padding: 11px 13px; border: 1px solid #f1aeb5; border-radius: 6px; background: #fff1f2; color: #881337; }
.reference-source-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.reference-source-table th, .reference-source-table td { padding: 9px 11px; border: 1px solid var(--line); text-align: left; }
.reference-source-table th { background: #f1f5f9; }
.reference-source-table.has-rule-lookup { table-layout: fixed; }
.reference-source-table.has-rule-lookup th:nth-child(1) { width: 34%; }
.reference-source-table.has-rule-lookup th:nth-child(2) { width: 31%; }
.reference-source-table.has-rule-lookup th:nth-child(3) { width: 35%; }
.reference-admin-link { appearance: none; border: 0; padding: 0; min-height: 0; background: transparent; color: #075985; font-weight: 700; text-decoration: underline; cursor: pointer; }
.reference-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.reference-notes-grid section { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; }
.reference-notes-grid h4, .reference-notes-grid p { margin: 0; }
.reference-notes-grid p { margin-top: 7px; line-height: 1.5; }
.reference-meta { justify-content: flex-start; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin: 12px 0; }
.reference-actions { justify-content: flex-start; flex-wrap: wrap; }
.structure-reference-print { font-family: Arial, Helvetica, sans-serif; color: #111827; }
.reference-print-date { color: #64748b; font-size: 10px; text-align: right; }

@media (max-width: 900px) {
  .reference-groups, .reference-notes-grid { grid-template-columns: 1fr; }
}

.source-card.draft {
  border-left-color: var(--warning);
}

.source-card span {
  font-size: 13px;
  color: var(--accent-dark);
  font-weight: 700;
}

.source-card.draft span {
  color: var(--warning);
}

.source-card small {
  color: var(--muted);
}

.audit-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
}

.audit-panel h4 {
  margin: 18px 0 10px;
}

.audit-line {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 8px;
  background: #fff;
}

.audit-line summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  cursor: pointer;
}

.audit-body {
  border-top: 1px solid #edf2f7;
  padding: 12px 16px;
}

.audit-body p {
  margin: 0 0 8px;
}

.audit-body ol {
  margin: 8px 0 0 20px;
  padding: 0;
}

.audit-body li {
  margin: 4px 0;
}

.audit-steel-detail-wrap {
  margin: 0 0 12px;
}

.audit-steel-detail-table th,
.audit-steel-detail-table td {
  vertical-align: top;
}

.audit-steel-detail-table td:nth-child(n + 4),
.audit-steel-detail-table th:nth-child(n + 4) {
  white-space: nowrap;
}

.audit-steel-detail-table tfoot th,
.audit-steel-detail-table tfoot td {
  background: #f7f9fb;
  font-weight: 600;
}

.audit-steel-detail-table tfoot th {
  text-align: right;
}

.audit-steel-detail-table .audit-steel-component-total th,
.audit-steel-detail-table .audit-steel-component-total td {
  background: #eaf6f2;
  font-weight: 700;
}

.audit-steel-override {
  display: block;
  margin-top: 2px;
  color: var(--danger);
  white-space: normal;
}

.audit-steel-print-suggested,
.audit-steel-print-qty-detail,
.audit-steel-print-totals {
  display: none;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid #edf2f7;
  border-right: 1px solid #edf2f7;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background: #f8fafc;
  font-weight: 700;
  color: #344054;
}

.data-table.compact th,
.data-table.compact td {
  padding: 7px 8px;
}

.data-table input {
  min-width: 120px;
  border-color: transparent;
  background: transparent;
  min-height: 30px;
  padding: 4px 6px;
}

.data-table select {
  min-width: 120px;
}

.data-table input:focus {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}

.breakdown-subtotal td {
  border-top: 2px solid #cfd8e3;
  background: #f8fafc;
}

.breakdown-subtotal.secondary-subtotal td {
  border-top: 1px solid #cfd8e3;
}

.breakdown-section-row td {
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

.breakdown-total td {
  border-top: 2px solid var(--accent);
  background: #e8f5f1;
}

.selected-row td {
  background: #e8f5f1;
  font-weight: 700;
}

.admin-section {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 8px;
  background: #fff;
  overflow: hidden;
}

.admin-save-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-save-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  background: #eef8f3;
  color: var(--button-primary-ink);
}

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

.admin-save-status.dirty {
  border-color: #e5a900;
  background: #ffe66d;
  color: #704500;
}

button.attention {
  border-color: #d99f00;
  background: #ffd84d;
  color: #624000;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, .28);
}

.catalog-history-panel {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbfd;
}

.catalog-history-panel > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 800;
}

.catalog-history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 10px;
}

.catalog-change-history {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
}

.catalog-history-row {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(170px, .6fr) minmax(240px, 2fr);
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid #dce8ef;
  border-radius: 5px;
  background: #fff;
}

.catalog-history-row small { overflow-wrap: anywhere; }

.admin-control-center {
  display: grid;
  gap: 12px;
  border: 1px solid #cfe0ee;
  border-left: 4px solid var(--button-utility-border);
  border-radius: 6px;
  margin: 0 0 14px;
  padding: 14px;
  background: #fbfdff;
}

.admin-control-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.admin-control-heading h4 {
  margin: 0 0 4px;
}

.admin-result-count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-search-row {
  display: block;
}

.admin-search-field label {
  display: block;
  margin-bottom: 6px;
}

.admin-search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  gap: 14px;
}

.admin-search-controls input,
.admin-search-controls button {
  height: 40px;
  min-height: 40px;
}

.admin-search-controls button {
  min-width: 96px;
  white-space: nowrap;
}

.admin-search-results {
  display: grid;
  gap: 10px;
}

.admin-result-group {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.admin-result-group h5 {
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid #edf2f7;
  background: #f8fafc;
}

.admin-result-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(120px, auto) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-height: auto;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  border-radius: 0;
  text-align: left;
  white-space: normal;
}

.admin-result-row:last-child {
  border-bottom: 0;
}

.admin-result-main {
  display: grid;
  gap: 2px;
}

.admin-result-main small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-result-value {
  color: var(--muted);
  font-size: 13px;
}

.admin-result-action {
  color: var(--button-utility-ink);
  font-weight: 800;
}

.admin-jump-highlight {
  animation: adminJumpHighlight 2.6s ease;
}

@keyframes adminJumpHighlight {
  0%, 70% {
    background: #fff3da;
    box-shadow: inset 0 0 0 2px #e5a94f;
  }
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 0 rgba(229, 169, 79, 0);
  }
}

.admin-table-header {
  min-height: 48px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
}

.admin-table-header::-webkit-details-marker {
  display: none;
}

.admin-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.admin-section-title b {
  color: var(--ink);
}

.admin-section-title small {
  color: var(--muted);
}

.admin-expand-icon::before {
  content: ">";
  display: inline-block;
  color: var(--muted);
  font-weight: 800;
  transition: transform .15s ease;
}

.admin-section[open] .admin-expand-icon::before {
  transform: rotate(90deg);
}

.admin-section .table-wrap,
.admin-section .admin-section-body {
  margin: 0 12px 12px;
}
.contract-defaults-admin { display: grid; gap: 14px; }
.contract-default-section { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #f8fbfd; }
.contract-default-section textarea { min-height: 96px; resize: vertical; }

.admin-table-header,
.admin-table-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-table-actions {
  justify-content: flex-end;
}

.file-upload-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
}

.file-upload-button input {
  display: none;
}

.quote-branding-admin {
  display: grid;
  gap: 14px;
}

.quote-branding-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.quote-logo-admin,
.quote-notes-admin {
  display: grid;
  gap: 10px;
}

.quote-logo-admin h4,
.quote-notes-admin h4 {
  margin: 0;
}

.quote-logo-preview {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.quote-logo-size-control {
  display: grid;
  gap: 4px;
  max-width: 180px;
}

.structure-representation-admin {
  display: grid;
  gap: 10px;
}

.structure-representation-table th:nth-child(1),
.structure-representation-table td:nth-child(1) {
  min-width: 190px;
}

.structure-representation-table th:nth-child(2),
.structure-representation-table td:nth-child(2) {
  min-width: 220px;
}

.structure-representation-table th:nth-child(3),
.structure-representation-table td:nth-child(3) {
  min-width: 210px;
}

.structure-representation-table th:nth-child(4),
.structure-representation-table td:nth-child(4) {
  min-width: 170px;
}

.structure-representation-table td.active-col {
  vertical-align: middle;
  text-align: center;
}

.structure-representation-table td.active-col input[type="checkbox"] {
  display: block;
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0 auto;
  padding: 0;
}

.structure-representation-table tr.unsaved-admin-row td {
  background: #fff7bf;
  border-top: 2px solid #d99f00;
  border-bottom: 2px solid #d99f00;
}

.structure-representation-table tr.unsaved-admin-row td:first-child {
  border-left: 2px solid #d99f00;
}

.structure-representation-table tr.unsaved-admin-row td:last-child {
  border-right: 2px solid #d99f00;
}

.structure-representation-type-cell {
  vertical-align: top !important;
}

.representation-variant-na {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.structure-representation-row-actions {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.structure-representation-save-slot {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
}

.admin-row-unsaved-badge {
  display: inline-flex;
  margin-bottom: 6px;
  padding: 3px 7px;
  border: 1px solid #a66f00;
  border-radius: 999px;
  background: #ffd84d;
  color: #624000;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.representation-image-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.structure-representation-preview {
  width: 96px;
  height: 70px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  object-fit: contain;
}

.representation-image-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 70px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
}

.visual-panel {
  position: relative;
}

.structure-image-chooser {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  min-width: 32px;
  height: 30px;
  padding: 0;
  border-color: #9db7cc;
  background: #f4f9fd;
  color: #245474;
  font-size: 20px;
  line-height: 1;
  z-index: 1;
}

.structure-image-gallery-modal {
  width: min(880px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
}

.structure-image-gallery-grid,
.structure-gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.structure-image-gallery-card,
.structure-gallery-admin-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  text-align: left;
}

.structure-image-gallery-card:hover,
.structure-image-gallery-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(20, 120, 98, 0.14);
}

.structure-gallery-admin-card.unsaved {
  border-color: #d99f00;
  background: #fff7bf;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, .28);
}

.structure-gallery-unsaved-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  padding: 4px 8px;
  border: 1px solid #a66f00;
  border-radius: 999px;
  background: #ffd84d;
  color: #624000;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.structure-image-gallery-preview,
.structure-gallery-admin-card > img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
  border-radius: 5px;
  background: #f7fafc;
  object-fit: contain;
}

.structure-image-gallery-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.structure-image-gallery-name {
  color: var(--ink);
  font-weight: 700;
}

.structure-image-default-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #167a62;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.structure-gallery-admin-card label {
  display: grid;
  gap: 4px;
}

.rich-text-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.rich-text-toolbar button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.quote-note-size-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quote-note-size-control input {
  width: 64px;
  min-height: 32px;
  padding: 4px 8px;
}

.quote-acceptance-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.quote-acceptance-toggle input {
  width: 16px;
  min-height: 16px;
}

.rich-text-editor {
  min-height: 170px;
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  line-height: 1.45;
}

.quote-notes,
.quote-notes p,
.quote-notes div,
.quote-notes li,
.rich-text-editor,
.rich-text-editor p,
.rich-text-editor div,
.rich-text-editor li {
  line-height: 1.45;
}

.rich-text-editor:focus {
  outline: 2px solid #b7d5f0;
  outline-offset: 2px;
}

.rich-text-editor ul,
.rich-text-editor ol,
.quote-notes ul,
.quote-notes ol {
  margin: 0 0 0 20px;
  padding: 0;
}

.rich-text-editor p,
.rich-text-editor div,
.quote-notes p,
.quote-notes div {
  margin: 0 0 8px;
}

.admin-rule-table {
  width: max-content;
  table-layout: fixed;
}

.admin-rule-table th {
  white-space: normal;
  line-height: 1.12;
}

.admin-rule-table th,
.admin-rule-table td {
  padding: 6px;
  vertical-align: middle;
}

.admin-rule-table input,
.admin-rule-table select {
  min-width: 0;
  padding: 4px 5px;
  font-size: 12px;
}

.admin-rule-table .rule-name-col {
  width: 138px;
  min-width: 138px;
}

.admin-rule-table .role-col {
  width: 74px;
  min-width: 74px;
}

.admin-rule-table .umbrella-type-col {
  width: 150px;
  min-width: 150px;
}

.admin-rule-table .number-col {
  width: 70px;
  min-width: 70px;
}

.admin-rule-table .steel-size-col {
  width: 248px;
  min-width: 248px;
}

.admin-rule-table .active-col {
  width: 64px;
  min-width: 64px;
}

.admin-rule-table .note-col {
  width: 220px;
  min-width: 220px;
}

.admin-rule-table .basis-col {
  width: 108px;
  min-width: 108px;
}

.admin-rule-table .legacy-col {
  width: 64px;
  min-width: 64px;
}

.admin-rule-table .rule-name-col input,
.admin-rule-table .note-col input {
  min-height: 44px;
  white-space: normal;
}

.admin-rule-table .number-col input,
.admin-rule-table .active-col input {
  text-align: right;
}

.admin-steel-pricing-table {
  width: max-content;
  table-layout: fixed;
}

.admin-steel-pricing-table th,
.admin-steel-pricing-table td {
  padding: 6px;
  vertical-align: middle;
}

.admin-steel-pricing-table input,
.admin-steel-pricing-table select {
  min-width: 0;
  padding: 4px 5px;
  font-size: 12px;
}

.admin-steel-pricing-table .workbook-row-col {
  width: 76px;
  min-width: 76px;
}

.admin-steel-pricing-table .shape-col {
  width: 112px;
  min-width: 112px;
}

.admin-steel-pricing-table .shape-col select {
  width: 100px;
  min-width: 100px;
}

.admin-steel-pricing-table .class-col {
  width: 58px;
  min-width: 58px;
}

.admin-steel-pricing-table .steel-size-col {
  width: 275px;
  min-width: 275px;
}

.admin-steel-pricing-table .price-col {
  width: 104px;
  min-width: 104px;
}

.admin-steel-pricing-table .powder-area-col {
  width: 104px;
  min-width: 104px;
}

.admin-steel-pricing-table .powder-area-col input {
  min-width: 0;
}

.admin-steel-pricing-table .number-col {
  width: 84px;
  min-width: 84px;
}

.admin-steel-pricing-table .type-col {
  width: 96px;
  min-width: 96px;
}

.admin-steel-pricing-table .stock-lengths-col {
  width: 92px;
  min-width: 92px;
}

.admin-steel-pricing-table .note-col {
  width: 180px;
  min-width: 180px;
}

.admin-steel-pricing-table .workbook-row-col input,
.admin-steel-pricing-table .class-col input,
.admin-steel-pricing-table .number-col input,
.admin-steel-pricing-table .price-col input,
.admin-steel-pricing-table .powder-area-col input {
  text-align: right;
}

.admin-steel-pricing-table .steel-pricing-actions-col {
  position: sticky;
  right: 0;
  width: 220px;
  min-width: 220px;
  background: #fff;
  box-shadow: -1px 0 0 var(--line);
  z-index: 1;
}

.steel-pricing-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.steel-pricing-row-actions .compact-button {
  min-height: 28px;
  padding: 3px 7px;
  font-size: 11px;
}

.admin-steel-pricing-table .new-steel-pricing-row > td {
  background: #fff7d6;
}

.admin-steel-pricing-table .new-steel-pricing-row .steel-pricing-actions-col {
  background: #fff7d6;
}

.user-form {
  grid-template-columns: 1.5fr 1fr 1.5fr .8fr 1fr auto;
  align-items: end;
}

.users-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.user-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.user-row.new-user-row {
  border-color: #9cc9b9;
  background: #f2fbf7;
}

.user-row label {
  min-width: 0;
  margin-bottom: 0;
}

.user-row input,
.user-row select {
  width: 100%;
}

.user-status {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 40px;
}

.user-row-actions {
  display: flex;
  gap: 8px;
}

.user-row-actions button {
  flex: 1;
  min-width: 78px;
}

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

code {
  background: #eef3f7;
  border-radius: 4px;
  padding: 2px 5px;
}

.print-area {
  display: none;
}

.fatal {
  padding: 40px;
}

@media (max-width: 1500px) {
  .selected-agent-edit,
  .rep-edit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rep-edit button {
    justify-self: start;
    width: auto;
    min-width: 108px;
  }
}

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

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1201;
    width: min(320px, 86vw);
    height: 100vh;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 8px 0 24px rgba(15, 35, 52, .24);
  }

  .app-shell.mobile-menu-open .sidebar {
    transform: translateX(0);
  }

  .mobile-menu-toggle {
    display: inline-flex;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1200;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    color: #fff;
    background: var(--nav);
    border-color: var(--nav-soft);
    box-shadow: 0 4px 12px rgba(15, 35, 52, .2);
  }

  .mobile-menu-toggle > span:first-child {
    font-size: 21px;
    line-height: 1;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1199;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 35, 52, .42);
  }

  .app-shell.mobile-menu-open .mobile-menu-backdrop {
    display: block;
  }

  .workspace {
    padding-top: 68px;
  }

  #quoteView.active,
  .agent-layout,
  .agent-workbench,
  .quote-grid,
  .catalog-columns,
  .source-grid,
  .audit-grid {
    grid-template-columns: 1fr;
  }

  .agent-company-column {
    position: static;
  }

  .portal-activity-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-activity-row { grid-template-columns: 1fr 1fr; }
  .portal-activity-main { grid-column: 1 / -1; }

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

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

  .rep-edit button {
    justify-self: start;
  }

  .quote-summary {
    position: static;
  }
}

@media (max-width: 720px) {
  .workspace {
    padding: 68px 16px 16px;
  }

  .topbar {
    margin: -16px -16px 16px;
    padding: 14px 16px;
  }

  .topbar,
  .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .field-row,
  .field-row.three,
  .field-row.four,
  .field-row.five {
    grid-template-columns: 1fr;
  }

  .non-structure-entry-row {
    grid-template-columns: 1fr;
  }

  .standard-dimension-row:has(#dimensionBaySlot:not([hidden])) {
    grid-template-columns: 1fr;
  }

  .standard-dimension-row.umbrella-dimension-layout {
    grid-template-columns: 1fr;
  }

  .selected-line-identity,
  .selected-line-identity:has(.steel-tbar-support-field:not([hidden])),
  .selected-line-identity:has(.steel-polygon-shape-field:not([hidden])),
  .steel-building-compact-row,
  .steel-building-compact-row:has(.steel-polygon-shape-field:not([hidden])),
  .steel-building-compact-row.pyramid-layout {
    grid-template-columns: 1fr;
  }

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

  .selectable-option-details .option-override-reason {
    grid-column: 1 / -1;
  }

  .quote-library-filters {
    grid-template-columns: 1fr;
  }

  .rep-edit {
    grid-template-columns: 1fr;
  }

  .selected-agent-edit {
    grid-template-columns: 1fr;
  }

  .attachment-row {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .attachment-actions {
    justify-content: flex-start;
  }

  .user-form,
  .user-row {
    grid-template-columns: 1fr;
  }
}

@media print {
  @page {
    size: Letter portrait;
    margin: .45in;
  }

  html,
  body {
    width: 8.5in;
    min-width: 0;
    background: #fff;
  }

  html:has(.calculation-audit-print),
  body:has(.calculation-audit-print) {
    width: auto;
  }

  .app-shell {
    display: none;
  }

  .modal-backdrop,
  .toast {
    display: none !important;
  }

  .print-area {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .customer-quote {
    font-family: Arial, Helvetica, sans-serif;
    color: #111827;
    width: 100%;
    max-width: none;
    padding: 0;
    box-sizing: border-box;
  }

  .internal-quote {
    font-family: Arial, Helvetica, sans-serif;
    color: #111827;
    width: 100%;
    max-width: none;
    padding: 0;
    box-sizing: border-box;
  }

  .test-quote-banner {
    border: 2px solid #991b1b;
    color: #991b1b;
    background: #fef2f2;
    text-align: center;
    font-weight: 800;
    letter-spacing: .08em;
    font-size: 15px;
    padding: 8px 10px;
    margin-bottom: 14px;
  }

  .calculation-print {
    font-family: Arial, Helvetica, sans-serif;
    color: #111827;
    width: 100%;
    max-width: none;
    padding: 0;
    box-sizing: border-box;
  }

  .calculation-print header {
    border-bottom: 2px solid #111827;
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  .calculation-print h1 {
    margin: 0 0 6px;
    font-size: 24px;
  }

  .calculation-print h4 {
    margin: 16px 0 6px;
    break-after: avoid;
  }

  .calculation-audit-print {
    width: 100%;
    color: #111827;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10.5px;
  }

  .audit-print-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px;
    border-bottom: 2px solid #111827;
    padding-bottom: 8px;
    margin-bottom: 10px;
  }

  .audit-print-header .eyebrow {
    margin: 0 0 2px;
    font-size: 8px;
  }

  .audit-print-header h1 {
    margin: 0;
    font-size: 22px;
  }

  .audit-print-top-total {
    min-width: 1.8in;
    border: 1px solid #9ca3af;
    padding: 7px 10px;
    text-align: right;
  }

  .audit-print-top-total span,
  .audit-print-bottom-total span {
    display: block;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .audit-print-top-total strong,
  .audit-print-bottom-total strong {
    display: block;
    margin-top: 2px;
    font-size: 17px;
  }

  .audit-print-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 12px;
    border-top: 1px solid #d1d5db;
    border-left: 1px solid #d1d5db;
  }

  .audit-print-meta > div {
    display: grid;
    grid-template-columns: .75in minmax(0, 1fr);
    border-right: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
  }

  .audit-print-meta dt,
  .audit-print-meta dd {
    margin: 0;
    padding: 4px 5px;
  }

  .audit-print-meta dt {
    background: #f3f4f6;
    font-weight: 700;
  }

  .audit-print-content .audit-grid {
    display: block;
  }

  .audit-print-content h4 {
    margin: 12px 0 5px;
    font-size: 12px;
    font-weight: 700;
    break-after: avoid;
  }

  .audit-print-content .helper-text {
    margin: 0 0 6px;
    font-size: 10px;
  }

  .audit-print-content .audit-line {
    margin-bottom: 5px;
    border-radius: 0;
    break-inside: auto;
  }

  .audit-print-content .audit-line summary {
    padding: 5px 7px;
    font-size: 11.5px;
    font-weight: 700;
    break-after: avoid;
  }

  .audit-print-content .audit-line summary span,
  .audit-print-content .audit-line summary strong {
    font-weight: 700;
  }

  .audit-print-content .audit-body {
    padding: 6px 8px;
    font-size: 10px;
  }

  .audit-print-content .audit-body p {
    margin-bottom: 4px;
  }

  .audit-print-content .audit-body ol {
    margin: 4px 0 0 16px;
  }

  .audit-print-content .audit-body li {
    margin: 2px 0;
  }

  .audit-print-content .audit-steel-detail-wrap {
    margin-bottom: 6px;
    overflow: visible;
    border: 0;
  }

  .audit-print-content .audit-steel-detail-table {
    table-layout: fixed;
    font-size: 10px;
  }

  .audit-print-content .audit-steel-detail-table th,
  .audit-print-content .audit-steel-detail-table td {
    padding: 4px;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .audit-print-content .audit-steel-detail-table th:nth-child(1),
  .audit-print-content .audit-steel-detail-table td:nth-child(1) {
    width: 14%;
  }

  .audit-print-content .audit-steel-detail-table th:nth-child(2),
  .audit-print-content .audit-steel-detail-table td:nth-child(2) {
    width: 32%;
  }

  .audit-print-content .audit-steel-detail-table th:nth-child(4),
  .audit-print-content .audit-steel-detail-table td:nth-child(4) {
    width: 14%;
  }

  .audit-print-content .audit-steel-detail-table th:nth-child(6),
  .audit-print-content .audit-steel-detail-table td:nth-child(6) {
    width: 12%;
  }

  .audit-print-content .audit-steel-detail-table th:nth-child(7),
  .audit-print-content .audit-steel-detail-table td:nth-child(7),
  .audit-print-content .audit-steel-detail-table th:nth-child(8),
  .audit-print-content .audit-steel-detail-table td:nth-child(8) {
    width: 14%;
  }

  .audit-print-content .audit-steel-suggested-column,
  .audit-print-content .audit-steel-feet-each-column,
  .audit-print-content .audit-steel-detail-table tfoot {
    display: none;
  }

  .audit-print-content .audit-steel-print-suggested {
    display: block;
    margin-top: 2px;
    font-size: 8.5px;
    color: #4b5563;
  }

  .audit-print-content .audit-steel-print-qty-detail {
    display: inline;
    font-size: 8.5px;
    color: #4b5563;
  }

  .audit-print-content .audit-steel-print-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: -1px 0 7px;
    border: 1px solid #d1d5db;
    border-top: 0;
    font-size: 10px;
  }

  .audit-print-content .audit-steel-print-totals span,
  .audit-print-content .audit-steel-print-totals strong {
    padding: 4px 6px;
    border-top: 1px solid #e5e7eb;
  }

  .audit-print-content .audit-steel-print-totals strong {
    text-align: right;
  }

  .audit-print-content .audit-steel-print-final {
    background: #eaf6f2;
    font-weight: 700;
  }

  .audit-print-content table {
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 10px;
  }

  .audit-print-content thead {
    display: table-header-group;
  }

  .audit-print-content tr {
    break-inside: avoid;
  }

  .audit-print-content th,
  .audit-print-content td {
    padding: 3px 4px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .audit-print-bottom-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
    margin-top: 16px;
    border-top: 2px solid #111827;
    padding-top: 7px;
    text-align: right;
    break-inside: avoid;
  }

  .calculation-print table {
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 8.5px;
    page-break-inside: auto;
  }

  .calculation-print tr {
    page-break-inside: avoid;
  }

  .calculation-print th,
  .calculation-print td {
    border: 1px solid #d1d5db;
    padding: 3px 4px;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .customer-quote header,
  .internal-quote header,
  .quote-parties {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid #d1d5db;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }

  .customer-quote .quote-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(190px, 1fr);
    grid-template-rows: repeat(3, minmax(18px, auto));
    align-items: start;
    column-gap: 18px;
    row-gap: 0;
    padding-bottom: 9px;
    margin-bottom: 11px;
  }

  .customer-quote h1 {
    margin: 0 0 8px;
    font-size: 24px;
  }

  .internal-quote h1 {
    margin: 0 0 8px;
    font-size: 26px;
    color: #991b1b;
  }

  .customer-quote h2,
  .internal-quote h2 {
    font-size: 14px;
    margin: 0 0 8px;
    text-transform: uppercase;
  }

  .internal-quote h3 {
    font-size: 13px;
    margin: 14px 0 6px;
  }

  .customer-quote p,
  .customer-quote li,
  .customer-quote span,
  .internal-quote p,
  .internal-quote li,
  .internal-quote span {
    font-size: 12px;
    line-height: 1.45;
  }

  .quote-parties h2 {
    margin: 0 0 4px;
    color: #53657a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .quote-parties p {
    margin: 0;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
  }

  .customer-quote header div:last-child,
  .internal-quote header div:last-child {
    text-align: right;
    display: grid;
    gap: 4px;
  }

  .customer-quote .quote-logo-anchor {
    grid-column: 1;
    grid-row: 1 / 4;
    justify-self: start;
    align-self: start;
    min-width: 0;
  }

  .customer-quote .quote-company-line {
    grid-column: 2;
    justify-self: center;
    align-self: start;
    text-align: center;
    line-height: 18px;
    white-space: nowrap;
  }

  .customer-quote .quote-company-name {
    grid-row: 1;
    font-size: 15px;
    font-weight: 800;
  }

  .customer-quote .quote-company-address {
    grid-row: 2;
  }

  .customer-quote .quote-company-contact {
    grid-row: 3;
  }

  .customer-quote .quote-meta-row {
    grid-column: 3;
    display: grid;
    grid-template-columns: 54px 120px;
    column-gap: 6px;
    align-items: start;
    justify-self: end;
    align-self: start;
    line-height: 18px;
    min-width: 180px;
  }

  .customer-quote .quote-meta-identity {
    grid-row: 1;
    font-size: 15px;
    font-weight: 800;
  }

  .customer-quote .quote-meta-date {
    grid-row: 2;
  }

  .customer-quote .quote-meta-expires {
    grid-row: 3;
  }

  .customer-quote .quote-meta-row span:first-child {
    text-align: right;
  }

  .customer-quote .quote-meta-row span:last-child {
    text-align: right;
  }

  .internal-quote .quote-logo-block {
    display: grid;
    gap: 8px;
  }

  .quote-logo {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
  }

  .quote-notes-page {
    break-before: page;
    page-break-before: always;
  }

  .quote-notes-page-logo {
    display: flex;
    justify-content: center;
    margin: 0 0 22px;
  }

  .customer-quote table,
  .internal-quote table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
  }

  .customer-quote th,
  .customer-quote td,
  .internal-quote th,
  .internal-quote td {
    border-bottom: 1px solid #d1d5db;
    padding: 7px 8px;
    text-align: left;
    vertical-align: top;
    font-size: 12px;
  }

  .customer-quote th:last-child,
  .customer-quote td:last-child,
  .internal-quote th:last-child,
  .internal-quote td:last-child {
    text-align: right;
  }

  .quote-extras-table th:first-child,
  .quote-extras-table td:first-child {
    width: auto;
  }

  .quote-extras-table th:last-child,
  .quote-extras-table td:last-child {
    width: 120px;
    text-align: right;
  }

  .quote-total {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: flex-end;
    gap: 8px 24px;
    font-size: 18px;
    margin: 22px 0;
  }

  .quote-total span,
  .quote-total strong {
    text-align: right;
  }

  .quote-line-summary td {
    padding-top: 9px;
  }

  .quote-structure-row td,
  .quote-option-subtotal td {
    background: #f3f5f7;
  }

  .not-included-text,
  .included-in-price-text {
    display: inline-block;
    margin-left: 16px;
    font-style: italic;
  }

  .internal-line {
    break-inside: avoid;
    page-break-inside: avoid;
    border-top: 2px solid #111827;
    padding-top: 14px;
    margin-top: 22px;
  }

  .internal-warning {
    border: 1px solid #f3b8b8;
    background: #fff1f1;
    color: #7f1d1d;
    padding: 8px 10px;
    margin: 10px 0;
  }
}

/* Keep Privacy Screen specifications aligned without changing other selectors. */
#privacyScreenFields .privacy-panel-details { grid-template-columns: max(180px, calc((100% - 258px) / 2)) repeat(2, minmax(65px, .6fr)) minmax(100px, 1fr) 100px; row-gap:0; align-items:start; margin-bottom:12px; }
#privacyScreenFields select[name="privacyMaterial"], #privacyScreenFields select[name="privacyMaterial"] option { font-family: Consolas, "Courier New", monospace; font-size: inherit; white-space: pre; }
#privacyScreenFields .privacy-options-row { grid-column:1 / 5; grid-row:2; display:flex; align-items:center; margin-bottom:12px; }
#privacyScreenFields .privacy-options-row > label { width:auto; margin:0; }
#privacyScreenFields .privacy-color-preview { grid-column:5; grid-row:1 / 3; display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:19px; color:var(--muted); font-size:12px; text-align:center; overflow-wrap:anywhere; }
#privacyColorSwatch { display:block; width:80px; height:80px; border:1px solid #a5aeb9; border-radius:4px; flex-shrink:0; }
#privacyColorSwatch[hidden] { display:none; }
@media (max-width:720px) {
  #privacyScreenFields .privacy-panel-details { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #privacyScreenFields .privacy-panel-details > label:first-child { grid-column:1 / -1; }
  #privacyScreenFields .privacy-color-field { grid-column:1; grid-row:3; }
  #privacyScreenFields .privacy-color-preview { grid-column:2; grid-row:3 / 5; }
  #privacyScreenFields .privacy-options-row { grid-column:1; grid-row:4; }
}
@media (max-width:560px) {
  #privacyScreenFields .privacy-options-row { grid-column:1 / -1; grid-row:5; }
}

/* Portal contacts: reuse invitation records, with compact mailing-list controls. */
.portal-contacts-panel { width:min(1200px,96vw); max-height:90vh; overflow:auto; }
.portal-contacts-filters { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.portal-contacts-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.portal-contacts-actions label { display:flex; align-items:center; gap:8px; margin:0; }
#portalContactsModal input[type="checkbox"] { width:16px; height:16px; margin:0; flex:none; }
.portal-contacts-table { overflow:auto; max-height:52vh; }
.portal-contacts-table table { width:100%; border-collapse:collapse; }
.portal-contacts-table th { position:sticky; top:0; background:#eef6f8; text-align:left; }
.portal-contacts-table td,.portal-contacts-table th { padding:10px; border-bottom:1px solid #dbe3e9; }
.portal-contacts-table td { overflow-wrap:anywhere; }
@media (max-width:650px) { .portal-contacts-filters { grid-template-columns:1fr; } }

.privacy-panel-list { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; }
.privacy-panel-choice { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 14px; background:#fff; border:1px solid #d8ceba; color:#253b32; }
.privacy-panel-choice.selected { background:#eef5f0; border:2px solid #253b32; }
#privacyLegacyNotice { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
#privacyLegacyNotice[hidden], #privacyPanelIdentity[hidden], #identityQtySlot[hidden] { display:none; }

#saveQuoteBtn.unsaved-changes {
  border-color: #d99400;
  background: #ffe8a3;
  color: #593c00;
  box-shadow: 0 0 0 2px rgba(217, 148, 0, 0.16);
}