@import url("./assets/features/team-settings.css");
@import url("./assets/features/christmas-lights-crew.css");
@import url("./assets/features/christmas-lights-sales.css"); @import url("./assets/features/report-columns.css"); @import url("./assets/features/christmas-lights-colors.css"); @import url("./assets/features/home-dashboard.css");
:root {
  --navy: #173b5a;
  --deep: #08283d;
  --blue: #12a8d8;
  --teal: #11c7bd;
  --teal-dark: #07958f;
  --ink: #111827;
  --muted: #5b6675;
  --slate: #425466;
  --line: #d8e0e8;
  --paper: #ffffff;
  --soft: #f4f8fb;
  --open: #2563eb;
  --danger: #d71946;
  --success: #07958f;
  --warning: #f59e0b;
  --warning-ink: #5f3300;
  --shadow: 0 22px 70px rgba(5, 24, 44, 0.18);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Quote customer creation stays inside the quote workflow. */
.quote-client-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--surface-line);
  padding-bottom: 10px;
}

.quote-client-picker-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quote-client-picker-head strong {
  color: var(--navy);
  font-size: 14px;
}

.quote-client-picker-head span {
  color: var(--muted);
  font-size: 12px;
}

.quote-client-no-results .button,
.pricing-client-no-results .button {
  justify-self: start;
  margin-top: 5px;
}

.pricing-quick-view .pricing-client-no-results .button {
  min-height: 30px;
  padding: 0;
  color: var(--teal-deep);
  background: transparent;
  font-size: 12px;
  font-weight: 950;
}

.pricing-quick-view .pricing-add-client {
  width: auto;
  min-width: 132px;
  height: 42px;
  padding-inline: 12px;
}

.app-issue-overlay.quote-new-customer-overlay {
  z-index: 1550;
}

.app-issue-modal.quote-new-customer-modal {
  width: min(760px, 100%);
  max-height: min(820px, calc(100dvh - 32px));
  overflow: hidden;
  padding: 0;
}

.quote-new-customer-modal > form {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  max-height: inherit;
}

.quote-new-customer-modal .quote-new-customer-head {
  margin: 0;
  border-bottom: 1px solid var(--surface-line);
  padding: 17px 18px 14px;
}

.quote-new-customer-status {
  margin: 0;
  padding: 0 18px;
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 850;
}

.quote-new-customer-status:empty {
  display: none;
}

.quote-new-customer-status:not(:empty) {
  padding-block: 10px 0;
}

.quote-new-customer-status[data-tone="error"] {
  color: var(--danger);
}

.quote-new-customer-modal > form > .crm-customer-duplicate-alert {
  margin: 10px 18px 0;
}

.quote-new-customer-scroll {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px 18px;
}

.quote-new-customer-section {
  display: grid;
  gap: 11px;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfe;
}

.quote-new-customer-section > header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.quote-new-customer-section > header > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: var(--teal-deep);
  background: var(--mint);
}

.quote-new-customer-section > header svg {
  width: 17px;
  height: 17px;
}

.quote-new-customer-section > header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quote-new-customer-section > header strong {
  color: var(--navy);
  font-size: 14px;
}

.quote-new-customer-section > header em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

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

.quote-new-customer-grid > .is-wide,
.quote-new-customer-grid .crm-client-phone-field {
  grid-column: 1 / -1;
}

.quote-new-customer-property > .button {
  justify-self: start;
}

.quote-new-customer-notes {
  overflow: hidden;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  background: #fff;
}

.quote-new-customer-notes summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.quote-new-customer-notes summary::-webkit-details-marker {
  display: none;
}

.quote-new-customer-notes summary svg {
  width: 16px;
  height: 16px;
}

.quote-new-customer-notes textarea {
  width: calc(100% - 22px);
  min-height: 76px;
  margin: 0 11px 11px;
}

.quote-new-customer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid var(--surface-line);
  padding: 12px 18px max(12px, var(--safe-bottom));
  background: #fff;
}

@media (min-width: 821px) {
  .quote-client-search-row {
    grid-template-columns: minmax(220px, 1fr) minmax(190px, 0.72fr);
  }
}

@media (max-width: 820px) {
  .quote-client-picker-head {
    align-items: flex-start;
  }

  .quote-client-picker-head > div span {
    display: none;
  }

  .quote-client-picker-head .button {
    flex: 0 0 auto;
  }

  .quote-client-search-row {
    grid-template-columns: 1fr;
  }

  .quote-client-search-field {
    grid-column: 1;
  }

  .quote-new-customer-overlay {
    place-items: stretch;
    padding: 0;
  }

  .quote-new-customer-modal {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .quote-new-customer-head {
    padding-top: max(14px, var(--safe-top));
  }

  .quote-new-customer-grid {
    grid-template-columns: 1fr;
  }

  .quote-new-customer-grid > .is-wide,
  .quote-new-customer-grid .crm-client-phone-field {
    grid-column: 1;
  }

  .quote-new-customer-actions .button {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Sales work lives in one compact Pipeline workspace. */
.sales-workspace-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.sales-workspace-tabs {
  display: flex;
  min-width: 0;
  gap: 4px;
}

.sales-workspace-tabs a,
.sales-workspace-reports {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 8px 12px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.sales-workspace-tabs a svg,
.sales-workspace-reports svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.sales-workspace-tabs a:hover,
.sales-workspace-tabs a:focus-visible,
.sales-workspace-reports:hover,
.sales-workspace-reports:focus-visible {
  color: var(--navy);
  border-color: var(--line);
  background: var(--soft);
}

.sales-workspace-tabs a.is-active {
  color: #fff;
  border-color: var(--navy);
  background: var(--navy);
}

.sales-workspace-reports {
  margin-left: auto;
  color: var(--navy);
  border-color: var(--line);
  background: #fff;
}

.quote-followup-queue-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.quote-followup-queue-summary span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.quote-followup-queue-summary strong {
  color: var(--navy);
  font-size: 15px;
}

.quote-followup-queue-summary span.is-overdue {
  color: #9f1239;
  border-color: rgba(190, 24, 93, 0.24);
  background: #fff1f2;
}

.quote-followup-ledger {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.quote-followup-ledger-head,
.quote-followup-card {
  display: grid;
  grid-template-columns: 92px minmax(190px, 1.25fr) minmax(150px, 0.8fr) minmax(145px, 0.75fr) minmax(190px, auto);
  gap: 10px;
  align-items: center;
}

.quote-followup-ledger-head {
  min-height: 38px;
  border-bottom: 1px solid var(--line);
  padding: 7px 12px;
  color: var(--muted);
  background: var(--soft);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-followup-list {
  display: block;
}

.quote-followup-card {
  border: 0;
  border-left: 4px solid var(--open);
  border-radius: 0;
  padding: 10px 12px 10px 8px;
  background: #fff;
}

.quote-followup-card + .quote-followup-card {
  border-top: 1px solid var(--line);
}

.quote-followup-card.is-archived,
.quote-followup-card.is-lost,
.quote-followup-card.is-not-converted,
.quote-followup-card.is-non-responsive,
.quote-followup-card.is-cancelled {
  border-left-color: #94a3b8;
  background: #f8fafc;
}

.quote-followup-priority-cell,
.quote-followup-customer,
.quote-followup-quote,
.quote-followup-next {
  min-width: 0;
}

.quote-followup-priority {
  display: flex;
  gap: 1px;
}

.quote-followup-priority button {
  display: grid;
  place-items: center;
  width: 17px;
  height: 28px;
  border: 0;
  padding: 0;
  color: #cbd5e1;
  background: transparent;
  cursor: pointer;
}

.quote-followup-priority button svg {
  width: 14px;
  height: 14px;
}

.quote-followup-priority button:hover,
.quote-followup-priority button:focus-visible,
.quote-followup-priority button.is-active {
  color: #d97706;
  fill: #fbbf24;
}

.quote-followup-customer {
  display: grid;
  gap: 3px;
  color: inherit;
  text-decoration: none;
}

.quote-followup-customer strong,
.quote-followup-quote strong,
.quote-followup-next strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-followup-customer span,
.quote-followup-quote span,
.quote-followup-quote small,
.quote-followup-next span,
.quote-followup-next small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-followup-quote,
.quote-followup-next {
  display: grid;
  gap: 2px;
}

.quote-followup-next strong {
  font-size: 13px;
}

.quote-followup-next.is-overdue strong {
  color: #be123c;
}

.quote-followup-next.is-due strong {
  color: #047857;
}

.quote-followup-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
}

.quote-followup-actions .icon-button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 1px solid var(--line);
  color: var(--navy);
  background: #fff;
}

.quote-followup-actions .icon-button svg {
  width: 15px;
  height: 15px;
}

.quote-followup-actions .icon-button.is-primary {
  color: #fff;
  border-color: var(--navy);
  background: var(--navy);
}

.quote-followup-actions .icon-button.is-danger {
  color: #be123c;
  border-color: rgba(190, 18, 60, 0.2);
  background: #fff1f2;
}

.quote-followup-details {
  grid-column: 1 / -1;
  border-top: 1px solid transparent;
}

.quote-followup-details[open] {
  margin-top: 2px;
  border-top-color: var(--line);
  padding-top: 10px;
}

.quote-followup-details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  list-style: none;
}

.quote-followup-details summary::-webkit-details-marker {
  display: none;
}

.quote-followup-details summary svg {
  width: 14px;
  height: 14px;
}

.quote-followup-details .quote-followup-checks {
  margin-top: 10px;
}

.quote-followup-details-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

@media (max-width: 1080px) {
  .quote-followup-ledger-head {
    display: none;
  }

  .quote-followup-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 12px;
  }

  .quote-followup-priority-cell {
    grid-column: 1;
    grid-row: 1;
  }

  .quote-followup-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .quote-followup-customer {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .quote-followup-quote {
    grid-column: 1;
    grid-row: 3;
  }

  .quote-followup-next {
    grid-column: 2;
    grid-row: 3;
    min-width: 150px;
    text-align: right;
  }

  .quote-followup-details {
    grid-row: 4;
  }
}

@media (max-width: 720px) {
  .sales-workspace-nav {
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sales-workspace-nav::-webkit-scrollbar {
    display: none;
  }

  .sales-workspace-tabs {
    flex: 0 0 auto;
  }

  .sales-workspace-tabs a,
  .sales-workspace-reports {
    min-height: 38px;
    padding: 8px 10px;
  }

  .sales-workspace-reports {
    flex: 0 0 auto;
  }

  .quote-followup-card {
    grid-template-columns: 1fr;
  }

  .quote-followup-priority-cell,
  .quote-followup-actions,
  .quote-followup-customer,
  .quote-followup-quote,
  .quote-followup-next,
  .quote-followup-details {
    grid-column: 1;
    grid-row: auto;
  }

  .quote-followup-actions {
    grid-row: 1;
    justify-self: end;
  }

  .quote-followup-priority-cell {
    grid-row: 1;
  }

  .quote-followup-next {
    min-width: 0;
    text-align: left;
  }

  .quote-followup-edit,
  .quote-followup-checks {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background:
    linear-gradient(34deg, transparent 0 68%, rgba(17, 199, 189, 0.95) 68% 100%),
    linear-gradient(28deg, var(--teal) 0 29%, var(--blue) 29% 69%, var(--navy) 69% 100%);
  font-family: Arial, Helvetica, sans-serif;
  overscroll-behavior-y: none;
}

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

button,
.button,
a,
summary,
input,
textarea,
select {
  touch-action: manipulation;
}

button,
.button,
input,
select {
  min-height: 44px;
}

button,
a,
input,
textarea,
select {
  min-width: 0;
}

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

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding: max(22px, calc(var(--safe-top) + 14px)) 18px max(22px, calc(var(--safe-bottom) + 14px));
  background: rgba(8, 40, 61, 0.96);
  color: #fff;
  box-shadow: 12px 0 36px rgba(5, 24, 44, 0.2);
  -webkit-overflow-scrolling: touch;
}

.sidebar-mobile-head {
  display: none;
}

.brand-lockup {
  display: block;
  padding: 14px 10px 20px;
}

.brand-lockup img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28));
}

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

.nav-list a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border-radius: 7px;
  padding: 10px 12px;
  font-weight: 800;
}

.nav-list a svg {
  width: 17px;
  height: 17px;
  opacity: 0.84;
}

.nav-list a span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-list a.active,
.nav-list a:hover {
  color: #062d3d;
  background: var(--teal);
}

.nav-command-link {
  border: 1px solid rgba(17, 199, 189, 0.24);
  background: rgba(17, 199, 189, 0.1);
}

.nav-command-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nav-command-copy strong,
.nav-command-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-command-copy strong {
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.nav-command-copy small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.nav-command-link.active .nav-command-copy small,
.nav-command-link:hover .nav-command-copy small {
  color: rgba(6, 45, 61, 0.72);
}

.nav-section {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.035);
}

.nav-section[hidden] {
  display: none;
}

.nav-section summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 6px;
  padding: 6px 8px;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  list-style: none;
}

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

.nav-section summary::after {
  content: "+";
  color: rgba(255, 255, 255, 0.64);
  font-size: 18px;
  line-height: 1;
}

.nav-section-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nav-section-title strong,
.nav-section-title small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-section-title strong {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
}

.nav-section-title small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

.nav-section[open] summary {
  color: #dffefa;
}

.nav-section[open] .nav-section-title small {
  color: rgba(223, 254, 250, 0.72);
}

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

.nav-section-links {
  display: grid;
  gap: 5px;
  margin-top: 6px;
}

.workspace {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: max(18px, calc(var(--safe-top) + 10px)) max(28px, calc(var(--safe-right) + 24px)) 18px max(28px, calc(var(--safe-left) + 24px));
  color: #fff;
  background: rgba(23, 59, 90, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.menu-button svg {
  width: 20px;
  height: 20px;
}

.eyebrow {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

#page-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0;
}

.status-pill,
.clock-status-pill,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(17, 199, 189, 0.18);
  color: #dffefa;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill.is-legacy {
  background: rgba(245, 158, 11, 0.16);
  color: #7c4a03;
}

.clock-status-pill {
  gap: 8px;
  min-width: 112px;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.clock-status-pill.is-on {
  color: #062d3d;
  background: var(--teal);
}

.clock-status-pill.is-on::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #0f8f52;
  box-shadow: 0 0 0 4px rgba(15, 143, 82, 0.16);
}

.clock-status-pill.is-off {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.global-network-banner {
  position: sticky;
  top: 82px;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px max(24px, calc(var(--safe-right) + 22px)) 8px max(24px, calc(var(--safe-left) + 22px));
  color: var(--ink);
  background: #fff8eb;
  border-bottom: 1px solid rgba(245, 158, 11, 0.28);
  box-shadow: 0 10px 24px rgba(5, 24, 44, 0.08);
}

.global-network-banner.is-offline,
.global-network-banner.has-error {
  background: #fff7f7;
  border-bottom-color: rgba(215, 25, 70, 0.28);
}

.global-network-banner.is-syncing {
  background: #effdfb;
  border-bottom-color: rgba(17, 199, 189, 0.32);
}

.global-network-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--warning);
  box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.14);
}

.global-network-banner.is-offline .global-network-dot,
.global-network-banner.has-error .global-network-dot {
  background: var(--danger);
  box-shadow: 0 0 0 5px rgba(215, 25, 70, 0.14);
}

.global-network-banner.is-syncing .global-network-dot {
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(17, 199, 189, 0.14);
}

.global-action-banner {
  position: sticky;
  top: 82px;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 7px max(24px, calc(var(--safe-right) + 22px)) 7px max(24px, calc(var(--safe-left) + 22px));
  color: var(--ink);
  background: #effdfb;
  border-bottom: 1px solid rgba(17, 199, 189, 0.32);
  box-shadow: 0 10px 24px rgba(5, 24, 44, 0.08);
}

.global-network-banner:not([hidden]) + .global-action-banner:not([hidden]) {
  top: 132px;
}

.global-action-banner.needs-attention {
  background: #fff7f7;
  border-bottom-color: rgba(215, 25, 70, 0.28);
}

.global-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.16);
}

.global-action-banner.needs-attention .global-action-icon {
  color: #7d0928;
  background: rgba(215, 25, 70, 0.12);
}

.global-action-icon svg {
  width: 16px;
  height: 16px;
}

.global-action-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.global-action-copy strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}

.global-action-copy span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.28;
}

.global-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.global-network-copy {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  min-width: 0;
}

.global-network-copy strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.global-network-copy span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.issue-report-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.issue-report-button svg {
  width: 16px;
  height: 16px;
}

.issue-report-button:hover,
.issue-report-button:focus-visible {
  border-color: rgba(17, 199, 189, 0.58);
  background: rgba(17, 199, 189, 0.18);
}

.topbar-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.global-search {
  position: relative;
  flex: 1 1 360px;
  max-width: 520px;
  min-width: 240px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 30px;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  padding: 6px 7px 6px 10px;
  background: rgba(255, 255, 255, 0.1);
}

.global-search > svg {
  width: 17px;
  height: 17px;
  color: rgba(255, 255, 255, 0.72);
}

.global-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}

.global-search input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.global-search-clear {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  padding: 6px;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  cursor: pointer;
}

.global-search-clear svg {
  width: 16px;
  height: 16px;
}

.create-menu-wrap {
  position: relative;
}

.create-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 0;
  border-radius: 7px;
  padding: 8px 12px;
  color: #06343d;
  background: var(--teal);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(5, 24, 44, 0.16);
}

.create-button-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  font-size: 16px;
  line-height: 1;
}

.create-button-icon svg {
  display: none;
  width: 14px;
  height: 14px;
}

.create-button-icon::before,
.create-icon::before {
  content: attr(data-fallback);
}

body.icons-ready .create-button-icon::before,
body.icons-ready .create-icon::before {
  display: none;
}

body.icons-ready .create-button-icon svg,
body.icons-ready .create-icon svg {
  display: block;
}

.create-button:hover,
.create-button[aria-expanded="true"] {
  background: #4bf0e5;
}

.create-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: min(350px, calc(100vw - 24px));
  display: grid;
  gap: 6px;
  border: 1px solid rgba(216, 224, 232, 0.9);
  border-radius: 8px;
  padding: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 22px 48px rgba(5, 24, 44, 0.22);
}

.create-menu-heading {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  padding: 7px 8px 10px;
}

.create-menu-heading strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.create-menu-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.create-menu-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 3px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.create-menu-item::after {
  content: ">";
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.create-menu-item:hover {
  border-color: rgba(17, 199, 189, 0.42);
  background: rgba(17, 199, 189, 0.1);
}

.create-menu-item.featured {
  border-color: rgba(17, 199, 189, 0.38);
  background: rgba(17, 199, 189, 0.14);
}

.create-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(17, 199, 189, 0.36);
  border-radius: 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 13px;
  font-weight: 900;
}

.create-icon svg {
  display: none;
  width: 18px;
  height: 18px;
}

.create-item-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.create-item-copy strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
}

.create-item-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.create-menu-item em {
  border-radius: 999px;
  padding: 4px 7px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.2);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.create-menu-item[data-create-pillar="sales"] em {
  color: #064e67;
  background: rgba(15, 143, 185, 0.15);
}

.create-menu-item[data-create-pillar="operations"] em {
  color: #075e59;
  background: rgba(17, 199, 189, 0.18);
}

.create-menu-item[data-create-pillar="admin"] em {
  color: #17406b;
  background: rgba(37, 99, 235, 0.13);
}

.create-menu-item.featured::after {
  content: "";
}

.logout-button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 6px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.logout-button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.sidebar-account-actions {
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(8, 40, 61, 0), rgba(8, 40, 61, 0.98) 28%);
}

.sidebar-logout-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-logout-button svg {
  width: 16px;
  height: 16px;
}

.sidebar-issue-button {
  width: 100%;
  color: var(--navy);
  background: #eefdfb;
  border-color: rgba(17, 199, 189, 0.42);
  margin-bottom: 8px;
}

.sidebar-issue-button:hover,
.sidebar-issue-button:focus-visible {
  color: var(--navy);
  background: #d9fbf6;
}

.is-login .sidebar {
  display: none;
}

.is-login .app-shell {
  grid-template-columns: 1fr;
}

.is-login .menu-button,
.is-login .status-pill,
.is-login .clock-status-pill,
.is-login .issue-report-button,
.is-login .global-search,
.is-login .mobile-tabbar {
  display: none;
}

.is-public-route .sidebar,
.is-public-route .topbar,
.is-public-route .global-network-banner,
.is-public-route .global-action-banner,
.is-public-route .mobile-tabbar {
  display: none !important;
}

.is-public-route .app-shell {
  grid-template-columns: 1fr;
}

.is-public-route .workspace {
  min-width: 0;
}

.is-public-route #app {
  max-width: 980px;
  padding-top: max(18px, var(--safe-top));
  padding-bottom: max(28px, var(--safe-bottom));
}

body.is-public-route:has(.client-hub) {
  background: #f3f6f8;
  overscroll-behavior-y: auto;
}

body.is-public-route:has(.client-hub) #app {
  max-width: none;
  padding: 0;
}

.client-hub {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.client-hub-topbar {
  position: sticky;
  z-index: 12;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 96px;
  border-bottom: 1px solid #d9e2e8;
  padding: 10px clamp(18px, 3vw, 42px);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.client-hub-brand,
.client-hub-top-actions,
.client-hub-customer,
.client-hub-record,
.client-hub-record-meta,
.client-hub-payment-method,
.client-hub-payment-actions {
  display: flex;
  align-items: center;
}

.client-hub-brand {
  gap: 12px;
  min-width: 0;
}

.client-hub-brand img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.client-hub-brand > div,
.client-hub-customer > div,
.client-hub-record > div:not(.client-hub-record-meta),
.client-hub-payment-method > div:not(.client-hub-payment-actions) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.client-hub-brand strong {
  color: var(--deep);
  font-size: 15px;
  line-height: 1.1;
}

.client-hub-brand span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.client-hub-top-actions {
  gap: 8px;
  flex: 0 0 auto;
}

.client-hub-top-actions .icon-button,
.client-hub-payment-actions .icon-button {
  width: 44px;
  min-width: 44px;
  border: 1px solid #cfdbe3;
  padding: 0;
  background: #fff;
  color: var(--navy);
}

.client-hub-top-actions .icon-button:hover,
.client-hub-payment-actions .icon-button:hover {
  border-color: #9fb4c2;
  background: #f4f8fa;
}

.client-hub-top-actions svg,
.client-hub-refer svg {
  width: 18px;
  height: 18px;
}

.client-hub-contact-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: clamp(18px, 3vw, 42px);
  display: grid;
  gap: 4px;
  width: 210px;
  border: 1px solid #cad7df;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(5, 24, 44, 0.16);
}

.client-hub-contact-menu[hidden] {
  display: none;
}

.client-hub-contact-menu > strong {
  padding: 7px 9px 5px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.client-hub-contact-menu a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--deep);
  font-weight: 900;
  text-decoration: none;
}

.client-hub-contact-menu a:hover,
.client-hub-contact-menu a:focus-visible {
  background: #e7f8f6;
}

.client-hub-contact-menu svg {
  width: 18px;
  height: 18px;
}

.client-hub-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-width: 0;
  min-height: calc(100vh - 96px);
  min-height: calc(100dvh - 96px);
}

.client-hub-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid #d9e2e8;
  padding: 22px 14px;
  background: #f8fafb;
}

.client-hub-customer {
  gap: 10px;
  min-width: 0;
  border-bottom: 1px solid #d9e2e8;
  padding: 0 4px 18px;
}

.client-hub-customer > span {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  font-size: 14px;
  font-weight: 950;
}

.client-hub-customer strong,
.client-hub-customer small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-hub-customer strong {
  color: var(--deep);
  font-size: 14px;
}

.client-hub-customer small {
  color: var(--muted);
  font-size: 11px;
}

.client-hub-sidebar nav {
  display: grid;
  gap: 5px;
}

.client-hub-nav-button,
.client-hub-sidebar-referral {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  padding: 9px 11px;
  color: #4d6171;
  background: transparent;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.client-hub-nav-button:hover,
.client-hub-nav-button:focus-visible,
.client-hub-nav-button.is-active {
  color: var(--deep);
  background: #e7f8f6;
}

.client-hub-nav-button.is-active {
  box-shadow: inset 3px 0 0 var(--teal-dark);
}

.client-hub-nav-button svg,
.client-hub-sidebar-referral svg {
  width: 18px;
  height: 18px;
}

.client-hub-nav-button em {
  min-width: 22px;
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--navy);
  background: #fff;
  font-size: 10px;
  font-style: normal;
  text-align: center;
}

.client-hub-sidebar-referral {
  grid-template-columns: 20px minmax(0, 1fr);
  margin-top: auto;
  border: 1px solid rgba(17, 199, 189, 0.28);
  color: var(--navy);
  background: #fff;
}

.client-hub-mobile-nav {
  display: none;
}

.client-hub-content {
  min-width: 0;
  padding: 32px clamp(28px, 4vw, 64px) 52px;
  background: #fff;
}

.client-hub-section-heading,
.client-hub-document-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.client-hub-section-heading h1,
.client-hub-document-heading h1 {
  margin: 0;
  color: var(--deep);
  font-size: 28px;
  line-height: 1.05;
}

.client-hub-section-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.client-hub-back-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  border: 1px solid #cfdbe3;
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--deep);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}

.client-hub-back-button:hover,
.client-hub-back-button:focus-visible {
  border-color: #9fb4c2;
  background: #f4f8fa;
}

.client-hub-back-button svg {
  width: 18px;
  height: 18px;
}

.client-hub-document-list {
  display: grid;
  overflow: hidden;
  border: 1px solid #d9e2e8;
  border-radius: 8px;
}

.client-hub-document-item {
  display: grid;
  grid-template-columns: 42px minmax(220px, 1fr) minmax(110px, auto) auto 20px;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  border: 0;
  border-bottom: 1px solid #e3eaee;
  padding: 14px 16px;
  color: var(--deep);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.client-hub-document-item:last-child {
  border-bottom: 0;
}

.client-hub-document-item:hover,
.client-hub-document-item:focus-visible {
  background: #f6fbfb;
}

.client-hub-document-copy,
.client-hub-document-total {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-hub-document-copy strong,
.client-hub-document-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-hub-document-copy strong,
.client-hub-document-total strong {
  font-size: 15px;
}

.client-hub-document-copy small,
.client-hub-document-total small {
  color: var(--muted);
  font-size: 12px;
}

.client-hub-document-total {
  justify-items: end;
}

.client-hub-document-arrow {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.client-hub-record-list,
.client-hub-wallet-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #d9e2e8;
  border-radius: 8px;
}

.client-hub-record,
.client-hub-payment-method {
  min-width: 0;
  gap: 14px;
  border-bottom: 1px solid #e3eaee;
  padding: 15px 16px;
  background: #fff;
}

.client-hub-record:last-child,
.client-hub-payment-method:last-child {
  border-bottom: 0;
}

.client-hub-record-icon,
.client-hub-payment-method > span {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 7px;
  color: var(--navy);
  background: #e7f8f6;
}

.client-hub-record-icon svg,
.client-hub-payment-method > span svg {
  width: 20px;
  height: 20px;
}

.client-hub-record > div:not(.client-hub-record-meta),
.client-hub-payment-method > div:not(.client-hub-payment-actions) {
  flex: 1 1 auto;
}

.client-hub-record strong,
.client-hub-payment-method strong {
  color: var(--deep);
  font-size: 15px;
}

.client-hub-record span:not(.crm-status),
.client-hub-record small,
.client-hub-payment-method small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.client-hub-record-meta {
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
}

.client-hub-record-meta time {
  min-width: 86px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.client-hub-date-tile {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(23, 59, 90, 0.14);
  border-radius: 7px;
  color: var(--navy);
  background: #f8fafb;
}

.client-hub-date-tile strong {
  font-size: 20px;
  line-height: 1;
}

.client-hub-date-tile em {
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.client-hub-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 220px;
  place-content: center;
  padding: 28px;
  color: var(--muted);
  background: #fff;
  text-align: center;
}

.client-hub-empty svg {
  width: 32px;
  height: 32px;
  color: var(--teal-dark);
}

.client-hub-empty strong {
  color: var(--deep);
  font-size: 17px;
}

.client-hub-empty span {
  max-width: 360px;
  font-size: 13px;
  line-height: 1.4;
}

.client-hub-section-loading {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  min-height: 190px;
  border: 1px solid #d9e2e8;
  border-radius: 8px;
  padding: 18px;
  background: #fff;
}

.client-hub-section-loading > span {
  height: 78px;
  border-radius: 7px;
  background: linear-gradient(100deg, #eef3f5 18%, #f8fafb 42%, #eef3f5 66%);
  background-size: 240% 100%;
  animation: client-hub-loading-sweep 1.25s ease-in-out infinite;
}

.client-hub-section-loading > strong {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

@keyframes client-hub-loading-sweep {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.client-hub-wallet-list {
  margin-bottom: 16px;
}

.client-hub-history-group {
  display: grid;
  gap: 9px;
  margin-bottom: 26px;
}

.client-hub-history-group > h2 {
  margin: 0;
  color: var(--slate);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.client-hub-payment-actions {
  gap: 8px;
  margin-left: auto;
}

.client-hub-payment-actions > button:not(.icon-button) {
  min-height: 36px;
  border: 0;
  padding: 4px 8px;
  color: var(--navy);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.client-hub-payment-actions em {
  border-radius: 999px;
  padding: 5px 9px;
  color: #075f3b;
  background: #e8f8ef;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.client-hub-wallet-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.client-hub-wallet-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  border: 1px solid #cfdbe3;
  border-radius: 8px;
  padding: 14px;
  color: var(--deep);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.client-hub-wallet-option.is-primary {
  border-color: rgba(7, 149, 143, 0.48);
  background: #f2fcfa;
}

.client-hub-wallet-option:hover,
.client-hub-wallet-option:focus-visible {
  border-color: var(--teal-dark);
  box-shadow: 0 0 0 3px rgba(7, 149, 143, 0.09);
}

.client-hub-wallet-option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.client-hub-wallet-option > svg:first-child {
  width: 26px;
  height: 26px;
  color: var(--teal-dark);
}

.client-hub-wallet-option > svg:last-child {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.client-hub-wallet-option > span {
  display: grid;
  gap: 3px;
}

.client-hub-wallet-option strong {
  font-size: 14px;
}

.client-hub-wallet-option small {
  color: var(--muted);
  font-size: 11px;
}

.client-hub-wallet-security {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  max-width: 640px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.client-hub-wallet-security svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.client-hub-notice {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 7px;
  padding: 11px 13px;
  color: var(--warning-ink);
  background: #fff8eb;
  font-weight: 850;
}

.client-hub-notice.is-success {
  border-color: rgba(7, 149, 143, 0.25);
  color: #075f3b;
  background: #effdf8;
}

.client-hub-notice svg {
  width: 18px;
  height: 18px;
}

.client-hub-loading,
.client-hub-locked {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  place-content: center;
  color: var(--muted);
  text-align: center;
}

.client-hub-loading img,
.client-hub-locked img {
  width: 132px;
  height: 132px;
  object-fit: contain;
}

.client-hub-locked h1,
.client-hub-locked p {
  margin: 0;
}

.client-hub-locked h1 {
  color: var(--deep);
}

.quote-public-shell.is-client-hub-document {
  max-width: 1120px;
  margin: 0 auto;
}

.quote-public-card.is-client-hub-document {
  min-height: 0;
  padding: 28px 32px;
  box-shadow: none;
}

.quote-document-top.is-client-hub-document {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: 28px;
  border-bottom: 1px solid #d9e2e8;
  padding-bottom: 22px;
}

@media (max-width: 760px) {
  body.is-public-route:has(.client-hub) #app {
    padding: 0;
  }

  .client-hub {
    min-height: 100vh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .client-hub-topbar {
    min-height: 68px;
    padding: max(8px, var(--safe-top)) max(10px, var(--safe-right)) 8px max(10px, var(--safe-left));
  }

  .client-hub-brand {
    gap: 8px;
  }

  .client-hub-brand img {
    width: 56px;
    height: 56px;
  }

  .client-hub-brand > div,
  .client-hub-refer span {
    display: none;
  }

  .client-hub-top-actions {
    gap: 5px;
  }

  .client-hub-top-actions .button,
  .client-hub-top-actions .icon-button {
    min-width: 40px;
    width: 40px;
    min-height: 40px;
    padding: 0;
  }

  .client-hub-mobile-nav {
    position: sticky;
    z-index: 11;
    top: calc(max(8px, var(--safe-top)) + 60px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid #d9e2e8;
    padding: 0 max(3px, var(--safe-right)) 0 max(3px, var(--safe-left));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
  }

  .client-hub-mobile-nav .client-hub-nav-button {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 3px;
    min-height: 54px;
    border-radius: 0;
    padding: 7px 2px 6px;
    font-size: 9px;
    line-height: 1;
    text-align: center;
  }

  .client-hub-mobile-nav .client-hub-nav-button.is-active {
    box-shadow: inset 0 -3px 0 var(--teal-dark);
  }

  .client-hub-mobile-nav .client-hub-nav-button svg {
    width: 18px;
    height: 18px;
  }

  .client-hub-layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .client-hub-sidebar {
    display: none;
  }

  .client-hub-content {
    padding: 18px max(12px, var(--safe-right)) max(28px, var(--safe-bottom)) max(12px, var(--safe-left));
  }

  .client-hub-contact-menu {
    right: max(10px, var(--safe-right));
  }

  .client-hub-section-heading,
  .client-hub-document-heading {
    display: grid;
    align-items: stretch;
    margin-bottom: 14px;
  }

  .client-hub-section-heading h1,
  .client-hub-document-heading h1 {
    font-size: 23px;
  }

  .client-hub-document-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .client-hub-document-item {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    gap: 10px;
    min-height: 84px;
    padding: 12px;
  }

  .client-hub-document-item .crm-status {
    grid-column: 2;
    justify-self: start;
  }

  .client-hub-document-total {
    grid-column: 2;
    grid-row: 2;
    justify-items: start;
  }

  .client-hub-document-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .client-hub-record,
  .client-hub-payment-method {
    align-items: flex-start;
    gap: 10px;
    padding: 13px 12px;
  }

  .client-hub-record-icon,
  .client-hub-payment-method > span {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .client-hub-record-meta {
    display: grid;
    justify-items: end;
    gap: 5px;
  }

  .client-hub-record-meta time {
    min-width: 0;
    font-size: 10px;
  }

  .client-hub-payment-method {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .client-hub-payment-actions {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
  }

  .client-hub-wallet-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-hub-section-loading {
    grid-template-columns: minmax(0, 1fr);
    min-height: 230px;
  }

  .client-hub-section-loading > span:nth-child(n + 3) {
    display: none;
  }

  .quote-public-card.is-client-hub-document {
    gap: 16px;
    padding: 14px;
  }

  .quote-document-top.is-client-hub-document {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 14px;
  }

  .quote-document-top.is-client-hub-document .quote-recipient {
    max-width: none;
  }

  .quote-document-top.is-client-hub-document .quote-recipient strong {
    font-size: 19px;
  }
}

#app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px max(28px, var(--safe-right)) max(28px, calc(var(--safe-bottom) + 28px)) max(28px, var(--safe-left));
}

.mobile-tabbar {
  display: none;
}

.login-screen {
  width: 100%;
  min-width: 0;
  min-height: calc(100vh - 124px);
  display: grid;
  place-items: center;
}

.login-panel {
  width: min(100%, 460px);
  max-width: calc(100vw - 24px);
  min-width: 0;
  display: grid;
  gap: 18px;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 8px;
  padding: 26px;
  background: #fff;
  box-shadow: var(--shadow);
}

.login-panel img {
  width: min(260px, 78%);
  justify-self: center;
}

.login-panel h2 {
  margin: 0 0 8px;
  font-size: 30px;
  letter-spacing: 0;
}

.login-panel p {
  overflow-wrap: anywhere;
}

.login-form {
  display: grid;
  gap: 12px;
}

.login-form label {
  display: grid;
  gap: 6px;
  font-weight: 900;
}

.login-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--soft);
}

.login-form input:focus {
  outline: 3px solid rgba(18, 168, 216, 0.18);
  border-color: var(--blue);
}

.login-help-link {
  justify-self: center;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.password-input-row {
  width: 100%;
  min-width: 0;
  display: flex;
  gap: 8px;
}

.password-input-row input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
}

.password-toggle {
  flex: 0 0 70px;
  min-width: 70px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--navy);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}

.password-toggle:hover {
  border-color: var(--teal);
  background: rgba(17, 199, 189, 0.12);
}

.form-alert {
  margin: 0;
  border: 1px solid rgba(215, 25, 70, 0.22);
  border-radius: 6px;
  padding: 10px 12px;
  color: #8c1131;
  background: rgba(215, 25, 70, 0.08);
  font-weight: 800;
}

.time-clock-view .section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: 14px;
  align-items: start;
}

.time-clock-view.is-personal .section-body {
  grid-template-columns: minmax(0, 1fr);
}

.time-clock-view [data-time-next-move] {
  grid-column: 1 / -1;
  min-width: 0;
}

.time-next-move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.3);
  border-radius: 8px;
  padding: 13px;
  background: #f4fffd;
}

.time-next-move.is-needs-work,
.time-next-move.is-warn {
  border-color: rgba(240, 180, 41, 0.44);
  background: #fffaf0;
}

.time-next-move.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f2fff6;
}

.time-next-move span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.time-next-move strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.12;
}

.time-next-move p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.time-next-move-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.time-next-move-action em {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
}

.time-clock-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
}

.time-clock-card,
.time-live-panel {
  min-width: 0;
}

.time-clock-card.is-on {
  border-color: rgba(7, 149, 143, 0.42);
  background: rgba(17, 199, 189, 0.08);
}

.time-clock-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 28px;
  letter-spacing: 0;
}

.time-clock-card .clock-digital {
  font-size: clamp(48px, 10vw, 96px);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

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

.time-clock-actions .button:only-child {
  grid-column: 1 / -1;
}

.danger-button {
  background: var(--danger) !important;
}

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

.time-review {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.time-live-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 14px;
  background: rgba(17, 199, 189, 0.06);
}

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

.time-live-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(7, 149, 143, 0.22);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
}

.time-live-row div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.time-live-row strong {
  color: var(--navy);
  line-height: 1.2;
}

.time-live-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.time-live-row em {
  flex: 0 0 auto;
  color: #075e59;
  font-style: normal;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.section-heading.compact {
  padding: 0;
  background: transparent;
  color: var(--ink);
}

.time-entry-card.is-open {
  border-color: rgba(7, 149, 143, 0.36);
  box-shadow: 0 12px 32px rgba(7, 149, 143, 0.12);
}

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

.time-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.time-entry-row div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.time-entry-row strong {
  color: var(--navy);
}

.time-entry-row span {
  color: var(--muted);
  font-size: 14px;
}

.time-entry-row em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.time-entry-row.is-open {
  border-color: rgba(7, 149, 143, 0.36);
  background: rgba(17, 199, 189, 0.08);
}

.time-entry-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.time-empty-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 46px;
  border: 1px dashed rgba(20, 58, 86, 0.16);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: #fff;
}

.time-empty-row span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(24, 189, 181, 0.72);
}

.time-empty-row p {
  margin: 0;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
}

.time-payroll-panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.time-payroll-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.time-payroll-header h3 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 24px;
}

.time-payroll-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.time-payroll-tabs .button {
  flex: 0 0 auto;
}

.time-payroll-tabs .button.active {
  border-color: var(--navy);
  color: #fff;
  background: var(--navy);
}

.time-payroll-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.week-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.week-switcher .icon-button,
.time-entry-editor .icon-button {
  border: 1px solid var(--line);
  color: var(--navy);
  background: #fff;
}

.compact-field {
  min-width: min(100%, 260px);
}

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

.time-payroll-summary article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.time-payroll-summary span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.time-payroll-summary strong {
  color: var(--navy);
  font-size: 24px;
}

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

.mini-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--navy);
  background: rgba(20, 64, 96, 0.08);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.time-payroll-note {
  margin: 0;
  border-left: 3px solid var(--teal);
  padding-left: 10px;
  color: var(--ink);
}

.time-audit {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.time-audit summary {
  color: var(--navy);
  cursor: pointer;
  font-weight: 900;
}

.time-audit p {
  display: grid;
  gap: 2px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.time-audit p strong {
  color: var(--navy);
}

.time-audit p em {
  color: var(--ink);
  font-style: normal;
}

.time-entry-editor {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 199, 189, 0.42);
  border-radius: 8px;
  padding: 14px;
  background: rgba(17, 199, 189, 0.08);
}

.time-entry-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-wide {
  grid-column: 1 / -1;
}

.danger-text {
  color: var(--danger) !important;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 238px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 26px;
  align-items: center;
  border-radius: 8px;
  padding: 30px;
  color: #fff;
  background: var(--deep);
  box-shadow: var(--shadow);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  clip-path: polygon(0 0, 72% 0, 100% 100%, 0 100%);
}

.hero > * {
  position: relative;
}

.hero h2 {
  margin: 0 0 12px;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0;
}

.hero p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 17px;
  line-height: 1.48;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hero img {
  width: 100%;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.28));
}

.ops-dashboard,
.crew-dashboard {
  display: grid;
  gap: 16px;
}

.ops-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr);
  gap: 18px;
  align-items: center;
  border: 1.5px solid rgba(23, 59, 90, 0.14);
  border-radius: 8px;
  padding: 20px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(17, 199, 189, 0.2), rgba(17, 199, 189, 0) 44%),
    var(--deep);
  box-shadow: var(--shadow);
}

.ops-hero.crew {
  background:
    linear-gradient(135deg, rgba(23, 180, 234, 0.24), rgba(23, 180, 234, 0) 48%),
    var(--deep);
}

.ops-hero h2 {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: 0;
}

.ops-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.45;
}

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

.ops-actions .button {
  justify-content: center;
  width: 100%;
}

.dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: -4px 2px 0;
  border: 1px solid rgba(23, 59, 90, 0.14);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--slate);
  background: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.dashboard-status::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.1);
}

.dashboard-status.is-refreshing::before {
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(17, 199, 189, 0.14);
}

.dashboard-status.is-saved::before {
  background: var(--warning);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.13);
}

.dashboard-status.is-warning,
.dashboard-status.is-offline {
  border-color: rgba(198, 55, 55, 0.24);
  color: #8a1d1d;
  background: #fff7f7;
}

.dashboard-status.is-warning::before,
.dashboard-status.is-offline::before {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(198, 55, 55, 0.13);
}

.role-focus-panel,
.crm-next-action-banner {
  border: 1px solid rgba(23, 59, 90, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px rgba(5, 24, 44, 0.08);
}

.role-focus-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.role-focus-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.role-focus-head div {
  display: grid;
  gap: 3px;
}

.role-focus-head span,
.role-focus-card span,
.crm-next-action-main em {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-focus-head strong {
  color: var(--navy);
  font-size: 18px;
}

.role-focus-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.role-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.role-focus-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 10px;
  min-height: 108px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--navy);
  border-radius: 8px;
  padding: 12px;
  color: inherit;
  background: #fff;
  text-decoration: none;
}

.role-focus-card.is-primary {
  border-left-color: var(--blue);
}

.role-focus-card.is-teal {
  border-left-color: var(--teal);
}

.role-focus-card.is-danger {
  border-left-color: var(--danger);
}

.role-focus-icon {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.14);
}

.role-focus-icon svg {
  width: 19px;
  height: 19px;
}

.role-focus-card strong {
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
}

.role-focus-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.jobber-home-header {
  display: grid;
  gap: 2px;
  min-height: 92px;
  align-content: center;
}

.jobber-home-header p {
  max-width: 760px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(5, 24, 44, 0.28);
}

.jobber-home-header h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(5, 24, 44, 0.28);
}

.jobber-home-header h1 {
  margin: 0;
  color: #fff;
  font-size: 32px;
  line-height: 1.08;
  text-shadow: 0 2px 8px rgba(5, 24, 44, 0.32);
}

.ops-dashboard .jobber-home-header {
  min-height: 74px;
}

.ops-dashboard .jobber-home-header h3,
.ops-dashboard .jobber-home-header h1,
.ops-dashboard .jobber-home-header p {
  color: var(--navy);
  text-shadow: none;
}

.ops-dashboard .jobber-home-header h3,
.ops-dashboard .jobber-home-header p {
  color: var(--muted);
}

.jobber-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.36fr);
  gap: 16px;
  align-items: start;
}

.manager-home-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 72px;
}

.manager-home-header .section-actions {
  align-items: center;
  margin: 0;
}

.manager-home-header .button {
  gap: 7px;
}

.manager-home-header .button svg {
  width: 17px;
  height: 17px;
}

[data-manager-home-status].is-live {
  display: none;
}

.manager-home-priorities,
.manager-home-schedule {
  margin-top: 12px;
}

.manager-home-priorities .section-heading {
  min-height: 48px;
}

.manager-home-schedule > .section-body {
  padding: 12px;
}

.manager-home-checklist {
  margin-top: 12px;
}

.employee-checklist {
  overflow: hidden;
  border: 1px solid rgba(216, 224, 232, 0.98);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(5, 24, 44, 0.055);
}

.employee-checklist-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 94px;
  border: 1px solid rgba(216, 224, 232, 0.98);
  border-radius: 8px;
  padding: 16px;
  color: var(--muted);
  background: #fff;
  font-weight: 850;
}

.employee-checklist-card.is-error {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  justify-content: stretch;
  color: var(--danger);
}

.employee-checklist-card.is-error svg {
  width: 24px;
  height: 24px;
}

.employee-checklist-card.is-error div {
  display: grid;
  gap: 2px;
}

.employee-checklist-card.is-error strong {
  color: var(--navy);
}

.employee-checklist-card.is-error span {
  color: var(--muted);
  font-size: 12px;
}

.employee-checklist-head,
.employee-checklist-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  padding: 12px 14px;
}

.employee-checklist-head > div,
.employee-checklist-manager-head > div {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.employee-checklist-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 7px;
  color: #07584c;
  background: #dff6f1;
}

.employee-checklist-icon svg {
  width: 20px;
  height: 20px;
}

.employee-checklist-head h3,
.employee-checklist-manager-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.1;
}

.employee-checklist-head p,
.employee-checklist-manager-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.employee-checklist-head > strong {
  color: #07584c;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.employee-checklist-progress {
  height: 4px;
  background: #e8eef1;
}

.employee-checklist-progress span {
  display: block;
  width: var(--checklist-progress, 0%);
  height: 100%;
  background: var(--teal-dark);
  transition: width 180ms ease;
}

.employee-checklist-list {
  display: grid;
  max-height: 340px;
  overflow-y: auto;
  border-top: 1px solid rgba(216, 224, 232, 0.78);
}

.employee-checklist-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-bottom: 1px solid rgba(216, 224, 232, 0.72);
  border-radius: 0;
  padding: 9px 14px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.employee-checklist-row:last-child {
  border-bottom: 0;
}

.employee-checklist-row:hover,
.employee-checklist-row:focus-visible {
  background: #f6fbfa;
}

.employee-checklist-row.is-overdue {
  background: #fff9f1;
}

.employee-checklist-row.is-complete {
  color: var(--muted);
  background: #f7faf9;
}

.employee-checklist-row-icon,
.employee-checklist-toggle {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(23, 59, 90, 0.15);
  border-radius: 7px;
  color: var(--navy);
  background: #fff;
}

.employee-checklist-row.is-complete .employee-checklist-row-icon,
.employee-checklist-manager-row.is-complete .employee-checklist-toggle {
  border-color: #0b725f;
  color: #fff;
  background: #0b725f;
}

.employee-checklist-row-icon svg,
.employee-checklist-toggle svg {
  width: 16px;
  height: 16px;
}

.employee-checklist-row-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.employee-checklist-row-copy strong {
  overflow-wrap: anywhere;
  color: inherit;
  font-size: 14px;
  line-height: 1.25;
}

.employee-checklist-row-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-checklist-row > em {
  color: #965b00;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.employee-checklist-manager-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(150px, 0.35fr) minmax(150px, 1fr);
  gap: 10px;
  align-items: end;
  border-top: 1px solid rgba(216, 224, 232, 0.78);
  padding: 11px 14px;
  background: #f7fafb;
}

.employee-checklist-manager-toolbar label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.employee-checklist-manager-toolbar label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.employee-checklist-manager-toolbar select,
.employee-checklist-manager-toolbar input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--navy);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.employee-checklist-manager-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 42px;
}

.employee-checklist-manager-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.employee-checklist-manager-summary strong {
  min-width: 56px;
  color: #07584c;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.employee-checklist-manager-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 78px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid rgba(216, 224, 232, 0.72);
  padding: 8px 12px 8px 14px;
}

.employee-checklist-manager-row:last-child {
  border-bottom: 0;
}

.employee-checklist-manager-row.is-overdue {
  box-shadow: inset 3px 0 #d88319;
}

.employee-checklist-manager-row.is-complete > div:not(.employee-checklist-row-actions) {
  opacity: 0.62;
}

.employee-checklist-toggle {
  border: 1px solid rgba(23, 59, 90, 0.15);
  padding: 0;
  cursor: pointer;
}

.employee-checklist-manager-row > div:not(.employee-checklist-row-actions) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.employee-checklist-manager-row > div strong,
.employee-checklist-manager-row > div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-checklist-manager-row > div strong {
  color: var(--navy);
  font-size: 13px;
}

.employee-checklist-manager-row > div span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.employee-checklist-manager-row > em {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  background: #eef3f5;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.employee-checklist-manager-row > em.is-high,
.employee-checklist-manager-row.is-overdue > em {
  color: #8b4e00;
  background: #fff0d5;
}

.employee-checklist-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.employee-checklist-row-actions .icon-button {
  width: 34px;
  height: 34px;
}

.employee-checklist-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 68px;
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.employee-checklist-empty svg {
  width: 20px;
  height: 20px;
  color: #0b725f;
}

.employee-checklist-editor {
  width: min(610px, 100%);
}

.employee-checklist-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.employee-checklist-editor-fields .field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.employee-checklist-editor-fields .field > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.employee-checklist-editor-fields .field > span em {
  font-style: normal;
  font-weight: 750;
}

.employee-checklist-editor-fields input,
.employee-checklist-editor-fields select,
.employee-checklist-editor-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.employee-checklist-editor-fields textarea {
  min-height: 86px;
  resize: vertical;
}

.employee-checklist-editor-wide {
  grid-column: 1 / -1;
}

.employee-checklist-editor-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}

.employee-checklist-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .manager-home-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .manager-home-header .section-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .manager-home-header .button {
    justify-content: center;
    min-width: 0;
  }

  .employee-checklist-manager-head {
    align-items: flex-start;
  }

  .employee-checklist-manager-head .button span {
    display: none;
  }

  .employee-checklist-manager-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 0.7fr);
  }

  .employee-checklist-manager-summary {
    grid-column: 1 / -1;
    justify-content: space-between;
    min-height: 28px;
  }

  .employee-checklist-manager-row {
    grid-template-columns: 34px minmax(0, 1fr) 72px;
  }

  .employee-checklist-manager-row > em {
    justify-self: end;
  }

  .employee-checklist-row-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }

  .employee-checklist-editor-fields {
    grid-template-columns: 1fr;
  }

  .employee-checklist-editor-wide {
    grid-column: auto;
  }

  .manager-dispatch-head {
    align-items: stretch;
    flex-direction: column;
  }

  .manager-dispatch-grid {
    grid-template-columns: 1fr;
  }
}

.jobber-home-main,
.jobber-home-sidebar,
.jobber-business-grid {
  display: grid;
  gap: 16px;
}

.million-pulse-card {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 14px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(17, 199, 189, 0.08), #fff 72%);
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.05);
}

.million-pulse-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.million-pulse-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.million-pulse-head span,
.million-pulse-grid span,
.million-next-action span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.million-pulse-head strong {
  color: var(--navy);
  font-size: 26px;
  line-height: 1.05;
}

.million-pulse-head em,
.million-pulse-grid em,
.million-next-action em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.3;
}

.million-pulse-head a {
  color: var(--navy);
  font-size: 12px;
  font-weight: 1000;
}

.million-progress {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(23, 59, 90, 0.1);
}

.million-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #0b8f84);
}

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

.million-pulse-grid div {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.million-pulse-grid strong {
  color: var(--navy);
  font-size: 19px;
  line-height: 1.1;
}

.million-next-action {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}

.million-next-action.is-danger {
  border-color: rgba(198, 55, 55, 0.25);
  border-left-color: var(--danger);
  background: rgba(198, 55, 55, 0.055);
}

.million-next-action.is-primary {
  border-left-color: var(--navy);
}

.million-next-action strong {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.2;
}

.manager-quick-create {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.92);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(5, 24, 44, 0.05);
}

.manager-quick-create > span,
.manager-morning-head span,
.manager-job-column-head span,
.manager-side-card-head span,
.manager-crew-capacity span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manager-quick-create a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--navy);
  background: var(--soft);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.manager-quick-create a span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.manager-quick-create a strong,
.manager-quick-create a small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-quick-create a strong {
  font-size: 13px;
  line-height: 1.1;
}

.manager-quick-create a small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-transform: uppercase;
}

.manager-quick-create a[data-pillar="sales"] {
  border-color: rgba(24, 189, 181, 0.28);
}

.manager-quick-create a[data-pillar="ops"] {
  border-color: rgba(23, 59, 90, 0.18);
}

.manager-quick-create a[data-pillar="admin"] {
  border-color: rgba(245, 158, 11, 0.24);
}

.manager-quick-create a:hover {
  border-color: rgba(17, 199, 189, 0.55);
  background: rgba(17, 199, 189, 0.08);
}

.manager-quick-create svg {
  width: 16px;
  height: 16px;
}

.manager-morning-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 199, 189, 0.3);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.06);
}

.manager-pillar-snapshot {
  border-color: rgba(23, 59, 90, 0.16);
  background: linear-gradient(180deg, #fff, rgba(245, 250, 251, 0.92));
}

.manager-morning-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.manager-morning-head div {
  display: grid;
  gap: 4px;
}

.manager-morning-head strong {
  color: var(--navy);
  font-size: 20px;
  line-height: 1.2;
}

.manager-morning-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

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

.manager-pillar-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}

.manager-pillar-card:hover {
  border-color: rgba(17, 199, 189, 0.52);
  box-shadow: 0 8px 18px rgba(5, 24, 44, 0.06);
}

.manager-pillar-card.is-needs-work {
  border-color: rgba(225, 29, 72, 0.24);
  background: rgba(225, 29, 72, 0.045);
}

.manager-pillar-card.is-watch {
  border-color: rgba(14, 116, 144, 0.22);
  background: rgba(14, 116, 144, 0.045);
}

.manager-pillar-card.is-ready {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(22, 163, 74, 0.045);
}

.manager-pillar-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.manager-pillar-card-head span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.manager-pillar-card-head svg {
  width: 17px;
  height: 17px;
  color: var(--teal-dark);
}

.manager-pillar-card-head strong {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--navy);
  background: rgba(23, 59, 90, 0.08);
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.manager-pillar-card.is-needs-work .manager-pillar-card-head strong {
  color: var(--danger);
  background: rgba(225, 29, 72, 0.1);
}

.manager-pillar-card.is-ready .manager-pillar-card-head strong {
  color: #16743a;
  background: rgba(22, 163, 74, 0.1);
}

.manager-pillar-card p {
  min-height: 38px;
  margin: 0;
  color: var(--navy);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.25;
}

.manager-pillar-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 7px;
}

.manager-pillar-metrics span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid rgba(23, 59, 90, 0.08);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.manager-pillar-metrics small,
.manager-pillar-card > em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.manager-pillar-metrics strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-pillar-metrics em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

.manager-pillar-metrics small,
.manager-pillar-metrics em {
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.manager-job-row:hover,
.manager-mini-row:hover {
  border-color: rgba(17, 199, 189, 0.56);
  background: rgba(17, 199, 189, 0.07);
}

.manager-dispatch-board,
.manager-side-stack {
  display: grid;
  gap: 12px;
}

.manager-dispatch-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.manager-dispatch-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 22px;
}

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

.manager-job-column {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.manager-job-column-head,
.manager-side-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.manager-job-column-head div {
  display: grid;
  gap: 3px;
}

.manager-job-column-head strong {
  color: var(--navy);
  font-size: 18px;
}

.manager-job-column-head a,
.manager-side-card-head a {
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
}

.manager-job-column-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.manager-job-column-stats span {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

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

.manager-job-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}

.manager-job-time {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.manager-job-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.manager-job-main strong,
.manager-mini-row strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-job-main em,
.manager-mini-row em,
.manager-crew-capacity em {
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
}

.manager-job-meta {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: end;
}

.manager-job-meta i {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.manager-job-meta strong {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.13);
  font-size: 11px;
  white-space: nowrap;
}

.manager-watchlist,
.manager-crew-capacity {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(225, 29, 72, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(225, 29, 72, 0.055);
}

.manager-watchlist div,
.manager-crew-capacity div {
  display: grid;
  gap: 3px;
}

.manager-watchlist strong,
.manager-crew-capacity strong {
  color: var(--navy);
  font-size: 15px;
}

.manager-crew-capacity {
  border-color: rgba(17, 199, 189, 0.28);
  background: rgba(17, 199, 189, 0.06);
}

.manager-on-clock-list,
.manager-side-card {
  display: grid;
  gap: 8px;
}

.manager-on-clock-list a,
.manager-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}

.manager-on-clock-list span {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.manager-on-clock-list strong,
.manager-mini-row b {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.manager-side-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.manager-side-card.needs-attention {
  border-color: rgba(239, 68, 68, 0.28);
  background: #fff7f7;
}

.manager-side-card.needs-setup-help {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffbeb;
}

.manager-mini-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.manager-mini-row.is-issue {
  border-color: rgba(239, 68, 68, 0.22);
}

.manager-mini-row.is-issue b {
  color: var(--danger);
}

.manager-mini-row.is-setup-help {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fff;
}

.manager-mini-row.is-setup-help b {
  color: #92400e;
}

.manager-issue-summary {
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  color: #991b1b;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.manager-setup-help-summary {
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  padding: 8px 10px;
  color: #92400e;
  background: #fff;
  font-size: 12px;
  font-weight: 1000;
}

.jobber-home-label {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jobber-home-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.jobber-workflow-card,
.jobber-performance-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.05);
}

.jobber-workflow-main {
  display: grid;
  gap: 7px;
  padding: 14px;
  color: var(--ink);
  text-decoration: none;
}

.jobber-workflow-card p,
.jobber-performance-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 900;
}

.jobber-workflow-primary {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: 36px;
}

.jobber-workflow-primary strong {
  color: var(--navy);
  font-size: 32px;
  line-height: 1;
}

.jobber-workflow-primary span {
  color: var(--navy);
  font-size: 17px;
  font-weight: 900;
}

.jobber-workflow-card em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.jobber-workflow-links {
  display: grid;
  border-top: 1px solid var(--line);
}

.jobber-workflow-links a {
  padding: 10px 14px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.jobber-workflow-links a + a {
  border-top: 1px solid var(--line);
}

.jobber-workflow-main:hover,
.jobber-workflow-links a:hover,
.jobber-performance-card:hover {
  background: rgba(17, 199, 189, 0.06);
}

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

.jobber-appointments-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 22px;
}

.jobber-appointment-revenue {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.jobber-appointment-revenue div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.jobber-appointment-revenue span,
.jobber-appointment-columns,
.jobber-appointment-group > p,
.jobber-performance-card p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jobber-appointment-revenue strong {
  color: var(--navy);
  font-size: 20px;
}

.jobber-appointment-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 86px;
  gap: 10px;
  padding: 0 10px 8px;
}

.jobber-appointment-group {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.jobber-appointment-group > p {
  margin: 0;
}

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

.jobber-appointment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 86px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}

.jobber-appointment-row:hover {
  border-color: rgba(17, 199, 189, 0.54);
}

.jobber-appointment-row div:first-child {
  display: grid;
  gap: 4px;
}

.jobber-appointment-row strong {
  color: var(--navy);
}

.jobber-appointment-row span,
.jobber-empty-row,
.jobber-see-more {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.jobber-assignee-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.jobber-assignee-stack span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 10px;
  font-weight: 900;
}

.jobber-empty-row {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.jobber-see-more {
  justify-self: start;
  color: var(--navy);
}

.jobber-performance-card {
  display: grid;
  gap: 5px;
  padding: 14px;
  color: var(--ink);
  text-decoration: none;
}

.jobber-performance-card p {
  margin: 0;
  line-height: 1.25;
}

.jobber-performance-card strong {
  margin-top: 4px;
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
}

.jobber-performance-table {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.jobber-performance-table div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.jobber-performance-table span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jobber-performance-table em {
  color: var(--navy);
  font-style: normal;
  font-weight: 900;
}

.home-command-bar,
.crew-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 8px;
  padding: 18px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.06);
}

.field-command-center {
  display: grid;
  gap: 12px;
}

.field-command-center .dashboard-status {
  margin: -2px 2px 0;
}

.field-sync-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff8eb;
  box-shadow: 0 10px 20px rgba(5, 24, 44, 0.05);
}

.field-sync-panel.is-offline {
  border-color: rgba(198, 55, 55, 0.28);
  background: #fff7f7;
}

.field-sync-panel.is-syncing {
  border-color: rgba(17, 199, 189, 0.35);
  background: #effdfb;
}

.field-sync-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--warning);
  box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.14);
}

.field-sync-panel.is-offline .field-sync-dot {
  background: var(--danger);
  box-shadow: 0 0 0 5px rgba(198, 55, 55, 0.14);
}

.field-sync-panel.is-syncing .field-sync-dot {
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(17, 199, 189, 0.14);
}

.field-sync-panel strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
}

.field-sync-panel p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.field-sync-items {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.field-sync-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.72);
}

.field-sync-item.has-error {
  border-color: rgba(198, 55, 55, 0.18);
  background: rgba(255, 255, 255, 0.9);
}

.field-sync-item span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.field-sync-item strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-sync-item em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-next-actions .section-heading p,
.field-assigned-jobs .section-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.home-command-bar h2,
.crew-home-hero h2 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 30px;
  line-height: 1.08;
}

.home-command-bar p,
.crew-home-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.42;
}

.crew-home-hero {
  border-color: rgba(17, 199, 189, 0.32);
  background: linear-gradient(180deg, rgba(17, 199, 189, 0.08), #fff 78%);
}

.crew-home-hero .ops-actions {
  align-self: stretch;
}

.crew-home-side {
  display: grid;
  gap: 10px;
  align-self: stretch;
}

.crew-day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.crew-day-pills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 999px;
  padding: 7px 10px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.1);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
}

.crew-day-pills svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.crew-clock-card {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 92px;
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.crew-clock-card.is-on {
  border-color: rgba(17, 199, 189, 0.36);
  background: rgba(17, 199, 189, 0.1);
}

.crew-clock-card span,
.crew-clock-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crew-clock-card strong {
  color: var(--navy);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.field-home-mobile {
  display: grid;
  gap: 16px;
  color: var(--ink);
}

.field-home-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.field-home-topline > span {
  color: var(--muted);
  font-size: 18px;
  font-weight: 850;
}

.field-home-top-actions {
  display: inline-flex;
  gap: 8px;
}

.field-home-top-actions a {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 44px;
  border: 1px solid rgba(216, 224, 232, 0.9);
  border-radius: 999px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.08);
}

.field-home-top-actions svg {
  width: 22px;
  height: 22px;
}

.field-home-top-actions em {
  position: absolute;
  top: -6px;
  right: -2px;
  min-width: 21px;
  border-radius: 999px;
  padding: 3px 6px;
  color: #fff;
  background: #cf4438;
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
}

.field-home-greeting {
  margin: -2px 0 2px;
  color: var(--navy);
  font-size: clamp(32px, 7vw, 54px);
  line-height: 0.98;
  letter-spacing: 0;
}

.field-home-next-stack {
  display: grid;
  gap: 8px;
}

.field-home-next-action {
  box-shadow: 0 8px 20px rgba(5, 24, 44, 0.08);
}

.field-home-next-stack .field-cockpit-task-strip {
  border-color: rgba(17, 199, 189, 0.24);
  background: #f7fffd;
  box-shadow: 0 8px 18px rgba(5, 24, 44, 0.055);
}

.field-home-mobile .field-setup-panel.is-compact {
  gap: 8px;
  border-left-width: 3px;
  padding: 10px;
  box-shadow: 0 8px 18px rgba(5, 24, 44, 0.045);
}

.field-home-mobile .field-setup-panel.is-compact .field-setup-head strong {
  font-size: 13px;
}

.field-home-map-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 8px;
  padding: 18px;
  background: #f2f7f6;
  box-shadow: 0 12px 28px rgba(5, 24, 44, 0.08);
}

.field-home-map-card > *:not(.field-home-map-art) {
  position: relative;
  z-index: 1;
}

.field-home-map-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 24%, rgba(17, 199, 189, 0.11), transparent 18%),
    radial-gradient(circle at 84% 66%, rgba(73, 135, 58, 0.1), transparent 21%),
    linear-gradient(90deg, rgba(23, 59, 90, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(23, 59, 90, 0.045) 1px, transparent 1px),
    #f6faf9;
  background-size: auto, auto, 72px 72px, 72px 72px, auto;
}

.field-home-map-live {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  filter: saturate(0.72) brightness(1.08);
  transition: opacity 160ms ease;
}

.field-home-map-card.has-live-map .field-home-map-live {
  opacity: 0.58;
  pointer-events: auto;
}

.field-home-map-card.has-live-map .field-home-map-art {
  background: #f8fbfa;
}

.field-home-map-card.has-live-map .field-home-road,
.field-home-map-card.has-live-map .field-home-map-art::before,
.field-home-map-card.has-live-map .field-home-map-art::after {
  opacity: 0;
}

.field-home-map-card.has-live-map .field-home-map-pin {
  display: none;
}

.field-home-map-zoom-controls {
  position: absolute;
  right: 14px;
  top: 50%;
  z-index: 3;
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.field-home-map-zoom-controls button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 999px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.12);
  font-size: 24px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
}

.field-home-map-zoom-controls button:active {
  transform: scale(0.96);
}

.google-map-overlay-anchor {
  position: absolute;
  display: block;
  margin: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: 1;
  transform-origin: center bottom;
  user-select: none;
}

.google-map-overlay-anchor.is-interactive {
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.google-map-overlay-anchor.is-static {
  pointer-events: none;
}

.field-home-google-pin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content !important;
  height: auto !important;
  color: var(--navy);
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.field-home-google-pin span {
  position: relative;
  width: 30px;
  height: 30px;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px 999px 999px 2px;
  background: #4a9cdf;
  box-shadow: 0 7px 14px rgba(5, 24, 44, 0.22);
  transform: rotate(-45deg);
}

.field-home-google-pin span::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}

.field-home-google-pin.is-done span {
  background: #49873a;
}

.field-home-google-pin em {
  color: var(--navy);
  font-size: 17px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.field-home-map-art::before,
.field-home-map-art::after,
.field-home-road {
  content: "";
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(181, 194, 205, 0.42);
}

.field-home-map-art::before {
  width: 130%;
  height: 15px;
  left: -18%;
  top: 44%;
  transform: rotate(-8deg);
}

.field-home-map-art::after {
  width: 120%;
  height: 12px;
  left: -10%;
  top: 67%;
  transform: rotate(13deg);
}

.field-home-road.road-one {
  width: 15px;
  height: 110%;
  left: 66%;
  top: -4%;
  transform: rotate(14deg);
}

.field-home-road.road-two {
  width: 11px;
  height: 90%;
  left: 31%;
  top: 8%;
  transform: rotate(-23deg);
}

.field-home-road.road-three {
  width: 90%;
  height: 10px;
  left: 16%;
  top: 27%;
  transform: rotate(22deg);
  opacity: 0.8;
}

.field-home-map-pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: translate(-20px, -20px);
  color: #2f6f4d;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.field-home-map-pin svg {
  width: 42px;
  height: 42px;
  fill: rgba(69, 147, 219, 0.82);
  color: #2a6f9d;
  filter: drop-shadow(0 5px 8px rgba(5, 24, 44, 0.16));
}

.field-home-map-pin.is-done svg {
  fill: rgba(73, 135, 58, 0.78);
  color: #49873a;
}

.field-home-map-pin.is-shop svg {
  fill: rgba(23, 59, 90, 0.78);
  color: var(--navy);
}

.field-home-map-pin em {
  color: var(--navy);
  font-size: 22px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.field-home-clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, 760px);
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 30px rgba(5, 24, 44, 0.14);
}

.field-home-clock div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.field-home-clock strong {
  color: var(--navy);
  font-size: clamp(20px, 4vw, 30px);
  line-height: 1.1;
}

.field-home-clock span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.field-home-clock .button {
  min-width: 142px;
  min-height: 58px;
  gap: 9px;
  border-radius: 8px;
  font-size: 17px;
}

.field-home-clock .button svg {
  width: 22px;
  height: 22px;
}

.field-home-map-summary {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(170px, 24vw, 255px);
}

.field-home-map-summary div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.field-home-map-summary strong {
  color: var(--navy);
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1;
}

.field-home-map-summary span {
  color: var(--navy);
  font-size: clamp(16px, 3.4vw, 23px);
  font-weight: 900;
}

.field-home-map-summary a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 15px 18px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(5, 24, 44, 0.11);
  font-size: 18px;
  font-weight: 1000;
  text-decoration: none;
}

.field-home-map-summary svg {
  width: 18px;
  height: 18px;
}

.field-home-visit-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(310px, 420px);
  gap: 14px;
  margin: 18px -18px 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0 18px 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.field-home-visit-card,
.field-home-empty-visit {
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 24px rgba(5, 24, 44, 0.12);
}

.field-home-visit-main {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  border: 0;
  padding: 15px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.field-home-visit-stripe {
  align-self: stretch;
  border-radius: 999px;
  background: #49873a;
}

.field-home-visit-card.is-done .field-home-visit-stripe {
  background: #8ea0aa;
}

.field-home-visit-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.field-home-visit-copy strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-home-visit-copy em,
.field-home-visit-copy small,
.field-home-visit-copy b {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-home-visit-copy small {
  color: var(--muted);
}

.field-home-visit-copy b {
  color: var(--muted);
  font-size: 14px;
}

.field-home-visit-status {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 78px;
  color: #49873a;
}

.field-home-visit-status strong {
  font-size: 15px;
  line-height: 1;
}

.field-home-visit-status span {
  display: inline-flex;
  gap: 3px;
}

.field-home-visit-status i {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--navy);
  background: #e8eef1;
  font-size: 13px;
  font-style: normal;
  font-weight: 1000;
}

.field-home-visit-actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(216, 224, 232, 0.78);
  padding: 9px 11px 11px;
}

.field-home-visit-actions a,
.field-home-visit-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  flex: 1 1 0;
  border: 1px solid rgba(23, 59, 90, 0.13);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--navy);
  background: #fff;
  font-size: 13px;
  font-weight: 1000;
  text-decoration: none;
}

.field-home-visit-actions button {
  cursor: pointer;
  font: inherit;
}

.field-home-visit-actions svg {
  width: 15px;
  height: 15px;
}

.field-home-empty-visit {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 7px;
  min-height: 170px;
  padding: 18px;
}

.field-home-empty-visit svg {
  width: 28px;
  height: 28px;
  color: var(--teal);
}

.field-home-empty-visit strong {
  color: var(--navy);
  font-size: 18px;
}

.field-home-empty-visit span {
  color: var(--muted);
  font-weight: 850;
}

.field-home-clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border: 1px solid rgba(73, 135, 58, 0.24);
  border-radius: 999px;
  padding: 9px 12px;
  color: #2f6f4d;
  background: rgba(73, 135, 58, 0.09);
  font-size: 13px;
  font-weight: 950;
}

.field-home-clear svg {
  width: 16px;
  height: 16px;
}

.field-cockpit-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.06);
}

.field-cockpit-panel.is-simple {
  gap: 10px;
  padding: 12px;
  box-shadow: 0 6px 16px rgba(5, 24, 44, 0.045);
}

.field-simple-stack {
  display: grid;
  gap: 8px;
}

.field-cockpit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.field-cockpit-head div,
.field-cockpit-loadout div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.field-cockpit-head span,
.field-cockpit-loadout span,
.field-cockpit-action em,
.field-cockpit-chip span {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-cockpit-head strong {
  color: var(--navy);
  font-size: 22px;
  line-height: 1.1;
}

.field-cockpit-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.field-cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 10px;
}

.field-cockpit-action {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(17, 199, 189, 0.08), #fff 76%);
}

.field-cockpit-action.is-simple {
  grid-template-columns: minmax(0, 1fr) auto;
  border-left-width: 4px;
  padding: 11px;
}

.field-cockpit-action.is-danger {
  border-left-color: var(--danger);
  background: linear-gradient(180deg, rgba(198, 55, 55, 0.08), #fff 76%);
}

.field-cockpit-action > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.field-cockpit-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
}

.field-cockpit-icon svg {
  width: 22px;
  height: 22px;
}

.field-cockpit-action strong,
.field-cockpit-loadout strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.2;
}

.field-cockpit-action small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

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

.field-cockpit-chip {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  column-gap: 8px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: var(--soft);
  text-decoration: none;
}

.field-cockpit-chip.is-primary,
.field-cockpit-chip.is-teal {
  border-color: rgba(17, 199, 189, 0.35);
  background: rgba(17, 199, 189, 0.08);
}

.field-cockpit-chip.is-danger {
  border-color: rgba(198, 55, 55, 0.26);
  background: rgba(198, 55, 55, 0.08);
}

.field-cockpit-chip svg {
  grid-area: icon;
  width: 22px;
  height: 22px;
  color: var(--navy);
}

.field-cockpit-chip span {
  grid-area: label;
}

.field-cockpit-chip strong {
  grid-area: value;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.1;
}

.field-cockpit-loadout {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.field-cockpit-loadout.is-simple {
  align-items: flex-start;
  padding: 10px 11px;
  background: var(--soft);
}

.field-cockpit-loadout.is-simple strong {
  font-size: 15px;
}

.field-cockpit-task-strip {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 10px;
  background: rgba(17, 199, 189, 0.065);
}

.field-cockpit-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-cockpit-task-head span,
.field-cockpit-task-pill em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-cockpit-task-head strong {
  border-radius: 999px;
  padding: 4px 8px;
  color: #06343d;
  background: #fff;
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}

.field-cockpit-task-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.field-cockpit-task-pill {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 52px;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  padding: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  text-decoration: none;
}

button.field-cockpit-task-pill {
  width: 100%;
  cursor: pointer;
  font: inherit;
}

.field-cockpit-task-pill.is-overdue {
  border-left-color: var(--danger);
  background: rgba(215, 25, 70, 0.055);
}

.field-cockpit-task-pill i,
.field-cockpit-task-pill svg {
  width: 20px;
  height: 20px;
  color: #06343d;
}

.field-cockpit-task-pill span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.field-cockpit-task-pill strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 13px;
  font-weight: 1000;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-tomorrow-prep {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(23, 59, 90, 0.04), #fff 78%);
}

.field-tomorrow-prep.is-empty {
  opacity: 0.82;
}

.field-tomorrow-prep > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.field-tomorrow-prep span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-tomorrow-prep strong {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.15;
}

.field-tomorrow-prep small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.field-tomorrow-prep p {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.field-tomorrow-prep em {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--navy);
  background: var(--soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.field-task-board {
  display: grid;
  gap: 12px;
}

.field-task-group {
  display: grid;
  gap: 8px;
}

.field-task-group-label {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 10px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.16);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-task-group-label.is-overdue {
  color: #7f1231;
  background: rgba(215, 25, 70, 0.14);
}

.field-task-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 11px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}

.field-task-card.is-overdue {
  border-left-color: var(--danger);
  background: rgba(215, 25, 70, 0.055);
}

.field-task-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.15);
}

.field-task-card.is-overdue .field-task-icon {
  color: #7f1231;
  background: rgba(215, 25, 70, 0.14);
}

.field-task-icon svg {
  width: 20px;
  height: 20px;
}

.field-task-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.field-task-copy em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-task-copy strong {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.15;
}

.field-task-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.field-task-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(20, 58, 86, 0.16);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.field-task-empty,
.field-route-empty {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.field-task-empty svg,
.field-route-empty svg {
  width: 28px;
  height: 28px;
  color: var(--teal);
}

.field-task-empty div,
.field-route-empty {
  min-width: 0;
}

.field-task-empty strong,
.field-route-empty strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
}

.field-task-empty span,
.field-route-empty span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.field-route-empty .button {
  grid-column: 1 / -1;
}

.field-route-empty-stack {
  display: grid;
  gap: 10px;
}

.field-setup-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(234, 179, 8, 0.42);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 12px;
  background: #fffbeb;
}

.field-setup-panel.is-compact {
  margin-bottom: 2px;
}

.field-setup-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: start;
}

.field-setup-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.field-setup-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #92400e;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-setup-head svg,
.field-setup-issue svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.field-setup-head strong {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.2;
}

.field-setup-refresh {
  min-height: 32px;
  border: 1px solid rgba(146, 64, 14, 0.16);
  border-radius: 7px;
  padding: 0 10px;
  color: #92400e;
  background: rgba(255, 255, 255, 0.82);
  font-family: inherit;
  font-size: 11px;
  font-weight: 1000;
  cursor: pointer;
  white-space: nowrap;
}

.field-setup-refresh:disabled {
  cursor: wait;
  opacity: 0.72;
}

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

.field-setup-issue {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(146, 64, 14, 0.12);
  border-radius: 7px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.field-setup-issue > svg {
  color: #b45309;
}

.field-setup-issue div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.field-setup-issue strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.15;
}

.field-setup-issue span {
  color: #72521b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.field-setup-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  padding: 0 10px;
  background: rgba(245, 158, 11, 0.16);
  color: #92400e;
  font-size: 11px;
  font-weight: 1000;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.field-setup-note:hover,
.field-setup-note:focus-visible {
  background: rgba(245, 158, 11, 0.24);
}

.field-setup-note:disabled {
  cursor: wait;
  opacity: 0.78;
}

.field-setup-note.is-sent {
  color: #065f46;
  background: rgba(21, 128, 61, 0.13);
}

.field-route-command {
  display: grid;
  gap: 12px;
}

.field-route-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 12px;
  background: rgba(17, 199, 189, 0.07);
}

.field-route-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.field-route-summary span,
.field-loadout-strip > span,
.field-route-time span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-route-summary strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.field-route-mission {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: #f7fffd;
}

.field-route-mission.is-needs-work {
  border-color: rgba(215, 25, 70, 0.24);
  border-left-color: var(--danger);
  background: rgba(255, 241, 242, 0.88);
}

.field-route-mission.is-watch {
  border-color: rgba(245, 158, 11, 0.28);
  border-left-color: #f59e0b;
  background: rgba(255, 251, 235, 0.9);
}

.field-route-mission.is-ready {
  border-color: rgba(17, 199, 189, 0.22);
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.field-route-mission-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #06343d;
  background: rgba(255, 255, 255, 0.76);
}

.field-route-mission-icon svg {
  width: 21px;
  height: 21px;
}

.field-route-mission div {
  min-width: 0;
}

.field-route-mission em,
.field-route-mission small {
  color: var(--muted);
  font-style: normal;
  font-weight: 850;
}

.field-route-mission em {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-route-mission strong {
  display: block;
  overflow: hidden;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-route-mission small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.field-route-mission-action {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 132px;
}

.field-loadout-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.field-loadout-strip em {
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: var(--soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.field-next-stop {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(260px, auto);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.34);
  border-left: 6px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(17, 199, 189, 0.1), #fff 74%);
}

.field-next-stop.is-clear {
  border-color: rgba(23, 59, 90, 0.12);
  border-left-color: var(--success);
  background: #fff;
}

.field-next-stop-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
}

.field-next-stop-icon svg {
  width: 22px;
  height: 22px;
}

.field-next-stop div {
  min-width: 0;
}

.field-next-stop-copy .service-tags,
.field-next-stop-copy .equipment-tags {
  margin-top: 8px;
}

.field-next-stop-copy .equipment-tags small {
  display: inline;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
}

.field-next-stop em,
.field-next-stop small {
  color: var(--muted);
  font-style: normal;
  font-weight: 850;
}

.field-next-stop em {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-next-stop strong {
  display: block;
  overflow: hidden;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-next-stop small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.field-route-alert {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  padding: 8px 9px;
  color: #6b3d00;
  background: rgba(245, 158, 11, 0.11);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
}

.field-route-alert.is-late {
  border-color: rgba(215, 25, 70, 0.28);
  color: #7f1231;
  background: rgba(215, 25, 70, 0.08);
}

.field-route-alert svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.field-next-stop-copy .equipment-tags small {
  display: inline;
  margin: 0;
  font-size: 11px;
}

.field-next-stop-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 8px;
  min-width: 260px;
}

.field-next-stop-actions .button {
  width: 100%;
  min-height: 40px;
  padding-inline: 8px;
}

.field-next-stop-actions .button.primary {
  grid-column: 1 / -1;
}

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

.field-route-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-left: 6px solid var(--open);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.05);
}

.field-route-card.is-complete,
.field-route-card.is-submitted {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.06);
}

.field-route-time {
  display: grid;
  align-content: start;
  gap: 5px;
  border-right: 1px solid var(--line);
  padding-right: 10px;
}

.field-route-time strong {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.2;
}

.field-route-time em {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.16);
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
}

.field-route-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field-route-main > strong {
  color: var(--navy);
  font-size: 20px;
  line-height: 1.18;
}

.field-route-main > span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.field-job-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.field-job-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-radius: 7px;
  padding: 5px 6px;
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.field-job-steps span.is-done {
  border-color: rgba(17, 199, 189, 0.32);
  color: #06343d;
  background: rgba(17, 199, 189, 0.12);
}

.field-job-steps svg {
  width: 14px;
  height: 14px;
}

.field-route-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.field-route-actions .button {
  width: 100%;
  min-height: 42px;
  padding-inline: 8px;
  font-size: 13px;
}

.field-route-actions .button.primary {
  grid-column: 1 / -1;
}

.button.is-urgent {
  border-color: rgba(215, 25, 70, 0.28);
  color: #7f1231;
  background: rgba(215, 25, 70, 0.08);
}

.home-urgent-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.home-urgent-strip .ops-focus-card {
  min-height: 104px;
  padding: 12px 12px 12px 54px;
}

.home-urgent-strip .ops-focus-card strong {
  font-size: 25px;
}

.home-urgent-strip .ops-focus-card em {
  font-size: 12px;
}

.home-today-section .section-body {
  padding: 12px;
}

.today-command-section .section-body {
  padding: 12px;
}

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

.today-action-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(17, 199, 189, 0.1), rgba(255, 255, 255, 0.96));
}

.today-action-summary.is-danger {
  border-color: rgba(198, 55, 55, 0.26);
  border-left-color: var(--danger);
  background: linear-gradient(180deg, rgba(198, 55, 55, 0.08), rgba(255, 255, 255, 0.96));
}

.today-action-summary div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.today-action-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.today-action-summary strong {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.22;
}

.today-action-summary-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}

.today-action-summary-metrics span {
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.today-action-card {
  position: relative;
  display: grid;
  grid-template-columns: 30px 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-left: 5px solid var(--navy);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 8px 18px rgba(5, 24, 44, 0.05);
  text-align: left;
  text-decoration: none;
}

.today-action-card:hover {
  border-color: rgba(17, 199, 189, 0.62);
  border-left-color: var(--teal);
  transform: translateY(-1px);
}

.today-action-card.is-primary {
  border-left-color: var(--teal);
  background: linear-gradient(180deg, rgba(17, 199, 189, 0.1), #fff 72%);
}

.today-action-card.is-danger {
  border-left-color: var(--danger);
  background: linear-gradient(180deg, rgba(198, 55, 55, 0.08), #fff 74%);
}

.today-action-card.is-teal {
  border-left-color: var(--teal);
}

.today-action-rank,
.today-action-icon {
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 900;
}

.today-action-rank {
  width: 28px;
  height: 28px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
}

.today-action-icon {
  width: 38px;
  height: 38px;
  color: var(--navy);
  background: var(--soft);
}

.today-action-icon svg {
  width: 20px;
  height: 20px;
}

.today-action-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.today-action-label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.today-action-copy em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.today-action-pillar {
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.11);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.today-action-copy strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.18;
}

.today-action-copy small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.today-action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
}

.today-action-links a {
  position: relative;
  z-index: 4;
  border: 1px solid rgba(17, 199, 189, 0.38);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.today-action-cta {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 104px;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.today-action-button {
  border: 0;
  cursor: pointer;
}

.today-action-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.today-action-foot a {
  color: var(--teal-dark);
  font-weight: 950;
  text-decoration: none;
}

.today-action-empty {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(17, 199, 189, 0.25);
  border-radius: 8px;
  padding: 14px;
  background: rgba(17, 199, 189, 0.07);
}

.today-action-empty strong {
  color: var(--navy);
}

.today-action-empty span {
  color: var(--muted);
  font-weight: 800;
}

.crew-next-job .dashboard-job-list,
.crew-next-job .dashboard-job-row {
  display: grid;
}

.crew-next-job .dashboard-job-row {
  border-left-color: var(--teal);
  background: #fff;
}

.crew-next-empty {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 14px;
  background: rgba(17, 199, 189, 0.08);
}

.crew-next-empty strong {
  color: var(--navy);
}

.crew-next-empty span {
  color: var(--muted);
  font-weight: 800;
}

.crew-quick-stats {
  order: 5;
}

.ops-focus-grid,
.ops-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ops-focus-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 140px;
  border: 1px solid rgba(17, 199, 189, 0.34);
  border-radius: 8px;
  padding: 14px 14px 14px 58px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(17, 199, 189, 0.1), #fff 70%);
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.06);
}

.ops-focus-card:hover {
  border-color: rgba(17, 199, 189, 0.68);
  transform: translateY(-1px);
}

.ops-focus-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.22);
}

.ops-focus-icon svg {
  width: 18px;
  height: 18px;
}

.ops-focus-card > span:not(.ops-focus-icon) {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ops-focus-card strong {
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
}

.ops-focus-card em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.cloud-setup-card {
  padding-left: 14px;
}

.cloud-setup-card h3 {
  margin: 7px 0 0;
  color: var(--navy);
  font-size: 21px;
  line-height: 1.05;
}

.cloud-check-list {
  display: grid;
  gap: 7px;
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--ink);
  line-height: 1.35;
}

.cloud-check-list li::marker {
  color: var(--teal);
}

.cloud-live-status {
  margin-bottom: 16px;
}

.cloud-live-status .section-heading {
  align-items: flex-start;
}

.connection-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.connection-summary-grid article {
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(8, 40, 61, 0.06);
}

.connection-summary-grid article.is-ready {
  background: linear-gradient(180deg, rgba(234, 255, 249, 0.98), #fff);
  border-color: rgba(17, 199, 189, 0.24);
}

.connection-summary-grid article.needs-work {
  background: #fffaf1;
  border-color: rgba(224, 155, 28, 0.25);
}

.connection-summary-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.connection-summary-grid strong {
  color: var(--navy);
  font-size: 1.08rem;
}

.admin-detail-disclosure {
  margin-top: 12px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.admin-detail-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--navy);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.admin-detail-disclosure > summary::-webkit-details-marker {
  display: none;
}

.admin-detail-disclosure > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(17, 199, 189, 0.15);
  color: var(--navy);
  font-size: 1.05rem;
}

.admin-detail-disclosure[open] > summary::after {
  content: "-";
}

.admin-detail-disclosure summary span {
  min-width: 0;
}

.admin-detail-disclosure summary em {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.admin-detail-body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.automation-manager-page .section-body {
  display: grid;
  gap: 14px;
}

.automation-next-move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(8, 40, 61, 0.08);
}

.automation-next-move.is-needs-work,
.automation-next-move.is-warn,
.automation-next-move.is-watch {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, #fff9ee, #fff);
}

.automation-next-move.is-ready {
  border-left-color: var(--teal);
  background: linear-gradient(135deg, rgba(17, 199, 189, 0.12), #fff);
}

.automation-next-move span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.automation-next-move strong {
  display: block;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.15;
}

.automation-next-move p {
  margin: 6px 0 0;
  max-width: 780px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.automation-next-move-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: end;
}

.automation-next-move-action em {
  border-radius: 999px;
  padding: 6px 9px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.14);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

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

.automation-summary-grid article {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(8, 40, 61, 0.06);
}

.automation-summary-grid article.is-ready {
  border-color: rgba(17, 199, 189, 0.28);
  background: linear-gradient(180deg, rgba(234, 255, 249, 0.96), #fff);
}

.automation-summary-grid article.needs-work {
  border-color: rgba(245, 158, 11, 0.32);
  background: #fffaf1;
}

.automation-summary-grid span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.automation-summary-grid svg {
  width: 16px;
  height: 16px;
  color: var(--teal);
}

.automation-summary-grid strong {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.2;
}

.automation-summary-grid em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.automation-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(8, 40, 61, 0.1);
}

.automation-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.automation-panel-head h3 {
  margin: 4px 0;
  color: var(--navy);
  font-size: 24px;
}

.automation-panel-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.automation-panel-subhead {
  border-top: 1px solid rgba(9, 69, 103, 0.1);
  padding-top: 14px;
}

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

.automation-toggle-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 54px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
}

.automation-toggle-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.automation-toggle-card.is-on {
  border-color: rgba(17, 199, 189, 0.48);
  background: rgba(17, 199, 189, 0.08);
}

.automation-toggle-card.needs-work {
  border-color: rgba(245, 158, 11, 0.32);
}

.automation-toggle-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.14);
}

.automation-toggle-icon svg {
  width: 22px;
  height: 22px;
}

.automation-toggle-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.automation-toggle-copy strong {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.25;
}

.automation-toggle-copy em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

.automation-toggle-copy small {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--navy);
  background: #eaf4f9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.automation-toggle-card.needs-work .automation-toggle-copy small {
  color: var(--warning-ink);
  background: rgba(245, 158, 11, 0.16);
}

.automation-switch {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #cbd5df;
  transition: background 0.18s ease;
}

.automation-switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(8, 40, 61, 0.18);
  transition: transform 0.18s ease;
}

.automation-toggle-card.is-on .automation-switch {
  background: var(--teal);
}

.automation-toggle-card.is-on .automation-switch::after {
  transform: translateX(22px);
}

.automation-number-grid,
.automation-queue-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

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

.automation-queue-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(8, 40, 61, 0.08);
}

.automation-queue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.automation-queue-head h3 {
  margin: 4px 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.15;
}

.automation-queue-head p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.automation-queue-metrics > div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(17, 199, 189, 0.24);
  border-radius: 8px;
  padding: 10px;
  background: #f4fffd;
}

.automation-queue-metrics span,
.quote-followup-draft span,
.automation-stop-list strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.automation-queue-metrics strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.automation-queue-metrics em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
}

.quote-followup-automation-list {
  display: grid;
  gap: 10px;
}

.messaging-outbox-review-list {
  display: grid;
  gap: 10px;
}

.quote-followup-automation-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.lead-followup-automation-card {
  border-left-color: var(--navy);
}

.invoice-reminder-automation-card {
  border-left-color: #2563eb;
}

.messaging-outbox-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-left: 5px solid var(--navy);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.messaging-outbox-card.is-held {
  border-color: rgba(245, 158, 11, 0.42);
  border-left-color: #f59e0b;
  background: #fffaf1;
}

.messaging-outbox-card.is-draft {
  border-left-color: var(--teal);
}

.messaging-outbox-card.is-ready {
  border-color: rgba(12, 147, 71, 0.26);
  border-left-color: var(--green);
  background: #f7fff8;
}

.messaging-outbox-card.is-skipped {
  border-color: rgba(100, 116, 139, 0.18);
  border-left-color: #94a3b8;
  background: #f8fafc;
}

.messaging-outbox-card.is-skipped .quote-followup-draft {
  opacity: 0.76;
}

.quote-followup-automation-card.is-overdue {
  border-color: rgba(245, 158, 11, 0.42);
  border-left-color: #f59e0b;
  background: #fffaf1;
}

.quote-followup-automation-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.22fr);
  gap: 12px;
  align-items: start;
}

.quote-followup-automation-main h4 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.quote-followup-automation-value {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.quote-followup-automation-value span,
.quote-followup-automation-value em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
}

.quote-followup-automation-value strong {
  color: var(--navy);
  font-size: 20px;
  line-height: 1.1;
}

.quote-followup-draft {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: #f7fafc;
}

.quote-followup-draft p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.quote-followup-automation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

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

.automation-outbox-actions .muted {
  flex: 1 1 260px;
  min-width: 0;
  line-height: 1.4;
}

.automation-stop-list {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.automation-stop-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.command-center-page > .section-body {
  background: #f6f8fb;
}

.command-center-layout {
  display: grid;
  gap: 14px;
}

.command-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
  gap: 14px;
  align-items: stretch;
  border: 1px solid rgba(17, 199, 189, 0.26);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.command-hero.needs-work {
  border-left-color: #f59e0b;
}

.command-hero.ready {
  border-left-color: var(--green);
}

.command-hero h3 {
  margin: 0;
  color: var(--navy);
  font-size: 23px;
  line-height: 1.12;
}

.command-hero p {
  max-width: 780px;
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.45;
}

  .command-hero-stats,
  .command-replacement-strip,
  .command-pillar-jump,
  .command-glance-card-grid,
  .command-glance-pillar-strip,
  .command-pillar-grid,
  .command-metric-grid,
  .command-daily-grid,
  .command-cadence-grid,
  .command-system-map-grid,
  .command-system-list,
  .command-gap-grid,
  .command-brief-stat-grid,
  .command-brief-focus-list,
  .command-action-list,
  .command-automation-list,
  .command-next-list,
  .command-cutover-grid,
  .command-step-list,
  .command-build-grid {
    display: grid;
    gap: 10px;
  }

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

  .command-hero-stats article,
  .command-status-pill,
  .command-metric,
  .command-daily-brief,
  .command-daily-cadence,
  .command-daily-handoff,
  .command-today-glance,
  .command-glance-card,
  .command-glance-pillar,
  .command-system-map,
  .command-system-pillar,
  .command-operating-gaps,
  .command-gap-card,
  .command-brief-lane,
  .command-brief-stat,
  .command-failure-panel,
  .command-next-panel,
  .command-cutover-panel,
  .command-build-queue,
  .command-next-move,
  .command-cutover-system,
  .command-build-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

  .command-hero-stats article.ready,
  .command-status-pill.ready,
  .command-metric.ready,
  .command-cutover-system.ready,
  .command-build-card.ready {
    border-color: rgba(12, 147, 71, 0.22);
    background: #f2fff6;
  }

  .command-hero-stats article.watch,
  .command-status-pill.watch,
  .command-metric.watch,
  .command-cutover-system.build,
  .command-build-card.build {
    border-color: rgba(17, 199, 189, 0.24);
    background: #f4fffd;
  }

  .command-hero-stats article.needs-work,
  .command-status-pill.needs-work,
  .command-metric.needs-work,
  .command-cutover-system.needs-work,
  .command-build-card.needs-work {
    border-color: rgba(245, 158, 11, 0.38);
    background: #fff8eb;
  }

  .command-hero-stats span,
  .command-status-pill span,
  .command-metric span,
  .command-pillar-head span,
  .command-next-move span,
  .command-cutover-head span,
  .command-build-card span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
  text-transform: uppercase;
}

  .command-hero-stats strong,
  .command-status-pill strong,
  .command-metric strong,
  .command-next-move strong,
  .command-cutover-head strong,
  .command-build-card strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 18px;
  line-height: 1.15;
}

.command-replacement-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.command-pillar-jump {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.command-pillar-jump-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 9px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(17, 199, 189, 0.25);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--navy);
  background: #fff;
  text-decoration: none;
}

.command-pillar-jump-link svg {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  color: var(--teal-dark);
}

.command-pillar-jump-link span {
  min-width: 0;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.command-pillar-jump-link em {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.2;
}

.command-pillar-jump-link.is-sales {
  border-color: rgba(59, 130, 246, 0.2);
}

.command-pillar-jump-link.is-admin {
  border-color: rgba(15, 85, 96, 0.24);
}

  .command-today-glance {
    display: grid;
    gap: 11px;
    border-color: rgba(9, 69, 103, 0.14);
    border-left: 5px solid var(--navy);
    padding: 14px;
  }

  .command-today-glance.urgent,
  .command-today-glance.due {
    border-color: rgba(245, 158, 11, 0.38);
    border-left-color: #f59e0b;
    background: #fffaf0;
  }

  .command-today-glance.quiet,
  .command-today-glance.done,
  .command-today-glance.ready {
    border-color: rgba(12, 147, 71, 0.2);
    border-left-color: var(--green);
    background: #f7fff9;
  }

  .command-glance-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
  }

  .command-glance-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .command-glance-head strong {
    color: var(--navy);
    font-size: 18px;
    line-height: 1.15;
  }

  .command-glance-head em {
    max-width: 740px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 780;
    line-height: 1.35;
  }

  .command-glance-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .command-glance-card {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    min-height: 94px;
    padding: 10px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.86);
  }

  .command-glance-card.urgent,
  .command-glance-card.needs-work,
  .command-glance-card.due {
    border-color: rgba(245, 158, 11, 0.36);
    background: #fff8eb;
  }

  .command-glance-card.ready,
  .command-glance-card.done {
    border-color: rgba(12, 147, 71, 0.18);
    background: #f7fff9;
  }

  .command-glance-card svg {
    width: 19px;
    height: 19px;
    color: var(--teal-dark);
  }

  .command-glance-card.urgent svg,
  .command-glance-card.needs-work svg,
  .command-glance-card.due svg {
    color: #f59e0b;
  }

  .command-glance-card.ready svg,
  .command-glance-card.done svg {
    color: var(--green);
  }

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

  .command-glance-card small,
  .command-glance-pillar span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .command-glance-card strong,
  .command-glance-pillar strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .command-glance-card em,
  .command-glance-pillar em {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .command-glance-pillar-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .command-glance-pillar {
    display: grid;
    gap: 3px;
    border-color: rgba(9, 69, 103, 0.08);
    border-left: 4px solid var(--teal);
    padding: 9px 10px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.78);
  }

  .command-glance-pillar.urgent {
    border-color: rgba(245, 158, 11, 0.32);
    border-left-color: #f59e0b;
    background: #fff8eb;
  }

  .command-glance-pillar.quiet {
    border-color: rgba(12, 147, 71, 0.18);
    border-left-color: var(--green);
    background: #f7fff9;
  }

  .command-priority-rail {
    display: grid;
    gap: 11px;
    border: 1px solid rgba(17, 199, 189, 0.26);
    border-left: 5px solid var(--teal);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
  }

  .command-priority-rail.needs-work {
    border-color: rgba(245, 158, 11, 0.38);
    border-left-color: #f59e0b;
    background: #fffaf0;
  }

  .command-priority-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
  }

  .command-priority-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .command-priority-head strong {
    color: var(--navy);
    font-size: 18px;
    line-height: 1.15;
  }

  .command-priority-head em {
    max-width: 430px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 780;
    line-height: 1.35;
    text-align: right;
  }

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

  .command-priority-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    gap: 8px;
    align-items: start;
    min-width: 0;
    min-height: 116px;
    border: 1px solid rgba(9, 69, 103, 0.1);
    border-radius: 8px;
    padding: 10px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.86);
  }

  .command-priority-item.urgent,
  .command-priority-item.needs-work {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fff8eb;
  }

  .command-priority-item.ready {
    border-color: rgba(12, 147, 71, 0.18);
    background: #f7fff9;
  }

  .command-priority-item b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: #fff;
    background: var(--teal);
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
  }

  .command-priority-item.urgent b,
  .command-priority-item.needs-work b {
    background: #f59e0b;
  }

  .command-priority-item.ready b {
    background: var(--green);
  }

  .command-priority-item span {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .command-priority-item small {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .command-priority-item strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .command-priority-item em {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .command-priority-item svg {
    width: 16px;
    height: 16px;
    color: var(--teal);
  }

  .command-priority-item.urgent svg,
  .command-priority-item.needs-work svg {
    color: #f59e0b;
  }

  .command-priority-foot {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 780;
    line-height: 1.35;
  }

  .command-daily-brief {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-color: rgba(17, 199, 189, 0.26);
    background: #fff;
  }

  .command-daily-brief.urgent {
    border-color: rgba(245, 158, 11, 0.38);
    background: #fffaf0;
  }

  .command-daily-brief.quiet {
    border-color: rgba(12, 147, 71, 0.18);
    background: #f7fff9;
  }

  .command-daily-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .command-brief-lane {
    display: grid;
    gap: 10px;
    align-content: start;
    border-left: 5px solid var(--teal);
  }

  .command-brief-lane.urgent {
    border-color: rgba(245, 158, 11, 0.38);
    border-left-color: #f59e0b;
    background: #fff8eb;
  }

  .command-brief-lane.quiet {
    border-color: rgba(12, 147, 71, 0.18);
    border-left-color: var(--green);
    background: #f7fff9;
  }

  .command-brief-lane-head {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .command-brief-lane-head span,
  .command-brief-stat span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .command-brief-lane-head strong {
    color: var(--navy);
    font-size: 18px;
    line-height: 1.15;
  }

  .command-brief-lane-head em,
  .command-brief-stat em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
  }

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

  .command-brief-stat {
    display: grid;
    gap: 4px;
    padding: 9px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.72);
  }

  .command-brief-stat.ready {
    border-color: rgba(12, 147, 71, 0.18);
    background: #f7fff9;
  }

  .command-brief-stat.watch {
    border-color: rgba(17, 199, 189, 0.24);
    background: #f4fffd;
  }

  .command-brief-stat.needs-work {
    border-color: rgba(245, 158, 11, 0.38);
    background: #fff8eb;
  }

  .command-brief-stat strong {
    color: var(--navy);
    font-size: 17px;
    line-height: 1.1;
  }

  .command-brief-focus-list {
    gap: 7px;
  }

  .command-brief-focus-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 8px;
    align-items: center;
    min-width: 0;
    border: 1px solid rgba(9, 69, 103, 0.1);
    border-radius: 7px;
    padding: 8px 9px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.84);
  }

  .command-brief-focus-item.urgent {
    border-color: rgba(245, 158, 11, 0.36);
    background: #fffaf0;
  }

  .command-brief-focus-item div {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .command-brief-focus-item span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .command-brief-focus-item strong {
    overflow: hidden;
    color: var(--navy);
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .command-brief-focus-item em {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .command-brief-focus-item svg {
    width: 16px;
    height: 16px;
    color: var(--teal);
  }

  .command-daily-cadence {
    display: grid;
    gap: 11px;
    padding: 13px;
    border-color: rgba(9, 69, 103, 0.12);
    background: #fff;
  }

  .command-daily-cadence.due {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fffaf0;
  }

  .command-daily-cadence.done {
    border-color: rgba(12, 147, 71, 0.2);
    background: #f7fff9;
  }

  .command-cadence-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
  }

  .command-cadence-head strong {
    display: block;
    margin-top: 3px;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.15;
  }

  .command-cadence-head em {
    max-width: 520px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 780;
    line-height: 1.35;
    text-align: right;
  }

  .command-cadence-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .command-cadence-step {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    border: 1px solid rgba(9, 69, 103, 0.1);
    border-radius: 7px;
    padding: 9px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.8);
  }

  .command-cadence-step.done {
    border-color: rgba(12, 147, 71, 0.18);
    background: #f7fff9;
  }

  .command-cadence-step.due {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fff8eb;
  }

  .command-cadence-step svg {
    width: 18px;
    height: 18px;
    color: var(--teal);
  }

  .command-cadence-step.done svg {
    color: var(--green);
  }

  .command-cadence-step.due svg {
    color: #f59e0b;
  }

  .command-cadence-step span {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .command-cadence-step small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .command-cadence-step strong {
    overflow: hidden;
    color: var(--navy);
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .command-cadence-step em {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .command-daily-handoff {
    display: grid;
    gap: 11px;
    padding: 13px;
    border-color: rgba(9, 69, 103, 0.12);
    background: #fff;
  }

  .command-daily-handoff.due {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fffaf0;
  }

  .command-daily-handoff.ready {
    border-color: rgba(12, 147, 71, 0.2);
    background: #f7fff9;
  }

  .command-handoff-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
  }

  .command-handoff-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .command-handoff-head strong {
    color: var(--navy);
    font-size: 16px;
    line-height: 1.15;
  }

  .command-handoff-head em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 780;
    line-height: 1.35;
  }

  .command-handoff-lines {
    display: grid;
    gap: 6px;
  }

  .command-handoff-lines span {
    overflow: hidden;
    border: 1px solid rgba(9, 69, 103, 0.08);
    border-radius: 7px;
    padding: 7px 9px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.78);
  }

  .command-system-map {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-color: rgba(9, 69, 103, 0.12);
    background: #fff;
  }

  .command-system-map.build {
    border-color: rgba(17, 199, 189, 0.24);
    background: #f9fffe;
  }

  .command-system-map.needs-work {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fffaf0;
  }

  .command-system-map-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .command-system-pillar {
    display: grid;
    gap: 11px;
    align-content: start;
    border-top-width: 4px;
  }

  .command-system-pillar.ready {
    border-top-color: var(--green);
  }

  .command-system-pillar.build {
    border-top-color: var(--teal);
  }

  .command-system-pillar.needs-work {
    border-top-color: #f59e0b;
  }

  .command-system-pillar-head {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .command-system-pillar-head span,
  .command-system-item small,
  .command-system-next span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .command-system-pillar-head strong {
    color: var(--navy);
    font-size: 17px;
    line-height: 1.15;
  }

  .command-system-pillar-head em,
  .command-system-item em,
  .command-system-next em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
  }

  .command-system-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .command-system-counts b {
    border: 1px solid rgba(9, 69, 103, 0.08);
    border-radius: 7px;
    padding: 6px 7px;
    color: var(--navy);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    background: rgba(255, 255, 255, 0.78);
  }

  .command-system-list {
    gap: 7px;
  }

  .command-system-item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    border: 1px solid rgba(9, 69, 103, 0.1);
    border-radius: 7px;
    padding: 9px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.84);
  }

  .command-system-item.ready {
    border-color: rgba(12, 147, 71, 0.18);
    background: #f7fff9;
  }

  .command-system-item.needs-work {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fff8eb;
  }

  .command-system-item svg {
    width: 18px;
    height: 18px;
    color: var(--teal);
  }

  .command-system-item.ready svg {
    color: var(--green);
  }

  .command-system-item.needs-work svg {
    color: #f59e0b;
  }

  .command-system-item span {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .command-system-item strong {
    color: var(--navy);
    font-size: 13px;
    line-height: 1.2;
  }

  .command-system-item em {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .command-system-next {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(17, 199, 189, 0.24);
    border-radius: 8px;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
    background: #f4fffd;
  }

  .command-system-next.needs-work {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fff8eb;
  }

  .command-system-next strong {
    color: var(--navy);
    font-size: 14px;
    line-height: 1.2;
  }

  .command-operating-gaps {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-color: rgba(17, 199, 189, 0.24);
    background: #f9fffe;
  }

  .command-operating-gaps.needs-work {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fffaf0;
  }

  .command-gap-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .command-gap-card {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    color: inherit;
    text-decoration: none;
    border-left: 4px solid var(--teal);
  }

  .command-gap-card.needs-work {
    border-color: rgba(245, 158, 11, 0.34);
    border-left-color: #f59e0b;
    background: #fff8eb;
  }

  .command-gap-card svg {
    width: 18px;
    height: 18px;
    color: var(--teal);
  }

  .command-gap-card.needs-work svg {
    color: #f59e0b;
  }

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

  .command-gap-card small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .command-gap-card strong {
    color: var(--navy);
    font-size: 14px;
    line-height: 1.2;
  }

  .command-gap-card em {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .command-gap-card b {
    width: fit-content;
    border: 1px solid rgba(9, 69, 103, 0.1);
    border-radius: 999px;
    padding: 4px 7px;
    color: var(--navy);
    font-size: 11px;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.8);
  }

  .ops-followups-layout,
  .ops-followups-hero,
  .ops-followup-card {
    min-width: 0;
  }

  .ops-followups-layout {
    display: grid;
    gap: 12px;
  }

  .ops-followups-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.52fr);
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(17, 199, 189, 0.26);
    border-left: 5px solid var(--teal);
    border-radius: 8px;
    padding: 14px;
    background: #f4fffd;
  }

  .ops-followups-hero.needs-work {
    border-color: rgba(245, 158, 11, 0.38);
    border-left-color: #f59e0b;
    background: #fff8eb;
  }

  .ops-followups-hero.ready {
    border-color: rgba(12, 147, 71, 0.24);
    border-left-color: var(--green);
    background: #f2fff6;
  }

  .ops-followups-hero h3 {
    margin: 2px 0 4px;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.15;
  }

  .ops-followups-hero p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
  }

  .ops-followups-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(9, 69, 103, 0.14);
    border-left: 5px solid var(--teal);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(8, 40, 61, 0.08);
  }

  .ops-followups-next.is-needs-work {
    border-left-color: var(--danger);
    background: linear-gradient(135deg, #fff3f3, #fff);
  }

  .ops-followups-next.is-watch {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fff9ee, #fff);
  }

  .ops-followups-next.is-ready {
    border-left-color: var(--teal);
    background: linear-gradient(135deg, rgba(17, 199, 189, 0.12), #fff);
  }

  .ops-followups-next span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ops-followups-next strong {
    display: block;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.15;
  }

  .ops-followups-next p {
    margin: 6px 0 0;
    max-width: 820px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
  }

  .ops-followups-next-action {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: end;
  }

  .ops-followups-next-action em {
    border-radius: 999px;
    padding: 6px 9px;
    color: #06343d;
    background: rgba(17, 199, 189, 0.14);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
  }

  .ops-followups-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .ops-followup-stat {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(20, 58, 86, 0.1);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.82);
  }

  .ops-followup-stat span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ops-followup-stat strong {
    color: var(--navy);
    font-size: 22px;
    line-height: 1;
  }

  .ops-followup-stat.urgent,
  .ops-followup-stat.repair {
    border-color: rgba(245, 158, 11, 0.28);
    background: #fff8eb;
  }

  .ops-followups-toggle {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 10px;
    color: var(--navy);
    background: #fff;
    font-size: 12px;
    font-weight: 900;
  }

  .ops-followups-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--teal);
  }

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

  .ops-followup-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    border: 1px solid var(--line);
    border-left: 5px solid var(--teal);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
  }

  .ops-followup-card.urgent,
  .ops-followup-card.open.urgent {
    border-left-color: #f59e0b;
    background: #fffaf0;
  }

  .ops-followup-card.resolved {
    border-left-color: var(--green);
    opacity: 0.82;
  }

  .ops-followup-card.snoozed {
    border-left-color: var(--muted);
    background: #f7f8fa;
  }

  .ops-followup-main {
    min-width: 0;
    display: grid;
    gap: 5px;
  }

  .ops-followup-head {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
  }

  .ops-followup-head span,
  .ops-followup-head em {
    border-radius: 999px;
    padding: 4px 8px;
    color: var(--navy);
    background: var(--soft);
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ops-followup-head em {
    color: #075e59;
    background: rgba(17, 199, 189, 0.14);
  }

  .ops-followup-card h3 {
    margin: 0;
    color: var(--navy);
    font-size: 17px;
    line-height: 1.2;
  }

  .ops-followup-card p,
  .ops-followup-card small,
  .ops-followup-meta,
  .ops-followup-note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .ops-followup-note {
    border-radius: 8px;
    padding: 8px;
    color: var(--navy);
    background: rgba(17, 199, 189, 0.08);
  }

  .ops-followup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    min-width: 220px;
  }

  /* Inventory is intentionally a compact stock ledger. Secondary fields stay
     collapsed so the first read is always item, quantity, location, and status. */
  .inventory-layout {
    display: grid;
    gap: 12px;
    min-width: 0;
  }

  .inventory-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(160px, 200px) auto;
    gap: 8px;
    align-items: center;
  }

  .inventory-search {
    position: relative;
    display: block;
    min-width: 0;
  }

  .inventory-search svg {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 11px;
    width: 17px;
    height: 17px;
    color: var(--muted);
    pointer-events: none;
    transform: translateY(-50%);
  }

  .inventory-search input,
  .inventory-category-filter select,
  .inventory-add-form input,
  .inventory-add-form textarea,
  .inventory-row-details input,
  .inventory-row-details textarea,
  .inventory-row-details select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    font: inherit;
    background: #fff;
  }

  .inventory-search input,
  .inventory-category-filter select {
    min-height: 40px;
    padding: 8px 10px;
  }

  .inventory-search input {
    padding-left: 36px;
  }

  .inventory-add-panel,
  .inventory-readonly-note,
  .inventory-table-shell {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }

  .inventory-add-panel[hidden],
  .inventory-row[hidden],
  .inventory-row-details[hidden],
  .inventory-no-results[hidden] {
    display: none !important;
  }

  .inventory-add-panel {
    padding: 14px;
    background: #f8fbfc;
  }

  .inventory-add-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .inventory-add-head,
  .inventory-add-actions,
  .inventory-detail-foot {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: space-between;
  }

  .inventory-add-head > div {
    display: grid;
    gap: 2px;
  }

  .inventory-add-head strong {
    color: var(--navy);
    font-size: 15px;
  }

  .inventory-add-head span,
  .inventory-detail-foot > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 760;
  }

  .inventory-add-primary,
  .inventory-add-more > div,
  .inventory-detail-grid {
    display: grid;
    gap: 9px;
  }

  .inventory-add-primary {
    grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(120px, 1fr));
  }

  .inventory-add-form label,
  .inventory-row-details label {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .inventory-add-form label > span,
  .inventory-row-details label > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .inventory-add-form input,
  .inventory-add-form textarea,
  .inventory-row-details input,
  .inventory-row-details textarea,
  .inventory-row-details select {
    min-height: 38px;
    padding: 8px 9px;
  }

  .inventory-add-form textarea,
  .inventory-row-details textarea {
    min-height: 64px;
    resize: vertical;
  }

  .inventory-add-more {
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }

  .inventory-add-more summary {
    width: fit-content;
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
  }

  .inventory-add-more > div {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    margin-top: 10px;
  }

  .inventory-wide-field {
    grid-column: 1 / -1;
  }

  .inventory-add-actions {
    justify-content: flex-end;
  }

  .inventory-table-shell {
    overflow: hidden;
  }

  .inventory-table-head,
  .inventory-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.6fr) minmax(90px, 0.52fr) minmax(112px, 0.62fr) minmax(105px, 0.58fr) minmax(115px, 0.65fr) 82px;
    gap: 10px;
    align-items: center;
  }

  .inventory-table-head {
    min-height: 38px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #f4f8fa;
  }

  .inventory-table-head > span {
    display: grid;
    gap: 1px;
  }

  .inventory-table-head small {
    color: #80919b;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
  }

  .inventory-row {
    position: relative;
    min-height: 62px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-radius: 0;
    background: #fff;
  }

  .inventory-row:last-of-type {
    border-bottom: 0;
  }

  .inventory-row.needs-work {
    border-left-color: #d98400;
    background: #fffdf8;
  }

  .inventory-row.build {
    border-left-color: var(--teal);
  }

  .inventory-item-cell,
  .inventory-count-cell,
  .inventory-total-cell,
  .inventory-row-actions,
  .inventory-status-cell {
    display: flex;
    min-width: 0;
    align-items: center;
  }

  .inventory-item-cell {
    gap: 9px;
  }

  .inventory-item-status-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
  }

  .inventory-row.needs-work .inventory-item-status-dot {
    background: #d98400;
  }

  .inventory-row.build .inventory-item-status-dot {
    background: var(--teal);
  }

  .inventory-item-cell > div {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .inventory-item-cell strong {
    overflow: hidden;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inventory-item-cell span,
  .inventory-total-cell em {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inventory-count-cell {
    display: grid;
    gap: 4px;
  }

  .inventory-count-cell input {
    width: min(100%, 92px);
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 8px;
    color: var(--navy);
    font: inherit;
    font-weight: 900;
    background: #fff;
  }

  .inventory-count-cell strong {
    color: var(--navy);
    font-size: 15px;
  }

  .inventory-count-label {
    display: none;
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .inventory-total-cell {
    display: grid;
    gap: 1px;
    align-content: center;
  }

  .inventory-total-cell strong {
    color: var(--navy);
    font-size: 15px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .inventory-total-cell em {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inventory-status-cell {
    width: fit-content;
    gap: 5px;
    border-radius: 999px;
    padding: 5px 8px;
    color: #08713b;
    font-size: 10px;
    font-weight: 950;
    white-space: nowrap;
    background: #eaf8f0;
  }

  .inventory-status-cell svg {
    width: 13px;
    height: 13px;
  }

  .inventory-status-cell.needs-work {
    color: #875300;
    background: #fff1cf;
  }

  .inventory-status-cell.build {
    color: var(--navy);
    background: #e9f6f8;
  }

  .inventory-row-actions {
    gap: 5px;
    justify-content: flex-end;
  }

  .inventory-row-actions .icon-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .inventory-quick-save {
    border-color: rgba(12, 147, 71, 0.24) !important;
    color: #08713b !important;
    background: #eefaf3 !important;
  }

  .inventory-quick-save svg,
  .inventory-details-toggle svg {
    color: currentColor !important;
    stroke: currentColor !important;
  }

  .inventory-details-toggle {
    border-color: rgba(9, 69, 103, 0.14) !important;
    color: var(--navy) !important;
    background: #f5f8fa !important;
  }

  .inventory-details-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .inventory-row-details {
    grid-column: 1 / -1;
    margin: 2px -12px -8px;
    padding: 12px 12px 14px;
    border-top: 1px solid var(--line);
    background: #f8fbfc;
  }

  .inventory-detail-grid {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }

  .inventory-detail-foot {
    margin-top: 10px;
    justify-content: flex-end;
  }

  .inventory-detail-foot > span {
    margin-right: auto;
  }

  .inventory-row-details input:disabled,
  .inventory-row-details textarea:disabled,
  .inventory-row-details select:disabled {
    color: var(--muted);
    background: #f1f5f7;
  }

  .inventory-empty,
  .inventory-no-results {
    padding: 32px 16px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
  }

  @media (max-width: 760px) {
    .inventory-toolbar {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .inventory-search {
      grid-column: 1 / -1;
    }

    .inventory-category-filter {
      min-width: 0;
    }

    .inventory-add-primary,
    .inventory-add-more > div,
    .inventory-detail-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-table-head {
      display: none;
    }

    .inventory-row {
      grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
      gap: 7px 10px;
      padding: 10px;
    }

    .inventory-item-cell {
      grid-column: 1 / 3;
      grid-row: 1;
    }

    .inventory-row-actions {
      grid-column: 3;
      grid-row: 1;
    }

    .inventory-shop-cell {
      grid-column: 1;
      grid-row: 2;
    }

    .inventory-storage-unit-cell {
      grid-column: 2;
      grid-row: 2;
    }

    .inventory-total-cell {
      grid-column: 1;
      grid-row: 3;
    }

    .inventory-status-cell {
      grid-column: 2 / 4;
      grid-row: 3;
      justify-self: end;
    }

    .inventory-count-label {
      display: block;
    }

    .inventory-count-cell input {
      width: min(100%, 110px);
    }

    .inventory-row-details {
      grid-column: 1 / -1;
      grid-row: 4;
      margin: 2px -10px -10px;
      padding: 12px 10px;
    }
  }

  @media (max-width: 480px) {
    .inventory-add-primary,
    .inventory-add-more > div,
    .inventory-detail-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .inventory-wide-field {
      grid-column: 1;
    }

    .inventory-detail-foot {
      flex-wrap: wrap;
    }

    .inventory-detail-foot > span {
      width: 100%;
    }
  }

  .command-pillar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .command-next-panel,
  .command-cutover-panel,
  .command-automation-plan,
  .command-build-queue {
    display: grid;
    gap: 12px;
    padding: 14px;
  }

  .command-next-panel {
    grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
    align-items: start;
    border-color: rgba(23, 59, 90, 0.14);
    background: #fff;
  }

  .command-next-panel h3,
  .command-panel-heading h3 {
    margin: 3px 0 0;
    color: var(--navy);
    font-size: 19px;
    line-height: 1.15;
  }

  .command-next-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .command-next-move {
    display: grid;
    gap: 4px;
    color: inherit;
    text-decoration: none;
  }

  .command-next-move.urgent {
    border-color: rgba(245, 158, 11, 0.38);
    background: #fff8eb;
  }

  .command-next-move em,
  .command-cutover-head em,
  .command-cutover-head p,
  .command-readiness-step em,
  .command-build-card em,
  .command-build-card p,
  .command-build-card small,
  .command-panel-heading p {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
  }

  .command-panel-heading {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
  }

  .command-panel-heading p {
    max-width: 720px;
    margin: 6px 0 0;
  }

  .command-panel-heading > strong {
    flex: 0 0 auto;
    border: 1px solid rgba(17, 199, 189, 0.24);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--navy);
    font-size: 12px;
    background: #f4fffd;
  }

  .command-cutover-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .command-cutover-system {
    display: grid;
    gap: 12px;
    align-content: start;
    border-top-width: 4px;
  }

  .command-cutover-system.ready {
    border-top-color: var(--green);
  }

  .command-cutover-system.build {
    border-top-color: var(--teal);
  }

  .command-cutover-system.needs-work {
    border-top-color: #f59e0b;
  }

  .command-cutover-head p {
    margin: 8px 0 0;
  }

  .command-readiness-step {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    min-width: 0;
    border-top: 1px solid rgba(9, 69, 103, 0.1);
    padding-top: 9px;
    color: inherit;
    text-decoration: none;
  }

  .command-readiness-step:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .command-readiness-step svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--teal);
  }

  .command-readiness-step.ready svg {
    color: var(--green);
  }

  .command-readiness-step.needs-work svg {
    color: #f59e0b;
  }

  .command-readiness-step strong {
    display: block;
    color: var(--navy);
    font-size: 13px;
    line-height: 1.2;
  }

  .command-build-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .command-build-card {
    display: grid;
    gap: 6px;
    color: inherit;
    text-decoration: none;
  }

  .command-build-card p,
  .command-build-card small {
    margin: 0;
  }

  .command-build-card small {
    display: block;
    border-top: 1px solid rgba(9, 69, 103, 0.1);
    padding-top: 6px;
  }

  .command-automation-plan {
    border: 1px solid rgba(23, 59, 90, 0.14);
    border-radius: 8px;
    background: #fff;
  }

  .command-automation-plan.needs-work {
    border-color: rgba(245, 158, 11, 0.38);
    background: #fffaf0;
  }

  .command-automation-summary,
  .command-automation-plan-grid,
  .command-automation-dependency-grid,
  .command-automation-guardrails {
    display: grid;
    gap: 10px;
  }

  .command-automation-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .command-automation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .command-automation-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .command-automation-dependency-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .command-automation-pillar-plan,
  .command-automation-dependency,
  .command-automation-next {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
  }

  .command-automation-pillar-plan {
    display: grid;
    gap: 10px;
  }

  .command-automation-pillar-plan.ready,
  .command-automation-dependency.ready {
    border-color: rgba(12, 147, 71, 0.22);
    background: #f2fff6;
  }

  .command-automation-pillar-plan.build,
  .command-automation-dependency.build {
    border-color: rgba(17, 199, 189, 0.24);
    background: #f4fffd;
  }

  .command-automation-pillar-plan.needs-work,
  .command-automation-dependency.needs-work {
    border-color: rgba(245, 158, 11, 0.38);
    background: #fff8eb;
  }

  .command-automation-pillar-plan span,
  .command-automation-dependency span,
  .command-automation-pillar-plan small,
  .command-automation-next strong {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .command-automation-pillar-plan strong,
  .command-automation-dependency strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.15;
  }

  .command-automation-pillar-plan em,
  .command-automation-dependency em,
  .command-automation-next span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
  }

  .command-automation-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .command-automation-mini-stats b {
    border: 1px solid rgba(9, 69, 103, 0.1);
    border-radius: 8px;
    padding: 7px 8px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.72);
  }

  .command-automation-pillar-plan a,
  .command-automation-dependency {
    color: inherit;
    text-decoration: none;
  }

  .command-automation-pillar-plan a {
    display: block;
    border-top: 1px solid rgba(9, 69, 103, 0.1);
    padding-top: 9px;
  }

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

  .command-automation-guardrails span {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    min-width: 0;
    border: 1px solid rgba(9, 69, 103, 0.1);
    border-radius: 8px;
    padding: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.35;
    background: var(--soft);
  }

  .command-automation-guardrails svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--teal);
  }

  .command-automation-next {
    border-color: rgba(17, 199, 189, 0.22);
    background: #f4fffd;
  }

  .command-automation-evidence {
    display: grid;
    gap: 7px;
    border-top: 1px solid rgba(9, 69, 103, 0.1);
    padding-top: 9px;
  }

  .command-automation-evidence > div:first-child {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
  }

  .command-automation-evidence span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .command-automation-evidence strong {
    color: var(--navy);
    font-size: 13px;
    line-height: 1.15;
  }

  .command-automation-evidence-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .command-automation-evidence-stats b {
    border-radius: 6px;
    padding: 6px 7px;
    color: var(--navy);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
    background: rgba(9, 69, 103, 0.06);
  }

  .command-automation-evidence.ready .command-automation-evidence-stats b {
    background: rgba(12, 147, 71, 0.08);
  }

  .command-automation-evidence.build .command-automation-evidence-stats b {
    background: rgba(17, 199, 189, 0.09);
  }

  .command-automation-preview {
    display: grid;
    gap: 6px;
  }

  .command-automation-preview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    border: 1px solid rgba(9, 69, 103, 0.1);
    border-radius: 7px;
    padding: 7px 8px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.82);
  }

  .command-automation-preview-row.is-overdue {
    border-color: rgba(219, 84, 67, 0.28);
    background: rgba(255, 246, 244, 0.92);
  }

  .command-automation-preview-row > div {
    min-width: 0;
  }

  .command-automation-preview-row strong {
    display: block;
    overflow: hidden;
    color: var(--navy);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .command-automation-preview-row span {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
  }

  .command-automation-preview-row small {
    color: var(--navy);
    font-size: 11px;
    font-weight: 950;
    line-height: 1.15;
    white-space: nowrap;
  }

  .command-automation-evidence em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
  }

  .command-pillar {
    display: grid;
    gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-top: 5px solid var(--teal);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.command-pillar.ready {
  border-top-color: var(--green);
}

.command-pillar.needs-work {
  border-top-color: #f59e0b;
}

.command-pillar-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.command-pillar-head h3 {
  margin: 3px 0;
  color: var(--navy);
  font-size: 21px;
  line-height: 1.1;
}

.command-pillar-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.35;
}

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

.command-metric {
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.command-metric em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.3;
}

.command-action,
.command-automation {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  color: inherit;
  text-decoration: none;
  background: #fff;
}

.command-action.primary {
  border-color: rgba(23, 59, 90, 0.18);
  background: #f3f7fb;
}

.command-action.urgent {
  border-color: rgba(245, 158, 11, 0.38);
  background: #fff8eb;
}

.command-action strong,
.command-automation strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.command-action span,
.command-automation em,
.command-failure-panel span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
}

.command-action svg,
.command-automation svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--teal);
}

.command-automation {
  justify-content: flex-start;
}

.command-automation.is-off svg {
  color: #f59e0b;
}

.command-failure-panel {
  display: grid;
  gap: 8px;
  border-color: rgba(245, 158, 11, 0.38);
  background: #fff8eb;
}

.command-failure-panel strong {
  color: var(--navy);
}

.command-failure-panel > div {
  display: grid;
  gap: 4px;
}

.automation-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: var(--soft);
  line-height: 1.4;
}

.automation-note svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--teal);
}

.automation-actions {
  align-items: center;
}

.dashboard-stat-grid.compact {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.dashboard-stat-grid.compact div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 10px;
  background: rgba(17, 199, 189, 0.08);
}

.dashboard-stat-grid.compact span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-stat-grid.compact strong {
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
}

.cloud-warning-list {
  margin-top: 12px;
}

.payment-setup-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(229, 75, 75, 0.24);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: rgba(229, 75, 75, 0.06);
}

.payment-setup-panel.is-ready {
  border-color: rgba(17, 199, 189, 0.34);
  background: rgba(17, 199, 189, 0.08);
}

.launch-readiness-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 199, 189, 0.34);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #f3fffd;
}

.launch-readiness-panel.needs-work {
  border-color: rgba(240, 180, 41, 0.42);
  background: #fffaf0;
}

.cloud-launch-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 12px;
  background: #f4fffd;
}

.cloud-launch-next.is-needs-work {
  border-color: rgba(245, 158, 11, 0.38);
  background: #fff8eb;
}

.cloud-launch-next.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f2fff6;
}

.cloud-launch-next span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cloud-launch-next strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.12;
}

.cloud-launch-next p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.cloud-launch-next-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.cloud-launch-next-action em {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
}

.launch-readiness-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.launch-readiness-head h3 {
  margin: 3px 0;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.12;
}

.launch-readiness-head p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
}

.launch-readiness-score {
  display: grid;
  gap: 2px;
  min-width: 120px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  background: #fff;
}

.launch-readiness-score strong {
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
}

.launch-readiness-score span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.launch-readiness-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(20, 58, 86, 0.1);
}

.launch-readiness-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #65e6a3);
}

.launch-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.launch-readiness-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(216, 224, 232, 0.92);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.launch-readiness-item.needs-work {
  border-color: rgba(240, 180, 41, 0.42);
}

.launch-readiness-item > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #075e59;
  background: rgba(17, 199, 189, 0.12);
}

.launch-readiness-item.needs-work > span {
  color: #92400e;
  background: rgba(240, 180, 41, 0.16);
}

.launch-readiness-item svg {
  width: 18px;
  height: 18px;
}

.launch-readiness-item div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.launch-readiness-item strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
}

.launch-readiness-item small {
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.launch-readiness-item em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.cloud-field-rollout-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid rgba(17, 199, 189, 0.34);
  border-radius: 8px;
  padding: 14px;
  background: #f7fffe;
}

.cloud-field-rollout-panel.needs-work {
  border-color: rgba(240, 180, 41, 0.42);
  background: #fffaf0;
}

.cloud-field-rollout-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.cloud-field-rollout-head h3 {
  margin: 3px 0;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.12;
}

.cloud-field-rollout-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.cloud-field-rollout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.cloud-field-rollout-list {
  display: grid;
  gap: 8px;
}

.cloud-field-rollout-list article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.92);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.cloud-field-rollout-list article > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.14);
  font-size: 13px;
  font-weight: 950;
}

.cloud-field-rollout-list article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cloud-field-rollout-list strong {
  color: var(--navy);
  font-size: 14px;
}

.cloud-field-rollout-list small,
.cloud-field-rollout-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.cloud-field-rollout-list em {
  color: #075e59;
}

.pilot-checklist-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid rgba(216, 224, 232, 0.92);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.pilot-checklist-panel.needs-work {
  border-color: rgba(240, 180, 41, 0.42);
  background: #fffdf7;
}

.pilot-checklist-panel.is-ready {
  border-color: rgba(17, 199, 189, 0.34);
}

.pilot-checklist-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.pilot-checklist-head h3 {
  margin: 3px 0;
  color: var(--navy);
  font-size: 20px;
}

.pilot-checklist-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

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

.pilot-checklist-grid article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.92);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.pilot-checklist-grid article.needs-work {
  border-color: rgba(240, 180, 41, 0.42);
  background: #fffaf0;
}

.pilot-checklist-grid article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #075e59;
  background: rgba(17, 199, 189, 0.12);
}

.pilot-checklist-grid article.needs-work > span {
  color: #92400e;
  background: rgba(240, 180, 41, 0.16);
}

.pilot-checklist-grid svg {
  width: 17px;
  height: 17px;
}

.pilot-checklist-grid article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pilot-checklist-grid strong {
  color: var(--navy);
  font-size: 14px;
}

.pilot-checklist-grid small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.app-health-panel {
  background: #fff;
}

.revenue-workflow-health {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 199, 189, 0.34);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
  background: #fff;
}

.revenue-workflow-health.needs-work {
  border-color: rgba(240, 180, 41, 0.42);
  background: #fffaf0;
}

.revenue-workflow-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.revenue-workflow-actions {
  align-items: center;
}

.revenue-workflow-actions .muted {
  max-width: 780px;
  line-height: 1.35;
}

.revenue-workflow-metrics div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(216, 224, 232, 0.92);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.88);
}

.revenue-workflow-metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.revenue-workflow-metrics strong {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.1;
}

.revenue-workflow-issues {
  display: grid;
  gap: 8px;
}

.revenue-workflow-issue {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.92);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.revenue-workflow-issue.blocker {
  border-color: rgba(229, 75, 75, 0.34);
}

.revenue-workflow-issue.warning {
  border-color: rgba(240, 180, 41, 0.42);
}

.revenue-workflow-issue > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #92400e;
  background: rgba(240, 180, 41, 0.16);
}

.revenue-workflow-issue.blocker > span {
  color: #991b1b;
  background: rgba(229, 75, 75, 0.12);
}

.revenue-workflow-issue.info > span {
  color: #075e59;
  background: rgba(17, 199, 189, 0.12);
}

.revenue-workflow-issue svg {
  width: 17px;
  height: 17px;
}

.revenue-workflow-issue div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.revenue-workflow-issue strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.revenue-workflow-issue small {
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.revenue-workflow-issue em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.revenue-repair-history {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(216, 224, 232, 0.88);
  padding-top: 10px;
}

.revenue-repair-history article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.8);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.72);
}

.revenue-repair-history article div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.revenue-repair-history strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.revenue-repair-history small,
.revenue-repair-history em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.revenue-repair-history article > span {
  border-radius: 999px;
  padding: 5px 8px;
  color: #075e59;
  background: rgba(17, 199, 189, 0.12);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.ghl-webhook-debug-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.ghl-webhook-debug-panel.needs-review {
  border-color: rgba(229, 75, 75, 0.28);
  background: rgba(255, 244, 244, 0.9);
}

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

.diagnostic-event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.32fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.diagnostic-event-row div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.diagnostic-event-row strong {
  color: var(--navy);
  font-size: 13px;
}

.diagnostic-event-row p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.diagnostic-event-row small,
.diagnostic-event-row > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.webhook-event-row.has-body > span {
  color: #087f5b;
}

.webhook-event-row.missing-body > span {
  color: #b45309;
}

.payment-setup-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.payment-setup-head h3 {
  margin: 3px 0 3px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.1;
}

.payment-setup-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.payment-setup-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.payment-setup-grid div,
.cloud-copy-row {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.payment-setup-grid span,
.cloud-copy-row span,
.payment-setup-events > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.payment-setup-grid strong,
.cloud-copy-row strong {
  color: var(--navy);
  font-size: 14px;
  overflow-wrap: anywhere;
}

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

.cloud-copy-row {
  grid-template-columns: 155px minmax(0, 1fr) auto;
  align-items: center;
}

.cloud-copy-row .button {
  min-height: 36px;
  padding: 8px 12px;
}

.payment-setup-events {
  display: grid;
  gap: 7px;
}

.payment-setup-events div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.payment-setup-events code {
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 7px 9px;
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.import-key-values {
  display: grid;
  gap: 9px;
}

.import-key-values div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.import-key-values span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.import-key-values strong {
  color: var(--navy);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ops-stat {
  display: grid;
  gap: 7px;
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.06);
}

.ops-stat:hover {
  border-color: rgba(17, 199, 189, 0.54);
  transform: translateY(-1px);
}

.ops-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ops-stat strong {
  color: var(--navy);
  font-size: 30px;
  line-height: 1;
}

.ops-stat em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.ops-stat.is-loading {
  opacity: 0.64;
}

.jobber-workflow-rail {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(216, 224, 232, 0.9);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(5, 24, 44, 0.06);
}

.workflow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflow-head div {
  display: grid;
  gap: 3px;
}

.workflow-head span,
.workflow-stage span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workflow-head strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.2;
}

.workflow-head a {
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.workflow-stage-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.workflow-stage {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: var(--soft);
  text-decoration: none;
}

.workflow-stage:hover {
  border-color: rgba(17, 199, 189, 0.54);
  background: rgba(17, 199, 189, 0.1);
}

.workflow-stage-icon {
  grid-row: span 3;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.2);
}

.workflow-stage-icon svg {
  width: 18px;
  height: 18px;
}

.workflow-stage strong {
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
}

.workflow-stage em {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.ops-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: start;
}

.dashboard-lower-grid {
  align-items: start;
}

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

.dashboard-job-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 5px solid var(--open);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.dashboard-job-row.is-complete,
.dashboard-job-row.is-submitted {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.dashboard-job-time {
  display: grid;
  gap: 5px;
  border-right: 1px solid var(--line);
  padding-right: 10px;
}

.dashboard-job-time strong {
  color: var(--navy);
  font-size: 15px;
}

.dashboard-job-time span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboard-job-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dashboard-job-main > strong {
  color: var(--navy);
  font-size: 17px;
}

.dashboard-job-main em {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-style: normal;
  line-height: 1.3;
}

.dashboard-job-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  gap: 7px;
  justify-content: stretch;
}

.dashboard-job-actions .button {
  min-height: 36px;
  padding: 0 10px;
}

.import-panel {
  display: grid;
  gap: 12px;
}

.import-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.import-count {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.import-count span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.import-count strong {
  color: var(--navy);
  font-size: 24px;
}

.import-live-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(23, 59, 90, 0.16);
  border-radius: 8px;
  padding: 12px;
  color: var(--navy);
  background: #eef7fb;
}

.import-live-status.is-running {
  border-color: rgba(17, 199, 189, 0.55);
  background: #dcfbf8;
}

.import-live-status strong {
  font-size: 16px;
}

.import-live-status span {
  color: var(--muted);
  font-weight: 800;
}

.import-mini-progress {
  display: grid;
  gap: 6px;
}

.import-mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 7px;
  font-size: 12px;
}

.import-mini-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-mini-row em {
  color: var(--muted);
  font-style: normal;
}

.import-status-page .section-heading {
  align-items: start;
}

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

.import-detail-shell {
  display: grid;
  gap: 14px;
}

.jobber-sync-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(8, 40, 61, 0.08);
}

.jobber-sync-next.is-needs-work {
  border-left-color: var(--danger);
  background: linear-gradient(135deg, #fff3f3, #fff);
}

.jobber-sync-next.is-watch {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, #fff9ee, #fff);
}

.jobber-sync-next.is-ready {
  border-left-color: var(--teal);
  background: linear-gradient(135deg, rgba(17, 199, 189, 0.12), #fff);
}

.jobber-sync-next span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jobber-sync-next strong {
  display: block;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.15;
}

.jobber-sync-next p {
  margin: 6px 0 0;
  max-width: 820px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.jobber-sync-next-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: end;
}

.jobber-sync-next-action em {
  border-radius: 999px;
  padding: 6px 9px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.14);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.import-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.import-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}

.import-card > .section-heading {
  border-radius: 0;
}

.import-card > :not(.section-heading) {
  padding: 0 14px 14px;
}

.sync-center-layout {
  display: grid;
  gap: 16px;
}

.sync-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 14px;
  align-items: stretch;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(234, 255, 249, 0.95), #fff);
}

.sync-hero h3 {
  margin: 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.1;
}

.sync-hero p:not(.eyebrow) {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.sync-next-move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(8, 40, 61, 0.08);
}

.sync-next-move.is-needs-work {
  border-left-color: var(--danger);
  background: linear-gradient(135deg, #fff3f3, #fff);
}

.sync-next-move.is-watch {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, #fff9ee, #fff);
}

.sync-next-move.is-ready {
  border-left-color: var(--teal);
  background: linear-gradient(135deg, rgba(17, 199, 189, 0.12), #fff);
}

.sync-next-move span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sync-next-move strong {
  display: block;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.15;
}

.sync-next-move p {
  margin: 6px 0 0;
  max-width: 840px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.sync-next-move-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: end;
}

.sync-next-move-action em {
  border-radius: 999px;
  padding: 6px 9px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.14);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.sync-health-grid,
.sync-center-grid,
.sync-stat-grid,
.sync-rules-grid {
  display: grid;
  gap: 10px;
}

.sync-health-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.sync-center-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.sync-health-card,
.sync-stat,
.sync-rules-grid article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.sync-health-card {
  display: grid;
  gap: 4px;
  border-left: 5px solid var(--muted);
}

.sync-health-card.is-ready {
  border-left-color: var(--green);
  background: #f2fff6;
}

.sync-health-card.needs-work {
  border-left-color: #f59e0b;
  background: #fff8eb;
}

.sync-health-card.is-running {
  border-left-color: var(--teal);
  background: #eafff9;
}

.sync-health-card span,
.sync-stat span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sync-health-card strong,
.sync-stat strong,
.sync-rules-grid strong {
  min-width: 0;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.15;
}

.sync-health-card em,
.sync-event-row em,
.sync-rules-grid span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.sync-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.sync-panel-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.sync-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sync-stat {
  display: grid;
  gap: 5px;
  background: var(--soft);
}

.sync-automation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.75fr);
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(17, 199, 189, 0.22);
  border-radius: 8px;
  padding: 12px;
  background: #f4fffd;
}

.sync-automation-card.needs-work {
  border-color: rgba(245, 158, 11, 0.36);
  background: #fff8eb;
}

.sync-automation-card > div:first-child,
.sync-automation-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sync-automation-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sync-automation-card strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.sync-automation-card em,
.sync-automation-meta span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.sync-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.sync-event-row {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.sync-event-row.has-warning {
  border-color: rgba(245, 158, 11, 0.38);
  background: #fff8eb;
}

.sync-event-row.has-error {
  border-color: rgba(215, 25, 70, 0.34);
  background: #fff1f4;
}

.sync-event-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.sync-event-row strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.25;
}

.sync-rules-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px;
}

.sync-rules-grid article {
  display: grid;
  gap: 6px;
  background: var(--soft);
}

.replacement-roadmap .section-heading p,
.messaging-replacement-panel .section-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.replacement-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.replacement-stage {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 5px solid var(--muted);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.replacement-stage.is-ready {
  border-left-color: var(--green);
  background: #f2fff6;
}

.replacement-stage.is-build {
  border-left-color: var(--teal);
  background: #ecfffb;
}

.replacement-stage.needs-work {
  border-left-color: #f59e0b;
  background: #fff8eb;
}

.replacement-stage span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.replacement-stage strong {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.15;
}

.replacement-stage em {
  color: var(--navy);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.replacement-stage p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.transition-readiness .section-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.transition-readiness-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.transition-readiness-summary > div:first-child {
  display: grid;
  gap: 4px;
}

.transition-readiness-summary span,
.transition-retirement-decision span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.transition-readiness-summary strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.2;
}

.transition-retirement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.transition-retirement-decision {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  background: #fff8eb;
}

.transition-retirement-decision.is-ready {
  background: #f2fff6;
}

.transition-retirement-decision strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.transition-lane-list {
  display: grid;
}

.transition-lane {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  background: #fff;
}

.transition-lane:last-child {
  border-bottom: 0;
}

.transition-lane.is-ready {
  border-left-color: var(--green);
}

.transition-lane.is-watch {
  border-left-color: #f59e0b;
}

.transition-lane.is-blocked {
  border-left-color: var(--danger);
  background: #fffafa;
}

.transition-lane-status {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 7px;
  color: var(--muted);
  background: var(--soft);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.transition-lane.is-ready .transition-lane-status {
  color: #075f50;
  background: #e3f8f1;
}

.transition-lane.is-watch .transition-lane-status {
  color: #8a5500;
  background: #fff0d0;
}

.transition-lane.is-blocked .transition-lane-status {
  color: #9c1837;
  background: #ffe6ed;
}

.transition-lane > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.transition-lane strong {
  color: var(--navy);
  font-size: 14px;
}

.transition-lane p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.native-schedule-shadow {
  border-color: rgba(17, 199, 189, 0.26);
}

.native-schedule-shadow.needs-work {
  border-color: rgba(245, 158, 11, 0.36);
}

.native-schedule-shadow.is-ready {
  border-color: rgba(12, 147, 71, 0.3);
}

.native-schedule-status-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.native-schedule-status-grid article,
.native-schedule-blockers {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.native-schedule-status-grid article {
  display: grid;
  gap: 5px;
}

.native-schedule-status-grid article:first-child {
  background: #f4fffd;
}

.native-schedule-status-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.native-schedule-status-grid strong,
.native-schedule-blockers strong {
  min-width: 0;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.15;
}

.native-schedule-status-grid em,
.native-schedule-blockers p,
.native-schedule-blockers span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.native-schedule-blockers {
  display: grid;
  gap: 8px;
}

.native-schedule-blockers.has-blockers {
  border-color: rgba(245, 158, 11, 0.38);
  background: #fff8eb;
}

.native-schedule-blockers.has-warnings {
  border-color: rgba(17, 199, 189, 0.28);
  background: #f4fffd;
}

.native-schedule-blockers.is-clear {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f2fff6;
}

.native-schedule-blockers > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.native-schedule-blockers span {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.72);
}

.native-schedule-dispatch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.24);
  border-radius: 8px;
  padding: 12px;
  background: #f4fffd;
}

.native-schedule-dispatch.needs-work {
  border-color: rgba(245, 158, 11, 0.38);
  background: #fff8eb;
}

.native-schedule-dispatch.ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f2fff6;
}

.native-schedule-dispatch > div {
  min-width: 0;
}

.native-schedule-dispatch strong,
.native-schedule-dispatch b {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.15;
}

.native-schedule-dispatch span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.native-schedule-dispatch > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.native-schedule-dispatch b {
  border-radius: 999px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.76);
}

.messaging-replacement-panel {
  border-color: rgba(17, 199, 189, 0.26);
}

.messaging-replacement-panel.needs-work {
  border-color: rgba(245, 158, 11, 0.36);
}

.messaging-replacement-panel.is-ready {
  border-color: rgba(12, 147, 71, 0.3);
}

.messaging-replacement-guardrail,
.messaging-replacement-next,
.messaging-replacement-safety-grid article,
.messaging-cutover-step {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.messaging-replacement-guardrail {
  display: grid;
  gap: 5px;
  border-color: rgba(245, 158, 11, 0.4);
  border-left: 5px solid #f59e0b;
  background: #fff8eb;
}

.messaging-replacement-guardrail strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.messaging-replacement-guardrail span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}

.messaging-replacement-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-color: rgba(17, 199, 189, 0.28);
  background: #f4fffd;
}

.messaging-replacement-next span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.messaging-replacement-next strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.12;
}

.messaging-replacement-next p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.messaging-replacement-next > em {
  justify-self: end;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
}

.messaging-replacement-next.is-needs-work {
  border-color: rgba(245, 158, 11, 0.38);
  background: #fff8eb;
}

.messaging-replacement-next.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f2fff6;
}

.messaging-replacement-safety-grid,
.messaging-cutover-steps {
  display: grid;
  gap: 10px;
}

.messaging-replacement-safety-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.messaging-replacement-safety-grid article,
.messaging-cutover-step,
.messaging-provider-check {
  display: grid;
  gap: 5px;
}

.messaging-replacement-safety-grid article:first-child {
  background: #f4fffd;
}

.messaging-replacement-safety-grid span,
.messaging-cutover-step span,
.messaging-provider-summary span,
.messaging-provider-check span,
.messaging-rehearsal-step span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.messaging-replacement-safety-grid strong,
.messaging-cutover-step strong,
.messaging-provider-summary strong,
.messaging-provider-check strong,
.messaging-rehearsal-step strong {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.15;
}

.messaging-replacement-safety-grid em,
.messaging-cutover-step p,
.messaging-provider-summary em,
.messaging-provider-check p,
.messaging-rehearsal-step p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.messaging-provider-readiness {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.messaging-provider-setup {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}

.messaging-provider-setup.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f4fff6;
}

.messaging-provider-setup.is-watch {
  border-color: rgba(17, 199, 189, 0.26);
  background: #f4fffd;
}

.messaging-provider-setup.needs-work {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffaf1;
}

.messaging-provider-setup-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 8px;
}

.messaging-provider-setup-hero article,
.messaging-provider-setup-step,
.messaging-provider-setup-split section,
.messaging-provider-setup-guards span {
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.messaging-provider-setup-hero article {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.messaging-provider-setup-hero span,
.messaging-provider-setup-step span,
.messaging-provider-setup-split > section > strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.messaging-provider-setup-hero strong {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.1;
}

.messaging-provider-setup-hero em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.messaging-provider-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.messaging-provider-setup-step {
  display: grid;
  gap: 4px;
  padding: 9px;
}

.messaging-provider-setup-step.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
}

.messaging-provider-setup-step.is-watch,
.messaging-provider-setup-step.is-future {
  border-color: rgba(17, 199, 189, 0.24);
}

.messaging-provider-setup-step.is-blocked,
.messaging-provider-setup-step.needs-work {
  border-color: rgba(245, 158, 11, 0.32);
}

.messaging-provider-setup-step strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.15;
}

.messaging-provider-setup-step b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.messaging-provider-setup-step p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.messaging-provider-setup-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.messaging-provider-setup-split section {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px;
}

.messaging-provider-setup-split section > div {
  display: grid;
  gap: 7px;
}

.messaging-provider-setup-guards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.messaging-provider-setup-guards span {
  padding: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
}

.phone-system-layout {
  display: grid;
  gap: 12px;
}

.phone-system-simple-layout {
  max-width: 1180px;
  margin: 0 auto;
}

.phone-setup-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr) auto;
  gap: 12px;
  align-items: stretch;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.phone-setup-hero h3 {
  margin: 0;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.05;
}

.phone-setup-hero p:not(.eyebrow) {
  max-width: 560px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.phone-setup-current {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.phone-setup-primary-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-width: 136px;
}

.phone-setup-primary-action .button {
  width: 100%;
}

.phone-setup-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}

.phone-setup-step {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.phone-setup-step:hover {
  border-color: rgba(20, 184, 166, 0.48);
  background: #f4fffd;
}

.phone-setup-step span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #5d7081;
  background: #f2f6f8;
}

.phone-setup-step svg {
  width: 16px;
  height: 16px;
}

.phone-setup-step strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-setup-step em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-setup-step.is-ready {
  border-color: rgba(12, 147, 71, 0.26);
  background: #f7fff9;
}

.phone-setup-step.is-ready span {
  color: #057a3d;
  background: #dcfce7;
}

.phone-setup-step.is-active {
  border-color: rgba(20, 184, 166, 0.42);
  background: #f4fffd;
}

.phone-setup-step.is-active span {
  color: #075f52;
  background: rgba(20, 184, 166, 0.15);
}

.phone-setup-step.is-watch {
  border-color: rgba(14, 116, 144, 0.28);
  background: #f0f9ff;
}

.phone-setup-step.is-watch span {
  color: #075985;
  background: #e0f2fe;
}

.phone-setup-step.needs-work span {
  color: #8a5a00;
  background: #fff7d6;
}

.phone-setup-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 10px;
}

.phone-setup-action-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.phone-setup-action-card:hover {
  border-color: rgba(20, 184, 166, 0.48);
  box-shadow: 0 10px 24px rgba(5, 24, 44, 0.07);
  transform: translateY(-1px);
}

.phone-setup-action-icon {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #5d7081;
  background: #f2f6f8;
}

.phone-setup-action-icon svg {
  width: 18px;
  height: 18px;
}

.phone-setup-action-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.phone-setup-action-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-setup-action-copy em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-setup-action-card b {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-setup-action-card small {
  justify-self: start;
  border-radius: 999px;
  padding: 5px 8px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.14);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.phone-system-owner-flow {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.phone-system-owner-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.phone-system-owner-head span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-system-owner-head strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.05;
}

.phone-owner-finish-action {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 8px;
  padding: 9px;
  background: #f4fffd;
}

.phone-owner-finish-action > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.16);
}

.phone-owner-finish-action svg {
  width: 17px;
  height: 17px;
}

.phone-owner-finish-action > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.phone-owner-finish-action strong,
.phone-owner-finish-action em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-owner-finish-action strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.phone-owner-finish-action em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
}

.phone-owner-finish-action .twilio-form-status {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .phone-owner-finish-action {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .phone-owner-finish-action .button {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}

.phone-setup-action-card.is-ready {
  border-color: rgba(12, 147, 71, 0.22);
  background: #f7fff9;
}

.phone-setup-action-card.is-ready .phone-setup-action-icon {
  color: #057a3d;
  background: #dcfce7;
}

.phone-setup-action-card.is-active {
  border-color: rgba(20, 184, 166, 0.5);
  background: #f4fffd;
}

.phone-setup-action-card.is-active .phone-setup-action-icon {
  color: #075f52;
  background: rgba(20, 184, 166, 0.16);
}

.phone-setup-action-card.is-watch {
  border-color: rgba(14, 116, 144, 0.26);
  background: #f0f9ff;
}

.phone-setup-action-card.is-watch .phone-setup-action-icon {
  color: #075985;
  background: #e0f2fe;
}

.phone-setup-action-card.needs-work .phone-setup-action-icon {
  color: #8a5a00;
  background: #fff7d6;
}

.phone-setup-card,
.phone-setup-drawer {
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  background: #fff;
}

.phone-setup-card {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.phone-setup-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.phone-setup-card > header strong,
.phone-setup-drawer summary strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.12;
}

.phone-setup-card > header span,
.phone-setup-drawer summary em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.phone-setup-drawer {
  overflow: hidden;
}

.phone-setup-drawer > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  list-style: none;
}

.phone-setup-drawer > summary::-webkit-details-marker {
  display: none;
}

.phone-setup-drawer > summary > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.14);
}

.phone-setup-drawer > summary svg {
  width: 17px;
  height: 17px;
}

.phone-setup-drawer.is-advanced > summary > span {
  color: #475569;
  background: #f1f5f9;
}

.phone-setup-drawer-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(9, 69, 103, 0.1);
  padding: 10px;
  background: #f8fafc;
}

.phone-company-setup {
  width: min(100%, 780px);
  display: grid;
  gap: 12px;
  margin: 0 auto;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-left: 5px solid #f59e0b;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.phone-company-setup.is-ready {
  border-left-color: var(--green);
}

.phone-company-head,
.phone-company-boundary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.phone-company-head span,
.phone-company-boundary span,
.phone-company-form label > span,
.phone-company-details > summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-company-head strong {
  display: block;
  margin-top: 3px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.05;
}

.phone-company-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.phone-company-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.phone-company-form label.is-wide,
.phone-company-form .phone-company-actions {
  grid-column: 1 / -1;
}

.phone-company-form input,
.phone-company-form select {
  min-width: 0;
  height: 40px;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.phone-company-check {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row;
  align-items: center;
  gap: 9px !important;
  min-height: 42px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 8px;
  padding: 9px 10px;
  background: #f4fffd;
}

.phone-company-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  padding: 0;
}

.phone-company-check span {
  min-width: 0;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}

.phone-company-actions {
  display: flex;
  justify-content: flex-end;
}

.phone-company-boundary {
  grid-template-columns: 1fr;
  align-items: stretch;
  border: 1px solid rgba(9, 69, 103, 0.11);
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
}

.phone-company-boundary > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.phone-company-boundary strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-company-boundary em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-company-boundary b {
  justify-self: start;
  border-radius: 999px;
  padding: 6px 9px;
  color: #0b7c42;
  background: #dcfce7;
  font-size: 11px;
  line-height: 1;
}

.phone-company-subaccount-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  gap: 7px;
}

.phone-company-subaccount-form input {
  min-width: 0;
  height: 36px;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-radius: 8px;
  padding: 0 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.phone-company-details {
  overflow: hidden;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 10px;
  background: #fbfdff;
}

.phone-company-details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.phone-company-details > summary::-webkit-details-marker {
  display: none;
}

.phone-company-details > summary strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.1;
}

.phone-company-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  border-top: 1px solid rgba(9, 69, 103, 0.08);
  padding: 8px;
}

.phone-system-simple-layout .twilio-setup-console,
.phone-system-simple-layout .messaging-a2p-packet,
.phone-system-simple-layout .messaging-phone-readiness,
.phone-system-simple-layout .messaging-tenant-readiness,
.phone-system-simple-layout .messaging-port-plan,
.phone-system-simple-layout .messaging-channel-strip {
  box-shadow: none;
}

.phone-setup-overlay {
  align-items: stretch;
  justify-items: center;
  overflow: auto;
}

.phone-setup-modal {
  width: min(1080px, calc(100vw - 24px));
  max-height: calc(100vh - 32px - var(--safe-top) - var(--safe-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.phone-setup-modal.is-number-buy-modal {
  width: min(1120px, calc(100vw - 24px));
}

.phone-setup-modal.is-a2p-modal,
.phone-setup-modal.is-calling-modal,
.phone-setup-modal.is-test-modal {
  width: min(940px, calc(100vw - 24px));
}

.phone-setup-modal.is-calling-modal {
  max-height: min(760px, calc(100vh - 28px));
}

.phone-setup-modal-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(9, 69, 103, 0.1);
  padding: 14px;
}

.phone-setup-modal-head > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.14);
}

.phone-setup-modal-head svg {
  width: 19px;
  height: 19px;
}

.phone-setup-modal-head em {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-setup-modal-head h2 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.08;
}

.phone-setup-modal-body {
  min-height: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  overflow: auto;
  background: #f8fafc;
}

.phone-setup-modal-progress {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  position: sticky;
  top: 0;
  z-index: 4;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 7px;
  background: rgba(248, 250, 252, 0.96);
  backdrop-filter: blur(8px);
}

.phone-setup-modal-progress button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 7px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 7px 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.phone-setup-modal-progress button.is-current {
  border-color: rgba(20, 184, 166, 0.55);
  background: #f4fffd;
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.24);
}

.phone-setup-modal-progress button.is-ready span {
  color: #057a3d;
  background: #dcfce7;
}

.phone-setup-modal-progress button.is-active span,
.phone-setup-modal-progress button.is-watch span {
  color: #075f52;
  background: rgba(20, 184, 166, 0.16);
}

.phone-setup-modal-progress button.needs-work span {
  color: #8a5a00;
  background: #fff3cd;
}

.phone-setup-modal-progress button > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #64748b;
  background: #e2e8f0;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.phone-setup-modal-progress strong,
.phone-setup-modal-progress em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-setup-modal-progress strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
}

.phone-setup-modal-progress em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
}

.phone-setup-modal-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-top: 1px solid rgba(9, 69, 103, 0.1);
  padding: 10px 12px;
  background: #fff;
}

.phone-setup-modal-footer > div:first-child {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.phone-setup-modal-footer span,
.phone-setup-modal-footer em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.phone-setup-modal-footer strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
}

.phone-setup-modal-actions {
  min-width: 0;
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}

.phone-setup-modal-actions .button {
  white-space: nowrap;
}

.phone-setup-modal-body .twilio-setup-console,
.phone-setup-modal-body .messaging-a2p-packet,
.phone-setup-modal-body .messaging-phone-readiness,
.phone-setup-modal-body .messaging-provider-readiness {
  border-color: rgba(9, 69, 103, 0.12);
}

.phone-calling-setup {
  width: min(100%, 820px);
  display: grid;
  gap: 12px;
  margin: 0 auto;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-left: 5px solid var(--teal);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.phone-calling-setup.is-ready {
  border-left-color: var(--green);
}

.phone-calling-setup.is-watch {
  border-left-color: var(--teal);
}

.phone-calling-setup.is-blocked {
  border-left-color: #f59e0b;
}

.phone-calling-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.phone-calling-head > div {
  min-width: 0;
}

.phone-calling-head span,
.phone-calling-metrics span,
.phone-calling-card em,
.phone-calling-detail-row span {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-calling-head strong {
  display: block;
  margin-top: 3px;
  color: var(--navy);
  font-size: 26px;
  line-height: 1.05;
}

.phone-calling-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.phone-calling-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4edf3;
}

.phone-calling-progress span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--green));
}

.phone-calling-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.phone-calling-metrics article {
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fafc;
}

.phone-calling-metrics strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-calling-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 10px;
  padding: 10px;
  background: #fbfdff;
}

.phone-calling-current {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.22);
  border-radius: 8px;
  padding: 9px 10px;
  background: #f4fffd;
}

.phone-calling-current span {
  color: #075f52;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.phone-calling-current strong,
.phone-calling-current em {
  min-width: 0;
  overflow: hidden;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-calling-current strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
}

.phone-calling-current em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.phone-test-step,
.phone-number-buy-step {
  min-width: 0;
  width: min(100%, 980px);
  display: grid;
  gap: 10px;
  margin: 0 auto;
}

.phone-number-ready-step {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-left: 5px solid var(--green);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.phone-number-ready-step > div:first-child {
  min-width: 0;
}

.phone-number-ready-step span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-number-ready-step strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  margin-top: 3px;
  color: var(--navy);
  font-size: 26px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-number-ready-step em {
  display: block;
  min-width: 0;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-number-ready-actions {
  min-width: 0;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.phone-number-ready-actions form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.phone-number-change-drawer {
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  background: #fff;
}

.phone-number-change-drawer > summary {
  min-height: 42px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.phone-number-change-drawer > summary::-webkit-details-marker {
  display: none;
}

.phone-number-change-drawer > summary strong {
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.phone-number-change-drawer > summary svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.phone-number-change-drawer[open] {
  padding-bottom: 10px;
}

.phone-number-change-drawer[open] > summary {
  border-bottom: 1px solid rgba(9, 69, 103, 0.08);
  margin-bottom: 10px;
}

.phone-number-change-drawer > .twilio-setup-console {
  margin: 0 10px;
}

.phone-provider-prereq {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-left: 5px solid #f59e0b;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.phone-provider-prereq.is-ready {
  border-left-color: var(--green);
}

.phone-provider-prereq > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.phone-provider-prereq > header > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.14);
}

.phone-provider-prereq > header svg {
  width: 18px;
  height: 18px;
}

.phone-provider-prereq > header div {
  min-width: 0;
}

.phone-provider-prereq em,
.phone-provider-prereq-status b {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-provider-prereq strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--navy);
  font-size: 24px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-provider-prereq p {
  min-width: 0;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.phone-provider-prereq-status {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.phone-provider-prereq-status span {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fafc;
}

.phone-provider-prereq-status span.is-ready {
  border-color: rgba(12, 147, 71, 0.2);
  background: #f4fff6;
}

.phone-provider-prereq-status span.needs-work {
  border-color: rgba(245, 158, 11, 0.24);
  background: #fffbeb;
}

.phone-provider-prereq-status em {
  overflow: hidden;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.phone-provider-prereq-admin {
  overflow: hidden;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.phone-provider-prereq-admin > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  list-style: none;
}

.phone-provider-prereq-admin > summary::-webkit-details-marker {
  display: none;
}

.phone-provider-prereq-admin > summary strong {
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.1;
}

.phone-provider-prereq-admin > summary svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.phone-provider-prereq-admin > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  border-top: 1px solid rgba(9, 69, 103, 0.08);
  padding: 10px;
}

.phone-provider-prereq-admin p,
.phone-provider-prereq-admin span {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.phone-provider-prereq-admin span {
  color: var(--ink);
}

.phone-provider-prereq-admin .button {
  grid-row: span 2;
}

.phone-provider-prereq-test {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.phone-provider-prereq-test .twilio-form-status {
  flex: 1 1 220px;
  margin: 0;
}

.phone-provider-connect {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-left: 5px solid #f59e0b;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.phone-provider-connect.is-ready {
  border-left-color: var(--green);
}

.phone-provider-connect > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.phone-provider-connect > header > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.14);
}

.phone-provider-connect > header svg {
  width: 18px;
  height: 18px;
}

.phone-provider-connect > header div {
  min-width: 0;
}

.phone-provider-connect em,
.phone-provider-connect-form span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-provider-connect strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--navy);
  font-size: 24px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-provider-connect p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.phone-provider-connect-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(220px, 1.1fr) auto;
  gap: 8px;
  align-items: end;
}

.phone-provider-connect-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.phone-provider-connect-form input {
  min-width: 0;
  height: 38px;
  border: 1px solid rgba(9, 69, 103, 0.16);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.phone-provider-connect-form button {
  min-height: 38px;
  white-space: nowrap;
}

.phone-provider-connect-foot {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 0.3fr)) minmax(220px, 1fr);
  gap: 8px;
  align-items: stretch;
}

.phone-provider-connect-foot .phone-provider-prereq-test {
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: #f8fafc;
}

.phone-test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.phone-test-actions .button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.phone-test-actions .button svg {
  width: 15px;
  height: 15px;
}

.phone-calling-form label {
  min-width: 0;
}

.phone-calling-form input,
.phone-calling-form select {
  min-width: 0;
}

.phone-calling-toggles {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.phone-calling-toggles label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.phone-calling-toggles input {
  width: 15px;
  height: 15px;
  accent-color: var(--teal);
}

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

.phone-calling-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.phone-calling-card > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.13);
}

.phone-calling-card svg {
  width: 18px;
  height: 18px;
}

.phone-calling-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.phone-calling-card strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-calling-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-calling-card b {
  border-radius: 999px;
  padding: 5px 7px;
  background: #eef2f6;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.phone-calling-card.is-ready b,
.phone-calling-detail-row.is-ready span {
  background: #e9fbef;
  color: #0b7c42;
}

.phone-calling-card.is-watch b,
.phone-calling-detail-row.is-watch span {
  background: #e6fbf8;
  color: #075f52;
}

.phone-calling-card.is-blocked b,
.phone-calling-card.is-needs-work b,
.phone-calling-detail-row.is-blocked span,
.phone-calling-detail-row.is-needs-work span {
  background: #fff4db;
  color: #995f05;
}

.phone-calling-details {
  overflow: hidden;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 10px;
  background: #fbfdff;
}

.phone-calling-details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.phone-calling-details > summary::-webkit-details-marker {
  display: none;
}

.phone-calling-details > summary strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.1;
}

.phone-calling-details > summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.phone-calling-detail-list {
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(9, 69, 103, 0.08);
  padding: 8px;
}

.phone-calling-detail-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(120px, 0.7fr) minmax(0, 1.3fr);
  gap: 8px;
  align-items: center;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.phone-calling-detail-row span {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 7px;
  background: #eef2f6;
  line-height: 1;
  white-space: nowrap;
}

.phone-calling-detail-row strong,
.phone-calling-detail-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-calling-detail-row strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.15;
}

.phone-calling-detail-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

@media (max-width: 720px) {
  .phone-calling-setup {
    padding: 12px;
  }

  .phone-calling-head,
  .phone-calling-metrics,
  .phone-calling-card-grid,
  .phone-calling-form {
    grid-template-columns: 1fr;
  }

  .phone-calling-head .button {
    width: 100%;
    justify-content: center;
  }

  .phone-calling-current {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .phone-calling-detail-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .phone-calling-detail-row strong,
  .phone-calling-detail-row em {
    white-space: normal;
  }

  .phone-calling-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phone-calling-toggles label {
    justify-content: center;
  }
}

.phone-a2p-wizard {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.phone-a2p-wizard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.phone-a2p-wizard > header span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-a2p-wizard > header strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.1;
}

.phone-a2p-check-form {
  display: inline-flex;
}

.phone-a2p-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 7px;
}

.phone-a2p-progress-step {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 7px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 8px;
  background: #f8fafc;
}

.phone-a2p-progress-icon,
.phone-a2p-progress-step > i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #8a5a00;
  background: #fff7d6;
}

.phone-a2p-progress-icon svg,
.phone-a2p-progress-step > i svg {
  width: 13px;
  height: 13px;
}

.phone-a2p-progress-step strong,
.phone-a2p-progress-step em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-a2p-progress-step strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
}

.phone-a2p-progress-step em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
}

.phone-a2p-progress-step.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f4fff6;
}

.phone-a2p-progress-step.is-ready .phone-a2p-progress-icon,
.phone-a2p-progress-step.is-ready > i {
  color: #057a3d;
  background: #dcfce7;
}

.phone-a2p-progress-step.is-watch {
  border-color: rgba(14, 116, 144, 0.24);
  background: #f0f9ff;
}

.phone-a2p-progress-step.is-watch .phone-a2p-progress-icon,
.phone-a2p-progress-step.is-watch > i {
  color: #075985;
  background: #e0f2fe;
}

.phone-a2p-mini-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}

.phone-a2p-mini-steps .messaging-provider-setup-step {
  padding: 8px;
}

.phone-a2p-mini-steps .messaging-provider-setup-step p {
  display: none;
}

.phone-a2p-missing {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phone-a2p-missing span {
  border-radius: 999px;
  padding: 5px 8px;
  color: #8a5a00;
  background: #fff7d6;
  font-size: 11px;
  font-weight: 900;
}

.phone-a2p-carrier-check {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fffaf1;
}

.phone-a2p-carrier-check.is-ready {
  border-color: rgba(12, 147, 71, 0.22);
  background: #f4fff6;
}

.phone-a2p-carrier-check span,
.phone-a2p-carrier-check strong,
.phone-a2p-carrier-check em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-a2p-carrier-check span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.phone-a2p-carrier-check strong {
  margin-top: 2px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.15;
}

.phone-a2p-carrier-check em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.phone-a2p-carrier-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.phone-a2p-carrier-chips b {
  border-radius: 999px;
  padding: 5px 7px;
  color: #8a5a00;
  background: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.phone-a2p-review-issues {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(190, 18, 60, 0.18);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff5f7;
}

.phone-a2p-review-issues strong,
.phone-a2p-review-issues span {
  min-width: 0;
}

.phone-a2p-review-issues strong {
  color: #8f1238;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-a2p-review-issues span {
  color: #4f1024;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.phone-a2p-owner-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.phone-a2p-owner-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.phone-a2p-owner-form label.is-wide {
  grid-column: span 2;
}

.phone-a2p-owner-form label span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.phone-a2p-owner-form input,
.phone-a2p-owner-form select {
  min-width: 0;
  height: 38px;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.phone-a2p-owner-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 2px;
}

@media (max-width: 760px) {
  .phone-provider-prereq > header,
  .phone-provider-prereq-status,
  .phone-provider-prereq-admin > div,
  .phone-provider-connect > header,
  .phone-provider-connect-form,
  .phone-provider-connect-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone-provider-prereq > header > span,
  .phone-provider-connect > header > span {
    width: 38px;
    height: 38px;
  }

  .phone-provider-prereq > header .button,
  .phone-provider-prereq-admin .button,
  .phone-provider-connect-form .button,
  .phone-provider-connect-foot .button {
    width: 100%;
    justify-content: center;
  }

  .phone-provider-prereq-admin .button {
    grid-row: auto;
  }

  .phone-a2p-owner-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone-a2p-owner-form label.is-wide {
    grid-column: auto;
  }

  .phone-a2p-progress {
    grid-template-columns: 1fr;
  }

  .phone-setup-modal {
    max-height: calc(100vh - 18px - var(--safe-top) - var(--safe-bottom));
  }

  .twilio-number-results {
    grid-template-columns: 1fr;
  }

  .twilio-setup-console.is-number-picker .twilio-inline-form {
    grid-template-columns: 1fr;
  }

  .phone-system-card-grid,
  .phone-system-trust-grid,
  .phone-system-trust-grid.is-main,
  .phone-system-trust-grid.is-compact,
  .phone-system-detail-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

.phone-system-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 12px;
  align-items: stretch;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(135deg, #f8fafc 0%, #f4fffd 100%);
}

.phone-system-hero h3 {
  margin: 0;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.05;
}

.phone-system-hero p:not(.eyebrow) {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.phone-system-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.phone-system-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
}

.phone-system-tab {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
}

.phone-system-tab.active,
.phone-system-tab:hover {
  border-color: rgba(20, 184, 166, 0.42);
  color: #075f52;
  background: #f4fffd;
}

.phone-system-tab svg {
  width: 16px;
  height: 16px;
}

.phone-system-tab-panel {
  display: grid;
  gap: 10px;
}

.email-system-shell {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 12px;
}

.email-system-top {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.email-system-top h3 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.05;
}

.email-system-status {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.email-system-readiness,
.email-system-assignments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}

.email-system-check,
.email-system-assignments article {
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.email-system-check.is-ready,
.email-system-assignments article:has(strong:not(:empty)) {
  border-left-color: var(--success);
}

.email-system-check.is-needs-work {
  border-left-color: var(--warning);
}

.email-system-check span,
.email-system-assignments span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.email-system-check strong,
.email-system-assignments strong {
  display: block;
  min-width: 0;
  margin-top: 5px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.email-system-tabs-shell {
  max-width: 100%;
  overflow: hidden;
}

.email-system-tab-panel {
  min-width: 0;
  padding: 10px;
}

.email-system-grid {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 10px;
}

.email-system-card,
.email-system-domain-card {
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.email-system-card > header,
.email-system-domain-card > header {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.email-system-card > header > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #075985;
  background: #e0f2fe;
}

.email-system-card > header svg {
  width: 18px;
  height: 18px;
}

.email-system-card strong,
.email-system-domain-card strong {
  min-width: 0;
  color: var(--navy);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.email-system-card em,
.email-system-domain-card span {
  display: block;
  min-width: 0;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.email-system-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 9px;
  align-items: end;
}

.email-system-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.email-system-form label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.email-system-form input,
.email-system-form select,
.email-system-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.email-system-form textarea {
  min-height: 86px;
  resize: vertical;
  line-height: 1.35;
}

.email-system-routing-form {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.email-system-action-row,
.email-system-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.email-system-action-row {
  margin-bottom: 10px;
}

.email-system-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 8px;
}

.email-system-inline-form input {
  min-width: 0;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.email-system-mini-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.email-system-mini-status span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--muted);
  background: #f8fafc;
  font-size: 11px;
  font-weight: 950;
}

.email-system-mini-status span.is-ready {
  border-color: rgba(34, 197, 94, 0.28);
  color: #166534;
  background: #f0fdf4;
}

.email-system-mini-status svg {
  width: 14px;
  height: 14px;
}

.email-system-advanced-card {
  border-top: 1px solid rgba(9, 69, 103, 0.1);
  padding-top: 8px;
}

.email-system-advanced-card summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.email-system-advanced-card[open] summary {
  margin-bottom: 10px;
}

.email-system-replies-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.email-system-toggle-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.email-system-checkbox {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px !important;
}

.email-system-checkbox input {
  width: 18px;
  min-height: 18px;
}

.email-system-copy-list,
.email-system-domain-layout,
.email-system-domain-list,
.email-system-records {
  display: grid;
  gap: 9px;
}

.email-system-copy-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.08);
  border-radius: 8px;
  padding: 8px;
  background: #f8fafc;
}

.email-system-copy-row span,
.email-system-record > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.email-system-copy-row strong,
.email-system-record strong,
.email-system-record code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-system-domain-card > header {
  margin-bottom: 12px;
}

.email-system-domain-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.email-system-purpose-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.email-purpose-chip {
  min-height: 34px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  font-weight: 950;
}

.email-purpose-chip.is-active {
  border-color: rgba(7, 149, 143, 0.42);
  color: #075f52;
  background: #e9fffb;
}

.email-system-record {
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(160px, 0.5fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.08);
  border-radius: 8px;
  padding: 8px;
  background: #f8fafc;
}

.email-system-record code {
  display: block;
  border-radius: 6px;
  padding: 7px 8px;
  color: #0f172a;
  background: #eef4f8;
  font-size: 12px;
  font-weight: 850;
}

.email-system-ghl-shell {
  gap: 10px;
}

.email-system-ghl-top,
.email-system-ghl-header-row {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.email-system-ghl-top {
  padding: 2px 0 6px;
}

.email-system-tenant-label {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.email-system-ghl-top h3,
.email-system-ghl-header-row h4 {
  margin: 0;
  color: var(--navy);
  line-height: 1.08;
}

.email-system-ghl-top h3 {
  font-size: 30px;
}

.email-system-ghl-header-row h4 {
  font-size: 18px;
}

.email-system-ghl-top span,
.email-system-ghl-header-row span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.email-system-ghl-actions,
.email-system-provider-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.email-system-ghl-actions .button,
.email-system-provider-actions .button,
.email-system-ghl-header-row .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.email-system-ghl-actions svg,
.email-system-ghl-header-row .button svg {
  width: 15px;
  height: 15px;
}

.email-system-ghl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.email-system-ghl-stats.is-bounce {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.email-system-ghl-stats.is-compact {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.email-system-preference-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1.15fr) minmax(150px, 0.75fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.email-system-preference-form input,
.email-system-preference-form select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.email-system-preference-form .button {
  min-height: 40px;
}

.email-system-ghl-service,
.email-system-ghl-settings,
.email-system-ghl-table-shell,
.email-system-ghl-report,
.email-system-postmaster-layout,
.email-system-advanced-layout {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.email-system-ghl-provider-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 14px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
}

.email-system-ghl-settings-card {
  min-width: 0;
  display: grid;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.email-system-setting-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px;
  border-bottom: 1px solid rgba(9, 69, 103, 0.1);
}

.email-system-setting-row:last-child,
.email-system-setting-row:has(+ .email-system-ghl-savebar) {
  border-bottom: 0;
}

.email-system-setting-row.is-stacked {
  align-items: center;
}

.email-system-setting-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.email-system-setting-copy strong {
  color: var(--navy);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

.email-system-setting-copy span {
  max-width: 520px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.42;
}

.email-system-field-stack {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.email-system-field-stack > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.email-system-field-stack textarea {
  width: 100%;
  min-height: 48px;
  resize: vertical;
}

.email-system-toggle-control {
  display: inline-grid;
  justify-self: start;
  align-items: center;
  cursor: pointer;
}

.email-system-toggle-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.email-system-toggle-control > span {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #d7dee5;
  transition: background 0.18s ease;
}

.email-system-toggle-control > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
  transition: transform 0.18s ease;
}

.email-system-toggle-control input:checked + span {
  background: #2563eb;
}

.email-system-toggle-control input:checked + span::after {
  transform: translateX(20px);
}

.email-system-toggle-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.email-system-toggle-inline {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--navy);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}

.email-system-toggle-inline input {
  width: 16px;
  min-height: 16px;
}

.email-system-ghl-savebar {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(9, 69, 103, 0.1);
  padding: 14px 18px;
  background: #f8fafc;
}

.email-system-ghl-provider-list {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.email-system-ghl-provider-list h5,
.email-system-ghl-provider-card h5 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.1;
}

.email-system-provider-option {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 8px;
  padding: 14px;
  background: #f5f9ff;
}

.email-system-provider-option > span,
.email-system-provider-logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #0f766e;
  background: #e6fffb;
}

.email-system-provider-option strong,
.email-system-provider-option em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-system-provider-option strong {
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 950;
}

.email-system-provider-option em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.email-system-provider-option > svg {
  width: 18px;
  height: 18px;
  color: #2563eb;
}

.email-system-ghl-provider-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.email-system-ses-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: #fff;
}

.email-system-ses-card.is-ready {
  border-left-color: var(--success);
}

.email-system-ses-card.is-needs-work {
  border-left-color: var(--warning);
}

.email-system-ses-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.email-system-ses-main > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #075f52;
  background: #e9fffb;
}

.email-system-ses-card.is-needs-work .email-system-ses-main > span {
  color: #92400e;
  background: #fff7ed;
}

.email-system-ses-main svg {
  width: 18px;
  height: 18px;
}

.email-system-ses-main em,
.email-system-ses-chips b {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.email-system-ses-main strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
}

.email-system-ses-main small {
  display: block;
  min-width: 0;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.email-system-ses-chips {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.email-system-ses-chips span {
  min-width: 86px;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 7px 9px;
  color: var(--navy);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.12;
}

.email-system-quiet-details {
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.email-system-quiet-details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.email-system-table-wrap {
  border-radius: 8px;
  background: #fff;
}

.email-system-table th,
.email-system-table td {
  white-space: normal;
}

.email-system-switch {
  display: inline-block;
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d7dee5;
  vertical-align: middle;
}

.email-system-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
}

.email-system-switch.is-on {
  background: #2563eb;
}

.email-system-switch.is-on::after {
  transform: translateX(16px);
}

.email-system-postmaster-layout {
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
}

.email-system-postmaster-tabs {
  display: grid;
  align-content: start;
  gap: 6px;
}

.email-system-postmaster-tabs span {
  border-radius: 8px;
  padding: 12px;
  color: var(--navy);
  font-weight: 950;
}

.email-system-postmaster-tabs span.active {
  color: #1d4ed8;
  background: #eef4ff;
}

.email-system-postmaster-card {
  align-content: start;
}

.email-system-action-receipt {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-radius: 8px;
  padding: 10px;
  color: #92400e;
  background: #fff7ed;
  font-size: 12px;
  font-weight: 850;
}

.email-system-action-receipt svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.email-system-advanced-layout > .email-system-grid {
  grid-template-columns: minmax(0, 1fr);
}

.email-system-advanced-form {
  grid-template-columns: minmax(0, 1fr);
}

.email-system-wide-checkbox {
  min-height: 44px;
  border: 1px solid rgba(9, 69, 103, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.email-system-modal-overlay {
  place-items: start center;
  overflow: auto;
}

.email-system-modal {
  width: min(720px, 100%);
  margin: 5vh auto;
}

.email-system-modal > header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.email-system-modal > header > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  color: #075985;
  background: #e0f2fe;
}

.email-system-modal h3 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.08;
}

.email-system-modal-form {
  grid-template-columns: minmax(0, 1fr);
}

.email-system-add-domain-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.44fr);
  gap: 12px;
}

.email-system-helper-card,
.email-system-empty-card {
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.email-system-dns-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.email-system-dns-card > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.email-system-dns-card > header span {
  border-radius: 999px;
  padding: 5px 9px;
  color: #075f52;
  background: #e9fffb;
  font-size: 11px;
  font-weight: 950;
}

.email-system-dns-form {
  grid-template-columns: minmax(0, 1fr);
}

.email-system-dns-sync-form {
  display: flex;
  justify-content: flex-start;
}

.email-system-dns-receipt {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  margin: -4px 0 10px;
  padding: 5px 9px;
  color: #075f52;
  background: #e9fffb;
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.email-system-helper-card strong,
.email-system-empty-card strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
}

.email-system-helper-card span,
.email-system-empty-card span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

@media (max-width: 860px) {
  .email-system-ghl-top,
  .email-system-ghl-header-row,
  .email-system-ghl-actions,
  .email-system-provider-actions {
    align-items: stretch;
  }

  .email-system-ghl-top,
  .email-system-ghl-header-row {
    flex-direction: column;
  }

  .email-system-ghl-actions,
  .email-system-provider-actions {
    justify-content: flex-start;
  }

  .email-system-ghl-actions .button,
  .email-system-provider-actions .button,
  .email-system-ghl-header-row .button {
    justify-content: center;
    width: 100%;
  }

  .email-system-ghl-stats,
  .email-system-ghl-stats.is-bounce,
  .email-system-ghl-stats.is-compact,
	  .email-system-ghl-provider-grid,
	  .email-system-preference-form,
	  .email-system-setting-row,
	  .email-system-toggle-grid,
	  .email-system-postmaster-layout,
	  .email-system-ses-card,
	  .email-system-add-domain-layout {
	    grid-template-columns: minmax(0, 1fr);
	  }

	  .email-system-ses-chips {
	    justify-content: flex-start;
	  }

  .email-system-setting-row {
    gap: 10px;
    padding: 14px;
  }

  .email-system-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .email-system-tabs .phone-system-tab {
    flex: 0 0 auto;
  }

  .email-system-modal {
    width: min(100%, calc(100vw - 20px));
    margin: 10px auto;
  }

  .email-system-modal > header {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .email-system-modal > header .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .email-system-provider-option {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .email-system-provider-option > svg {
    grid-column: 2;
  }
}

.quote-zelle-review {
  display: grid;
  gap: 10px;
  border: 1px solid #d7e1e8;
  border-top: 4px solid #6b4bbd;
  border-radius: 8px;
  padding: 13px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.quote-zelle-review > header,
.quote-zelle-review > article,
.quote-zelle-review-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quote-zelle-review > header span,
.quote-zelle-review > header strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
}

.quote-zelle-review > article {
  border-top: 1px solid var(--surface-line);
  padding-top: 10px;
}

.quote-zelle-review > article > div:first-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.quote-zelle-review > article strong {
  color: var(--navy);
}

.quote-zelle-review > article span,
.quote-zelle-review > article small,
.quote-zelle-review > p {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.quote-zelle-review > p {
  min-height: 15px;
  margin: 0;
}

.quote-public-decision-actions .quote-zelle-button {
  width: 100%;
  min-height: 48px;
  border-color: #6b4bbd;
  color: #51349a;
  background: #fff;
}

.quote-zelle-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  border: 1px solid #cabdea;
  border-radius: 8px;
  padding: 11px 12px;
  color: #40277e;
  background: #f7f4ff;
}

.quote-zelle-pending[hidden] {
  display: none;
}

.quote-zelle-pending > svg {
  inline-size: 20px;
  block-size: 20px;
  flex: 0 0 auto;
}

.quote-zelle-pending > span {
  display: grid;
  gap: 1px;
  text-align: left;
}

.quote-zelle-pending strong,
.quote-zelle-pending small {
  color: inherit;
}

.quote-zelle-dialog {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  color: var(--navy);
  background: #fff;
  box-shadow: 0 28px 80px rgba(3, 21, 34, 0.34);
}

.quote-zelle-dialog::backdrop {
  background: rgba(3, 21, 34, 0.62);
}

.quote-zelle-dialog-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.quote-zelle-dialog-card > header,
.quote-zelle-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quote-zelle-dialog-card > header > div {
  display: grid;
  gap: 1px;
}

.quote-zelle-dialog-card > header span {
  color: #6b4bbd;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.quote-zelle-dialog-card h3,
.quote-zelle-dialog-card p {
  margin: 0;
}

.quote-zelle-dialog-card p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.quote-zelle-instructions {
  display: grid;
  border: 1px solid #d7e1e8;
  border-radius: 8px;
  overflow: hidden;
}

.quote-zelle-instructions > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 12px;
  background: #f8fafb;
}

.quote-zelle-instructions > div + div {
  border-top: 1px solid #d7e1e8;
}

.quote-zelle-instructions span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-zelle-instructions strong {
  overflow-wrap: anywhere;
  color: var(--navy);
}

.quote-zelle-dialog .field em {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 620px) {
  .quote-zelle-review > article,
  .quote-zelle-review-actions,
  .quote-zelle-dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-zelle-review-actions .button,
  .quote-zelle-dialog-actions .button {
    width: 100%;
  }

  .invoice-offline-methods > div {
    flex-basis: 100%;
  }
}

/* Calendar-first scheduler. The board stays primary; setup and diagnostics open on demand. */
.schedule-command-bar {
  position: relative;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 56px;
  border: 1px solid #d5dee4;
  border-radius: 7px;
  padding: 7px;
  background: #fff;
}

.schedule-date-cluster,
.schedule-command-filters,
.schedule-view-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.schedule-date-cluster {
  flex: 1 1 330px;
}

.schedule-command-filters {
  flex: 0 1 auto;
}

.schedule-view-cluster {
  flex: 0 0 auto;
  margin-left: auto;
}

.schedule-date-picker {
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 148px;
  max-width: 260px;
  min-height: 40px;
  border: 1px solid #cad6de;
  border-radius: 6px;
  padding: 0 10px;
  color: #123b56;
  background: #fff;
  cursor: pointer;
}

.schedule-date-picker > svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: #526c7d;
}

.schedule-date-picker > span {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-date-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.schedule-icon-control,
.schedule-today-control,
.schedule-create-control,
.schedule-tool-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border: 1px solid #cad6de;
  border-radius: 6px;
  padding: 0 10px;
  color: #123b56;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.schedule-icon-control {
  width: 38px;
  padding: 0;
}

.schedule-icon-control svg,
.schedule-create-control svg,
.schedule-tool-control svg {
  width: 16px;
  height: 16px;
}

.schedule-create-control {
  flex: 0 0 auto;
  min-width: 92px;
  border-color: #087c48;
  color: #fff;
  background: #07864d;
}

.schedule-create-control:hover,
.schedule-create-control:focus-visible {
  background: #056f41;
}

.schedule-icon-control:hover,
.schedule-today-control:hover,
.schedule-tool-control:hover,
.schedule-tool-control.is-active {
  border-color: #07958f;
  color: #075e59;
  background: #effcf9;
}

.schedule-tool-control.is-warning {
  border-color: rgba(245, 158, 11, .48);
  color: #74470a;
  background: #fff8e9;
}

.schedule-tool-control em {
  min-width: 20px;
  border-radius: 999px;
  padding: 2px 5px;
  color: #fff;
  background: #526c7d;
  font-size: 10px;
  font-style: normal;
  line-height: 1.2;
  text-align: center;
}

.schedule-select-filter {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: center;
  gap: 6px;
  min-height: 40px;
  border: 1px solid #cad6de;
  border-radius: 6px;
  padding: 0 7px 0 9px;
  background: #fff;
}

.schedule-select-filter > span,
.schedule-filter-popover summary > span {
  color: #667b89;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.schedule-select-filter select {
  max-width: 116px;
  min-height: 32px;
  border: 0;
  padding: 0 22px 0 0;
  color: #123b56;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.schedule-select-filter select:focus {
  outline: 0;
}

.schedule-filter-popover {
  position: relative;
}

.schedule-filter-popover > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  border: 1px solid #cad6de;
  border-radius: 6px;
  padding: 0 9px;
  background: #fff;
  cursor: pointer;
  list-style: none;
}

.schedule-filter-popover > summary::-webkit-details-marker {
  display: none;
}

.schedule-filter-popover > summary strong {
  max-width: 96px;
  overflow: hidden;
  color: #123b56;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-filter-popover > summary svg {
  width: 14px;
  height: 14px;
  color: #667b89;
}

.schedule-filter-popover[open] > summary {
  border-color: #07958f;
  box-shadow: 0 0 0 2px rgba(7, 149, 143, .12);
}

.schedule-filter-popover-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  display: grid;
  gap: 8px;
  width: min(320px, calc(100vw - 28px));
  max-height: 360px;
  overflow: auto;
  border: 1px solid #cad6de;
  border-radius: 7px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(5, 24, 44, .18);
}

.schedule-filter-popover-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e2e9ed;
}

.schedule-filter-popover-head strong {
  color: #123b56;
  font-size: 14px;
}

.schedule-filter-popover-head small {
  color: #667b89;
  font-weight: 800;
}

.schedule-filter-popover .schedule-crew-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.schedule-filter-popover .schedule-crew-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  border: 1px solid #d7e1e7;
  border-radius: 6px;
  padding: 0 9px;
  color: #123b56;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.schedule-filter-popover .schedule-crew-chip.active {
  border-color: #07958f;
  background: #effcf9;
}

.schedule-filter-popover .schedule-crew-chip em {
  color: #667b89;
  font-style: normal;
}

.schedule-toolbar {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
  overflow: hidden;
  border: 1px solid #cad6de;
  border-radius: 6px;
}

.schedule-range {
  min-width: 52px;
  min-height: 38px;
  border: 0;
  border-right: 1px solid #d7e1e7;
  border-radius: 0;
  padding: 0 9px;
  background: #fff;
  font-size: 12px;
}

.schedule-range:last-child {
  border-right: 0;
}

.schedule-range svg {
  display: none;
}

.schedule-range.active,
.schedule-range:hover {
  border-color: #d7e1e7;
  color: #075e59;
  background: #e9f8f6;
}

.schedule-load-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 25px;
  padding: 0 2px;
  color: #667b89;
}

.schedule-live-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  color: #075e59;
  background: #e9f8f6;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.schedule-load-strip p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-list {
  min-width: 0;
}

.schedule-resource-board,
.schedule-timegrid,
.schedule-month-calendar {
  border-color: #d5dee4;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(5, 24, 44, .03);
}

.schedule-resource-board,
.schedule-timegrid {
  max-height: calc(100dvh - 205px);
}

.schedule-resource-corner,
.schedule-resource-hours,
.schedule-timegrid-corner,
.schedule-timegrid-head,
.schedule-month-weekday {
  color: #123b56;
  background: #f7fafb;
}

.schedule-resource-corner span,
.schedule-resource-hours span,
.schedule-timegrid-head span {
  color: #667b89;
}

.schedule-timegrid-head {
  border-left-color: #dce5ea;
}

.schedule-timegrid-head.is-selected,
.schedule-timegrid-head.is-today {
  color: #075e59;
  background: #e9f8f6;
}

.schedule-timegrid-head.is-today span,
.schedule-timegrid-head.is-selected span {
  color: #426675;
}

.schedule-time-job,
.schedule-resource-job,
.month-job-pill {
  border-color: rgba(8, 134, 77, .25);
  border-left-color: #07864d;
  color: #123b56;
  background: #eaf8ef;
  box-shadow: none;
  cursor: pointer;
}

.schedule-time-job:hover,
.schedule-resource-job:hover,
.month-job-pill:hover,
.schedule-time-job:focus-visible,
.schedule-resource-job:focus-visible {
  z-index: 6;
  outline: 2px solid rgba(7, 149, 143, .34);
  outline-offset: 1px;
}

.schedule-time-job.is-subcontract-work,
.schedule-resource-job.is-subcontract-work,
.month-job-pill.is-subcontract-work {
  border-left-color: #2563eb;
  background: #eef5ff;
}

.schedule-time-job.is-christmas-work,
.schedule-resource-job.is-christmas-work,
.month-job-pill.is-christmas-work {
  border-left-color: #be123c;
  background: #fff1f2;
}

.schedule-time-job.is-custom-schedule-rule,
.schedule-resource-job.is-custom-schedule-rule,
.month-job-pill.is-custom-schedule-rule,
.schedule-card.is-custom-schedule-rule,
.schedule-job-sheet-card.is-custom-schedule-rule {
  border-left-color: var(--schedule-rule-color, #0f766e);
  background: var(--schedule-rule-bg, #edf8f6);
}

.schedule-time-job.is-completed-work,
.schedule-resource-job.is-completed-work,
.month-job-pill.is-completed-work,
.schedule-time-job.is-complete,
.schedule-resource-job.is-complete,
.month-job-pill.is-complete {
  border-color: #cfd8de;
  border-left-color: #8797a2;
  color: #5f707c;
  background: #f1f4f5;
}

.schedule-time-job strong,
.schedule-resource-job strong,
.month-job-pill strong {
  color: inherit;
}

.schedule-resource-job time,
.schedule-time-job span,
.month-job-pill span {
  color: #365466;
}

.schedule-time-job .schedule-assigned-crew,
.schedule-resource-job .schedule-assigned-crew {
  margin-top: auto;
}

.schedule-time-job .schedule-crew-edit,
.schedule-resource-job .schedule-crew-edit,
.schedule-time-job .schedule-crew-count,
.schedule-resource-job .schedule-crew-count {
  display: none;
}

.schedule-month-cell {
  min-height: 128px;
  padding: 6px;
}

.schedule-month-cell.is-today,
.schedule-month-cell.is-selected,
.schedule-month-cell.is-today.is-selected {
  outline-width: 2px;
  background: #f3fcfa;
}

.month-job-pill {
  gap: 2px;
  padding: 5px 6px;
}

.month-job-pill .schedule-crew-inline {
  overflow: hidden;
  color: #667b89;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-dispatch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr);
  gap: 8px;
  align-items: start;
}

.schedule-dispatch-layout.has-unscheduled {
  grid-template-columns: minmax(0, 1fr) 270px minmax(300px, .46fr);
}

.schedule-dispatch-calendar {
  grid-column: 1;
}

.schedule-dispatch-map {
  position: sticky;
  top: 8px;
  grid-column: -2 / -1;
}

.schedule-dispatch-map .schedule-map-canvas {
  min-height: calc(100dvh - 285px);
}

.schedule-dispatch-head {
  min-height: 42px;
  border-radius: 6px;
  padding: 6px 8px;
}

.schedule-dispatch-head span {
  font-size: 11px;
}

.schedule-unscheduled-drawer {
  position: sticky;
  top: 8px;
  grid-column: 2;
  max-height: calc(100dvh - 205px);
  overflow: hidden;
  border: 1px solid #d5dee4;
  border-radius: 6px;
  background: #fff;
}

.schedule-unscheduled-drawer > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
  border-bottom: 1px solid #dce5ea;
  padding: 6px 8px;
}

.schedule-unscheduled-drawer > header div {
  display: grid;
}

.schedule-unscheduled-drawer > header strong {
  color: #123b56;
  font-size: 13px;
}

.schedule-unscheduled-drawer > header span {
  color: #667b89;
  font-size: 11px;
  font-weight: 800;
}

.schedule-unscheduled-drawer > div {
  display: grid;
  gap: 6px;
  max-height: calc(100dvh - 252px);
  overflow: auto;
  padding: 6px;
}

.schedule-unscheduled-drawer .map-job-card {
  grid-template-columns: 26px minmax(0, 1fr);
  padding: 7px;
}

.schedule-unscheduled-drawer .map-job-actions {
  grid-column: 2;
}

.schedule-manager-drawer[hidden] {
  display: none;
}

.schedule-manager-drawer {
  position: fixed;
  inset: 0;
  z-index: 2600;
}

.schedule-manager-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(5, 24, 44, .38);
  cursor: default;
}

.schedule-manager-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(660px, 100%);
  background: #f6fafb;
  box-shadow: -20px 0 55px rgba(5, 24, 44, .2);
}

.schedule-manager-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
  border-bottom: 1px solid #d5dee4;
  padding: 10px 14px;
  background: #fff;
}

.schedule-manager-panel > header div {
  display: grid;
  gap: 2px;
}

.schedule-manager-panel > header span {
  color: #667b89;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.schedule-manager-panel > header strong {
  color: #123b56;
  font-size: 17px;
}

.schedule-manager-scroll {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 12px;
}

.schedule-manager-scroll .schedule-source-health,
.schedule-manager-scroll .schedule-ops-drawer {
  border-radius: 7px;
}

.schedule-job-sheet {
  position: fixed;
  inset: 0;
  z-index: 2700;
  display: grid;
  place-items: center;
  padding: 16px;
}

.schedule-job-sheet-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(5, 24, 44, .42);
}

.schedule-job-sheet-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(520px, 100%);
  max-height: min(82dvh, 720px);
  overflow: hidden;
  border: 1px solid #cad6de;
  border-top: 5px solid #07864d;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(5, 24, 44, .28);
}

.schedule-job-sheet-card.is-subcontract-work {
  border-top-color: #2563eb;
}

.schedule-job-sheet-card.is-christmas-work {
  border-top-color: #be123c;
}

.schedule-job-sheet-card.is-completed-work {
  border-top-color: #8797a2;
}

.schedule-job-sheet-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e0e7eb;
  padding: 14px;
}

.schedule-job-sheet-card > header div {
  min-width: 0;
}

.schedule-job-sheet-card > header span {
  color: #07864d;
  font-size: 12px;
  font-weight: 950;
}

.schedule-job-sheet-card > header h2 {
  margin: 3px 0 2px;
  color: #123b56;
  font-size: 22px;
  line-height: 1.15;
}

.schedule-job-sheet-card > header p,
.schedule-job-sheet-section p {
  margin: 0;
  color: #667b89;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.schedule-job-sheet-scroll {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 12px 14px;
}

.schedule-job-completion,
.schedule-job-location,
.schedule-job-sheet-section {
  border: 1px solid #dbe4e9;
  border-radius: 6px;
  padding: 10px;
  background: #fff;
}

.schedule-job-completion {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.schedule-job-completion > svg {
  width: 22px;
  height: 22px;
  color: #8797a2;
}

.schedule-job-completion.is-complete > svg {
  color: #07864d;
}

.schedule-job-completion div {
  display: grid;
  gap: 2px;
}

.schedule-job-completion strong,
.schedule-job-location strong,
.schedule-job-sheet-section > strong,
.schedule-job-sheet-section-head strong {
  color: #123b56;
  font-size: 13px;
}

.schedule-job-completion span {
  color: #667b89;
  font-size: 11px;
  font-weight: 800;
}

.schedule-job-location {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  color: #365466;
  text-decoration: none;
}

.schedule-job-location > svg {
  width: 18px;
  height: 18px;
  color: #07958f;
}

.schedule-job-location span {
  display: grid;
  gap: 2px;
  font-size: 12px;
  font-weight: 750;
}

.schedule-job-sheet-section {
  display: grid;
  gap: 8px;
}

.schedule-job-sheet-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.schedule-job-line-items {
  display: grid;
  border-top: 1px solid #edf1f3;
}

.schedule-job-line-items div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  border-bottom: 1px solid #edf1f3;
  color: #365466;
  font-size: 12px;
  font-weight: 800;
}

.schedule-job-line-items em {
  color: #667b89;
  font-style: normal;
}

.schedule-job-sheet-card > footer {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(88px, auto));
  gap: 8px;
  align-items: center;
  justify-content: end;
  border-top: 1px solid #e0e7eb;
  padding: 10px 14px;
  background: #f8fbfc;
}

.schedule-job-quick-actions {
  display: flex;
  gap: 5px;
  margin-right: auto;
}

.schedule-job-quick-actions .icon-button {
  width: 40px;
  height: 40px;
}

.schedule-job-sheet-card > footer > .button {
  gap: 6px;
}

.schedule-job-sheet-card > footer > .button svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1380px) {
  .schedule-command-bar {
    flex-wrap: wrap;
  }

  .schedule-date-cluster {
    flex: 1 1 52%;
  }

  .schedule-command-filters {
    order: 3;
    flex: 1 1 100%;
  }

  .schedule-view-cluster {
    flex: 0 0 auto;
  }

  .schedule-dispatch-layout.has-unscheduled {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .5fr);
  }

  .schedule-dispatch-layout.has-unscheduled .schedule-unscheduled-drawer {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: 280px;
  }

  .schedule-dispatch-layout.has-unscheduled .schedule-unscheduled-drawer > div {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    max-height: 224px;
  }
}

@media (max-width: 940px) {
  .schedule-command-bar {
    position: sticky;
    top: 0;
    z-index: 45;
  }

  .schedule-date-cluster {
    flex: 1 1 100%;
  }

  .schedule-command-filters {
    order: 3;
    flex: 1 1 100%;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .schedule-command-filters > * {
    flex: 0 0 auto;
  }

  .schedule-view-cluster {
    margin-left: 0;
  }

  .schedule-dispatch-layout,
  .schedule-dispatch-layout.has-unscheduled {
    grid-template-columns: 1fr;
  }

  .schedule-dispatch-calendar,
  .schedule-dispatch-map,
  .schedule-unscheduled-drawer,
  .schedule-dispatch-layout.has-unscheduled .schedule-unscheduled-drawer {
    position: static;
    grid-column: 1;
  }

  .schedule-dispatch-map {
    grid-row: 2;
  }

  .schedule-dispatch-layout.has-unscheduled .schedule-unscheduled-drawer {
    grid-row: 3;
  }

  .schedule-dispatch-map .schedule-map-canvas {
    min-height: 420px;
  }
}

@media (max-width: 760px) {
  .schedule-view {
    max-width: 100%;
  }

  .schedule-view .section-body {
    gap: 6px;
    padding: 0;
  }

  .schedule-command-bar {
    gap: 6px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    padding: 6px 0;
  }

  .schedule-date-picker {
    flex: 1 1 auto;
    max-width: none;
  }

  .schedule-today-control {
    display: none;
  }

  .schedule-create-control {
    min-width: 40px;
    width: 40px;
    padding: 0;
  }

  .schedule-create-control span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .schedule-view-cluster {
    order: 2;
    width: 100%;
    overflow-x: auto;
  }

  .schedule-toolbar {
    flex: 1 0 auto;
  }

  .schedule-range {
    min-width: 58px;
  }

  .schedule-tool-control {
    min-width: 40px;
    padding: 0 8px;
  }

  .schedule-tool-control span {
    display: none;
  }

  .schedule-command-filters {
    order: 3;
  }

  .schedule-select-filter {
    min-height: 36px;
  }

  .schedule-select-filter select {
    max-width: 104px;
  }

  .schedule-filter-popover > summary {
    min-height: 36px;
  }

  .schedule-load-strip {
    min-height: 20px;
  }

  .schedule-load-strip p {
    display: none;
  }

  .schedule-live-status {
    padding-left: 2px;
    background: transparent;
  }

  .schedule-resource-board,
  .schedule-timegrid {
    display: none;
  }

  .schedule-mobile-summary {
    display: grid;
  }

  .schedule-job-sheet {
    align-items: end;
    padding: 0;
  }

  .schedule-job-sheet-card {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 8px 8px 0 0;
  }

  .schedule-job-sheet-card > footer {
    grid-template-columns: auto 1fr 1fr;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .schedule-job-sheet-card > footer > .button.primary {
    grid-column: 1 / -1;
  }

  .schedule-manager-panel {
    top: 42px;
    width: 100%;
  }

  .schedule-month-calendar {
    display: none;
  }
}

/* Campaigns */
.marketing-campaign-page {
  min-height: calc(100dvh - var(--topbar-height, 76px));
  background: #f3f7f8;
}

.marketing-campaign-workspace {
  min-height: calc(100dvh - var(--topbar-height, 76px));
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
}

.marketing-campaign-list {
  min-width: 0;
  border-right: 1px solid #d8e2e5;
  background: #fff;
}

.marketing-campaign-list-head {
  height: 50px;
  padding: 0 14px;
  border-bottom: 1px solid #e1e8ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #10354b;
}

.marketing-campaign-list-head > div { min-width: 0; display: flex; align-items: center; gap: 7px; }
.marketing-campaign-list-head > div span {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 50%;
  background: #edf3f5;
  display: grid;
  place-items: center;
  color: #667782;
  font-size: 12px;
  font-weight: 800;
}

.marketing-campaign-list-head .icon-button { width: 34px; height: 34px; color: #fff; background: #103f5b; }
.marketing-campaign-list-head .icon-button:hover { background: #0b3046; }
.marketing-campaign-list-head .icon-button svg { width: 17px; height: 17px; }

.marketing-campaign-list-scroll {
  max-height: calc(100dvh - var(--topbar-height, 76px) - 50px);
  padding: 8px;
  overflow-y: auto;
}

.marketing-campaign-list-item {
  width: 100%;
  min-height: 64px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  color: #10354b;
  text-align: left;
  cursor: pointer;
}

.marketing-campaign-list-item:hover { background: #f2f7f8; }
.marketing-campaign-list-item.is-active { border-color: #9bd4cc; background: #eaf7f5; }
.marketing-campaign-list-item > span:last-child { min-width: 0; display: grid; gap: 3px; }
.marketing-campaign-list-item strong,
.marketing-campaign-list-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marketing-campaign-list-item strong { font-size: 13px; }
.marketing-campaign-list-item small { color: #687984; font-size: 11px; font-weight: 700; }
.marketing-campaign-channel {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #edf3f5;
  display: grid;
  place-items: center;
  color: #0f766e;
}
.marketing-campaign-channel svg { width: 17px; height: 17px; }
.marketing-campaign-list-empty { margin: 20px 10px; color: #72818a; font-size: 13px; text-align: center; }

.marketing-campaign-main { min-width: 0; }
.marketing-template-picker { width: min(760px, calc(100% - 32px)); margin: 34px auto; }
.marketing-template-picker > header { margin-bottom: 20px; }
.marketing-template-picker > header .label { color: #0f766e; }
.marketing-template-picker > header h2 { margin: 5px 0 0; color: #10354b; font-size: 28px; }
.marketing-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.marketing-template-option {
  min-height: 108px;
  padding: 15px;
  border: 1px solid #d3dfe3;
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  color: #10354b;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.marketing-template-option:hover { border-color: #79bfb6; box-shadow: 0 8px 24px rgba(16, 53, 75, .08); transform: translateY(-1px); }
.marketing-template-option > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.marketing-template-option strong { font-size: 16px; }
.marketing-template-option small { color: #687984; font-size: 12px; line-height: 1.45; }
.marketing-template-option > svg { width: 17px; height: 17px; color: #81909a; }
.marketing-template-icon { width: 46px; height: 46px; border-radius: 7px; display: grid; place-items: center; background: #e8f6f4; color: #0f766e; }
.marketing-template-icon.sms { background: #e9f0fa; color: #245b91; }
.marketing-template-icon svg { width: 22px; height: 22px; }
.marketing-template-picker > .text-button { margin-top: 14px; }

.marketing-campaign-editor { min-width: 0; }
.marketing-campaign-editor-head {
  min-height: 66px;
  padding: 10px 16px;
  border-bottom: 1px solid #d8e2e5;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.marketing-campaign-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.marketing-campaign-title input {
  width: min(420px, 42vw);
  min-width: 160px;
  height: 40px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #10354b;
  font-size: 18px;
  font-weight: 800;
}
.marketing-campaign-title input:hover:not(:disabled),
.marketing-campaign-title input:focus { border-color: #c7d6db; background: #fff; outline: 0; }
.marketing-campaign-title input:disabled { opacity: 1; }
.marketing-campaign-channel-label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; color: #60727d; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.marketing-campaign-channel-label svg { width: 16px; height: 16px; }
.marketing-campaign-editor-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.marketing-save-state { color: #72818a; font-size: 11px; font-weight: 800; }
.marketing-campaign-status { min-height: 27px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; background: #edf3f5; color: #536671; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.marketing-campaign-status.is-running { background: #e4f5ef; color: #086b50; }
.marketing-campaign-status.is-scheduled { background: #e9f0fa; color: #245b91; }
.marketing-campaign-status.is-paused { background: #fff2d9; color: #8a5d00; }
.marketing-campaign-status.is-completed { background: #e8f6f4; color: #0f766e; }

.marketing-campaign-steps {
  height: 54px;
  border-bottom: 1px solid #d8e2e5;
  background: #fff;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
.marketing-campaign-steps button {
  min-width: 142px;
  padding: 0 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #6a7b85;
  font-weight: 800;
  cursor: pointer;
}
.marketing-campaign-steps button span { width: 23px; height: 23px; border-radius: 50%; background: #edf2f4; display: grid; place-items: center; font-size: 11px; }
.marketing-campaign-steps button.is-active { border-bottom-color: #0f766e; color: #0f5f59; }
.marketing-campaign-steps button.is-active span { background: #0f766e; color: #fff; }

.marketing-campaign-step-body { min-height: calc(100dvh - 268px); }
.marketing-campaign-stage { width: min(1120px, calc(100% - 32px)); margin: 22px auto 0; display: grid; grid-template-columns: minmax(340px, .88fr) minmax(390px, 1.12fr); gap: 18px; align-items: start; }
.marketing-campaign-form-panel,
.marketing-audience-preview,
.marketing-live-preview-shell,
.marketing-review-summary {
  min-width: 0;
  border: 1px solid #d4e0e3;
  border-radius: 8px;
  background: #fff;
}
.marketing-campaign-form-panel,
.marketing-review-summary { padding: 18px; }
.marketing-campaign-form-panel > header,
.marketing-review-summary > header { margin-bottom: 17px; }
.marketing-campaign-form-panel h3,
.marketing-review-summary h3 { margin: 0; color: #10354b; font-size: 20px; }
.marketing-campaign-form-panel header p,
.marketing-review-summary header p { margin: 3px 0 0; color: #6b7b85; font-size: 13px; }
.marketing-field { min-width: 0; display: grid; gap: 6px; margin-bottom: 14px; }
.marketing-field > span,
.marketing-image-field > .label,
.marketing-tag-picker legend { color: #536671; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.marketing-field input,
.marketing-field select,
.marketing-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid #cbd8dc;
  border-radius: 6px;
  background: #fff;
  color: #173b50;
  font: inherit;
  letter-spacing: 0;
}
.marketing-field textarea { resize: vertical; line-height: 1.5; }
.marketing-field input:focus,
.marketing-field select:focus,
.marketing-field textarea:focus { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, .1); outline: 0; }
.marketing-field input:disabled,
.marketing-field select:disabled,
.marketing-field textarea:disabled { background: #f4f7f8; color: #5f707a; opacity: 1; }
.marketing-field > small { color: #7a8992; font-size: 11px; }
.marketing-field code { padding: 1px 4px; border-radius: 3px; background: #edf3f5; color: #0f5f59; }
.marketing-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.marketing-field-row .marketing-field { min-width: 0; }

.marketing-tag-picker { max-height: 260px; margin: 0; padding: 8px; border: 1px solid #d4dfe2; border-radius: 6px; overflow-y: auto; }
.marketing-tag-picker legend { padding: 0 4px; }
.marketing-tag-picker label { min-height: 40px; padding: 6px 7px; border-radius: 5px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; cursor: pointer; }
.marketing-tag-picker label:hover { background: #f2f7f8; }
.marketing-tag-picker input { width: 16px; height: 16px; accent-color: #0f766e; }
.marketing-tag-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #173b50; font-size: 13px; font-weight: 700; }
.marketing-tag-picker small { color: #74848d; }
.marketing-tag-picker p { margin: 10px; color: #72818a; font-size: 12px; }

.marketing-guardrail { margin-top: 14px; padding: 10px 11px; border-radius: 6px; background: #edf5fa; display: flex; gap: 9px; color: #315c75; font-size: 12px; line-height: 1.45; }
.marketing-guardrail svg { flex: 0 0 auto; width: 18px; height: 18px; }
.marketing-audience-preview { padding: 17px; }
.marketing-audience-preview > header { display: flex; align-items: center; justify-content: space-between; }
.marketing-audience-preview .icon-button { width: 34px; height: 34px; }
.marketing-audience-totals { margin: 12px 0 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.marketing-audience-totals div { min-height: 86px; padding: 13px; border-radius: 6px; background: #f0f7f6; display: grid; align-content: center; }
.marketing-audience-totals div:last-child { background: #f4f6f7; }
.marketing-audience-totals strong { color: #10354b; font-size: 28px; line-height: 1; }
.marketing-audience-totals span { margin-top: 6px; color: #647680; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.marketing-audience-sample { display: grid; gap: 0; }
.marketing-audience-sample > .label { margin-bottom: 4px; }
.marketing-audience-sample > div { min-width: 0; padding: 9px 2px; border-bottom: 1px solid #e5ebed; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.marketing-audience-sample strong,
.marketing-audience-sample small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marketing-audience-sample strong { color: #173b50; font-size: 12px; }
.marketing-audience-sample small { color: #74848d; font-size: 11px; }
.marketing-audience-none { margin: 18px 0; color: #74848d; font-size: 13px; text-align: center; }
.marketing-exclusions { margin-top: 12px; }
.marketing-exclusions summary { color: #526671; font-size: 12px; font-weight: 800; cursor: pointer; }
.marketing-exclusions div { padding: 6px 0; border-bottom: 1px solid #edf1f2; display: flex; justify-content: space-between; gap: 10px; color: #677983; font-size: 11px; text-transform: capitalize; }
.marketing-preview-loading { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 9px; color: #72818a; font-size: 12px; }
.marketing-alert { padding: 10px 11px; border-radius: 6px; font-size: 12px; line-height: 1.45; }
.marketing-alert.is-blocked { background: #fff0ee; color: #9e2f34; }

.marketing-image-field { margin-bottom: 14px; display: grid; gap: 6px; }
.marketing-image-upload { min-height: 78px; border: 1px dashed #9db0b8; border-radius: 6px; background: #f8fafb; display: grid; place-items: center; align-content: center; gap: 4px; color: #536671; font-weight: 800; cursor: pointer; }
.marketing-image-upload:hover { border-color: #0f766e; color: #0f766e; }
.marketing-image-upload svg { width: 22px; height: 22px; }
.marketing-image-selected { position: relative; height: 132px; border: 1px solid #d4dfe2; border-radius: 6px; overflow: hidden; }
.marketing-image-selected img { width: 100%; height: 100%; object-fit: cover; }
.marketing-image-selected .icon-button { position: absolute; top: 8px; right: 8px; background: #fff; box-shadow: 0 3px 12px rgba(16, 53, 75, .18); }
.marketing-color-fields { display: flex; align-items: center; gap: 12px; }
.marketing-color-fields label { display: flex; align-items: center; gap: 7px; color: #596c77; font-size: 11px; font-weight: 800; }
.marketing-color-fields input { width: 42px; height: 34px; padding: 3px; border: 1px solid #cbd8dc; border-radius: 5px; background: #fff; }

.marketing-message-stage.is-email {
  width: min(1420px, calc(100% - 24px));
  display: block;
}

.marketing-email-meta {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #d4e0e3;
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.marketing-email-meta .marketing-field { margin: 0; }

.marketing-email-studio {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(520px, 1.18fr) minmax(350px, .82fr);
  gap: 10px;
  align-items: start;
}

.marketing-email-builder {
  min-width: 0;
  overflow: visible;
  border: 1px solid #cedbdf;
  border-radius: 8px;
  background: #fff;
}

.marketing-email-builder-toolbar {
  position: relative;
  z-index: 4;
  min-height: 54px;
  padding: 7px;
  border-bottom: 1px solid #d8e2e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.marketing-block-palette,
.marketing-builder-toolbar-menus {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.marketing-block-palette > button,
.marketing-builder-menu > summary {
  min-width: 40px;
  min-height: 38px;
  padding: 5px 8px;
  border: 1px solid #d4dfe2;
  border-radius: 6px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #294a5d;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.marketing-block-palette > button:hover:not(:disabled),
.marketing-builder-menu > summary:hover { border-color: #76b9b0; background: #f0f8f7; color: #0f665f; }
.marketing-block-palette > button:disabled { cursor: default; opacity: .55; }
.marketing-block-palette svg,
.marketing-builder-menu > summary svg { width: 15px; height: 15px; }

.marketing-builder-menu { position: relative; }
.marketing-builder-menu > summary { list-style: none; }
.marketing-builder-menu > summary::-webkit-details-marker { display: none; }
.marketing-builder-menu[open] > summary { border-color: #0f766e; color: #0f665f; background: #eaf7f5; }
.marketing-builder-menu > div {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 8;
  width: 250px;
  padding: 10px;
  border: 1px solid #cbd8dc;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 53, 75, .16);
}

.marketing-personalize-menu > div { width: 180px; display: grid; gap: 3px; }
.marketing-personalize-menu button {
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #173b50;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.marketing-personalize-menu button:hover:not(:disabled) { background: #edf6f5; color: #0f665f; }
.marketing-theme-menu > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.marketing-theme-menu label { min-width: 0; display: grid; gap: 5px; color: #61737e; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.marketing-theme-menu label > input[type="color"] { width: 100%; height: 34px; padding: 3px; border: 1px solid #cbd8dc; border-radius: 5px; background: #fff; }
.marketing-theme-menu label.is-range { grid-column: 1 / -1; }
.marketing-theme-menu label.is-range > span { display: flex; justify-content: space-between; gap: 8px; }
.marketing-theme-menu label.is-range input { width: 100%; accent-color: #0f766e; }

.marketing-email-builder-scroll {
  max-height: calc(100dvh - 294px);
  min-height: 520px;
  padding: 18px;
  overflow: auto;
}

.marketing-email-builder-canvas {
  width: 100%;
  min-height: 470px;
  margin: 0 auto;
  padding: 12px 0 0;
  border: 1px solid #d8e2e5;
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(16, 53, 75, .09);
}

.marketing-builder-block {
  position: relative;
  margin: 0 10px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.marketing-builder-block:hover { border-color: #bdd0d5; }
.marketing-builder-block.is-selected { border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15, 118, 110, .1); }
.marketing-builder-block.is-dragging { opacity: .45; }
.marketing-builder-block.is-drop-target { border-color: #1c7ed6; box-shadow: 0 -3px 0 #1c7ed6; }
.marketing-builder-block > header {
  min-height: 36px;
  padding: 3px 4px;
  border-bottom: 1px solid #e4eaec;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 3px;
  align-items: center;
  background: #f7f9fa;
  border-radius: 6px 6px 0 0;
}
.marketing-builder-block.is-selected > header { background: #eaf7f5; }
.marketing-builder-drag,
.marketing-builder-select {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #536873;
  cursor: pointer;
}
.marketing-builder-drag { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
.marketing-builder-drag:disabled { cursor: default; opacity: .45; }
.marketing-builder-drag svg { width: 15px; height: 15px; }
.marketing-builder-select { height: 30px; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.marketing-builder-select > span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.marketing-builder-select > span svg { width: 14px; height: 14px; }
.marketing-builder-select > small { color: #87949b; font-size: 10px; font-weight: 800; }
.marketing-builder-actions { display: flex; align-items: center; gap: 2px; }
.marketing-builder-actions .icon-button { width: 28px; height: 28px; min-width: 28px; padding: 0; border: 0; background: transparent; }
.marketing-builder-actions .icon-button:hover:not(:disabled) { background: #fff; }
.marketing-builder-actions .icon-button:disabled { opacity: .25; }
.marketing-builder-actions .icon-button svg { width: 14px; height: 14px; }
.marketing-builder-actions .icon-button.danger { color: #b4233d; }

.marketing-builder-block-visual {
  width: 100%;
  min-height: 38px;
  padding: 9px var(--campaign-pad, 32px);
  border: 0;
  background: transparent;
  display: block;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}
.marketing-builder-block-visual:hover { background: rgba(15, 118, 110, .025); }

.marketing-builder-inspector { padding: 11px; border-top: 1px solid #dce7e8; background: #f5faf9; border-radius: 0 0 6px 6px; }
.marketing-block-inspector-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-items: end; }
.marketing-block-control { min-width: 0; display: grid; gap: 5px; color: #61737e; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.marketing-block-control.is-wide { grid-column: 1 / -1; }
.marketing-block-control > input:not([type="color"]):not([type="range"]),
.marketing-block-control > select,
.marketing-block-control > textarea {
  width: 100%;
  min-height: 39px;
  padding: 8px 9px;
  border: 1px solid #c8d7db;
  border-radius: 5px;
  background: #fff;
  color: #173b50;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.marketing-block-control > textarea { resize: vertical; }
.marketing-block-control > input:focus,
.marketing-block-control > select:focus,
.marketing-block-control > textarea:focus { border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15, 118, 110, .1); outline: 0; }
.marketing-block-control > input[type="color"] { width: 100%; height: 39px; padding: 3px; border: 1px solid #c8d7db; border-radius: 5px; background: #fff; }
.marketing-block-control.is-range { grid-column: 1 / -1; }
.marketing-block-control.is-range > span { display: flex; justify-content: space-between; gap: 8px; }
.marketing-block-control.is-range > input { width: 100%; accent-color: #0f766e; }
.marketing-block-image-file { min-height: 84px; padding: 7px; border: 1px solid #c8d7db; border-radius: 6px; background: #fff; display: grid; grid-template-columns: 90px minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.marketing-block-image-file img { width: 90px; height: 68px; object-fit: cover; border-radius: 4px; }
.marketing-block-image-file .icon-button { width: 34px; height: 34px; color: #b4233d; }
.marketing-builder-empty { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 7px; color: #71818a; text-align: center; }
.marketing-builder-empty svg { width: 31px; height: 31px; color: #7ba9a4; }
.marketing-builder-empty strong { color: #294a5d; }
.marketing-builder-empty span { font-size: 12px; }
.marketing-builder-footer-preview { margin-top: 10px; padding: 15px 18px 17px; border-top: 1px solid #e1e8ea; color: #89959b; font-size: 10px; text-align: center; }

.marketing-preview-device-toggle { display: inline-flex; align-items: center; gap: 3px; }
.marketing-preview-device-toggle button { width: 31px; height: 31px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; display: grid; place-items: center; color: #71818a; cursor: pointer; }
.marketing-preview-device-toggle button.is-active { border-color: #9fcac5; background: #eaf7f5; color: #0f665f; }
.marketing-preview-device-toggle svg { width: 15px; height: 15px; }
.marketing-studio-preview { position: sticky; top: 10px; }

.marketing-live-preview-shell { overflow: hidden; }
.marketing-live-preview-shell > header { min-height: 45px; padding: 0 13px; border-bottom: 1px solid #dbe4e7; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marketing-live-preview-shell > header > span:last-child { max-width: 70%; overflow: hidden; color: #74848d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.marketing-live-preview-shell > div { padding: 15px; background: #e8eff1; }
.marketing-email-preview { overflow: hidden; border-radius: 6px; box-shadow: 0 8px 26px rgba(16, 53, 75, .12); }
.marketing-email-inbox-line { padding: 10px 12px; border-bottom: 1px solid #e2e8ea; background: #fff; display: grid; gap: 3px; color: #72818a; font-size: 10px; }
.marketing-email-inbox-line strong { color: #324c5d; }
.marketing-email-preview-stage { padding: 20px; background: var(--campaign-bg, #f3f7f8); overflow: auto; }
.marketing-email-canvas { width: 100%; margin: 0 auto; overflow: hidden; background: var(--campaign-card, #fff); border: 1px solid #dce5e7; border-radius: 6px; }
.marketing-email-image { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.marketing-email-copy { padding: calc(var(--campaign-pad, 32px) - 8px) 0 0; }
.marketing-email-eyebrow { display: block; margin-bottom: 8px; color: var(--campaign-accent); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.marketing-email-copy h2 { margin: 0; color: var(--campaign-dark); font-size: 27px; line-height: 1.15; }
.marketing-email-copy p { margin: 0 0 14px; color: #3f5360; font-size: 14px; line-height: 1.62; }
.marketing-email-cta { display: inline-block; margin: 2px 0 19px; padding: 12px 18px; border-radius: 6px; color: #fff; font-size: 14px; font-weight: 900; text-decoration: none; pointer-events: none; }
.marketing-email-copy .marketing-email-closing { color: #667782; font-size: 12px; }
.marketing-preview-block { padding: 7px var(--campaign-pad, 32px); }
.marketing-preview-heading { margin: 0; line-height: 1.18; letter-spacing: 0; }
.marketing-preview-text p { color: inherit; font-size: inherit; }
.marketing-preview-text p:last-child { margin-bottom: 0; }
.marketing-preview-eyebrow { margin: 0 !important; font-weight: 900; line-height: 1.35 !important; text-transform: uppercase; }
.marketing-preview-image-wrap img { display: inline-block; max-width: 100%; height: auto; object-fit: contain; }
.marketing-preview-image-placeholder { min-height: 100px; border: 1px dashed #b6c6cb; border-radius: 6px; background: #f7f9fa; display: grid; place-items: center; align-content: center; gap: 5px; color: #75858e; font-size: 11px; font-weight: 800; }
.marketing-preview-image-placeholder svg { width: 22px; height: 22px; }
.marketing-preview-button-wrap .marketing-email-cta { margin: 0; }
.marketing-preview-divider { margin: 0 auto; }
.marketing-email-compliance { margin: 15px var(--campaign-pad, 32px) 0; padding: 15px 0 22px; border-top: 1px solid #e4eaec; color: #86939a; font-size: 9px; line-height: 1.5; }
.marketing-email-preview.is-mobile { width: min(390px, 100%); margin: 0 auto; }
.marketing-email-preview.is-mobile .marketing-email-preview-stage { padding: 10px; }
.marketing-email-preview.is-mobile .marketing-email-inbox-line { font-size: 9px; }
.marketing-phone-preview { width: min(330px, 100%); min-height: 490px; margin: 0 auto; border: 8px solid #16394d; border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 8px 28px rgba(16, 53, 75, .18); }
.marketing-phone-head { min-height: 62px; padding: 15px 14px 10px; border-bottom: 1px solid #e0e7e9; display: grid; justify-items: center; gap: 2px; color: #173b50; }
.marketing-phone-head span { font-weight: 900; }
.marketing-phone-head small { color: #7d8b93; }
.marketing-sms-thread { min-height: 360px; padding: 20px 13px; background: #f8fafb; }
.marketing-sms-bubble { width: fit-content; max-width: 88%; padding: 11px 13px; border-radius: 17px 17px 17px 5px; background: #d9f2ef; color: #193b4b; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.marketing-sms-count { padding: 11px 14px; border-top: 1px solid #e0e7e9; color: #71818a; font-size: 10px; text-align: center; }

.marketing-step-footer { width: min(1120px, calc(100% - 32px)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marketing-step-footer .button { display: inline-flex; align-items: center; gap: 8px; }
.marketing-step-footer svg { width: 16px; height: 16px; }

.marketing-review-checks { display: grid; gap: 8px; }
.marketing-review-checks > div { min-height: 62px; padding: 10px; border: 1px solid #dbe4e7; border-radius: 6px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; align-items: center; }
.marketing-review-checks > div > svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; }
.marketing-review-checks > div > span { min-width: 0; display: grid; gap: 2px; }
.marketing-review-checks strong { color: #173b50; font-size: 13px; }
.marketing-review-checks small { color: #6e7e87; font-size: 11px; line-height: 1.35; }
.marketing-review-checks .is-ready > svg { background: #e4f5ef; color: #087156; }
.marketing-review-checks .is-blocked > svg { background: #fff0ee; color: #a63038; }
.marketing-review-warnings { margin-top: 10px; }
.marketing-review-warnings p { margin: 6px 0 0; padding: 9px; border-radius: 5px; background: #fff7df; display: flex; gap: 7px; color: #7b5c0c; font-size: 11px; }
.marketing-review-warnings svg { flex: 0 0 auto; width: 15px; height: 15px; }
.marketing-test-send { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e1e8ea; }
.marketing-test-send .marketing-field > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.marketing-launch-controls { margin-top: 8px; padding-top: 15px; border-top: 1px solid #e1e8ea; }
.marketing-launch-button { width: 100%; min-height: 50px; display: inline-flex; justify-content: center; gap: 9px; }
.marketing-launch-button svg { width: 18px; height: 18px; }
.marketing-complete-summary { margin-top: 17px; padding: 14px; border-radius: 6px; background: #e8f6f4; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; color: #0f665f; }
.marketing-complete-summary svg { width: 28px; height: 28px; }
.marketing-complete-summary span { display: grid; gap: 2px; }
.marketing-complete-summary small { color: #54756f; }
.marketing-active-note { margin: 10px 0 0; color: #687984; font-size: 11px; }

@media (max-width: 1500px) {
  .marketing-email-studio { grid-template-columns: 1fr; }
  .marketing-studio-preview { position: static; }
  .marketing-email-builder-scroll { max-height: none; }
}

@media (max-width: 1080px) {
  .marketing-campaign-workspace { grid-template-columns: 210px minmax(0, 1fr); }
  .marketing-campaign-stage { grid-template-columns: minmax(300px, .9fr) minmax(340px, 1.1fr); }
}

@media (max-width: 860px) {
  .marketing-campaign-workspace { display: block; }
  .marketing-campaign-list { border-right: 0; border-bottom: 1px solid #d8e2e5; }
  .marketing-campaign-list-head { height: 46px; padding-inline: 10px; }
  .marketing-campaign-list-scroll { max-height: none; padding: 7px 10px; display: flex; gap: 7px; overflow-x: auto; }
  .marketing-campaign-list-item { flex: 0 0 210px; min-height: 56px; }
  .marketing-campaign-list-empty { min-width: 100%; }
  .marketing-campaign-stage { grid-template-columns: 1fr; }
  .marketing-live-preview-shell { order: 2; }
  .marketing-campaign-step-body { min-height: auto; }
  .marketing-message-stage.is-email { width: calc(100% - 20px); }
}

@media (max-width: 620px) {
  .marketing-campaign-list-scroll { padding-inline: 8px; }
  .marketing-campaign-list-item { flex-basis: 185px; }
  .marketing-template-picker { width: calc(100% - 20px); margin: 22px auto; }
  .marketing-template-picker > header h2 { font-size: 23px; }
  .marketing-template-grid { grid-template-columns: 1fr; gap: 9px; }
  .marketing-template-option { min-height: 88px; padding: 12px; }
  .marketing-campaign-editor-head { padding: 8px 10px; align-items: flex-start; }
  .marketing-campaign-title { display: grid; gap: 2px; }
  .marketing-campaign-title input { width: min(54vw, 300px); height: 35px; padding-left: 0; font-size: 16px; }
  .marketing-campaign-editor-actions { gap: 5px; }
  .marketing-campaign-editor-actions .button { display: none; }
  .marketing-save-state { display: none; }
  .marketing-campaign-status { padding-inline: 7px; font-size: 9px; }
  .marketing-campaign-steps { position: sticky; top: 0; z-index: 3; height: 48px; }
  .marketing-campaign-steps button { flex: 1 1 0; min-width: 0; padding: 0 5px; gap: 5px; font-size: 12px; }
  .marketing-campaign-steps button span { width: 20px; height: 20px; }
  .marketing-campaign-stage { width: calc(100% - 20px); margin-top: 10px; gap: 10px; }
  .marketing-campaign-form-panel,
  .marketing-audience-preview,
  .marketing-review-summary { padding: 14px; }
  .marketing-field-row { grid-template-columns: 1fr; gap: 0; }
  .marketing-email-meta { grid-template-columns: 1fr; }
  .marketing-email-builder-toolbar { align-items: stretch; flex-direction: column; }
  .marketing-block-palette { padding-bottom: 2px; overflow-x: auto; }
  .marketing-block-palette > button { flex: 0 0 auto; }
  .marketing-builder-toolbar-menus { justify-content: flex-end; }
  .marketing-email-builder-scroll { min-height: 430px; padding: 8px; }
  .marketing-email-builder-canvas { min-height: 410px; }
  .marketing-builder-block { margin-inline: 6px; }
  .marketing-builder-block > header { grid-template-columns: 27px minmax(0, 1fr) auto; }
  .marketing-builder-actions .icon-button { width: 27px; min-width: 27px; }
  .marketing-builder-actions [data-marketing-move-block] { display: none; }
  .marketing-builder-block-visual { padding-inline: max(16px, var(--campaign-pad, 32px)); }
  .marketing-block-inspector-grid { grid-template-columns: 1fr; }
  .marketing-block-control,
  .marketing-block-control.is-wide,
  .marketing-block-control.is-range { grid-column: 1; }
  .marketing-theme-menu > div { position: fixed; top: auto; right: 10px; bottom: 82px; left: 10px; width: auto; }
  .marketing-step-footer { width: calc(100% - 20px); min-height: 67px; }
  .marketing-step-footer .button { min-width: 0; padding-inline: 12px; }
  .marketing-live-preview-shell > div { padding: 9px; }
  .marketing-preview-block { padding-inline: max(16px, var(--campaign-pad, 32px)); }
  .marketing-email-compliance { margin-inline: max(16px, var(--campaign-pad, 32px)); }
  .marketing-phone-preview { min-height: 430px; }
  .marketing-sms-thread { min-height: 300px; }
  .marketing-test-send .marketing-field > div { grid-template-columns: 1fr; }
  .marketing-test-send .button { width: 100%; }
}

.phone-system-tabs-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  background: #fff;
}

.phone-system-tabs-shell > .phone-system-tabs {
  padding: 10px;
}

.phone-system-tabs-shell > .phone-system-tab-panel {
  padding: 0;
}

.phone-system-advanced-drawer {
  overflow: hidden;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  background: #fff;
}

.phone-system-advanced-drawer > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 50px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.phone-system-advanced-drawer > summary::-webkit-details-marker {
  display: none;
}

.phone-system-advanced-drawer > summary > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #475569;
  background: #f1f5f9;
}

.phone-system-advanced-drawer > summary svg {
  width: 16px;
  height: 16px;
}

.phone-system-advanced-drawer > summary strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.1;
}

.phone-system-advanced-drawer:not([open]) > :not(summary) {
  display: none !important;
}

.phone-system-advanced-drawer[open] {
  display: grid;
  gap: 10px;
  padding-bottom: 10px;
}

.phone-system-advanced-drawer[open] > summary {
  border-bottom: 1px solid rgba(9, 69, 103, 0.1);
}

.phone-system-advanced-drawer > .phone-system-tabs,
.phone-system-advanced-drawer > .phone-system-tab-panel {
  margin-inline: 10px;
}

.phone-system-support-drawer {
  overflow: hidden;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  background: #fff;
}

.phone-system-support-drawer > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 50px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.phone-system-support-drawer > summary::-webkit-details-marker {
  display: none;
}

.phone-system-support-drawer > summary > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #475569;
  background: #f1f5f9;
}

.phone-system-support-drawer > summary svg {
  width: 16px;
  height: 16px;
}

.phone-system-support-drawer > summary strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.1;
}

.phone-system-support-drawer:not([open]) > :not(summary) {
  display: none !important;
}

.phone-system-support-drawer[open] {
  display: grid;
  gap: 10px;
  padding-bottom: 10px;
}

.phone-system-support-drawer[open] > summary {
  border-bottom: 1px solid rgba(9, 69, 103, 0.1);
}

.phone-system-support-body {
  min-width: 0;
  display: grid;
  gap: 10px;
  margin-inline: 10px;
}

.phone-setup-audit-trail {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.phone-setup-audit-trail header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.phone-setup-audit-trail header > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #0f766e;
  background: #ccfbf1;
}

.phone-setup-audit-trail svg {
  width: 15px;
  height: 15px;
}

.phone-setup-audit-trail strong {
  min-width: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}

.phone-setup-audit-trail em {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.phone-setup-audit-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.phone-setup-audit-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) minmax(120px, auto);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.08);
  border-radius: 7px;
  padding: 7px 8px;
  background: #f8fafc;
}

.phone-setup-audit-row > span {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  border-radius: 999px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.phone-setup-audit-row.is-failed > span {
  color: #9f1239;
  background: #ffe4e6;
}

.phone-setup-audit-row strong,
.phone-setup-audit-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-system-reference-row,
.phone-system-gateway {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.phone-system-reference-row strong,
.phone-system-gateway strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}

.phone-system-reference-row span,
.phone-system-gateway span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.phone-system-setup-pieces {
  border: 0;
}

.phone-system-collapsible {
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  background: #fff;
}

.phone-system-collapsible > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  list-style: none;
}

.phone-system-collapsible > summary::-webkit-details-marker {
  display: none;
}

.phone-system-collapsible > summary strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
}

.phone-system-collapsible > summary span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.phone-system-collapsible > summary em {
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--ink);
  background: #f8fafc;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.phone-system-collapsible > .messaging-port-plan {
  border-width: 1px 0 0;
  border-radius: 0 0 8px 8px;
}

.phone-system-ghl-shell {
  max-width: 1160px;
  margin: 0 auto;
}

.phone-system-ghl-top,
.phone-system-ghl-banner,
.phone-admin-panel,
.phone-system-quiet-details {
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  background: #fff;
}

.phone-system-ghl-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.phone-system-ghl-top h3 {
  margin: 0;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.05;
}

.phone-system-ghl-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.phone-replacement-gate {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(210px, 0.85fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-left: 5px solid #f59e0b;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fffaf0;
}

.phone-replacement-gate.is-testing {
  border-left-color: var(--teal);
  background: #f4fffd;
}

.phone-replacement-gate.is-ready {
  border-left-color: var(--green);
  background: #f4fff6;
}

.phone-replacement-main,
.phone-replacement-metrics,
.phone-replacement-chips {
  min-width: 0;
}

.phone-replacement-main {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.phone-replacement-main > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #8a5a00;
  background: #fff3cd;
}

.phone-replacement-gate.is-testing .phone-replacement-main > span {
  color: #075f52;
  background: rgba(20, 184, 166, 0.16);
}

.phone-replacement-gate.is-ready .phone-replacement-main > span {
  color: #057a3d;
  background: #dcfce7;
}

.phone-replacement-main svg {
  width: 17px;
  height: 17px;
}

.phone-replacement-main small,
.phone-replacement-metrics span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-replacement-main strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  margin-top: 2px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-replacement-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.phone-replacement-metrics > div {
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.phone-replacement-metrics strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  margin-top: 2px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-replacement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phone-replacement-chips span {
  max-width: 140px;
  overflow: hidden;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 999px;
  padding: 6px 8px;
  color: var(--ink);
  background: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-replacement-gate > .button {
  justify-self: end;
  white-space: nowrap;
}

.phone-system-ghl-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-left: 5px solid #f59e0b;
  background: #fffbeb;
}

.phone-system-ghl-banner.is-ready {
  border-left-color: var(--green);
  background: #f4fff6;
}

.phone-system-ghl-banner.is-watch {
  border-left-color: var(--teal);
  background: #f4fffd;
}

.phone-system-ghl-banner > div {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.phone-system-ghl-banner svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #075f52;
}

.phone-system-ghl-banner strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-system-ghl-tabs {
  border-bottom: 1px solid rgba(9, 69, 103, 0.1);
  padding-bottom: 8px;
}

.phone-admin-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.phone-admin-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.phone-admin-head > div {
  min-width: 0;
}

.phone-system-header-action {
  min-width: 0;
  justify-self: end;
}

.phone-system-header-action .button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.phone-system-header-action .button svg {
  width: 14px;
  height: 14px;
}

.phone-admin-head span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.phone-admin-head strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-number-add-menu {
  position: relative;
  justify-self: end;
}

.phone-number-add-menu .button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.phone-number-add-menu .button svg {
  width: 15px;
  height: 15px;
}

.phone-number-add-popover {
  position: absolute;
  z-index: 25;
  top: calc(100% + 6px);
  right: 0;
  width: min(260px, 82vw);
  display: grid;
  gap: 4px;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-radius: 8px;
  padding: 6px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.phone-number-add-popover[hidden] {
  display: none;
}

.phone-number-add-popover button {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 7px;
  padding: 8px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.phone-number-add-popover button:hover {
  background: #f4fffd;
}

.phone-number-add-popover svg {
  width: 16px;
  height: 16px;
  color: #075f52;
}

.phone-number-add-popover span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-system-subtabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.phone-system-subtabs button {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 0 11px;
  color: var(--muted);
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.phone-system-subtabs button.active,
.phone-system-subtabs button:hover {
  border-color: rgba(20, 184, 166, 0.42);
  color: #075f52;
  background: #f4fffd;
}

.phone-system-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 8px;
  background: #fff;
}

.phone-system-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.phone-system-table th,
.phone-system-table td {
  border-bottom: 1px solid rgba(9, 69, 103, 0.08);
  padding: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  text-align: left;
  vertical-align: middle;
}

.phone-system-table th {
  color: var(--muted);
  background: #f8fafc;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.phone-system-table td strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.15;
}

.phone-system-table td span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.phone-system-empty-row {
  text-align: center !important;
}

.phone-system-status-pill {
  display: inline-flex;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 8px;
  color: #8a5a00;
  background: #fff7d6;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.phone-system-status-pill.is-ready {
  color: #057a3d;
  background: #dcfce7;
}

.phone-system-status-pill.is-watch {
  color: #075985;
  background: #e0f2fe;
}

.phone-number-row-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.phone-number-row-actions form {
  min-width: 0;
  margin: 0;
}

.phone-number-row-actions .button {
  min-height: 32px;
  padding: 0 9px;
  white-space: nowrap;
}

.phone-system-card-grid,
.phone-system-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.phone-system-trust-grid.is-main {
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
}

.phone-system-trust-grid.is-compact {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.phone-system-action-card,
.phone-system-trust-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 8px;
  align-content: center;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.phone-system-action-card:hover,
.phone-system-trust-card:hover {
  border-color: rgba(20, 184, 166, 0.45);
  background: #f4fffd;
}

.phone-system-action-card svg,
.phone-system-trust-card svg {
  width: 18px;
  height: 18px;
  grid-row: 1 / span 2;
  align-self: center;
  color: #075f52;
}

.phone-system-action-card span,
.phone-system-trust-card span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-system-action-card strong,
.phone-system-trust-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-system-trust-grid.is-main .phone-system-trust-card strong,
.phone-system-trust-grid.is-main .phone-system-trust-card span,
.phone-system-trust-grid.is-compact .phone-system-trust-card strong,
.phone-system-trust-grid.is-compact .phone-system-trust-card span {
  white-space: normal;
}

.phone-system-quiet-details {
  overflow: hidden;
}

.phone-system-quiet-details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.phone-system-quiet-details > summary::-webkit-details-marker {
  display: none;
}

.phone-system-quiet-details > summary strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
}

.phone-system-quiet-details > summary svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.phone-system-quiet-details > div {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(9, 69, 103, 0.08);
  padding: 10px;
  background: #f8fafc;
}

.phone-system-detail-modal {
  width: min(1120px, calc(100vw - 24px));
}

.phone-system-detail-body {
  align-content: start;
}

.phone-system-action-receipt {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 12px;
  background: rgba(236, 253, 245, 0.76);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.phone-system-action-receipt.is-warning {
  border-left-color: #d97706;
  background: rgba(255, 251, 235, 0.9);
}

.phone-system-action-receipt.is-error {
  border-left-color: #be123c;
  background: rgba(255, 241, 242, 0.9);
}

.phone-system-action-receipt > i {
  justify-self: center;
  width: 24px;
  height: 24px;
  color: var(--teal);
}

.phone-system-action-receipt.is-warning > i {
  color: #b45309;
}

.phone-system-action-receipt.is-error > i {
  color: #be123c;
}

.phone-system-action-receipt strong,
.phone-system-action-receipt p {
  display: block;
  min-width: 0;
  margin: 0;
}

.phone-system-action-receipt strong {
  color: var(--navy);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

.phone-system-action-receipt p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.phone-system-detail-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  width: min(100%, 920px);
  margin: 0 auto;
}

.phone-system-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.phone-system-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4edf3;
}

.phone-system-progress span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--green));
}

.phone-system-detail-list {
  display: grid;
  gap: 8px;
}

.phone-system-detail-list article,
.phone-system-check-detail {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.phone-system-detail-list strong,
.phone-system-check-detail strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-system-detail-list span,
.phone-system-check-detail span {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 7px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.14);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.phone-system-detail-list p,
.phone-system-check-detail p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.phone-system-check-detail.is-blocked span,
.phone-system-check-detail.is-needs-work span {
  color: #995f05;
  background: #fff4db;
}

.phone-system-check-detail.is-ready span {
  color: #0b7c42;
  background: #e9fbef;
}

.phone-system-compact-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.phone-system-compact-form.is-one-column {
  grid-template-columns: minmax(0, 1fr);
}

.phone-system-compact-form textarea {
  min-width: 0;
  width: 100%;
  resize: vertical;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.phone-trust-action-panel {
  max-width: 760px;
}

.phone-business-verify-panel,
.phone-emergency-address-panel,
.phone-number-intelligence-panel,
.phone-caller-identity-panel {
  width: min(100%, 940px);
}

.phone-trust-action-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.phone-trust-action-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.phone-trust-action-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.phone-trust-action-head strong {
  min-width: 0;
  color: var(--navy);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.05;
}

.phone-trust-action-head strong.is-ready {
  color: #0b7c42;
}

.phone-trust-action-head strong.is-watch {
  color: #9a5b00;
}

.phone-trust-action-head strong.is-blocked,
.phone-trust-action-head strong.needs-work {
  color: #a0183f;
}

.phone-trust-action-form {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  justify-content: flex-end;
}

.phone-trust-action-form label {
  min-width: 126px;
  display: grid;
  gap: 4px;
}

.phone-trust-action-form label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.phone-trust-action-form input {
  min-width: 0;
  height: 38px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.phone-trust-action-form .button {
  min-height: 38px;
}

.phone-trust-action-form .twilio-form-status {
  flex-basis: 100%;
  margin: 0;
}

.phone-emergency-address-form {
  grid-template-columns: minmax(160px, 0.9fr) minmax(220px, 1.4fr) repeat(3, minmax(90px, 0.7fr));
}

.phone-number-intelligence-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.phone-trust-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.phone-trust-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phone-trust-chip-row span {
  border-radius: 999px;
  padding: 6px 9px;
  color: #845001;
  background: #fff4db;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.phone-trust-next {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .phone-trust-action-head,
  .phone-trust-mini-grid,
  .phone-emergency-address-form,
  .phone-number-intelligence-list {
    grid-template-columns: 1fr;
  }

  .phone-trust-action-form,
  .phone-trust-action-form .button {
    width: 100%;
  }

  .phone-trust-action-form label {
    width: 100%;
  }
}

.phone-softphone-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.phone-softphone-setup > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.phone-softphone-setup span,
.phone-softphone-setup em {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.phone-softphone-setup em {
  letter-spacing: 0;
  text-transform: none;
}

.phone-softphone-setup strong {
  min-width: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
}

.phone-softphone-setup b {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 999px;
  padding: 0 12px;
  color: #057a3d;
  background: #dcfce7;
  font-size: 12px;
  font-weight: 950;
}

.phone-softphone-setup b svg {
  width: 15px;
  height: 15px;
}

.phone-softphone-setup form {
  min-width: min(280px, 100%);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.phone-softphone-setup input {
  min-width: 0;
  height: 38px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.phone-softphone-setup .twilio-form-status {
  grid-column: 1 / -1;
}

.phone-number-admin-panel,
.phone-verified-caller-panel {
  width: min(100%, 860px);
}

.phone-number-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.phone-system-inline-action {
  min-width: 0;
  display: inline-flex;
}

.phone-system-inline-ready {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 10px;
  color: #057a3d;
  background: #dcfce7;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.phone-system-inline-ready svg {
  width: 15px;
  height: 15px;
}

.phone-verified-caller-form {
  grid-template-columns: minmax(170px, 1fr) minmax(150px, 0.9fr) minmax(180px, 1fr) auto;
  align-items: end;
}

.phone-verified-caller-form .twilio-form-status {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .phone-number-admin-actions,
  .phone-system-inline-action {
    width: 100%;
  }

  .phone-number-admin-actions .button,
  .phone-system-inline-action .button {
    width: 100%;
    justify-content: center;
  }

  .phone-verified-caller-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone-softphone-setup,
  .phone-softphone-setup form {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone-softphone-setup .button {
    width: 100%;
    justify-content: center;
  }
}

.messaging-a2p-packet {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
}

.messaging-a2p-packet.is-ready {
  border-color: rgba(12, 147, 71, 0.26);
  background: #f4fff6;
}

.messaging-a2p-packet.is-watch {
  border-color: rgba(17, 199, 189, 0.26);
  background: #f4fffd;
}

.messaging-a2p-packet.needs-work {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffaf1;
}

.messaging-a2p-packet > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.messaging-a2p-packet > header span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 4px;
  border-radius: 999px;
  padding: 3px 7px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.13);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.messaging-a2p-packet > header strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.15;
}

.messaging-a2p-packet > header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.messaging-a2p-packet > header b {
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--ink);
  background: #fff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.messaging-a2p-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.messaging-a2p-proof .cloud-copy-row {
  min-width: 0;
}

.messaging-a2p-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.messaging-a2p-copy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.messaging-a2p-copy-card {
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.messaging-a2p-copy-card > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.messaging-a2p-copy-card strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messaging-a2p-copy-card textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 8px;
  color: var(--ink);
  background: #f8fafc;
  font: 800 11px/1.38 Arial, sans-serif;
}

.twilio-setup-console {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.15);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.twilio-setup-console > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.twilio-setup-console > header div {
  display: grid;
  gap: 2px;
}

.twilio-setup-console > header span,
.twilio-setup-panel-title span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.twilio-setup-console > header strong {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.1;
}

.twilio-setup-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}

.twilio-setup-status .messaging-provider-setup-step {
  padding: 8px;
}

.twilio-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.twilio-setup-console.is-number-picker .twilio-setup-grid {
  grid-template-columns: minmax(0, 1fr);
}

.twilio-setup-console.is-number-picker {
  border: 0;
  padding: 0;
  background: transparent;
}

.twilio-setup-console.is-number-picker > header {
  display: none;
}

.twilio-setup-console.is-number-picker .twilio-setup-grid {
  display: block;
}

.twilio-setup-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.twilio-setup-panel.is-number-panel {
  gap: 12px;
  padding: 12px;
}

.twilio-setup-panel.is-ghl-number-picker {
  width: 100%;
  max-width: none;
  gap: 12px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.twilio-number-picker-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.twilio-number-picker-head span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.twilio-number-picker-head strong {
  display: block;
  margin-top: 3px;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.05;
}

.twilio-number-picker-head em {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twilio-setup-panel-title {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
}

.twilio-setup-panel-title span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.14);
}

.twilio-setup-panel-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twilio-setup-panel-title em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twilio-inline-form,
.twilio-confirm-form,
.twilio-profile-form {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.twilio-inline-form {
  grid-template-columns: 96px 68px minmax(0, 1fr) auto;
}

.twilio-setup-console.is-number-picker .twilio-inline-form {
  grid-template-columns: 128px 96px minmax(140px, 1fr) auto;
  align-items: stretch;
}

.twilio-number-search-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(90px, 120px) auto;
  gap: 8px;
  align-items: stretch;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.twilio-number-search-form > input,
.twilio-number-search-form > select,
.twilio-number-filter-panel input,
.twilio-number-filter-panel select {
  min-width: 0;
  height: 38px;
  border: 1px solid rgba(9, 69, 103, 0.16);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.twilio-number-search-form > select:disabled {
  color: var(--ink);
  opacity: 1;
}

.twilio-number-search-form .button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.twilio-number-search-form .button svg {
  width: 15px;
  height: 15px;
}

.twilio-number-filter-panel {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(160px, 1fr) minmax(230px, 1.1fr) auto auto;
  gap: 8px;
  align-items: end;
  border-top: 1px solid rgba(9, 69, 103, 0.08);
  padding-top: 8px;
}

.twilio-number-filter-panel[hidden] {
  display: none;
}

.twilio-number-filter-panel label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.twilio-number-filter-panel label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.twilio-number-filter-checks {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 38px;
}

.twilio-number-filter-checks label {
  display: inline-flex;
  grid-template-columns: none;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  border: 1px solid rgba(9, 69, 103, 0.1);
  border-radius: 999px;
  padding: 6px 8px;
  color: var(--muted);
  background: #f8fafc;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.twilio-confirm-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.twilio-confirm-form.is-wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

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

.twilio-profile-form button {
  justify-self: start;
}

.twilio-inline-form input,
.twilio-inline-form select,
.twilio-confirm-form input,
.twilio-profile-form input {
  min-width: 0;
  height: 36px;
  border: 1px solid rgba(9, 69, 103, 0.16);
  border-radius: 8px;
  padding: 0 9px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.twilio-number-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: min(340px, 42vh);
  overflow: auto;
  padding-right: 2px;
}

.twilio-number-results.is-table {
  display: block;
  max-height: min(420px, 44vh);
  overflow: auto;
  padding-right: 0;
}

.twilio-number-result {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.twilio-number-result:hover,
.twilio-number-result.is-selected {
  border-color: rgba(20, 184, 166, 0.55);
  background: #f4fffd;
}

.twilio-number-result.is-selected {
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.32);
}

.twilio-number-result strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twilio-number-result span {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twilio-number-result em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 7px;
  color: #075f52;
  background: rgba(20, 184, 166, 0.14);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.twilio-number-result small {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: #075f52;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.twilio-number-buy-form {
  position: sticky;
  bottom: 0;
  z-index: 2;
  align-items: stretch;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.twilio-setup-console.is-number-picker .twilio-number-buy-form {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.45fr) auto;
  align-items: center;
}

.twilio-buy-review {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 8px;
  padding: 8px 9px;
  background: #f4fffd;
}

.twilio-number-buy-form .twilio-buy-review {
  grid-column: 1 / -1;
}

.twilio-number-buy-form:not(.has-selection) input[name="confirmation"] {
  display: none;
}

.twilio-number-buy-form:not(.has-selection) .twilio-purchase-phone {
  display: none;
}

.twilio-setup-console.is-number-picker .twilio-buy-review {
  grid-column: auto;
}

.twilio-setup-console.is-number-picker .twilio-number-buy-form .twilio-purchase-phone {
  display: none;
}

.twilio-number-buy-form button[disabled] {
  opacity: 0.62;
  cursor: not-allowed;
}

.phone-setup-modal .cloud-copy-row,
.phone-setup-modal .twilio-callback-list .cloud-copy-row,
.phone-system-detail-modal .cloud-copy-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.phone-setup-modal .cloud-copy-row strong,
.phone-system-detail-modal .cloud-copy-row strong {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twilio-buy-review span,
.twilio-buy-review em {
  min-width: 0;
  overflow: hidden;
  color: #075f52;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.twilio-buy-review strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twilio-number-buy-form .twilio-purchase-phone {
  font-size: 15px;
  font-weight: 950;
}

.twilio-form-status {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px solid rgba(9, 69, 103, 0.13);
  border-radius: 8px;
  padding: 8px 9px;
  color: var(--muted);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.twilio-form-status[data-tone="working"] {
  border-color: rgba(17, 199, 189, 0.26);
  color: #075f52;
  background: #f4fffd;
}

.twilio-form-status[data-tone="success"] {
  border-color: rgba(12, 147, 71, 0.24);
  color: #116131;
  background: #f4fff6;
}

.twilio-form-status[data-tone="warning"] {
  border-color: rgba(245, 158, 11, 0.28);
  color: #7c4a03;
  background: #fffbeb;
}

.twilio-form-status[data-tone="error"] {
  border-color: rgba(190, 18, 60, 0.24);
  color: #9f1239;
  background: #fff1f2;
}

.twilio-number-empty {
  margin: 0;
  border: 1px dashed rgba(9, 69, 103, 0.18);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.twilio-callback-list {
  display: grid;
  gap: 6px;
}

.twilio-callback-list .cloud-copy-row {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
}

.twilio-callback-list .cloud-copy-row span {
  grid-column: 1 / -1;
}

.twilio-callback-list .cloud-copy-row strong {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twilio-setup-mini,
.twilio-tenant-read {
  display: grid;
  gap: 6px;
}

.twilio-setup-mini span,
.twilio-tenant-read span,
.twilio-tenant-read b,
.twilio-tenant-read p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.twilio-setup-mini b,
.twilio-tenant-read b {
  color: var(--ink);
}

.twilio-tenant-read strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
}

@media (max-width: 760px) {
  .twilio-inline-form,
  .twilio-setup-console.is-number-picker .twilio-inline-form,
  .twilio-number-search-form,
  .twilio-number-filter-panel,
  .twilio-setup-console.is-number-picker .twilio-number-buy-form,
  .twilio-confirm-form,
  .twilio-confirm-form.is-wide,
  .twilio-profile-form,
  .phone-company-subaccount-form {
    grid-template-columns: 1fr;
  }

  .twilio-buy-review {
    grid-template-columns: 1fr;
  }

  .phone-system-ghl-top,
  .phone-replacement-gate,
  .phone-system-ghl-banner,
  .phone-admin-head {
    grid-template-columns: 1fr;
  }

  .phone-replacement-gate > .button {
    justify-self: stretch;
    width: 100%;
  }

  .phone-system-ghl-status {
    grid-template-columns: 1fr;
  }

  .phone-number-add-menu {
    justify-self: stretch;
  }

  .phone-system-header-action,
  .phone-system-header-action .button,
  .phone-number-add-menu .button {
    width: 100%;
  }

  .phone-number-row-actions {
    justify-content: flex-start;
  }

  .phone-number-add-popover {
    right: auto;
    left: 0;
    width: 100%;
  }

  .phone-admin-head strong,
  .twilio-number-picker-head strong {
    font-size: 20px;
  }

  .phone-system-detail-stats,
  .phone-system-action-receipt,
  .phone-system-compact-form {
    grid-template-columns: 1fr;
  }

  .phone-system-detail-list strong,
  .phone-system-check-detail strong {
    white-space: normal;
  }

  .phone-system-owner-head .button,
  .phone-test-actions .button {
    width: 100%;
    justify-content: center;
  }

  .phone-test-actions {
    display: grid;
  }
}

.messaging-port-plan {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.messaging-cutover-rehearsal {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(9, 69, 103, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.messaging-test-lab {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 12px;
  background: #f4fffd;
}

.messaging-phone-readiness {
  border-color: rgba(9, 69, 103, 0.18);
  background: #fbfdff;
}

.messaging-provider-readiness.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f4fff6;
}

.messaging-test-lab.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f4fff6;
}

.messaging-port-plan.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f4fff6;
}

.messaging-cutover-rehearsal.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f4fff6;
}

.messaging-provider-readiness.is-watch {
  border-color: rgba(17, 199, 189, 0.26);
  background: #f4fffd;
}

.messaging-test-lab.is-watch {
  border-color: rgba(17, 199, 189, 0.26);
  background: #f4fffd;
}

.messaging-port-plan.is-watch {
  border-color: rgba(17, 199, 189, 0.26);
  background: #f4fffd;
}

.messaging-cutover-rehearsal.is-watch {
  border-color: rgba(17, 199, 189, 0.26);
  background: #f4fffd;
}

.messaging-provider-readiness.is-blocked {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffaf1;
}

.messaging-test-lab.is-blocked {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffaf1;
}

.messaging-port-plan.is-blocked {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffaf1;
}

.messaging-cutover-rehearsal.is-blocked {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffaf1;
}

.messaging-provider-summary {
  display: grid;
  gap: 4px;
}

.messaging-provider-test {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) 100px minmax(140px, 1fr) minmax(140px, 1fr) minmax(180px, 1.4fr) auto;
  gap: 8px;
  align-items: stretch;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.messaging-provider-test > div {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
}

.messaging-provider-test span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.messaging-provider-test strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messaging-provider-test em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.messaging-provider-test select,
.messaging-provider-test input,
.messaging-provider-test textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.messaging-provider-test textarea {
  min-height: 40px;
  resize: vertical;
}

.messaging-test-lab-rails {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.messaging-test-lab-callbacks {
  display: grid;
  gap: 8px;
}

.messaging-phone-route-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.messaging-test-lab-rails article {
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.messaging-test-lab-rails span,
.messaging-test-lab-events > section > strong,
.messaging-test-lab-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.messaging-test-lab-rails strong {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.12;
}

.messaging-test-lab-rails em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.messaging-test-lab-events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.messaging-test-lab-events section {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.messaging-test-lab-row {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-top: 1px solid rgba(9, 69, 103, 0.08);
  padding-top: 7px;
}

.messaging-test-lab-row p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.messaging-test-lab-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.messaging-channel-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.messaging-channel-strip span {
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.messaging-channel-strip span.is-ready {
  border-color: rgba(12, 147, 71, 0.25);
  background: #eefcf2;
  color: #0b7c42;
}

.messaging-channel-strip span.is-needs-work,
.messaging-channel-strip span.is-blocked {
  border-color: rgba(245, 158, 11, 0.25);
  background: #fff7e8;
  color: #995f05;
}

.messaging-provider-check-grid,
.messaging-rehearsal-step-grid,
.messaging-rehearsal-metrics,
.messaging-port-plan-metrics,
.messaging-port-plan-list {
  display: grid;
  gap: 8px;
}

.messaging-provider-check-grid,
.messaging-rehearsal-step-grid,
.messaging-port-plan-list {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.messaging-rehearsal-metrics,
.messaging-port-plan-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.messaging-provider-check,
.messaging-rehearsal-step,
.messaging-port-plan-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.messaging-provider-check.is-ready {
  border-left-color: var(--green);
}

.messaging-rehearsal-step.is-ready {
  border-left-color: var(--green);
}

.messaging-port-plan-item.ready {
  border-left-color: var(--green);
}

.messaging-provider-check.is-watch {
  border-left-color: var(--teal);
}

.messaging-rehearsal-step.is-watch {
  border-left-color: var(--teal);
}

.messaging-port-plan-item.in-review {
  border-left-color: var(--teal);
}

.messaging-provider-check.needs-work,
.messaging-provider-check.is-blocked,
.messaging-rehearsal-step.is-blocked,
.messaging-port-plan-item.blocked {
  border-left-color: #f59e0b;
}

.messaging-port-plan-item {
  display: grid;
  gap: 10px;
}

.messaging-port-plan-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.messaging-port-plan-copy span,
.messaging-port-plan-copy em,
.messaging-port-plan-fields label > span {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.messaging-port-plan-copy strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.15;
}

.messaging-port-plan-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.messaging-port-plan-fields {
  display: grid;
  gap: 7px;
}

.messaging-port-plan-fields label {
  display: grid;
  gap: 4px;
}

.messaging-port-plan-fields select,
.messaging-port-plan-fields input,
.messaging-port-plan-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.14);
  border-radius: 8px;
  padding: 8px 9px;
  color: var(--navy);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.messaging-port-plan-fields textarea {
  resize: vertical;
}

.messaging-port-plan-guardrails {
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(20, 58, 86, 0.09);
  padding-top: 8px;
}

.messaging-port-plan-guardrails span {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.3;
}

.messaging-port-plan-guardrails svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--teal-dark);
}

.messaging-cutover-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.messaging-cutover-step {
  border-left: 5px solid var(--muted);
}

.messaging-cutover-step.is-ready {
  border-left-color: var(--green);
  background: #f2fff6;
}

.messaging-cutover-step.is-watch,
.messaging-cutover-step.is-external {
  border-left-color: var(--teal);
  background: #ecfffb;
}

.messaging-cutover-step.needs-work,
.messaging-cutover-step.is-blocked {
  border-left-color: #f59e0b;
  background: #fff8eb;
}

.import-progress-list,
.import-event-list {
  display: grid;
  gap: 9px;
}

.import-progress-row,
.import-event {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.import-progress-row.has-error,
.import-event.has-error {
  border-color: rgba(215, 25, 70, 0.35);
  background: #fff1f4;
}

.import-event.has-warning {
  border-color: rgba(245, 158, 11, 0.42);
  background: #fff8eb;
}

.import-progress-row > div:first-child {
  display: grid;
  gap: 3px;
}

.import-progress-row strong,
.import-event strong {
  color: var(--navy);
}

.import-progress-row span,
.import-event span,
.import-event p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.import-progress-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.import-progress-meta span {
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--navy);
  font-weight: 900;
  background: #e6f3f7;
}

.import-progress-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe8ef;
}

.import-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.raw-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

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

.verification-notes {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.verification-summary {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: #eefbf8;
}

.verification-summary.has-warnings {
  border-color: rgba(245, 158, 11, 0.36);
  background: #fff7e8;
}

.verification-summary strong {
  color: var(--navy);
  font-size: 14px;
}

.verification-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.verification-section {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.verification-section h4 {
  margin: 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.verification-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--soft);
}

.verification-metric.needs-attention {
  border-color: rgba(245, 158, 11, 0.4);
  background: #fff8eb;
}

.verification-metric span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.verification-metric strong {
  color: var(--navy);
  font-size: 18px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid.two {
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  align-items: start;
}

.sop-form > aside {
  min-width: 0;
}

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

.section,
.card,
.panel {
  min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 12px 30px rgba(5, 24, 44, 0.08);
}

.section {
  overflow: hidden;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  color: #fff;
  background: var(--navy);
}

.section-heading.teal {
  color: #062d3d;
  background: var(--teal);
}

.section-heading h2,
.section-heading h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.section-body,
.card {
  padding: 16px;
}

.sop-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 206px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.sop-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.sop-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 22px;
}

.sop-card p,
.muted {
  color: var(--muted);
  line-height: 1.45;
}

.sop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.sop-meta span {
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--soft);
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
}

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

.field {
  display: grid;
  gap: 6px;
}

.field span,
.field label,
.label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--soft);
  outline: none;
}

.field textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.45;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(17, 199, 189, 0.18);
}

.field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.address-lookup-field {
  position: relative;
}

.address-lookup-panel {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--paper);
  box-shadow: 0 18px 36px rgba(5, 24, 44, 0.16);
}

.address-suggestion {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}

.address-suggestion:hover,
.address-suggestion:focus {
  border-color: rgba(17, 199, 189, 0.5);
  background: rgba(17, 199, 189, 0.1);
}

.address-suggestion strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.25;
}

.address-suggestion span,
.address-lookup-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.address-suggestion em {
  display: inline-flex;
  margin-left: 6px;
  border-radius: 999px;
  padding: 2px 6px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.address-lookup-empty {
  padding: 10px;
}

.task-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.task-row.is-overdue {
  background: #fff7f7;
}

.task-row:first-child {
  border-top: 0;
}

.task-row strong {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
  line-height: 1.25;
}

.overdue-badge {
  display: inline-flex;
  margin-left: 8px;
  border-radius: 999px;
  padding: 3px 7px;
  transform: translateY(-1px);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.task-row small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.jobsite-guide .section-heading {
  align-items: start;
}

.guide-heading-note {
  margin: 6px 0 0;
  color: rgba(6, 45, 61, 0.78);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: none;
}

.jobsite-sop-form {
  align-items: start;
}

.jobsite-mobile-submit-bar {
  display: none;
}

.jobsite-mobile-progress-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.jobsite-mobile-progress-copy span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jobsite-mobile-progress-copy strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
}

.jobsite-sop-form .hero {
  min-height: 0;
  padding: 16px 18px;
}

.jobsite-sop-form .hero h2 {
  font-size: 30px;
}

.jobsite-sop-form .hero img {
  width: 128px;
  max-height: 82px;
  object-fit: contain;
}

.jobsite-work-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.34);
  border-radius: 8px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(17, 199, 189, 0.14), #fff);
}

.jobsite-work-main {
  min-width: 0;
}

.jobsite-work-main h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.05;
}

.jobsite-work-main p {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.jobsite-work-meta {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.jobsite-work-meta span {
  border-radius: 999px;
  padding: 6px 10px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.16);
  font-size: 12px;
  font-weight: 900;
}

.job-work-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 310px;
  border: 1px solid rgba(6, 45, 61, 0.16);
  border-radius: 8px;
  padding: 9px 10px 9px 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(6, 45, 61, 0.06);
}

.job-work-timer.is-paused {
  border-color: rgba(201, 131, 0, 0.34);
  background: #fffaf0;
}

.job-work-timer.is-completed {
  border-color: rgba(18, 122, 91, 0.28);
  background: #f2fbf7;
}

.job-work-timer-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.jobsite-work-meta .job-work-timer-copy span,
.job-work-timer > span {
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-work-timer-copy strong,
.job-work-timer > strong {
  color: var(--navy);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

.job-work-timer-actions {
  display: flex;
  gap: 6px;
}

.job-work-timer-actions .button {
  min-height: 36px;
  padding: 7px 9px;
}

.actions.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actions.compact .button {
  min-height: 34px;
  padding: 7px 10px;
}

.jobsite-guide-shell {
  display: grid;
  gap: 14px;
}

.guide-now {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(6, 45, 61, 0.12);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}

.guide-now span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-now strong {
  color: var(--navy);
  font-size: 22px;
  line-height: 1.1;
}

.guide-now p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.guide-now-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.guide-now-actions .button {
  min-height: 38px;
}

.guide-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.guide-step-button {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.guide-step-button span {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.24);
  font-size: 12px;
  font-weight: 900;
}

.guide-step-button strong {
  min-width: 0;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-step-button em {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.guide-step-button.is-active {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(17, 199, 189, 0.16);
}

.guide-step-button.is-done span {
  color: #fff;
  background: var(--success);
}

.guide-step-button.is-started span {
  color: #fff;
  background: var(--open);
}

.guide-mobile-status {
  border: 1px solid rgba(17, 199, 189, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.12);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}

.guided-phases {
  display: grid;
  gap: 12px;
}

.guided-phase {
  display: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.guided-phase.is-active,
.jobsite-guide.show-all .guided-phase {
  display: grid;
}

.guided-phase-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  color: #fff;
  background: var(--navy);
}

.guided-phase-head.teal {
  color: #06343d;
  background: var(--teal);
}

.guided-phase-head span {
  display: block;
  margin-bottom: 4px;
  color: currentColor;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0.75;
  text-transform: uppercase;
}

.guided-phase-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.guided-phase-head strong {
  border-radius: 999px;
  padding: 7px 10px;
  color: #06343d;
  background: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.guided-phase-body {
  display: grid;
  gap: 12px;
}

.guided-support {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.guided-support-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--soft);
}

.guided-support-heading.teal {
  background: rgba(17, 199, 189, 0.14);
}

.guided-support-heading h3 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.1;
  text-transform: uppercase;
}

.guided-support-body {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}

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

.inline-media-prompt {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.inline-media-head {
  display: grid;
  gap: 4px;
}

.inline-media-head strong {
  margin: 0;
  color: var(--navy);
}

.inline-media-head span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

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

.match-card {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.match-card.is-matched {
  border-color: rgba(7, 149, 143, 0.36);
  background: rgba(17, 199, 189, 0.08);
}

.match-card img {
  width: 58px;
  height: 58px;
  border-radius: 6px;
  object-fit: cover;
}

.match-card strong {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.match-card span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-card .button {
  min-height: 36px;
  padding: 0 10px;
  font-size: 13px;
}

.before-after-tools {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(17, 199, 189, 0.38);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.inline-media-prompt.is-collage-ready > .inline-media-head,
.inline-media-prompt.is-collage-ready > .match-list,
.inline-media-prompt.is-collage-ready > .media-grid,
.inline-media-prompt.is-collage-ready > .media-status {
  display: none;
}

.inline-media-prompt.is-collage-source-hidden {
  display: none;
}

.inline-media-prompt.is-collage-ready .before-after-tools {
  border: 0;
  padding: 0;
  background: transparent;
}

.inline-media-prompt.is-collage-ready .before-after-tools > .inline-media-head,
.inline-media-prompt.is-collage-ready .before-after-tools > .media-actions {
  display: none;
}

.generated-post-grid {
  display: grid;
  gap: 10px;
}

.generated-post-grid:empty {
  display: none;
}

.generated-collage-card {
  display: grid;
  gap: 8px;
}

.generated-post-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--soft);
}

.generated-post-card img {
  width: 92px;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
}

.generated-post-card strong {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 14px;
}

.generated-post-card .button {
  width: 100%;
  min-height: 36px;
  font-size: 13px;
}

.generated-collage {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(5, 24, 44, 0.14);
}

.generated-collage img {
  width: 100%;
  display: block;
}

.generated-collage-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.generated-collage-actions .button {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  font-size: 13px;
}

.service-prep .section-body {
  display: grid;
  gap: 12px;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.equipment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.equipment-tags small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service-tags span {
  border-radius: 999px;
  padding: 7px 10px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.22);
  font-size: 12px;
  font-weight: 900;
}

.service-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.service-list li {
  border-left: 4px solid var(--teal);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--soft);
  line-height: 1.35;
}

.service-list:empty,
.service-line-items:empty {
  display: none;
}

.service-line-items {
  display: grid;
  gap: 10px;
}

.service-line-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.service-line-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.service-line-head strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.25;
}

.service-line-head span:not(.pill) {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.service-line-card .pill {
  justify-self: end;
  max-width: 180px;
  text-align: right;
  white-space: normal;
}

.service-line-note {
  margin: 0;
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--soft);
  font-size: 13px;
  line-height: 1.35;
}

.job-specific-checklist .section-body {
  display: grid;
  gap: 12px;
}

.jobsite-quick-start {
  display: grid;
  gap: 12px;
}

.jobsite-launcher-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.3);
  border-radius: 8px;
  padding: 13px;
  background: #f4fffd;
}

.jobsite-launcher-next.is-watch,
.jobsite-launcher-next.is-warn {
  border-color: rgba(240, 180, 41, 0.44);
  background: #fffaf0;
}

.jobsite-launcher-next.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f2fff6;
}

.jobsite-launcher-next span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jobsite-launcher-next strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.12;
}

.jobsite-launcher-next p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.jobsite-launcher-next-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.jobsite-launcher-next-action em {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
}

.jobsite-sop-form.is-jobsite-start-screen {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

.jobsite-sop-form.is-jobsite-start-screen .jobsite-guide,
.jobsite-sop-form.is-jobsite-start-screen .sop-sidebar,
.jobsite-sop-form.is-jobsite-start-screen .jobsite-mobile-submit-bar {
  display: none;
}

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

.jobsite-start-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  border: 1px solid rgba(17, 199, 189, 0.34);
  border-radius: 8px;
  padding: 16px;
  color: var(--navy);
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(5, 24, 44, 0.05);
}

.jobsite-start-card:hover,
.jobsite-start-card:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 14px 26px rgba(5, 24, 44, 0.1);
}

.jobsite-start-card svg {
  width: 24px;
  height: 24px;
  color: var(--teal);
}

.jobsite-start-card strong {
  font-size: 18px;
}

.jobsite-start-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.jobsite-saved-drafts {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(8, 62, 82, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.jobsite-saved-drafts > div:first-child {
  display: grid;
  gap: 3px;
}

.jobsite-saved-drafts strong {
  color: var(--navy);
}

.jobsite-saved-drafts span,
.jobsite-saved-draft-card em {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.jobsite-saved-draft-list {
  display: grid;
  gap: 8px;
}

.jobsite-saved-draft-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.jobsite-saved-draft-card.is-warn {
  border-color: rgba(215, 98, 0, 0.34);
  background: #fff8ed;
}

.jobsite-saved-draft-card.is-complete {
  border-color: rgba(13, 143, 102, 0.26);
  background: rgba(17, 199, 189, 0.06);
}

.jobsite-saved-draft-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.jobsite-saved-draft-card .crm-status,
.jobsite-quick-copy .crm-status {
  justify-self: start;
  width: fit-content;
}

.jobsite-job-picker {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.jobsite-job-picker[hidden] {
  display: none;
}

.jobsite-picker-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jobsite-quick-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.jobsite-quick-toolbar .button {
  min-height: 42px;
}

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

.jobsite-quick-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(5, 24, 44, 0.05);
}

.jobsite-quick-card.is-submitted {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.jobsite-quick-time,
.jobsite-quick-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.jobsite-quick-time {
  border-right: 1px solid var(--line);
  padding-right: 10px;
}

.jobsite-quick-time strong,
.jobsite-quick-copy strong {
  color: var(--navy);
  line-height: 1.15;
}

.jobsite-quick-time span,
.jobsite-quick-copy > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.jobsite-quick-card .button {
  min-width: 88px;
}

.job-scope-card {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(17, 199, 189, 0.34);
  border-radius: 8px;
  padding: 12px;
  background: rgba(17, 199, 189, 0.08);
}

.job-scope-card strong {
  color: var(--navy);
  font-size: 15px;
}

.job-scope-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.schedule-view .section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.schedule-control-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(5, 24, 44, 0.06);
}

.schedule-control-top,
.schedule-filter-row {
  display: grid;
  gap: 10px;
  align-items: end;
}

.schedule-control-top {
  grid-template-columns: minmax(300px, 1fr) minmax(210px, 0.42fr);
}

.schedule-filter-row {
  grid-template-columns: minmax(260px, 1fr) auto;
}

.schedule-control-panel [data-schedule-message] {
  margin: 0;
}

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

.schedule-range {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--navy);
  background: var(--soft);
  font-weight: 900;
  cursor: pointer;
}

.schedule-range svg,
.schedule-display svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.schedule-range.active,
.schedule-range:hover {
  color: #06343d;
  border-color: var(--teal);
  background: rgba(17, 199, 189, 0.22);
}

.schedule-display-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.schedule-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--navy);
  background: var(--soft);
  font-weight: 900;
  cursor: pointer;
}

.schedule-display.active,
.schedule-display:hover {
  color: #06343d;
  border-color: var(--teal);
  background: rgba(17, 199, 189, 0.22);
}

.schedule-map-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 7px;
  padding: 10px 12px;
  color: var(--warning-ink);
  background: rgba(245, 158, 11, 0.12);
  font-weight: 900;
  cursor: pointer;
}

.schedule-map-toggle input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--warning);
}

.schedule-assignee-filter {
  display: grid;
  gap: 6px;
}

.schedule-assignee-filter span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-assignee-filter select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--navy);
  background: var(--soft);
  font-weight: 900;
}

.schedule-assignee-filter select:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 199, 189, 0.18);
}

.schedule-user-scope {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  border: 1px solid rgba(7, 149, 143, 0.24);
  border-radius: 999px;
  padding: 7px 12px;
  color: #075e59;
  background: rgba(17, 199, 189, 0.12);
  font-size: 12px;
  font-weight: 900;
}

.schedule-source-health {
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  background: #f7fbfd;
}

.schedule-source-health.ready {
  border-color: rgba(17, 199, 189, 0.28);
  background: #f0fffc;
}

.schedule-source-health.watch {
  border-color: rgba(245, 158, 11, 0.28);
  background: #fff8ea;
}

.schedule-source-health.needs-work {
  border-color: rgba(215, 25, 70, 0.22);
  background: #fff4f6;
}

.schedule-source-health summary::-webkit-details-marker {
  display: none;
}

.schedule-source-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px;
  cursor: pointer;
  list-style: none;
}

.schedule-source-summary em {
  border-radius: 999px;
  padding: 5px 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.2);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.schedule-source-health.watch .schedule-source-summary em {
  color: #5d3903;
  background: rgba(245, 158, 11, 0.22);
}

.schedule-source-health.needs-work .schedule-source-summary em {
  color: #7f1230;
  background: rgba(215, 25, 70, 0.13);
}

.schedule-source-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: stretch;
  border-top: 1px solid rgba(20, 58, 86, 0.1);
  padding: 9px;
  padding-top: 8px;
}

.schedule-source-health:not([open]) .schedule-source-detail {
  display: none;
}

.schedule-source-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.schedule-source-copy strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-source-copy span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.schedule-source-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.schedule-source-cards article {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-left: 4px solid var(--open);
  border-radius: 7px;
  padding: 7px;
  background: #fff;
}

.schedule-source-cards article.ready {
  border-left-color: var(--success);
}

.schedule-source-cards article.watch {
  border-left-color: var(--warning);
}

.schedule-source-cards article.needs-work {
  border-left-color: var(--danger);
}

.schedule-source-cards span,
.schedule-source-cards em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-source-cards strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.schedule-empty-note {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--navy);
  background: #f2f7ff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.schedule-empty-note svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--open);
}

.schedule-nav {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}

.schedule-arrow,
.schedule-current {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--navy);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}

.schedule-arrow {
  font-size: 30px;
  line-height: 1;
}

.schedule-current {
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 5px 14px;
  font-size: 17px;
  line-height: 1.15;
}

.schedule-current span,
.schedule-current small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-current small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schedule-arrow:hover,
.schedule-current:hover {
  border-color: var(--teal);
  background: rgba(17, 199, 189, 0.12);
}

.schedule-week-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(160px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.schedule-day-column {
  min-width: 160px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  overflow: hidden;
}

.schedule-day-column.is-today {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(215, 25, 70, 0.16);
}

.schedule-day-column.is-selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(17, 199, 189, 0.18);
}

.schedule-day-column.is-selected .schedule-day-head {
  background: #075e59;
}

.schedule-day-column.is-drop-target,
.schedule-resource-lane.is-drop-target,
.schedule-month-cell.is-drop-target {
  border-color: var(--teal);
  background: #e9fffc;
  box-shadow: inset 0 0 0 2px rgba(17, 199, 189, 0.44), 0 12px 24px rgba(20, 58, 86, 0.12);
}

.schedule-day-column.is-drop-saving,
.schedule-resource-lane.is-drop-saving,
.schedule-month-cell.is-drop-saving {
  opacity: 0.72;
}

.schedule-drop-time-indicator {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.schedule-drop-time-indicator::before {
  position: absolute;
  content: "";
  background: #087c74;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .88);
}

.schedule-drop-time-indicator.is-vertical::before {
  top: clamp(0px, var(--schedule-drop-offset), calc(100% - 2px));
  right: 0;
  left: 0;
  height: 2px;
}

.schedule-drop-time-indicator.is-horizontal::before {
  top: 0;
  bottom: 0;
  left: clamp(0px, var(--schedule-drop-offset), calc(100% - 2px));
  width: 2px;
}

.schedule-drop-time-indicator span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 5px;
  padding: 3px 7px;
  color: #fff;
  background: #075e59;
  box-shadow: 0 5px 14px rgba(5, 24, 44, .24);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.schedule-drop-time-indicator.is-vertical span {
  top: clamp(13px, var(--schedule-drop-offset), calc(100% - 13px));
  right: 6px;
  transform: translateY(-50%);
}

.schedule-drop-time-indicator.is-horizontal span {
  top: 5px;
  left: clamp(4px, calc(var(--schedule-drop-offset) + 5px), calc(100% - 92px));
}

.schedule-drop-time-indicator svg {
  width: 13px;
  height: 13px;
}

.schedule-day-column.is-today .schedule-day-head {
  background: var(--danger);
}

.schedule-day-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 10px;
  color: #fff;
  background: var(--navy);
}

.schedule-day-head strong {
  font-size: 15px;
}

.schedule-day-head span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
}

.schedule-day-head em {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  min-width: 26px;
  border-radius: 999px;
  padding: 5px 7px;
  color: #06343d;
  background: var(--teal);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.schedule-day-jobs {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.schedule-day-jobs > .muted {
  margin: 0;
  padding: 10px 4px;
  text-align: center;
  font-size: 13px;
}

.schedule-timegrid {
  --schedule-time-width: 68px;
  display: grid;
  grid-template-columns: var(--schedule-time-width) repeat(var(--schedule-day-count), minmax(178px, 1fr));
  grid-template-rows: auto var(--schedule-body-height);
  min-width: min(100%, 720px);
  max-height: min(74vh, 760px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: auto;
  overscroll-behavior: contain;
}

.schedule-timegrid-day {
  grid-template-columns: var(--schedule-time-width) minmax(260px, 1fr);
}

.schedule-timegrid-corner,
.schedule-timegrid-head {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  color: #fff;
  background: var(--navy);
}

.schedule-timegrid-corner {
  left: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schedule-timegrid-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-content: center;
  padding: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.schedule-timegrid-head.is-selected {
  background: #075e59;
}

.schedule-timegrid-head.is-today {
  background: var(--danger);
}

.schedule-timegrid-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-timegrid-head span {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-timegrid-head em {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  min-width: 25px;
  border-radius: 999px;
  padding: 4px 7px;
  color: #06343d;
  background: var(--teal);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.schedule-head-add {
  grid-column: 1 / -1;
  min-height: 30px;
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.schedule-time-axis {
  position: sticky;
  left: 0;
  z-index: 3;
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--line);
  background: #f8fbfd;
}

.schedule-time-axis span {
  position: absolute;
  right: 9px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.schedule-timegrid-column {
  position: relative;
  min-width: 178px;
  border-left: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

.schedule-timegrid-column.is-today {
  background: #fff7f8;
}

.schedule-timegrid-column.is-selected {
  box-shadow: inset 0 0 0 2px rgba(17, 199, 189, 0.16);
}

.schedule-hour-guide {
  position: absolute;
  right: 0;
  left: 0;
  border-top: 1px solid rgba(216, 224, 232, 0.76);
  pointer-events: none;
}

.schedule-timegrid-empty {
  position: absolute;
  top: 18px;
  right: 8px;
  left: 8px;
  margin: 0;
  text-align: center;
}

.schedule-time-job {
  position: absolute;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-left: 5px solid var(--open);
  border-radius: 7px;
  padding: 7px;
  color: var(--ink);
  background: #eef5ff;
  box-shadow: 0 8px 16px rgba(20, 58, 86, 0.1);
  overflow: hidden;
}

.schedule-time-job.is-complete {
  border-color: rgba(17, 199, 189, 0.36);
  border-left-color: var(--success);
  background: #effdfb;
}

.schedule-time-job.is-submitted {
  border-color: rgba(7, 149, 143, 0.48);
  background: #e8fbf8;
}

.schedule-time-job strong,
.schedule-time-job span,
.schedule-time-job small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-time-job strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}

.schedule-time-job span {
  color: var(--success);
  font-size: 11px;
  font-weight: 950;
}

.schedule-time-job small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.schedule-time-job-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 2px;
}

.schedule-time-job-actions .button {
  min-height: 28px;
  padding: 0 7px;
  font-size: 10px;
}

.schedule-resource-board {
  --schedule-resource-name-width: 168px;
  display: grid;
  grid-template-columns: var(--schedule-resource-name-width) var(--schedule-resource-body-width);
  align-items: stretch;
  max-height: min(74vh, 760px);
  min-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: auto;
  overscroll-behavior: contain;
}

.schedule-resource-corner,
.schedule-resource-hours {
  position: sticky;
  top: 0;
  z-index: 7;
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  background: var(--navy);
}

.schedule-resource-corner {
  left: 0;
  z-index: 9;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px 12px;
  color: #fff;
}

.schedule-resource-corner strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-resource-corner span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  font-weight: 850;
}

.schedule-resource-hours {
  position: sticky;
  top: 0;
  grid-column: 2;
  min-width: var(--schedule-resource-body-width);
  background: var(--navy);
}

.schedule-resource-hours span {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.84);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.schedule-resource-name {
  position: sticky;
  left: 0;
  z-index: 5;
  display: grid;
  align-content: center;
  gap: 4px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  background: #f8fbfd;
}

.schedule-resource-name strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-resource-name span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.schedule-resource-name.is-unassigned {
  background: #fff8ec;
}

.schedule-resource-lane {
  position: relative;
  min-width: var(--schedule-resource-body-width);
  border-bottom: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

.schedule-resource-lane.is-today {
  background: #fff7f8;
}

.schedule-resource-hour-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(216, 224, 232, 0.8);
  pointer-events: none;
}

.schedule-resource-hour-guide:nth-child(2n) {
  border-color: rgba(216, 224, 232, 0.48);
}

.schedule-resource-empty {
  position: absolute;
  top: 50%;
  left: 18px;
  margin: 0;
  transform: translateY(-50%);
  font-size: 12px;
}

.schedule-resource-job {
  position: absolute;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 2px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-left: 5px solid var(--open);
  border-radius: 7px;
  padding: 7px 8px;
  color: var(--ink);
  background: #eef5ff;
  box-shadow: 0 8px 16px rgba(20, 58, 86, 0.11);
  overflow: hidden;
}

.schedule-resource-job.is-complete {
  border-color: rgba(17, 199, 189, 0.38);
  border-left-color: var(--success);
  background: #effdfb;
}

.schedule-resource-job.is-submitted {
  border-color: rgba(7, 149, 143, 0.48);
  background: #e8fbf8;
}

.schedule-resource-job-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 6px;
}

.schedule-resource-job strong,
.schedule-resource-job time,
.schedule-resource-job small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-resource-job strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}

.schedule-resource-job-top span {
  border-radius: 999px;
  padding: 2px 6px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.22);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.schedule-resource-job time {
  color: var(--success);
  font-size: 11px;
  font-weight: 950;
}

.schedule-resource-job small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.schedule-mobile-agenda {
  display: none;
  gap: 12px;
}

.schedule-mobile-summary {
  display: none;
  gap: 12px;
}

.mobile-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.mobile-day-chip,
.mobile-month-cell {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 4px;
  color: var(--navy);
  background: #fff;
  text-decoration: none;
}

.mobile-day-chip.active,
.mobile-month-cell.active {
  border-color: var(--teal);
  background: rgba(17, 199, 189, 0.18);
  box-shadow: inset 0 0 0 1px rgba(17, 199, 189, 0.4);
}

.mobile-day-chip.is-today,
.mobile-month-cell.is-today {
  border-color: var(--open);
}

.mobile-day-chip strong,
.mobile-month-cell strong {
  font-size: 12px;
  line-height: 1;
}

.mobile-day-chip span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.mobile-day-chip em,
.mobile-month-cell em {
  min-width: 22px;
  border-radius: 999px;
  padding: 3px 6px;
  color: #06343d;
  background: var(--teal);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.mobile-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.mobile-month-cell {
  min-height: 44px;
  padding: 5px 3px;
}

.mobile-month-cell.is-outside-month {
  opacity: 0.45;
  background: var(--soft);
}

.mobile-selected-day {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.mobile-selected-day.is-today {
  border-color: var(--open);
}

.mobile-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  color: #fff;
  background: var(--navy);
}

.mobile-selected-day.is-today .mobile-selected-head {
  background: var(--open);
}

.mobile-selected-head strong {
  font-size: 14px;
}

.mobile-selected-head span {
  border-radius: 999px;
  padding: 4px 8px;
  color: #06343d;
  background: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.mobile-selected-jobs {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.mobile-selected-jobs > .muted {
  margin: 0;
  text-align: center;
}

.schedule-agenda-day {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.schedule-agenda-day.is-today {
  border-color: var(--open);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}

.schedule-agenda-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  color: #fff;
  background: var(--navy);
}

.schedule-agenda-day.is-today .schedule-agenda-head {
  background: var(--open);
}

.schedule-agenda-head strong {
  font-size: 14px;
}

.schedule-agenda-head span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.schedule-agenda-head em {
  min-width: 26px;
  border-radius: 999px;
  padding: 5px 7px;
  color: #06343d;
  background: var(--teal);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.schedule-agenda-jobs {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.schedule-agenda-jobs > .muted {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

.schedule-mini-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: #fff;
}

.schedule-mini-card.is-open {
  border-left: 5px solid var(--open);
}

.schedule-mini-card.is-complete {
  border-left: 5px solid var(--success);
  background: rgba(17, 199, 189, 0.08);
}

.schedule-mini-card.is-submitted {
  border-color: rgba(7, 149, 143, 0.34);
  background: rgba(17, 199, 189, 0.07);
}

.schedule-status-chip {
  display: inline-flex;
  justify-self: start;
  border-radius: 999px;
  padding: 4px 8px;
  color: #fff;
  background: var(--open);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.schedule-status-chip.is-open {
  color: #fff;
  background: var(--open);
}

.is-complete .schedule-status-chip,
.is-submitted .schedule-status-chip,
.schedule-status-chip.is-complete {
  color: #06343d;
  background: var(--teal);
}

.schedule-status-chip.is-unscheduled {
  color: var(--warning-ink);
  background: rgba(245, 158, 11, 0.24);
}

.schedule-mini-time {
  color: var(--success);
  font-size: 12px;
  font-weight: 900;
}

.schedule-mini-card strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
}

.schedule-mini-card span,
.schedule-mini-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.schedule-mini-card .button {
  min-height: 34px;
  margin-top: 3px;
  padding: 0 8px;
  font-size: 12px;
}

.schedule-mini-card[draggable="true"],
.schedule-card[draggable="true"],
.month-job-pill[draggable="true"],
.schedule-time-job[draggable="true"] {
  cursor: grab;
}

.schedule-mini-card[draggable="true"]:active,
.schedule-card[draggable="true"]:active,
.month-job-pill[draggable="true"]:active,
.schedule-time-job[draggable="true"]:active {
  cursor: grabbing;
}

.schedule-mini-card.is-dragging,
.schedule-card.is-dragging,
.month-job-pill.is-dragging,
.schedule-time-job.is-dragging {
  opacity: 0.55;
  transform: scale(0.98);
}

.schedule-date-groups {
  display: grid;
  gap: 14px;
}

.schedule-date-group {
  display: grid;
  gap: 10px;
}

.schedule-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.schedule-date-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
}

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

.schedule-month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(112px, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  background: var(--line);
}

.schedule-month-weekday {
  min-width: 112px;
  padding: 10px;
  color: #fff;
  background: var(--navy);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.schedule-month-cell {
  min-width: 112px;
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 8px;
  background: #fff;
}

.schedule-month-cell.is-today {
  outline: 3px solid rgba(215, 25, 70, 0.48);
  outline-offset: -3px;
  background: #fff7f9;
}

.schedule-month-cell.is-selected {
  outline: 3px solid rgba(17, 199, 189, 0.55);
  outline-offset: -3px;
  background: #edfffd;
}

.schedule-month-cell.is-today.is-selected {
  outline-color: rgba(215, 25, 70, 0.55);
  background: #fff7f9;
}

.schedule-month-cell.is-outside-month {
  background: #eef4f8;
}

.schedule-month-cell.is-outside-month .schedule-month-date {
  opacity: 0.48;
}

.schedule-month-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.schedule-month-date strong {
  color: var(--navy);
  font-size: 14px;
}

.schedule-month-date span {
  min-width: 22px;
  border-radius: 999px;
  padding: 3px 6px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.28);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.schedule-month-jobs {
  display: grid;
  gap: 5px;
}

.month-job-pill {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid var(--line);
  border-left: 5px solid var(--open);
  border-radius: 6px;
  padding: 6px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.month-job-pill.is-complete {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.09);
}

.month-job-pill.is-submitted {
  border-color: rgba(7, 149, 143, 0.5);
  background: rgba(7, 149, 143, 0.13);
}

.month-job-pill span {
  color: var(--success);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
}

.month-job-pill strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-job-pill em {
  justify-self: start;
  border-radius: 999px;
  padding: 3px 6px;
  color: #fff;
  background: var(--open);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.month-job-pill.is-complete em,
.month-job-pill.is-submitted em {
  color: #06343d;
  background: var(--teal);
}

.schedule-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.55fr);
  gap: 12px;
  align-items: start;
}

.schedule-map-canvas {
  width: 100%;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.schedule-dispatch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr);
  gap: 14px;
  align-items: start;
}

.schedule-dispatch-calendar {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.schedule-dispatch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.schedule-dispatch-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.schedule-dispatch-head strong {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.2;
}

.schedule-dispatch-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.schedule-dispatch-map {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.schedule-dispatch-map .schedule-map-canvas {
  min-height: min(72vh, 720px);
}

.schedule-unscheduled-strip {
  grid-column: 1 / -1;
}

.schedule-cell-add {
  width: 100%;
  min-height: 32px;
  border: 1px dashed rgba(17, 199, 189, 0.48);
  border-radius: 7px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.08);
  font-size: 11px;
  font-weight: 1000;
  cursor: pointer;
}

.schedule-cell-add:hover,
.schedule-cell-add:focus-visible {
  border-style: solid;
  background: rgba(17, 199, 189, 0.18);
}

.schedule-day-column[data-schedule-cell-date],
.schedule-month-cell[data-schedule-cell-date] {
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.schedule-day-column[data-schedule-cell-date]:hover,
.schedule-month-cell[data-schedule-cell-date]:hover {
  border-color: rgba(17, 199, 189, 0.5);
  box-shadow: 0 0 0 2px rgba(17, 199, 189, 0.1);
}

.schedule-card.is-map-highlight,
.schedule-mini-card.is-map-highlight,
.month-job-pill.is-map-highlight,
.map-job-card.is-map-highlight {
  border-color: rgba(17, 199, 189, 0.9);
  box-shadow: 0 0 0 3px rgba(17, 199, 189, 0.22), 0 14px 30px rgba(5, 24, 44, 0.12);
}

.month-job-pill.is-map-highlight,
.map-job-card.is-map-highlight {
  background: #eafff9;
}

.schedule-create-sheet {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 24, 44, 0.48);
}

.schedule-create-card {
  position: relative;
  display: grid;
  gap: 8px;
  width: min(460px, 100%);
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 10px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(5, 24, 44, 0.28);
}

.schedule-create-card > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-create-card > strong {
  color: var(--navy);
  font-size: 22px;
  line-height: 1.1;
}

.schedule-create-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.schedule-create-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  background: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.schedule-create-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}

.reports-view .section-body {
  display: grid;
  gap: 16px;
}

.jobber-reports-view {
  color: #012939;
}

.jobber-reports-view > .section-heading {
  align-items: center;
  border: 0;
  padding: 0;
  background: transparent;
}

.jobber-reports-view > .section-heading h2 {
  color: #012939;
  font-size: 34px;
  letter-spacing: 0;
}

.jobber-report-toolbar {
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 14px 16px;
  background: #fff;
}

.jobber-insights {
  display: grid;
  gap: 18px;
}

.jobber-section-title {
  margin: 18px 0 0;
  color: #012939;
  font-size: 25px;
  line-height: 1.1;
}

.jobber-report-card {
  border: 1px solid #d7dde2;
  border-radius: 8px;
  background: #fff;
}

.jobber-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 10px;
}

.jobber-card-head h3 {
  margin: 0;
  color: #012939;
  font-size: 20px;
  line-height: 1.15;
}

.jobber-card-head span,
.jobber-card-head a {
  color: #395468;
  font-size: 13px;
  font-weight: 700;
}

.jobber-card-head a {
  text-decoration: none;
}

.jobber-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  min-width: 260px;
}

.jobber-range-control {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.jobber-range-control label {
  display: grid;
  gap: 4px;
}

.jobber-range-control label span {
  color: #667888;
  font-size: 11px;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jobber-range-control select,
.jobber-range-control input {
  min-height: 34px;
  border: 1px solid #c8d3dc;
  border-radius: 6px;
  padding: 0 10px;
  color: #012939;
  background: #fff;
  font-weight: 800;
}

.jobber-custom-range {
  display: none;
  grid-template-columns: 132px 132px auto;
  gap: 8px;
}

.jobber-custom-range.is-visible {
  display: grid;
}

.jobber-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 8px 16px 16px;
}

.jobber-overview-metric {
  display: grid;
  gap: 7px;
  min-width: 0;
  border-left: 1px solid #d7dde2;
  padding: 0 14px;
  color: inherit;
  text-decoration: none;
}

.jobber-overview-metric:hover span {
  text-decoration: underline;
}

.jobber-overview-metric:first-child {
  border-left: 0;
  padding-left: 0;
}

.jobber-overview-metric span {
  color: #012939;
  font-size: 14px;
  font-weight: 900;
}

.jobber-overview-metric strong {
  color: #012939;
  font-size: 26px;
  line-height: 1;
}

.jobber-overview-metric em {
  width: max-content;
  border-radius: 999px;
  padding: 4px 10px;
  background: #e3f2df;
  color: #1e6b2d;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.jobber-overview-metric em.is-down {
  background: #f9e2df;
  color: #9c2f21;
}

.jobber-revenue-card {
  padding-bottom: 16px;
}

.jobber-revenue-totals {
  display: flex;
  gap: 24px;
  padding: 0 16px 8px;
}

.jobber-revenue-totals div {
  display: grid;
  gap: 3px;
}

.jobber-revenue-totals strong {
  color: #012939;
  font-size: 30px;
  line-height: 1;
}

.jobber-revenue-totals span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #395468;
  font-size: 13px;
  font-weight: 800;
}

.jobber-revenue-totals i,
.jobber-source-list i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #5540bd;
}

.jobber-revenue-totals i.current {
  background: #9c8adf;
}

.jobber-revenue-chart {
  display: grid;
  grid-template-columns: 42px minmax(720px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding: 6px 16px 0;
}

.jobber-y-axis {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  min-height: 165px;
  padding-bottom: 28px;
  color: #395468;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.jobber-month-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(46px, 1fr));
  gap: 12px;
  min-width: 720px;
  min-height: 165px;
  border-bottom: 1px solid #d7dde2;
  background:
    linear-gradient(to bottom, #e3e8ec 1px, transparent 1px) 0 0 / 100% 50%,
    linear-gradient(to bottom, transparent calc(100% - 1px), #d7dde2 1px);
}

.jobber-month-group {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  outline: none;
}

.jobber-month-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-height: 140px;
}

.jobber-bar {
  display: block;
  width: 24px;
  min-height: 3px;
  border-radius: 3px 3px 0 0;
  background: #5540bd;
}

.jobber-bar.current {
  background: #9c8adf;
}

.jobber-bar.is-zero {
  opacity: 0.24;
}

.jobber-month-group > strong {
  color: #395468;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.jobber-hover-card {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 7;
  display: none;
  width: 238px;
  transform: translateX(-50%);
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(1, 41, 57, 0.18);
}

.jobber-month-group:hover .jobber-hover-card,
.jobber-month-group:focus-visible .jobber-hover-card {
  display: grid;
  gap: 6px;
}

.jobber-hover-card b {
  color: #012939;
  font-size: 13px;
}

.jobber-hover-card span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #395468;
  font-size: 12px;
  font-weight: 700;
}

.jobber-hover-card i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.jobber-hover-card i.compare {
  background: #5540bd;
}

.jobber-hover-card i.current {
  background: #9c8adf;
}

.jobber-hover-card span strong {
  margin-left: auto;
}

.jobber-hover-card .jobber-hover-change {
  margin-top: 4px;
  border-top: 1px solid #e2e8ee;
  padding-top: 8px;
}

.jobber-hover-change.is-up strong {
  color: #2f7d32;
}

.jobber-hover-change.is-down strong {
  color: #a82417;
}

.jobber-hover-card strong {
  color: #012939;
}

.jobber-insight-grid {
  display: grid;
  gap: 16px;
}

.jobber-insight-grid.two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

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

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

.jobber-donut-wrap {
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: 280px;
  padding: 16px;
}

.jobber-lead-card .jobber-donut-wrap {
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 190px;
}

.jobber-donut {
  display: grid;
  place-items: center;
  width: 152px;
  height: 152px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #fff 0 54%, transparent 55%),
    conic-gradient(#9c8adf 0 var(--fill), #dfe4e8 var(--fill) 100%);
}

.jobber-donut strong {
  align-self: end;
  color: #012939;
  font-size: 24px;
}

.jobber-donut span {
  align-self: start;
  color: #395468;
  font-size: 12px;
  font-weight: 700;
}

.jobber-source-list {
  display: grid;
  gap: 7px;
  width: 100%;
}

.jobber-source-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #395468;
  font-size: 13px;
  font-weight: 700;
}

.jobber-source-list strong {
  color: #012939;
  margin-left: auto;
}

.jobber-revenue-map-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 12px;
  padding: 14px;
}

.jobber-revenue-map-canvas {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  background: #e8eef1;
}

.jobber-heatmap-card .jobber-revenue-map-canvas {
  min-height: 520px;
  margin: 14px;
}

.jobber-revenue-map-canvas .revenue-google-marker {
  cursor: pointer;
}

.revenue-google-marker {
  display: block;
  width: var(--revenue-marker-size, 28px);
  height: var(--revenue-marker-size, 28px);
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--revenue-marker-color, #07958f);
  box-shadow: 0 5px 16px rgba(5, 24, 44, 0.28);
  opacity: 0.86;
}

.revenue-map-floating-legend {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 500;
  display: grid;
  gap: 7px;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 26px rgba(1, 41, 57, 0.16);
  pointer-events: none;
}

.revenue-map-floating-legend.is-google-control {
  position: static;
  margin: 0 14px 14px 0;
}

.revenue-map-floating-legend strong {
  color: #012939;
  font-size: 13px;
}

.revenue-map-floating-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #395468;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.revenue-map-floating-legend i {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(1, 41, 57, 0.12);
}

.jobber-revenue-map-canvas > .muted {
  display: grid;
  min-height: 260px;
  place-items: center;
  margin: 0;
  padding: 18px;
  text-align: center;
}

.jobber-revenue-map-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.revenue-map-stat {
  display: grid;
  gap: 3px;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 10px;
  background: #f7fafc;
}

.revenue-map-stat span,
.revenue-map-stat em {
  color: #395468;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.revenue-map-stat strong {
  color: #012939;
  font-size: 24px;
  line-height: 1;
}

.revenue-map-legend {
  display: grid;
  gap: 7px;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.revenue-map-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #395468;
  font-size: 12px;
  font-weight: 800;
}

.revenue-map-legend i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.revenue-map-legend i.low {
  background: #18bfae;
}

.revenue-map-legend i.mid {
  background: #00a9c8;
}

.revenue-map-legend i.high {
  background: #5540bd;
}

.revenue-map-areas {
  display: grid;
  gap: 7px;
}

.revenue-map-areas > strong {
  color: #012939;
  font-size: 13px;
  text-transform: uppercase;
}

.revenue-map-areas button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 8px 10px;
  color: #012939;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.revenue-map-areas button:hover {
  border-color: #00a9c8;
  background: #eefcfd;
}

.revenue-map-areas button span {
  min-width: 0;
}

.revenue-map-areas button em {
  flex: 0 0 auto;
  color: #395468;
  font-style: normal;
}

.revenue-map-popup-list {
  display: grid;
  gap: 5px;
  border-top: 1px solid #d7dde2;
  padding-top: 6px;
}

.revenue-map-popup-list span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.revenue-map-popup-list b {
  max-width: 150px;
  overflow: hidden;
  color: #012939;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jobber-report-tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 150px;
  padding: 20px 16px;
  color: inherit;
  text-decoration: none;
}

.jobber-report-tile:hover {
  border-color: #9fb0bd;
  box-shadow: 0 8px 24px rgba(1, 41, 57, 0.08);
}

.jobber-report-tile.is-danger {
  border-left: 4px solid #d9472f;
}

.jobber-report-tile h3 {
  margin: 0;
  color: #012939;
  font-size: 19px;
}

.jobber-report-tile p,
.jobber-report-tile span {
  margin: 0;
  color: #395468;
  font-size: 13px;
  font-weight: 700;
}

.jobber-report-tile strong {
  color: #012939;
  font-size: 28px;
  line-height: 1;
}

.jobber-tile-link {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #395468;
  font-size: 12px;
  font-weight: 900;
}

.jobber-quote-card,
.jobber-crew-card {
  display: grid;
  gap: 14px;
}

.jobber-quote-summary,
.jobber-crew-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px;
}

.jobber-crew-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jobber-quote-summary > div,
.jobber-crew-metrics article {
  display: grid;
  gap: 4px;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 12px;
  background: #f7fafc;
}

.jobber-crew-metrics article.needs-attention {
  border-color: #f3b3a9;
  background: #fff3f1;
}

.jobber-quote-summary span,
.jobber-quote-summary em,
.jobber-crew-metrics span {
  color: #395468;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.jobber-quote-summary strong,
.jobber-crew-metrics strong {
  color: #012939;
  font-size: 28px;
  line-height: 1;
}

.jobber-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  margin: 0 16px;
  background: #e2e8ee;
}

.jobber-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1fc3b5;
}

.jobber-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
}

.jobber-mini-stats span {
  border: 1px solid #d7dde2;
  border-radius: 999px;
  padding: 6px 10px;
  color: #395468;
  font-size: 12px;
  font-weight: 800;
}

.jobber-mini-stats strong {
  color: #012939;
}

.sales-performance-card {
  display: grid;
  gap: 14px;
  overflow: hidden;
}

.sales-performance-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px;
}

.sales-performance-kpi,
.sales-performance-side article {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 12px;
  background: #f7fafc;
}

.sales-performance-kpi span,
.sales-performance-kpi em,
.sales-performance-side span,
.sales-performance-side em {
  color: #395468;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.sales-performance-kpi strong,
.sales-performance-side strong {
  color: #012939;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1;
}

.sales-performance-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 14px;
  padding: 0 16px 16px;
}

.sales-source-panel {
  min-width: 0;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  background: #fff;
}

.sales-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #d7dde2;
  padding: 12px;
}

.sales-source-head div {
  display: grid;
  gap: 4px;
}

.sales-source-head strong {
  color: #012939;
  font-size: 15px;
}

.sales-source-head span {
  color: #395468;
  font-size: 12px;
  font-weight: 750;
}

.sales-source-table {
  display: grid;
  min-width: 760px;
}

.sales-source-panel {
  overflow-x: auto;
}

.sales-source-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(6, minmax(82px, 1fr));
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border-top: 1px solid #eef2f5;
  padding: 9px 12px;
}

.sales-source-row:first-child {
  border-top: 0;
}

.sales-source-row.header {
  min-height: 36px;
  background: #f2f7fa;
  color: #395468;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sales-source-row:not(.header):hover {
  background: #f8fcfd;
}

.sales-source-row.is-top {
  background: #eefdfb;
}

.sales-source-row span {
  min-width: 0;
  color: #012939;
  font-size: 13px;
  font-weight: 850;
}

.sales-source-row span:first-child {
  display: grid;
  gap: 3px;
}

.sales-source-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-source-row em {
  overflow: hidden;
  color: #607486;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-performance-side {
  display: grid;
  align-content: start;
  gap: 10px;
}

.marketing-roi-panel {
  display: grid;
  gap: 14px;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(1, 41, 57, 0.08);
}

.marketing-roi-panel.is-needs-work {
  border-color: #f1b9ac;
  background: #fff8f5;
}

.marketing-roi-panel.is-build,
.marketing-roi-panel.is-watch {
  border-color: #e6d49b;
  background: #fffdf2;
}

.marketing-roi-head,
.marketing-roi-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 14px;
}

.marketing-roi-head h3 {
  margin: 2px 0 4px;
  color: #012939;
  font-size: 24px;
}

.marketing-roi-head p,
.marketing-roi-status em,
.marketing-roi-readout em,
.marketing-roi-guardrails span {
  color: #395468;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.marketing-roi-status {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  justify-content: flex-end;
  gap: 8px;
  text-align: right;
}

.marketing-roi-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.marketing-roi-stats article,
.marketing-roi-review,
.marketing-roi-readout article {
  min-width: 0;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  background: #f7fafc;
}

.marketing-roi-stats article {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.marketing-roi-stats span,
.marketing-roi-stats em,
.marketing-roi-readout span,
.marketing-roi-form span {
  color: #395468;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.marketing-roi-stats strong,
.marketing-roi-readout strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #012939;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1;
}

.marketing-roi-review {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  background: #fff;
}

.marketing-roi-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(130px, 0.55fr) minmax(190px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.marketing-roi-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.marketing-roi-form input {
  min-width: 0;
  width: 100%;
  border: 1px solid #cfd9e2;
  border-radius: 8px;
  padding: 10px 11px;
  color: #012939;
  font: inherit;
  font-weight: 800;
}

.marketing-roi-form .button {
  min-height: 41px;
  white-space: nowrap;
}

.marketing-roi-guardrails {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.marketing-roi-guardrails span {
  border: 1px solid #d7dde2;
  border-radius: 999px;
  padding: 5px 8px;
  background: #f7fafc;
}

.marketing-roi-readout {
  display: grid;
  gap: 10px;
}

.marketing-roi-readout article {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.marketing-roi-table-wrap {
  overflow-x: auto;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  background: #fff;
}

.marketing-roi-table {
  display: grid;
  width: max-content;
  min-width: 100%;
}

.marketing-roi-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.3fr) 92px repeat(7, minmax(84px, 0.8fr)) 80px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border-top: 1px solid #eef2f5;
  padding: 9px 12px;
}

.marketing-roi-row:first-child {
  border-top: 0;
}

.marketing-roi-row.header {
  min-height: 36px;
  background: #f2f7fa;
  color: #395468;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.marketing-roi-row.is-needs-work {
  background: #fff2ee;
}

.marketing-roi-row.is-build,
.marketing-roi-row.is-watch {
  background: #fffaf0;
}

.marketing-roi-row span {
  min-width: 0;
  color: #012939;
  font-size: 13px;
  font-weight: 850;
}

.marketing-roi-row span:first-child {
  display: grid;
  gap: 3px;
}

.marketing-roi-row strong,
.marketing-roi-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-roi-row em {
  color: #607486;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.marketing-roi-row i {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef5f8;
  color: #395468;
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.marketing-roi-empty {
  padding: 12px;
}

.jobber-crew-list {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
}

.jobber-crew-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(70px, auto));
  align-items: center;
  gap: 10px;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.jobber-crew-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.jobber-crew-row strong {
  min-width: 0;
  overflow: hidden;
  color: #012939;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jobber-crew-row span {
  color: #395468;
  font-size: 12px;
  font-weight: 800;
}

.jobber-caveats {
  display: grid;
  gap: 4px;
  color: #395468;
  font-size: 12px;
  font-weight: 700;
}

.jobber-report-detail {
  display: grid;
  gap: 16px;
}

.jobber-report-detail-hero {
  padding: 22px 18px;
}

.jobber-report-detail-hero h3 {
  margin: 0 0 6px;
  color: #012939;
  font-size: 28px;
}

.jobber-report-detail-hero p,
.jobber-report-detail-hero span {
  margin: 0;
  color: #395468;
  font-size: 14px;
  font-weight: 700;
}

.jobber-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.jobber-detail-stats article {
  display: grid;
  gap: 7px;
  padding: 16px;
}

.jobber-detail-stats span,
.jobber-aging-grid span {
  color: #395468;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.jobber-detail-stats strong,
.jobber-aging-grid strong {
  color: #012939;
  font-size: 24px;
  line-height: 1;
}

.jobber-aging-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}

.jobber-aging-grid article {
  display: grid;
  gap: 6px;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  padding: 12px;
  background: #f7f9fa;
}

.jobber-aging-grid em {
  color: #395468;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.jobber-detail-table-wrap {
  overflow-x: auto;
  padding: 0 16px 16px;
}

.jobber-detail-table {
  display: grid;
  gap: 0;
  min-width: 760px;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  overflow: hidden;
}

.jobber-detail-row {
  display: grid;
  grid-template-columns: repeat(var(--report-columns), minmax(130px, 1fr));
  gap: 0;
  color: inherit;
  text-decoration: none;
}

.jobber-detail-row.header {
  background: #f7f9fa;
}

.jobber-detail-row:not(.header):hover {
  background: #f3f8fb;
}

.jobber-detail-row span {
  min-width: 0;
  border-bottom: 1px solid #d7dde2;
  padding: 11px 12px;
  color: #012939;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.jobber-detail-row.header span {
  color: #395468;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 0.5fr) minmax(280px, 1fr);
  gap: 12px;
  align-items: end;
}

.revenue-year-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 12px;
}

.revenue-report {
  display: grid;
  gap: 14px;
}

.admin-report-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(13, 56, 82, 0.14);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 13px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(13, 56, 82, 0.07);
}

.admin-report-next.is-needs-work {
  border-left-color: #dc2626;
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.72), #fff);
}

.admin-report-next.is-watch,
.admin-report-next.is-build {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.84), #fff);
}

.admin-report-next.is-ready {
  border-left-color: #16a34a;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.8), #fff);
}

.admin-report-next span,
.admin-report-next em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-report-next strong {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.admin-report-next p {
  margin: 5px 0 0;
  max-width: 780px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.admin-report-next-action {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  min-width: 180px;
}

.admin-command-strip {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(13, 56, 82, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13, 56, 82, 0.06);
}

.admin-command-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.admin-command-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-command-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-command-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(13, 56, 82, 0.1);
  border-radius: 8px;
  padding: 10px;
  color: inherit;
  background: var(--soft);
  text-decoration: none;
}

.admin-command-card:hover,
.admin-command-card:focus-visible {
  border-color: rgba(17, 199, 189, 0.44);
  background: rgba(17, 199, 189, 0.08);
  outline: none;
}

.admin-command-card.is-needs-work {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 242, 242, 0.92);
}

.admin-command-card.is-watch {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(255, 251, 235, 0.9);
}

.admin-command-card.is-ready {
  border-color: rgba(22, 163, 74, 0.22);
  background: #f4fff7;
}

.admin-command-card span,
.admin-command-card em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-command-card span {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-command-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-command-card em {
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.25;
}

.admin-review-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(13, 56, 82, 0.14);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(22, 189, 183, 0.12), rgba(255, 255, 255, 0.94));
  box-shadow: 0 16px 36px rgba(13, 56, 82, 0.08);
}

.admin-review-panel.is-needs-work {
  border-color: rgba(220, 38, 38, 0.26);
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.76), rgba(255, 255, 255, 0.94));
}

.admin-review-panel.is-watch {
  border-color: rgba(245, 158, 11, 0.34);
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.62), rgba(255, 255, 255, 0.94));
}

.admin-review-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.admin-review-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-review-title h3 {
  margin: 0;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.05;
}

.admin-review-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-review-week-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px;
  min-width: min(100%, 420px);
}

.admin-review-status {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.admin-review-status.is-ready {
  border-color: rgba(22, 163, 74, 0.3);
  color: #0f8f52;
}

.admin-review-status.is-watch,
.admin-review-status.is-build {
  border-color: rgba(245, 158, 11, 0.38);
  color: #9a5b00;
}

.admin-review-status.is-needs-work {
  border-color: rgba(220, 38, 38, 0.32);
  color: #b42318;
}

.admin-review-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-review-metric {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(13, 56, 82, 0.12);
  border-radius: 8px;
  padding: 11px;
  background: rgba(255, 255, 255, 0.9);
  color: inherit;
  text-decoration: none;
}

.admin-review-metric.is-watch {
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(255, 251, 235, 0.9);
}

.admin-review-metric.is-needs-work {
  border-color: rgba(220, 38, 38, 0.26);
  background: rgba(254, 242, 242, 0.9);
}

.admin-review-metric span,
.admin-review-row > span,
.admin-review-action > span,
.admin-review-mini-list span,
.admin-review-notes span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-review-metric strong {
  min-width: 0;
  color: var(--navy);
  font-size: 21px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.admin-review-metric em,
.admin-review-row em,
.admin-review-action em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.admin-review-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
}

.admin-review-block {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid rgba(13, 56, 82, 0.1);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.admin-review-actions-list,
.admin-review-checklist,
.admin-review-footer,
.admin-review-mini-list,
.admin-review-notes {
  display: grid;
  gap: 8px;
}

.admin-review-action,
.admin-review-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
  color: inherit;
  text-decoration: none;
}

.admin-review-action.is-urgent,
.admin-review-row.is-needs-work {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 242, 242, 0.9);
}

.admin-review-action.is-build,
.admin-review-row.is-build,
.admin-review-row.is-watch {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(255, 251, 235, 0.9);
}

.admin-review-action div,
.admin-review-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-review-action strong,
.admin-review-row strong,
.admin-review-mini-list strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
}

.admin-review-footer {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-review-mini-list {
  border: 1px solid rgba(13, 56, 82, 0.1);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.admin-review-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.admin-review-export-actions .button {
  min-width: 0;
  padding-inline: 10px;
}

.admin-review-notes {
  border-top: 1px solid rgba(13, 56, 82, 0.1);
  padding-top: 10px;
}

.admin-filings-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(13, 56, 82, 0.14);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(13, 56, 82, 0.08);
}

.admin-filings-panel.is-needs-work {
  border-color: rgba(220, 38, 38, 0.26);
  background: #fff7f5;
}

.admin-filings-panel.is-build,
.admin-filings-panel.is-watch {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffdf2;
}

.admin-filings-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.52fr);
  gap: 14px;
  align-items: start;
}

.admin-filings-head h3 {
  margin: 2px 0 4px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.05;
}

.admin-filings-head p,
.admin-filings-status em,
.admin-filing-card p,
.admin-filing-note,
.admin-filings-guardrails span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.admin-filings-status {
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}

.admin-filings-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-filings-stats article {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(13, 56, 82, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: #f7fafc;
}

.admin-filings-stats article.is-needs-work {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 242, 242, 0.9);
}

.admin-filings-stats span,
.admin-filings-stats em,
.admin-filing-card-head span,
.admin-filing-meta span,
.admin-filing-evidence span {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.admin-filings-stats strong {
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
}

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

.admin-filing-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(13, 56, 82, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.admin-filing-card.is-needs-work {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 242, 242, 0.92);
}

.admin-filing-card.is-build,
.admin-filing-card.is-watch {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(255, 251, 235, 0.92);
}

.admin-filing-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.admin-filing-card-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-filing-card h4 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.2;
}

.admin-filing-card-head strong {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-filing-meta,
.admin-filing-evidence,
.admin-filing-actions,
.admin-filings-guardrails {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-filing-meta span,
.admin-filing-evidence span,
.admin-filings-guardrails span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--soft);
}

.admin-filing-meta strong {
  color: var(--navy);
}

.admin-filing-note {
  margin: 0;
  border-left: 3px solid var(--teal);
  padding: 7px 9px;
  background: rgba(22, 189, 183, 0.08);
}

.admin-filing-actions .button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.admin-monthly-close-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(13, 56, 82, 0.14);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(22, 189, 183, 0.1), rgba(255, 255, 255, 0.96));
  box-shadow: 0 16px 36px rgba(13, 56, 82, 0.08);
}

.admin-monthly-close-panel.is-build,
.admin-monthly-close-panel.is-watch {
  border-color: rgba(245, 158, 11, 0.34);
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.62), rgba(255, 255, 255, 0.94));
}

.admin-monthly-close-panel.is-needs-work {
  border-color: rgba(220, 38, 38, 0.26);
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.72), rgba(255, 255, 255, 0.94));
}

.admin-monthly-close-head,
.admin-monthly-close-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
  gap: 14px;
  align-items: start;
}

.admin-monthly-close-head h3 {
  margin: 2px 0 4px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.05;
}

.admin-monthly-close-head p,
.admin-monthly-close-status em,
.admin-monthly-close-guardrails span,
.admin-monthly-close-row em,
.admin-monthly-close-stats em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.admin-monthly-close-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  text-align: right;
}

.admin-monthly-close-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-monthly-close-stats article,
.admin-monthly-close-review {
  min-width: 0;
  border: 1px solid rgba(13, 56, 82, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
}

.admin-monthly-close-stats article {
  display: grid;
  gap: 5px;
  padding: 11px;
}

.admin-monthly-close-stats span,
.admin-monthly-close-form span,
.admin-monthly-close-row > span {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.admin-monthly-close-stats strong {
  min-width: 0;
  color: var(--navy);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.admin-monthly-close-review {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
}

.admin-monthly-close-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.admin-monthly-close-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-monthly-close-form select,
.admin-monthly-close-form textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid #cfd9e2;
  border-radius: 8px;
  padding: 10px 11px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 800;
}

.admin-monthly-close-form textarea {
  min-height: 92px;
  resize: vertical;
}

.admin-monthly-close-form .wide,
.admin-monthly-close-form-actions {
  grid-column: 1 / -1;
}

.admin-monthly-close-form-actions,
.admin-monthly-close-guardrails,
.admin-monthly-close-checklist {
  display: grid;
  gap: 8px;
}

.admin-monthly-close-guardrails span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.86);
}

.admin-monthly-close-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
  color: inherit;
  text-decoration: none;
}

.admin-monthly-close-row.is-ready {
  border-color: rgba(22, 163, 74, 0.28);
  background: rgba(236, 253, 245, 0.9);
}

.admin-monthly-close-row.is-build,
.admin-monthly-close-row.is-watch {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(255, 251, 235, 0.9);
}

.admin-monthly-close-row.is-needs-work {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 242, 242, 0.9);
}

.admin-monthly-close-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-monthly-close-row strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
}

.admin-expenses-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(13, 56, 82, 0.14);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(13, 56, 82, 0.08);
}

.admin-expenses-panel.is-build,
.admin-expenses-panel.is-watch {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffdf2;
}

.admin-expenses-panel.is-needs-work {
  border-color: rgba(220, 38, 38, 0.26);
  background: #fff7f5;
}

.admin-expenses-head,
.admin-expenses-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 14px;
  align-items: start;
}

.admin-expenses-head h3 {
  margin: 2px 0 4px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.05;
}

.admin-expenses-head p,
.admin-expenses-status em,
.admin-expenses-guardrails span,
.admin-expenses-categories em,
.admin-expenses-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.admin-expenses-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  text-align: right;
}

.admin-expenses-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-expenses-stats article,
.admin-expenses-review,
.admin-expenses-categories article {
  min-width: 0;
  border: 1px solid rgba(13, 56, 82, 0.12);
  border-radius: 8px;
  background: #f7fafc;
}

.admin-expenses-stats article {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.admin-expenses-stats article.is-watch {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(255, 251, 235, 0.92);
}

.admin-expenses-stats span,
.admin-expenses-stats em,
.admin-expenses-form span,
.admin-expenses-categories span {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.admin-expenses-stats strong,
.admin-expenses-categories strong {
  min-width: 0;
  color: var(--navy);
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.admin-expenses-review {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  background: #fff;
}

.admin-expenses-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.admin-expenses-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-expenses-form input,
.admin-expenses-form select {
  min-width: 0;
  width: 100%;
  border: 1px solid #cfd9e2;
  border-radius: 8px;
  padding: 10px 11px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 800;
}

.admin-expenses-form .wide {
  grid-column: 1 / -1;
}

.admin-expenses-checks,
.admin-expenses-form-actions,
.admin-expenses-guardrails,
.admin-expenses-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-expenses-checks label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  background: var(--soft);
}

.admin-expenses-checks input {
  width: auto;
}

.admin-expenses-guardrails span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--soft);
}

.admin-expenses-categories {
  display: grid;
  gap: 10px;
}

.admin-expenses-categories article {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.admin-expenses-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.admin-expenses-table {
  display: grid;
  width: max-content;
  min-width: 100%;
}

.admin-expenses-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 96px minmax(128px, 0.85fr) minmax(105px, 0.8fr) minmax(110px, 0.8fr) minmax(120px, 0.8fr) minmax(250px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border-top: 1px solid #eef2f5;
  padding: 9px 12px;
}

.admin-expenses-row:first-child {
  border-top: 0;
}

.admin-expenses-row.header {
  min-height: 36px;
  background: #f2f7fa;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-expenses-row.is-draft {
  background: #fffaf0;
}

.admin-expenses-row.is-ignored {
  opacity: 0.72;
}

.admin-expenses-row span {
  min-width: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
}

.admin-expenses-row span:first-child,
.admin-expenses-row span:nth-child(4) {
  display: grid;
  gap: 3px;
}

.admin-expenses-row strong,
.admin-expenses-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-expenses-row i {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef5f8;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-expenses-actions .button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}

.admin-expenses-empty {
  padding: 12px;
}

.revenue-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.revenue-kpi {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.revenue-kpi span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.revenue-kpi strong {
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
}

.revenue-kpi em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.revenue-chart-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.revenue-chart-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.revenue-chart-head div:first-child {
  display: grid;
  gap: 4px;
}

.revenue-chart-head strong {
  color: var(--navy);
  font-size: 18px;
}

.revenue-chart-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.revenue-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px;
}

.revenue-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--soft);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.revenue-legend i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.revenue-legend i.paid {
  background: var(--success);
}

.revenue-legend i.invoiced {
  background: var(--navy);
}

.revenue-legend i.compare {
  background: var(--open);
}

.revenue-chart-scroll {
  display: grid;
  grid-template-columns: 54px minmax(740px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px 8px;
}

.revenue-chart-scale {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  min-height: 280px;
  padding: 4px 0 28px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.revenue-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(58px, 1fr));
  gap: 8px;
  min-height: 280px;
  min-width: 740px;
  border-bottom: 2px solid var(--line);
  background:
    linear-gradient(to bottom, rgba(13, 56, 82, 0.08) 1px, transparent 1px) 0 0 / 100% 33.333%,
    linear-gradient(to bottom, rgba(13, 56, 82, 0.06), rgba(13, 56, 82, 0));
  padding: 4px 6px 0;
}

.revenue-month-group {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  min-width: 0;
  outline: none;
}

.revenue-month-group > strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.revenue-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
  min-height: 242px;
}

.revenue-bar-column {
  display: flex;
  align-items: end;
  width: 20px;
  height: 100%;
  border-radius: 7px 7px 0 0;
  background: rgba(13, 56, 82, 0.05);
}

.revenue-bar-fill {
  display: block;
  width: 100%;
  border-radius: 7px 7px 0 0;
  min-height: 4px;
  transition: filter 160ms ease, transform 160ms ease;
}

.revenue-bar-fill.paid {
  background: linear-gradient(180deg, var(--success), #12948e);
}

.revenue-bar-fill.compare {
  background: linear-gradient(180deg, var(--open), #e58b08);
}

.revenue-bar-fill.is-zero {
  min-height: 2px;
  opacity: 0.35;
}

.revenue-month-group:hover .revenue-bar-fill,
.revenue-month-group:focus-visible .revenue-bar-fill {
  filter: brightness(1.04);
  transform: translateY(-2px);
}

.revenue-hover-card {
  position: absolute;
  left: 50%;
  bottom: 42px;
  z-index: 6;
  display: none;
  width: 230px;
  transform: translateX(-50%);
  border: 1px solid rgba(13, 56, 82, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(13, 56, 82, 0.18);
  color: var(--ink);
}

.revenue-month-group:hover .revenue-hover-card,
.revenue-month-group:focus-visible .revenue-hover-card {
  display: grid;
  gap: 5px;
}

.revenue-hover-card b {
  color: var(--navy);
  font-size: 13px;
}

.revenue-hover-card span,
.revenue-hover-card em {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.revenue-hover-card span strong {
  color: var(--navy);
}

.revenue-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 14px;
}

.revenue-table-wrap,
.revenue-open-wrap {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.revenue-table-wrap {
  overflow-x: auto;
}

.revenue-table {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 820px;
}

.revenue-table-row {
  display: grid;
  grid-template-columns: 58px repeat(6, minmax(86px, 1fr));
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
  background: var(--soft);
}

.revenue-table-row.header {
  border: 0;
  padding-block: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.revenue-table-row span,
.revenue-table-row em,
.revenue-table-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  font-style: normal;
}

.revenue-table-row strong {
  color: var(--navy);
}

.revenue-owner-signals {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr);
  gap: 12px;
  border: 1px solid rgba(22, 189, 183, 0.35);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(22, 189, 183, 0.12), rgba(255, 255, 255, 0.88));
}

.revenue-owner-copy {
  display: grid;
  align-content: start;
  gap: 5px;
}

.revenue-owner-copy strong {
  color: var(--navy);
  font-size: 20px;
}

.revenue-owner-copy em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.revenue-signal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.revenue-signal {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.revenue-signal span,
.revenue-small-metrics span,
.revenue-mini-grid span,
.revenue-aging-total span,
.revenue-aging-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.revenue-signal strong {
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
}

.revenue-signal em,
.revenue-mini-grid em,
.revenue-aging-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.revenue-signal.is-good {
  border-color: rgba(22, 163, 74, 0.28);
}

.revenue-signal.is-warn {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
}

.revenue-small-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.revenue-small-metrics span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(13, 56, 82, 0.1);
  border-radius: 7px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.78);
}

.revenue-small-metrics strong {
  color: var(--navy);
  white-space: nowrap;
}

.revenue-side-stack {
  align-content: start;
}

.revenue-side-stack > div {
  display: grid;
  gap: 8px;
}

.revenue-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.revenue-mini-grid article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: var(--soft);
}

.revenue-mini-grid article.needs-attention {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.08);
}

.revenue-mini-grid strong {
  color: var(--navy);
  font-size: 18px;
}

.revenue-aging {
  display: grid;
  gap: 8px;
}

.revenue-aging-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(13, 56, 82, 0.12);
  border-radius: 7px;
  padding: 9px 10px;
  background: rgba(22, 189, 183, 0.08);
}

.revenue-aging-total strong {
  color: var(--navy);
  font-size: 18px;
}

.revenue-aging-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
}

.revenue-aging-row div {
  display: grid;
  gap: 2px;
}

.revenue-aging-row strong {
  color: var(--navy);
  font-size: 13px;
}

.revenue-aging-row i {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--open);
}

.revenue-caveats {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.revenue-open-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--open);
  border-radius: 7px;
  padding: 10px;
  background: var(--soft);
  color: inherit;
  text-decoration: none;
}

.revenue-open-card span {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.revenue-open-card strong {
  color: var(--navy);
  font-size: 20px;
}

.revenue-open-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.report-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.report-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.report-stat span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-stat strong {
  color: var(--navy);
  font-size: 30px;
  line-height: 1;
}

.report-stat.is-open {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
}

.report-panel {
  display: grid;
  gap: 12px;
}

.field-activity-shell {
  display: grid;
  gap: 12px;
}

.field-activity-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.field-activity-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--soft);
}

.field-activity-stat.needs-attention {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
}

.field-activity-stat span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.field-activity-stat strong {
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
}

.field-activity-list {
  display: grid;
  gap: 9px;
}

.field-activity-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.field-activity-row.is-call {
  border-left-color: var(--success);
}

.field-activity-row.is-issue {
  border-left-color: var(--danger);
}

.field-activity-row.is-task {
  border-left-color: var(--open);
}

.field-activity-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.15);
}

.field-activity-icon svg {
  width: 19px;
  height: 19px;
}

.field-activity-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-activity-head strong {
  color: var(--navy);
  font-size: 15px;
}

.field-activity-head span,
.field-activity-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.field-activity-main p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.field-activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.field-activity-meta a {
  color: var(--blue);
  font-weight: 900;
  text-decoration: none;
}

.report-map-canvas {
  min-height: 440px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.report-map-canvas > .muted {
  display: grid;
  min-height: 260px;
  place-items: center;
  margin: 0;
  padding: 18px;
  text-align: center;
}

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

.report-time-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--open);
  border-radius: 8px;
  padding: 13px;
  background: #fff;
}

.report-time-card.is-open {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.report-time-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.report-time-head div {
  display: grid;
  gap: 3px;
}

.report-time-head strong {
  color: var(--navy);
}

.report-time-head span,
.report-time-head em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.report-time-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-time-actions span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--muted);
  background: var(--soft);
  font-size: 12px;
  font-weight: 900;
}

.jobs-view .section-body,
.crm-job-form,
.crm-detail-grid {
  display: grid;
  gap: 16px;
}

.crm-next-action-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-left: 6px solid var(--navy);
  padding: 14px;
}

.crm-next-action-banner.is-primary {
  border-left-color: var(--blue);
}

.crm-next-action-banner.is-teal {
  border-left-color: var(--teal);
}

.crm-next-action-banner.is-danger {
  border-left-color: var(--danger);
}

.crm-next-action-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.crm-next-action-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.16);
}

.crm-next-action-icon svg {
  width: 22px;
  height: 22px;
}

.crm-next-action-main div {
  display: grid;
  gap: 3px;
}

.crm-next-action-main strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.18;
}

.crm-next-action-main span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.crm-next-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.crm-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.42fr) minmax(150px, 0.36fr) minmax(130px, 0.32fr) auto;
  gap: 12px;
  align-items: end;
}

.crm-toolbar.simple {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.crm-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.crm-tabs-utility {
  grid-template-columns: repeat(auto-fit, minmax(128px, 0.22fr));
  justify-content: start;
  margin-top: -4px;
}

.crm-tabs-handoff {
  grid-template-columns: repeat(auto-fit, minmax(120px, 0.24fr));
  justify-content: start;
  margin-top: -4px;
}

.crm-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--navy);
  background: #fff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.crm-tabs a svg {
  width: 16px;
  height: 16px;
}

.crm-tabs a.active {
  color: #fff;
  border-color: var(--navy);
  background: var(--navy);
}

.crm-tabs-utility a {
  min-height: 34px;
  border-style: dashed;
  color: var(--muted);
  background: var(--soft);
  font-size: 12px;
}

.crm-tabs-handoff a {
  min-height: 36px;
  color: #0f5560;
  border-color: rgba(17, 199, 189, 0.28);
  background: #f4fffd;
  font-size: 12px;
}

.crm-tabs-utility a.active {
  color: #06343d;
  border-style: solid;
  border-color: rgba(17, 199, 189, 0.45);
  background: rgba(17, 199, 189, 0.18);
}

.crm-tabs-handoff a.active {
  color: #06343d;
  border-color: rgba(17, 199, 189, 0.62);
  background: rgba(17, 199, 189, 0.22);
}

.messages-page .section-body {
  display: grid;
  gap: 14px;
}

.message-status-strip {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 6px solid var(--muted);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.message-status-strip.is-ready {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.08);
}

.message-status-strip.needs-setup {
  border-left-color: #f0b429;
  background: rgba(240, 180, 41, 0.1);
}

.message-status-strip div {
  display: grid;
  gap: 3px;
}

.message-status-strip strong {
  color: var(--navy);
  font-size: 16px;
}

.message-status-strip span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.message-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.message-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.message-stat svg {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  color: var(--teal-dark);
}

.message-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.message-stat strong {
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
}

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

.message-showing {
  margin: -2px 0 0;
  font-size: 13px;
  font-weight: 800;
}

.message-inbox-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.38fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.message-inbox-list,
.message-conversation-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.message-inbox-list {
  display: grid;
  gap: 0;
  max-height: min(72vh, 780px);
  overflow: auto;
}

.message-inbox-item {
  display: grid;
  gap: 8px;
  border-left: 5px solid transparent;
  border-bottom: 1px solid var(--line);
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.message-inbox-item:hover,
.message-inbox-item.active {
  background: rgba(17, 199, 189, 0.08);
}

.message-inbox-item.active {
  border-left-color: var(--teal);
}

.message-inbox-item.needs-link:not(.active) {
  border-left-color: rgba(240, 180, 41, 0.5);
}

.message-inbox-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.message-thread-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 6px solid #f0b429;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.message-thread-card.is-linked {
  border-left-color: var(--teal);
}

.message-thread-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.message-thread-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.message-thread-head strong,
.message-thread-head a {
  color: var(--navy);
  font-size: 18px;
  font-weight: 1000;
  text-decoration: none;
}

.message-inbox-main .message-thread-head strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-inbox-main p,
.message-inbox-main small {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-thread-main p,
.message-thread-main small {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.message-link-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(240, 180, 41, 0.48);
  border-radius: 999px;
  padding: 2px 9px;
  color: #785300;
  background: rgba(240, 180, 41, 0.14);
  font-size: 11px;
  font-weight: 1000;
}

.message-link-badge.is-linked {
  color: #08665f;
  border-color: rgba(17, 199, 189, 0.38);
  background: rgba(17, 199, 189, 0.12);
}

.message-link-badge.is-test,
.message-link-badge.is-native,
.message-sync-note.is-test {
  color: #075985;
  border-color: rgba(14, 116, 144, 0.28);
  background: rgba(224, 242, 254, 0.72);
}

.message-last-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
}

.message-last-row span,
.message-last-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.message-last-row em {
  max-width: min(560px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-thread-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-content: start;
}

.message-thread-actions .button svg {
  width: 15px;
  height: 15px;
}

.message-quick-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 118px 180px minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.message-quick-form .message-field textarea {
  min-height: 44px;
  resize: vertical;
}

.message-quick-form > .muted {
  grid-column: 1 / -1;
  margin: 0;
}

.message-conversation {
  height: min(72vh, 780px);
  min-height: 560px;
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) auto;
}

.message-conversation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px;
}

.message-conversation-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.message-conversation-title p,
.message-conversation-title small {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

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

.message-back-button {
  display: none;
}

.message-conversation-actions .button svg {
  width: 15px;
  height: 15px;
}

.message-sync-note {
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  color: var(--muted);
  background: rgba(17, 199, 189, 0.08);
  font-size: 12px;
  font-weight: 900;
}

.message-sync-note.is-error {
  color: #8a1c1c;
  background: rgba(219, 68, 55, 0.08);
}

.message-conversation-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.34fr);
  background: linear-gradient(180deg, rgba(235, 249, 248, 0.72), #fff);
}

.message-bubble-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  overflow: auto;
}

.message-history-note {
  justify-self: center;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 900;
}

.message-context-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  border-left: 1px solid var(--line);
  padding: 12px;
  background: rgba(255, 255, 255, 0.82);
  overflow: auto;
}

.message-context-card,
.message-context-stats div,
.message-context-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.message-context-card {
  display: grid;
  gap: 4px;
  border-left: 5px solid var(--teal);
  padding: 12px;
}

.message-context-card.needs-attention {
  border-left-color: #f0b429;
}

.message-context-card span,
.message-context-stats span,
.message-context-section-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.message-context-card strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.1;
}

.message-context-card p,
.message-context-section > .muted,
.message-context-error {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.message-context-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.message-context-stats div {
  display: grid;
  gap: 3px;
  padding: 10px;
}

.message-context-stats strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1;
}

.message-context-section {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.message-context-section-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
}

.message-context-section-head strong {
  color: var(--navy);
  font-size: 13px;
}

.message-context-section > .muted {
  padding: 10px;
}

.message-context-row {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  color: inherit;
  text-decoration: none;
}

.message-context-row:last-child {
  border-bottom: 0;
}

.message-context-row:hover {
  background: rgba(17, 199, 189, 0.08);
}

.message-context-row .crm-status {
  justify-self: start;
}

.message-context-row strong {
  min-width: 0;
  color: var(--navy);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-context-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.message-context-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.message-bubble {
  max-width: min(76%, 680px);
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(5, 24, 44, 0.07);
}

.message-bubble.outbound {
  justify-self: end;
  color: #fff;
  border-color: var(--navy);
  background: var(--navy);
}

.message-bubble.inbound {
  justify-self: start;
}

.message-bubble-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.message-bubble-meta strong {
  font-size: 13px;
  font-weight: 1000;
}

.message-bubble-meta span,
.message-bubble small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.message-bubble.outbound .message-bubble-meta span,
.message-bubble.outbound small {
  color: rgba(255, 255, 255, 0.72);
}

.message-bubble p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.message-actor-audit {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid rgba(102, 120, 135, 0.16);
  border-radius: 999px;
  padding: 4px 7px;
  color: #607281;
  background: rgba(244, 247, 249, 0.92);
  font-size: 10.5px;
  font-weight: 780;
  line-height: 1.1;
}

.message-actor-audit strong {
  min-width: 0;
  overflow: hidden;
  color: #384b57;
  font-size: inherit;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-actor-audit span {
  border-left: 1px solid rgba(102, 120, 135, 0.22);
  padding-left: 5px;
  color: #748390;
  font-size: 10px;
  font-weight: 850;
}

.message-bubble.outbound .message-actor-audit,
.native-test-bubble.outbound .message-actor-audit {
  background: rgba(255, 255, 255, 0.84);
}

.message-composer {
  display: grid;
  grid-template-columns: 118px 180px minmax(240px, 1fr) auto;
  gap: 10px;
  align-items: end;
  border-top: 1px solid var(--line);
  padding: 12px;
  background: #fff;
}

.message-composer .message-field textarea {
  min-height: 50px;
  resize: vertical;
}

.message-composer > .muted {
  grid-column: 1 / -1;
  margin: 0;
}

.message-send-blocker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  background: #fff8e6;
}

.message-send-blocker div {
  display: grid;
  gap: 2px;
}

.message-send-blocker strong {
  color: #7a4b00;
  font-size: 13px;
}

.message-send-blocker span {
  color: #7a4b00;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.team-page .section-body {
  display: grid;
  gap: 14px;
}

.team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
  gap: 16px;
  align-items: start;
}

.team-panel {
  min-width: 0;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.team-form-panel {
  position: sticky;
  top: 92px;
}

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

.team-hero div {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.team-hero span {
  color: var(--navy);
  font-size: 30px;
  line-height: 1;
  font-weight: 1000;
}

.team-hero strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.team-readiness {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-radius: 8px;
  padding: 14px;
  background: rgba(17, 199, 189, 0.07);
}

.team-readiness.needs-work {
  border-color: rgba(240, 180, 41, 0.46);
  background: rgba(240, 180, 41, 0.09);
}

.team-auth-readiness {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-radius: 8px;
  padding: 14px;
  background: rgba(17, 199, 189, 0.07);
}

.team-auth-readiness.needs-work {
  border-color: rgba(240, 180, 41, 0.46);
  background: rgba(240, 180, 41, 0.09);
}

.team-auth-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.team-auth-head h3 {
  margin: 2px 0 3px;
  color: var(--navy);
  font-size: 19px;
}

.team-auth-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.team-auth-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.team-auth-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.team-auth-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.team-auth-grid strong {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.1;
}

.team-auth-pending {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(240, 180, 41, 0.42);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.78);
}

.team-auth-pending strong {
  color: var(--warning-ink);
  font-size: 13px;
}

.team-auth-pending span,
.team-auth-steps {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.team-auth-steps {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.team-readiness-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.team-readiness-head h3 {
  margin: 2px 0 3px;
  color: var(--navy);
  font-size: 19px;
}

.team-readiness-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.team-readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.team-readiness-grid div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.team-readiness-grid svg {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: var(--navy);
}

.team-readiness-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.team-readiness-grid strong {
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
}

.team-rollout-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 12px;
  background: #f4fffd;
}

.team-rollout-next.is-needs-work {
  border-color: rgba(240, 180, 41, 0.42);
  background: #fffaf0;
}

.team-rollout-next.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f2fff6;
}

.team-rollout-next span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.team-rollout-next strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.12;
}

.team-rollout-next p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.team-rollout-next-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.team-rollout-next-action em {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-readiness-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.66);
}

.team-readiness-actions > span {
  margin-right: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.team-readiness-actions .button {
  min-height: 38px;
}

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

.team-readiness-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(216, 224, 232, 0.92);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.team-readiness-item > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--navy);
  background: var(--soft);
}

.team-readiness-item svg {
  width: 18px;
  height: 18px;
}

.team-readiness-item div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.team-readiness-item strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.25;
}

.team-readiness-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.team-rollout {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(216, 224, 232, 0.95);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.team-rollout-head h3 {
  margin: 2px 0 3px;
  color: var(--navy);
  font-size: 19px;
}

.team-rollout-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

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

.team-rollout-grid article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.team-rollout-grid article > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.14);
}

.team-rollout-grid svg {
  width: 18px;
  height: 18px;
}

.team-rollout-grid article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.team-rollout-grid strong {
  color: var(--navy);
  font-size: 14px;
}

.team-rollout-grid small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.team-rollout-grid code {
  overflow: hidden;
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-rollout-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.team-rollout-actions .button {
  min-height: 34px;
  padding: 0 8px;
  font-size: 12px;
}

.team-rollout-message {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border: 1px dashed rgba(17, 199, 189, 0.42);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(17, 199, 189, 0.06);
}

.team-rollout-message div {
  min-width: 0;
}

.team-rollout-message strong {
  color: var(--navy);
  font-size: 14px;
}

.team-rollout-message p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.team-list-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.45fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.team-list-tools .field {
  margin: 0;
}

.team-list-count {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 92px;
  border-radius: 8px;
  padding: 10px;
  color: var(--navy);
  background: #fff;
}

.team-list-count span {
  font-size: 24px;
  line-height: 1;
  font-weight: 1000;
}

.team-list-count strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.team-member-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.team-member-row.is-inactive {
  border-left-color: var(--muted);
  opacity: 0.78;
}

.team-member-row.is-pilot-ready {
  border-left-color: var(--success);
}

.team-member-row.needs-pilot-setup {
  border-left-color: var(--warning);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), #fff 34%);
}

.team-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: #fff;
  background: var(--navy);
  font-weight: 1000;
}

.team-member-main,
.team-member-head,
.team-member-meta {
  min-width: 0;
}

.team-member-head {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.team-member-head strong {
  color: var(--navy);
  font-size: 16px;
}

.team-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 9px;
  color: var(--muted);
  background: var(--soft);
  font-size: 11px;
  font-weight: 1000;
}

.team-badge.is-on {
  color: #08665f;
  border-color: rgba(17, 199, 189, 0.35);
  background: rgba(17, 199, 189, 0.12);
}

.team-badge.is-off {
  color: #6b7280;
  background: #f0f2f5;
}

.team-badge.is-pending {
  color: #805b00;
  border-color: rgba(240, 180, 41, 0.42);
  background: rgba(240, 180, 41, 0.14);
}

.team-member-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.team-member-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.team-member-meta svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.team-pilot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.team-pilot-chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 999px;
  padding: 0 9px;
  color: #765000;
  background: rgba(245, 158, 11, 0.12);
  font-size: 11px;
  font-weight: 950;
}

.team-pilot-chips span.is-ready {
  color: #08665f;
  border-color: rgba(17, 199, 189, 0.36);
  background: rgba(17, 199, 189, 0.12);
}

.team-pilot-chips span.is-muted {
  color: var(--muted);
  border-color: var(--line);
  background: var(--soft);
}

.team-pilot-chips svg {
  width: 13px;
  height: 13px;
}

.team-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.team-member-actions .button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.team-form {
  display: grid;
  gap: 12px;
}

.team-form h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 22px;
}

.team-jobber-field small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.team-jobber-advanced {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--soft);
}

.team-jobber-advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.team-jobber-advanced input {
  margin-top: 9px;
  width: 100%;
}

.checkbox-row {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--navy);
  font-weight: 900;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}

.team-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.team-audit {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.team-audit-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.team-audit-head h3 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 18px;
}

.team-audit-head > span {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 28px;
  border-radius: 999px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.16);
  font-weight: 1000;
}

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

.team-audit-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.team-audit-row > span {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  border-radius: 7px;
  color: var(--navy);
  background: var(--aqua);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.team-audit-row div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.team-audit-row strong {
  color: var(--navy);
  font-size: 13px;
}

.team-audit-row p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.team-audit-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.team-permissions {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.team-role-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(17, 199, 189, 0.35);
  border-radius: 8px;
  padding: 11px;
  background: rgba(17, 199, 189, 0.08);
}

.team-role-note.is-management {
  border-color: rgba(20, 65, 99, 0.18);
  background: rgba(20, 65, 99, 0.06);
}

.team-role-note > svg {
  width: 22px;
  height: 22px;
  color: var(--navy);
  margin-top: 2px;
}

.team-role-note div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.team-role-note strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 1000;
}

.team-role-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.team-permissions-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.team-permissions-head div {
  display: grid;
  gap: 2px;
}

.team-permissions-head strong {
  color: var(--navy);
  font-weight: 1000;
}

.team-permissions-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.team-permissions-head .button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.team-permission-grid {
  display: grid;
  gap: 6px;
  max-height: 430px;
  overflow: auto;
  padding-right: 2px;
}

.team-permission-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 54px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}

.team-permission-row.is-locked {
  color: var(--muted);
  background: #f5f8fa;
}

.team-permission-row.is-locked strong,
.team-permission-row.is-locked small {
  color: var(--muted);
}

.team-permission-row.header {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: #eef6f8;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.team-permission-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.team-permission-row strong {
  color: var(--navy);
  font-size: 13px;
}

.team-permission-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.team-permission-row input {
  justify-self: center;
  width: 20px;
  height: 20px;
  accent-color: var(--teal);
}

.team-notice,
.invite-result {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(17, 199, 189, 0.35);
  border-radius: 8px;
  padding: 12px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.1);
  font-weight: 850;
}

.team-bulk-result {
  display: grid;
  gap: 6px;
}

.team-bulk-result span,
.invite-result span {
  color: var(--muted);
  font-size: 13px;
}

.team-bulk-result-errors {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(198, 55, 55, 0.22);
  border-radius: 8px;
  padding: 8px;
  color: #7f1231;
  background: rgba(198, 55, 55, 0.08);
}

.team-bulk-result-skipped {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(240, 180, 41, 0.24);
  border-radius: 8px;
  padding: 8px;
  color: #7a4a00;
  background: rgba(240, 180, 41, 0.1);
}

.team-bulk-result-skipped span {
  color: #7a4a00;
}

.team-bulk-result-errors span {
  color: #7f1231;
}

.crm-toolbar-actions,
.crm-detail-actions,
.crm-job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.crm-toolbar-actions .button {
  min-width: 96px;
}

.crm-results-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-jobs-next,
.crm-leads-next,
.crm-documents-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(13, 56, 82, 0.14);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 13px;
  background: #fff;
}

.crm-jobs-next.is-needs-work,
.crm-leads-next.is-needs-work,
.crm-documents-next.is-needs-work {
  border-left-color: var(--danger);
  background: rgba(254, 242, 242, 0.92);
}

.crm-jobs-next.is-watch,
.crm-jobs-next.is-build,
.crm-leads-next.is-watch,
.crm-leads-next.is-build,
.crm-documents-next.is-watch,
.crm-documents-next.is-build {
  border-left-color: #f0b429;
  background: rgba(255, 251, 235, 0.9);
}

.crm-jobs-next.is-ready,
.crm-leads-next.is-ready,
.crm-documents-next.is-ready {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.crm-jobs-next span,
.crm-jobs-next em,
.crm-leads-next span,
.crm-leads-next em,
.crm-documents-next span,
.crm-documents-next em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-jobs-next strong,
.crm-leads-next strong,
.crm-documents-next strong {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.crm-jobs-next p,
.crm-leads-next p,
.crm-documents-next p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.crm-jobs-next-action,
.crm-leads-next-action,
.crm-documents-next-action {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  min-width: 170px;
}

.pill-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.crm-job-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.crm-job-history-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.crm-job-history-metrics article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: #fff;
}

.crm-job-history-metrics span {
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
}

.crm-job-history-metrics em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.crm-job-history-metrics strong {
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
}

.crm-job-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--open);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.crm-job-card.is-legacy-jobber {
  border-left-color: #f59e0b;
}

.crm-job-card .pill {
  min-height: 24px;
  padding: 4px 9px;
  color: var(--navy);
  background: var(--soft);
  font-size: 10px;
}

.crm-job-card .pill.is-legacy {
  color: #7c4a03;
  background: rgba(245, 158, 11, 0.16);
}

.crm-job-card .pill.is-money {
  color: #064e3b;
  background: rgba(16, 185, 129, 0.14);
}

.crm-job-card .pill.is-recurring {
  color: #0f3b57;
  background: rgba(17, 199, 189, 0.16);
}

.crm-job-card.is-complete,
.crm-job-card.is-invoiced,
.crm-job-card.is-paid {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.crm-job-card.is-partial {
  border-left-color: #f0b429;
  background: rgba(240, 180, 41, 0.08);
}

.crm-job-card.is-cancelled {
  border-left-color: var(--muted);
  opacity: 0.84;
}

.crm-job-card.client-card {
  border-left-color: var(--teal);
}

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

.crm-client-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.crm-client-row.client-directory-row {
  color: inherit;
  text-decoration: none;
}

.crm-client-row:hover {
  border-color: rgba(17, 199, 189, 0.58);
  box-shadow: 0 10px 24px rgba(5, 24, 44, 0.08);
}

.crm-client-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.client-avatar {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.22);
  font-size: 15px;
  font-weight: 900;
}

.client-avatar.large {
  width: 64px;
  height: 64px;
  color: #fff;
  background: var(--navy);
  font-size: 22px;
}

.client-row-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.client-row-info strong {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.2;
}

.client-row-info span,
.client-row-info em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.client-row-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 360px;
}

.client-row-counts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--soft);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.client-row-counts strong {
  color: var(--navy);
  font-size: 13px;
}

.client-directory-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 310px;
}

.client-directory-summary span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--soft);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.client-directory-summary strong {
  color: var(--navy);
  font-size: 13px;
}

.customers-directory-view .section-body {
  gap: 14px;
}

.crm-client-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.crm-client-metrics article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.crm-client-metrics span {
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
}

.crm-client-metrics em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.crm-client-metrics strong {
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
}

.crm-client-directory-shell {
  display: grid;
  gap: 12px;
}

.crm-client-directory-head {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.crm-client-directory-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.15;
}

.crm-client-directory-head [data-crm-client-result-count] {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.crm-client-directory-filter {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 10px;
  align-items: center;
}

.crm-client-filter-pills {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

[data-crm-client-tag-filter] {
  display: contents;
}

.client-filter-pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 13px;
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.client-filter-pill span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.client-filter-pill select {
  min-width: 0;
  max-width: 172px;
  border: 0;
  outline: 0;
  color: var(--navy);
  background: transparent;
  font: inherit;
}

.client-filter-pill.is-link {
  color: var(--teal-dark);
}

.client-filter-pill-tag select {
  max-width: 190px;
}

.crm-client-directory-search {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
}

.crm-client-directory-search svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.crm-client-directory-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--navy);
  font-weight: 800;
}

.crm-client-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.crm-client-table-head,
.crm-client-table-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.9fr) minmax(240px, 1.2fr) minmax(170px, 0.8fr) minmax(104px, 0.36fr) minmax(110px, 0.38fr);
  gap: 14px;
  align-items: center;
}

.crm-client-table-head {
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.crm-client-table-row {
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
  color: inherit;
  text-decoration: none;
}

.crm-client-table-row:last-child {
  border-bottom: 0;
}

.crm-client-table-row:hover {
  background: #fbfefe;
}

.crm-client-table-name {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.crm-client-table-name strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.2;
}

.crm-client-table-name small,
.crm-client-table-address,
.crm-client-table-activity {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.crm-client-table-tags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-client-table-tags span {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--navy);
  background: var(--soft);
  font-size: 11px;
  font-weight: 850;
}

.crm-client-table-tags em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.crm-client-table-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 9px;
  color: #0c5b52;
  background: rgba(17, 199, 189, 0.1);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.crm-client-table-status i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.crm-client-table-status.is-active {
  color: #0b6b45;
  background: rgba(15, 143, 82, 0.12);
}

.crm-client-table-status.is-lead {
  color: #28609d;
  background: rgba(59, 130, 246, 0.11);
}

.crm-client-table-status.is-needs-info {
  color: #8a5f00;
  background: rgba(240, 180, 41, 0.16);
}

.crm-client-table-activity {
  justify-self: start;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

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

.client-row-actions .button {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 12px;
}

.crm-client-page {
  display: grid;
  gap: 16px;
}

.crm-client-create-page {
  width: min(100%, 980px);
  margin: 0 auto;
  gap: 14px;
  overflow: visible;
  background: transparent;
}

.crm-client-create-header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 2px;
}

.crm-client-create-header .icon-button {
  width: 42px;
  height: 42px;
}

.crm-client-create-header .icon-button.secondary-icon-button {
  color: var(--navy);
  border: 1px solid var(--line);
  background: #fff;
}

.crm-client-create-heading {
  min-width: 0;
}

.crm-client-create-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
}

.crm-client-create-submit {
  width: min(100%, 320px);
  min-height: 52px;
  justify-content: center;
  font-size: 15px;
}

.crm-client-create-message {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(17, 199, 189, 0.24);
  border-radius: 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.08);
  font-size: 13px;
  font-weight: 850;
}

.crm-client-create-message:empty {
  display: none;
}

.crm-customer-duplicate-alert {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e4bd67;
  border-left: 4px solid #c88400;
  border-radius: 8px;
  background: #fff9e9;
  color: var(--navy);
}

.crm-customer-duplicate-alert[hidden] {
  display: none;
}

.crm-customer-duplicate-alert.is-overridden {
  border-color: rgba(17, 199, 189, 0.45);
  border-left-color: var(--teal);
  background: rgba(17, 199, 189, 0.07);
}

.crm-customer-duplicate-alert-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.crm-customer-duplicate-alert-head > div,
.crm-customer-duplicate-match > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.crm-customer-duplicate-alert-head span,
.crm-customer-duplicate-match span,
.crm-customer-duplicate-match small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.crm-customer-duplicate-alert-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #7a5200;
  background: #ffe7ad;
}

.crm-customer-duplicate-alert-icon svg {
  width: 18px;
  height: 18px;
}

.crm-customer-duplicate-match-list {
  display: grid;
  gap: 7px;
}

.crm-customer-duplicate-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid rgba(20, 58, 86, 0.14);
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.crm-customer-duplicate-match:hover,
.crm-customer-duplicate-match:focus-visible {
  border-color: rgba(17, 199, 189, 0.7);
  box-shadow: 0 5px 16px rgba(20, 58, 86, 0.1);
  transform: translateY(-1px);
  outline: none;
}

.crm-customer-duplicate-open {
  display: inline-flex;
  gap: 6px;
  pointer-events: none;
}

.crm-customer-duplicate-open svg {
  width: 15px;
  height: 15px;
}

.crm-customer-duplicate-match small {
  color: #805800;
  font-weight: 800;
}

.crm-customer-keep-separate {
  width: max-content;
  min-height: 36px;
  padding-inline: 4px;
  color: var(--navy);
}

.crm-customer-separate-confirmed {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: #087c75;
  font-size: 12px;
  font-weight: 900;
}

.crm-customer-separate-confirmed svg {
  width: 15px;
  height: 15px;
}

.crm-duplicate-review-page > .section-heading > div {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: center;
}

.crm-duplicate-review-page > .section-body {
  display: grid;
  gap: 14px;
}

.crm-duplicate-review-status {
  min-height: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.crm-duplicate-review-status:empty {
  display: none;
}

.crm-duplicate-review-list {
  display: grid;
  gap: 12px;
}

.crm-duplicate-pair {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.crm-duplicate-pair > header {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.crm-duplicate-pair > header > div {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
}

.crm-duplicate-pair > header strong,
.crm-duplicate-customer-head strong,
.crm-duplicate-customer-contact span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-duplicate-confidence {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 7px;
  color: #7a5200;
  background: #fff0c7;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.crm-duplicate-confidence.is-exact {
  color: #8a1735;
  background: #ffe7ee;
}

.crm-duplicate-confidence.is-likely {
  color: #7a5200;
  background: #fff0c7;
}

.crm-duplicate-confidence.is-possible {
  color: #075f52;
  background: #dcf8f3;
}

.crm-duplicate-pair-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: stretch;
}

.crm-duplicate-customer {
  display: grid;
  min-width: 0;
  gap: 12px;
  align-content: start;
  padding: 16px;
}

.crm-duplicate-customer-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
}

.crm-duplicate-customer-head > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.crm-duplicate-customer-head > div > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-duplicate-customer-contact {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.crm-duplicate-customer-contact span {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  color: var(--muted);
  font-size: 13px;
}

.crm-duplicate-customer-contact svg {
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.crm-duplicate-customer-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-duplicate-customer-counts span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--muted);
  background: #fff;
  font-size: 10px;
  font-weight: 800;
}

.crm-duplicate-customer-counts strong {
  color: var(--navy);
}

.crm-duplicate-keep {
  align-self: end;
  width: 100%;
  min-height: 42px;
  margin-top: auto;
  justify-content: center;
}

.crm-duplicate-divider {
  display: grid;
  position: relative;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.crm-duplicate-divider::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  background: var(--line);
  content: "";
}

.crm-duplicate-divider span {
  z-index: 1;
  padding-block: 6px;
  background: #fff;
}

.crm-duplicate-merge-hint {
  margin: 0;
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.crm-duplicate-review-clear {
  display: grid;
  min-height: 180px;
  gap: 10px;
  place-items: center;
  align-content: center;
  color: #087c75;
  background: #f5fffd;
}

.crm-duplicate-review-clear svg {
  width: 34px;
  height: 34px;
}

.crm-duplicate-merge-history {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.crm-duplicate-merge-history > summary {
  display: flex;
  min-height: 48px;
  gap: 8px;
  align-items: center;
  padding: 0 14px;
  color: var(--navy);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.crm-duplicate-merge-history > summary::-webkit-details-marker {
  display: none;
}

.crm-duplicate-merge-history > summary span {
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted);
  background: #edf2f7;
  font-size: 10px;
}

.crm-duplicate-merge-history > div {
  border-top: 1px solid var(--line);
}

.crm-duplicate-merge-history article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 38px auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.crm-duplicate-merge-history article:last-child {
  border-bottom: 0;
}

.crm-duplicate-merge-history article > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.crm-duplicate-merge-history article strong,
.crm-duplicate-merge-history article span {
  overflow-wrap: anywhere;
}

.crm-duplicate-merge-history article > div span {
  color: var(--muted);
  font-size: 11px;
}

.crm-client-create-form {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 14px;
  align-items: start;
}

.crm-client-create-secondary {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.crm-client-create-block {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(20, 58, 86, 0.04);
}

.crm-client-create-block-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin-bottom: 16px;
}

.crm-client-create-block-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
}

.crm-add-property-footer {
  width: 100%;
  min-height: 42px;
  justify-content: center;
  margin-top: 10px;
  border-style: dashed;
  background: #f8fbfd;
}

.crm-client-create-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 7px;
  color: var(--navy);
  background: var(--mint);
}

.crm-client-create-property .crm-client-create-icon {
  color: #245f91;
  background: #e7f3ff;
}

.crm-client-create-icon svg {
  width: 17px;
  height: 17px;
}

.crm-client-create-optional {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.crm-client-company-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.crm-client-company-field > span em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.04em;
}

.crm-client-create-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.crm-client-contact-wide,
.crm-client-phone-field {
  grid-column: 1 / -1;
}

.crm-phone-segments {
  display: grid;
  grid-template-columns: 34px minmax(52px, 0.85fr) 8px minmax(52px, 0.85fr) 8px minmax(68px, 1.15fr);
  gap: 6px;
  align-items: center;
}

.crm-phone-country {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--navy);
  background: #f6fafc;
  font-size: 13px;
  font-weight: 900;
}

.crm-phone-segments input:not([type="hidden"]) {
  min-width: 0;
  padding-inline: 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.crm-phone-separator {
  color: var(--muted);
  text-align: center;
  font-weight: 900;
}

.crm-client-create-address-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 112px;
  gap: 12px;
}

.crm-client-create-address-grid > .address-lookup-field {
  grid-column: 1 / -1;
}

.crm-client-create-page [data-address-status]:empty {
  display: none;
}

.crm-client-create-page .field input,
.crm-client-create-page .field select {
  min-height: 44px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.crm-client-create-page .field input:hover,
.crm-client-create-page .field select:hover {
  border-color: rgba(24, 189, 181, 0.42);
}

.crm-client-create-more {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(20, 58, 86, 0.04);
}

.crm-client-create-more summary {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  color: var(--navy);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  list-style: none;
}

.crm-client-create-more summary::-webkit-details-marker {
  display: none;
}

.crm-client-create-more summary svg {
  width: 18px;
  height: 18px;
  transition: transform 160ms ease;
}

.crm-client-create-more[open] summary svg {
  transform: rotate(180deg);
}

.crm-client-create-more-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 0 16px 16px;
}

.crm-client-create-more-grid textarea {
  min-height: 92px;
}

.crm-client-create-footer {
  display: flex;
  justify-content: center;
  padding: 2px 0 0;
}

.crm-client-create-footer .crm-client-create-submit {
  min-height: 52px;
  font-size: 15px;
}

.crm-tag-control {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
}

.crm-tag-picker-field select {
  width: 100%;
}

.crm-tag-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-tag-selected:empty {
  display: none;
}

.crm-tag-chip {
  display: inline-flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(23, 59, 90, 0.15);
  border-radius: 999px;
  padding: 5px 8px 5px 10px;
  color: var(--navy);
  background: #f2fbfa;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.crm-tag-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-tag-chip svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.crm-tag-chip:hover,
.crm-tag-chip:focus-visible {
  border-color: var(--teal);
  background: var(--mint);
}

.crm-tag-new-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 38px;
  gap: 7px;
  align-items: center;
}

.crm-tag-new-row[hidden] {
  display: none;
}

.crm-tag-new-row .button,
.crm-tag-new-row .icon-button {
  min-height: 38px;
}

.crm-tag-new-row .icon-button {
  width: 38px;
  height: 38px;
}

.crm-tag-message {
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}

.crm-tag-message:empty {
  display: none;
}

.client-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  border: 1px solid rgba(17, 199, 189, 0.34);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
}

.client-profile-title {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.client-profile-title > div {
  min-width: 0;
}

.client-profile-title .eyebrow {
  color: var(--muted);
}

.client-profile-title h2 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 30px;
  line-height: 1.05;
}

.client-profile-title p:last-child {
  margin: 0;
  color: var(--muted);
  max-width: 760px;
  overflow-wrap: break-word;
}

.client-profile-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

.client-profile-actions .button,
.client-profile-actions .pill {
  min-height: 42px;
}

.client-pillar-handoff {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(23, 59, 90, 0.13);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 13px;
  background: #fff;
}

.client-pillar-handoff.is-needs-work {
  border-left-color: var(--danger);
  background: rgba(255, 241, 242, 0.84);
}

.client-pillar-handoff.is-watch {
  border-left-color: #f59e0b;
  background: rgba(255, 251, 235, 0.86);
}

.client-pillar-handoff.is-ready {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.client-pillar-handoff-main {
  min-width: 0;
}

.client-pillar-handoff-main span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-pillar-handoff-main strong {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.client-pillar-handoff-main p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.client-pillar-handoff-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.client-pillar-lane {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 8px;
  padding: 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.client-pillar-lane:hover {
  border-color: rgba(17, 199, 189, 0.5);
  background: #fff;
}

.client-pillar-lane.is-needs-work {
  border-color: rgba(229, 75, 75, 0.22);
  background: rgba(255, 241, 242, 0.62);
}

.client-pillar-lane.is-watch {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 251, 235, 0.66);
}

.client-pillar-lane.is-ready {
  border-color: rgba(17, 199, 189, 0.22);
  background: rgba(17, 199, 189, 0.07);
}

.client-pillar-lane span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-pillar-lane strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-pillar-lane em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-pillar-handoff-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 132px;
}

.client-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.client-stat {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.client-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.client-stat strong {
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
}

.client-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px;
  align-items: start;
}

.client-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.34fr);
  gap: 16px;
  align-items: start;
}

.client-profile-main-column,
.client-profile-rail {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.client-profile-rail {
  position: sticky;
  top: 82px;
}

.client-profile-rail .section-body {
  display: grid;
  gap: 12px;
}

.client-quick-actions-panel {
  border-color: rgba(17, 199, 189, 0.28);
}

.client-quick-actions-panel .client-action-grid .button {
  justify-content: start;
}

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

.client-linked-section {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.client-linked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.client-linked-head strong {
  color: var(--navy);
  font-size: 14px;
}

.client-linked-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 999px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 11px;
  font-weight: 900;
}

.client-linked-list,
.client-message-history-list {
  display: grid;
  gap: 8px;
}

.client-linked-list > .muted,
.client-message-history-list > .muted {
  margin: 0;
  padding: 10px 2px;
}

.client-linked-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  color: inherit;
  background: var(--soft);
  text-decoration: none;
}

.client-linked-row:hover {
  border-color: rgba(17, 199, 189, 0.45);
  background: #fff;
}

.client-linked-row strong,
.client-linked-row em {
  display: block;
}

.client-linked-row strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.client-linked-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.25;
}

.client-message-history-row {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--soft);
}

.client-message-history-row.inbound {
  border-left-color: var(--open);
  background: #fff;
}

.client-message-history-row strong,
.client-message-history-row span {
  display: block;
}

.client-message-history-row strong {
  color: var(--navy);
  font-size: 13px;
}

.client-message-history-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.client-message-history-row p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.client-contact-panel textarea {
  min-height: 78px;
}

.client-key-values {
  display: grid;
  gap: 8px;
}

.client-key-values div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--soft);
}

.client-key-values span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.client-key-values strong {
  color: var(--navy);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.client-activity-section {
  grid-column: 1 / -1;
}

.subsection-label {
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-property-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.crm-property-editor-list {
  display: grid;
  gap: 10px;
}

.crm-property-editor {
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.crm-property-editor > summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 9px 11px;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.crm-property-editor > summary::-webkit-details-marker {
  display: none;
}

.crm-property-editor > summary strong {
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.crm-property-editor > summary > svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
  transition: transform 160ms ease;
}

.crm-property-editor[open] > summary > svg {
  transform: rotate(180deg);
}

.crm-property-number {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  color: var(--navy);
  background: var(--mint);
  font-size: 12px;
  font-weight: 950;
}

.crm-property-editor-body {
  display: grid;
  gap: 11px;
  border-top: 1px solid var(--line);
  padding: 12px;
  background: var(--paper);
}

.crm-property-address-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 92px;
  gap: 9px;
}

.crm-property-address-grid > .address-lookup-field {
  grid-column: 1 / -1;
}

.client-properties-panel .crm-property-address-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-properties-panel .crm-property-address-grid > .field:nth-child(2) {
  grid-column: 1 / -1;
}

.crm-property-editor .field {
  min-width: 0;
}

.crm-property-editor .field input,
.crm-property-editor .field textarea {
  min-width: 0;
  background: #fff;
}

.crm-property-notes {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.crm-property-notes > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17px;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--navy);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  list-style: none;
}

.crm-property-notes > summary::-webkit-details-marker {
  display: none;
}

.crm-property-notes-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.crm-property-notes-label svg,
.crm-property-notes > summary > svg {
  width: 16px;
  height: 16px;
}

.crm-property-notes > summary > svg {
  color: var(--muted);
  transition: transform 160ms ease;
}

.crm-property-notes[open] > summary > svg {
  transform: rotate(180deg);
}

.crm-property-notes-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.crm-property-notes-body {
  padding: 0 10px 10px;
}

.crm-property-notes-body textarea {
  width: 100%;
  min-height: 72px;
  background: #fff;
}

.crm-property-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.crm-property-editor-actions .icon-button {
  width: 36px;
  height: 36px;
  color: var(--danger);
}

.crm-client-create-property .crm-property-editor {
  background: var(--soft);
}

.client-property-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.client-property-card strong {
  color: var(--navy);
  overflow-wrap: anywhere;
}

.client-property-card span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.client-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

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

.client-activity-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: inherit;
  background: #fff;
  text-decoration: none;
}

.client-activity-row:hover {
  border-color: rgba(17, 199, 189, 0.58);
  background: rgba(17, 199, 189, 0.07);
}

.client-activity-row > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.client-activity-row div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.client-activity-row strong {
  color: var(--navy);
  overflow-wrap: anywhere;
}

.client-activity-row em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.client-activity-row small {
  justify-self: end;
  border-radius: 999px;
  padding: 5px 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.quote-client-picker {
  display: grid;
  gap: 10px;
  align-items: stretch;
}

.quote-client-search-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1fr) minmax(190px, 0.9fr) auto;
  gap: 10px;
  align-items: end;
}

.quote-native-select {
  display: grid;
}

.quote-client-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 7px;
  max-height: 230px;
  overflow: auto;
}

.quote-client-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  color: var(--ink);
  background: var(--soft);
  text-align: left;
  cursor: pointer;
}

.quote-client-option:hover,
.quote-client-option:focus-visible,
.quote-client-option.is-selected {
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(17, 199, 189, 0.14);
}

.quote-client-option-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quote-client-option-main strong {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.quote-client-option-main em,
.quote-client-option-main small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.quote-client-option-tag {
  border-radius: 999px;
  padding: 5px 8px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.quote-client-no-results {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: var(--soft);
}

.quote-client-no-results strong {
  color: var(--navy);
}

.quote-client-actions {
  display: flex;
  align-items: end;
}

.quote-client-empty {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.quote-client-summary {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-radius: 8px;
  padding: 12px;
  background: rgba(17, 199, 189, 0.08);
}

.quote-client-summary strong {
  color: var(--navy);
  font-size: 16px;
}

.quote-client-summary span,
.quote-client-summary em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pricing-client-search {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(210px, 0.9fr) auto;
  gap: 12px;
  align-items: end;
}

.pricing-client-results {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.pricing-client-result {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: var(--soft);
  text-align: left;
  cursor: pointer;
}

.pricing-client-result:hover,
.pricing-client-result:focus-visible {
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(17, 199, 189, 0.15);
}

.pricing-client-result-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pricing-client-result-main strong {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.15;
}

.pricing-client-result-main em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.pricing-client-result small {
  border-radius: 999px;
  padding: 5px 7px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-client-no-results {
  display: grid;
  gap: 4px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: var(--soft);
}

.pricing-client-no-results strong {
  color: var(--navy);
}

.pricing-draft-banner {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  border: 1px solid rgba(17, 199, 189, 0.38);
  border-radius: 8px;
  padding: 12px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.12);
}

.pricing-draft-banner strong {
  color: var(--navy);
  font-size: 14px;
}

.pricing-draft-banner span {
  color: #06343d;
  font-size: 13px;
  line-height: 1.35;
}

.quote-renewal-source-banner.is-complete {
  border-color: rgba(5, 112, 87, 0.32);
  background: rgba(5, 112, 87, 0.08);
}

.quote-renewal-source-banner.is-warning {
  border-color: rgba(190, 113, 14, 0.34);
  background: rgba(190, 113, 14, 0.1);
}

.quote-workflow-form {
  display: grid;
  gap: 14px;
}

.quote-workflow-header .section-heading h2 {
  overflow-wrap: anywhere;
}

.quote-header-actions {
  gap: 8px;
}

.quote-header-actions .button {
  min-width: 0;
}

.quote-more-actions {
  position: relative;
  z-index: 30;
}

.quote-more-actions summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(20, 58, 86, 0.16);
  border-radius: 7px;
  padding: 0 14px;
  color: var(--navy);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

.quote-more-actions summary::-webkit-details-marker {
  display: none;
}

.quote-more-actions[open] summary {
  border-color: rgba(17, 199, 189, 0.44);
  background: rgba(17, 199, 189, 0.08);
}

.quote-more-actions > div {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 8px;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(5, 24, 44, 0.16);
}

.quote-workflow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
}

.quote-workflow-main,
.quote-workflow-rail {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.quote-workflow-rail {
  position: sticky;
  top: 86px;
}

.quote-step-card {
  overflow: hidden;
}

.quote-step-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 52px;
}

.quote-step-heading div {
  display: grid;
  gap: 2px;
}

.quote-step-heading h2 {
  margin: 0;
  font-size: 17px;
}

.quote-step-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.quote-step-number {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.22);
  font-size: 14px;
  font-weight: 950;
}

.quote-setup-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(180px, 0.8fr) repeat(2, minmax(150px, 0.6fr));
  gap: 12px;
}

.quote-notes-workflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
  gap: 12px;
  align-items: start;
}

.quote-notes-workflow textarea {
  min-height: 150px;
}

.quote-selected-client {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 14px;
  background: rgba(17, 199, 189, 0.08);
}

.quote-selected-client div:not(.client-avatar) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quote-selected-client span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-selected-client strong {
  color: var(--navy);
  font-size: 20px;
  overflow-wrap: anywhere;
}

.quote-selected-client em,
.quote-selected-client p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.quote-side-panel {
  box-shadow: 0 16px 34px rgba(5, 24, 44, 0.08);
}

.quote-side-total {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  padding: 16px;
  color: #fff;
  background: var(--navy);
}

.quote-side-total span,
.quote-side-metrics span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-side-total strong {
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.quote-side-metrics {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
}

.quote-side-metrics div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--soft);
}

.quote-side-metrics span {
  color: var(--muted);
}

.quote-side-metrics strong {
  color: var(--navy);
}

.quote-review-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(17, 199, 189, 0.12), #fff 72%);
  box-shadow: 0 14px 34px rgba(17, 199, 189, 0.1);
}

.quote-review-panel.is-approved {
  border-color: rgba(22, 163, 74, 0.34);
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.1), #fff 72%);
}

.quote-review-panel.is-pending {
  border-color: rgba(245, 158, 11, 0.36);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), #fff 72%);
}

.quote-review-panel.is-draft {
  border-color: rgba(23, 59, 90, 0.14);
  background: var(--soft);
}

.quote-review-head {
  display: grid;
  gap: 3px;
}

.quote-review-head span,
.quote-review-total span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-review-head strong {
  color: var(--navy);
  font-size: 20px;
  line-height: 1.12;
}

.quote-review-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.quote-review-total strong {
  color: var(--navy);
  font-size: 19px;
  line-height: 1;
}

.quote-review-blockers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quote-review-blockers span {
  border: 1px solid rgba(239, 68, 68, 0.22);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(239, 68, 68, 0.07);
  color: #991b1b;
  font-size: 11px;
  font-weight: 900;
}

.quote-review-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quote-review-actions .button,
.quote-review-panel > .button {
  width: 100%;
}

.quote-review-actions .button.primary {
  grid-column: 1 / -1;
}

.quote-review-panel em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.quote-flow-panel {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.quote-settings-panel {
  margin-top: 10px;
}

.quote-flow-next {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
}

.quote-flow-head {
  display: grid;
  gap: 3px;
}

.quote-flow-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-flow-head strong {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.2;
}

.quote-flow-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.quote-flow-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quote-flow-list li,
.quote-flow-list a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.quote-flow-list li > span,
.quote-flow-list a > span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
}

.quote-flow-list li > span::before,
.quote-flow-list a > span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}

.quote-flow-list div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quote-flow-list strong {
  color: var(--navy);
  font-size: 13px;
}

.quote-flow-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-flow-list li.is-done > span,
.quote-flow-list li.is-done a > span {
  border-color: rgba(17, 199, 189, 0.42);
  color: #06343d;
  background: rgba(17, 199, 189, 0.2);
}

.quote-flow-list li.is-done > span::before,
.quote-flow-list li.is-done a > span::before {
  width: 10px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg);
}

.quote-flow-list li.is-active > span,
.quote-flow-list li.is-active a > span {
  border-color: rgba(23, 59, 90, 0.38);
  box-shadow: inset 0 0 0 5px rgba(17, 199, 189, 0.22);
  background: #fff;
}

.quote-flow-list li.is-active > span::before,
.quote-flow-list li.is-active a > span::before {
  color: var(--navy);
  opacity: 1;
}

.quote-workflow-actions {
  display: grid;
  gap: 8px;
}

.quote-workflow-actions .button {
  width: 100%;
}

.lead-intake-handoff {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.lead-intake-handoff.is-needs-work {
  border-left-color: var(--danger);
  background: rgba(255, 241, 242, 0.78);
}

.lead-intake-handoff.is-watch {
  border-left-color: #f59e0b;
  background: rgba(255, 251, 235, 0.84);
}

.lead-intake-handoff.is-ready {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.lead-intake-handoff-head {
  display: grid;
  gap: 3px;
}

.lead-intake-handoff-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead-intake-handoff-head strong {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.15;
}

.lead-intake-handoff-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.35;
}

.lead-intake-handoff-steps {
  display: grid;
  gap: 7px;
}

.lead-intake-handoff-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 0.75fr) minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.lead-intake-handoff-step.is-done {
  border-color: rgba(17, 199, 189, 0.24);
  background: rgba(17, 199, 189, 0.08);
}

.lead-intake-handoff-step svg {
  width: 17px;
  height: 17px;
  color: #f59e0b;
}

.lead-intake-handoff-step.is-done svg {
  color: var(--success);
}

.lead-intake-handoff-step span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}

.lead-intake-handoff-step small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-intake-handoff-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-intake-handoff-action .button {
  flex: 1 1 150px;
}

.quote-sales-handoff {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.quote-sales-handoff summary {
  cursor: pointer;
  list-style: none;
}

.quote-sales-handoff summary::-webkit-details-marker {
  display: none;
}

.quote-sales-handoff summary::after {
  content: "+";
  justify-self: end;
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
}

.quote-sales-handoff[open] summary::after {
  content: "-";
}

.quote-sales-handoff.is-needs-work {
  border-left-color: var(--danger);
  background: rgba(255, 241, 242, 0.78);
}

.quote-sales-handoff.is-watch {
  border-left-color: #f59e0b;
  background: rgba(255, 251, 235, 0.84);
}

.quote-sales-handoff.is-ready {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.quote-sales-handoff-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px;
}

.quote-sales-handoff-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-sales-handoff-head strong {
  grid-column: 1;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.15;
}

.quote-sales-handoff-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.35;
}

.quote-sales-handoff p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.quote-sales-handoff-steps {
  display: grid;
  gap: 7px;
}

.quote-sales-handoff-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 0.75fr) minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.quote-sales-handoff-step.is-done {
  border-color: rgba(17, 199, 189, 0.24);
  background: rgba(17, 199, 189, 0.08);
}

.quote-sales-handoff-step svg {
  width: 17px;
  height: 17px;
  color: #f59e0b;
}

.quote-sales-handoff-step.is-done svg {
  color: var(--success);
}

.quote-sales-handoff-step span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}

.quote-sales-handoff-step small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-sales-handoff-action {
  display: grid;
  gap: 8px;
}

.quote-sales-handoff-action .button {
  width: 100%;
}

.quote-public-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

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

.invoice-payment-return {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-radius: 8px;
  padding: 13px 15px;
  color: var(--ink);
  background: #effdfb;
  box-shadow: 0 10px 24px rgba(5, 24, 44, 0.07);
}

.invoice-payment-return.is-paid {
  border-color: rgba(21, 128, 61, 0.26);
  background: #f0fdf4;
}

.invoice-payment-return.is-cancelled {
  border-color: rgba(245, 158, 11, 0.28);
  background: #fff8eb;
}

.invoice-payment-return svg {
  width: 28px;
  height: 28px;
  color: var(--teal);
}

.invoice-payment-return.is-paid svg {
  color: var(--success);
}

.invoice-payment-return.is-cancelled svg {
  color: var(--warning);
}

.invoice-payment-return div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.invoice-payment-return strong {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.2;
}

.invoice-payment-return span {
  color: var(--slate);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.quote-public-card {
  display: grid;
  gap: 22px;
  min-width: 0;
  width: 100%;
  min-height: 1180px;
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-radius: 8px;
  padding: 46px 58px;
  background:
    linear-gradient(180deg, rgba(244, 248, 251, 0.72), rgba(255, 255, 255, 0) 180px),
    #fff;
  box-shadow: 0 18px 50px rgba(5, 24, 44, 0.16);
}

.quote-public-card > *,
.quote-public-header > *,
.quote-document-top > *,
.quote-public-section > *,
.invoice-public-pay-panel > *,
.quote-public-footer > * {
  min-width: 0;
  max-width: 100%;
}

.quote-public-header {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.quote-public-header img {
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.quote-public-header h2 {
  margin: 0 0 3px;
  color: #000;
  font-size: 26px;
  line-height: 1.1;
}

.quote-public-header p,
.quote-recipient p,
.quote-recipient em,
.quote-public-footer span {
  margin: 0;
  color: #111;
  font-style: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.quote-document-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 42px;
  align-items: start;
}

.quote-recipient {
  display: grid;
  gap: 8px;
  max-width: 320px;
}

.quote-recipient span {
  color: #111;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-recipient strong {
  color: #000;
  font-size: 23px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.quote-number-panel {
  display: grid;
  justify-self: stretch;
  border-collapse: collapse;
}

.quote-number-panel h3 {
  margin: 0;
  padding: 14px 20px;
  color: #fff;
  background: var(--navy);
  font-size: 28px;
  line-height: 1;
}

.quote-number-panel > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 9px 20px;
  background: #f6f6f6;
}

.quote-number-panel span,
.quote-number-panel strong {
  color: #000;
  font-size: 16px;
  font-weight: 500;
}

.quote-number-panel .quote-number-total {
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--teal-dark));
}

.quote-number-panel .quote-number-total span,
.quote-number-panel .quote-number-total strong {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.quote-public-section,
.quote-public-notes {
  display: grid;
  gap: 10px;
}

.quote-product-table {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(23, 59, 90, 0.14);
  border-radius: 8px;
  background: #fff;
}

.quote-product-head,
.quote-product-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.05fr) minmax(0, 1.9fr) 66px 116px 104px;
  gap: 12px;
  align-items: center;
  padding: 12px 10px;
}

.quote-product-head {
  color: #fff;
  background: var(--navy);
  font-size: 15px;
  font-weight: 800;
}

.quote-product-row {
  align-items: start;
  min-height: 72px;
  border-bottom: 1px solid rgba(23, 59, 90, 0.1);
  color: #000;
  font-size: 18px;
}

.quote-product-row:last-child {
  border-bottom: 0;
}

.quote-product-row strong {
  color: #000;
  font-size: 18px;
  font-weight: 500;
}

.quote-product-row span {
  color: #000;
  line-height: 1.2;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.quote-product-row em {
  color: #000;
  font-style: normal;
  text-align: right;
  white-space: nowrap;
}

.quote-total-box {
  justify-self: end;
  display: grid;
  width: min(100%, 460px);
  margin-top: -4px;
  overflow: hidden;
  border: 1px solid rgba(23, 59, 90, 0.16);
  border-radius: 8px;
  background: #fff;
}

.quote-total-box > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  min-height: 43px;
}

.quote-total-box span {
  justify-self: end;
  padding-right: 26px;
  color: #000;
  font-size: 18px;
  font-weight: 800;
}

.quote-total-box strong {
  align-self: stretch;
  display: grid;
  place-items: center end;
  border-left: 1px solid rgba(23, 59, 90, 0.12);
  padding: 0 10px;
  color: #000;
  font-size: 18px;
}

.quote-total-box > div:last-child strong {
  color: var(--navy);
  font-size: 20px;
  font-weight: 900;
}

.quote-public-notes {
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  padding: 12px;
  background: #fafafa;
}

.quote-public-notes h3,
.quote-terms h3 {
  margin: 0;
  color: #000;
  font-size: 16px;
  font-weight: 500;
}

.quote-public-notes p,
.quote-terms p {
  margin: 0;
  color: #000;
  line-height: 1.18;
  white-space: pre-line;
}

.quote-terms {
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-radius: 8px;
  background: rgba(244, 248, 251, 0.72);
  color: #000;
}

.quote-terms summary {
  cursor: pointer;
  padding: 14px 16px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 950;
  list-style: none;
}

.quote-terms summary::-webkit-details-marker {
  display: none;
}

.quote-terms summary::after {
  content: "+";
  float: right;
  color: var(--teal-dark);
  font-size: 18px;
  line-height: 1;
}

.quote-terms[open] summary::after {
  content: "-";
}

.quote-terms-body {
  display: grid;
  gap: 16px;
  border-top: 1px solid rgba(23, 59, 90, 0.1);
  padding: 16px;
  font-size: 16px;
}

.quote-public-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid #d8d8d8;
  padding-top: 18px;
}

.quote-public-footer div {
  display: grid;
  gap: 4px;
}

.quote-public-footer strong {
  color: var(--navy);
  font-size: 18px;
}

.quote-approval-panel {
  border: 2px solid rgba(17, 199, 189, 0.5);
  border-radius: 8px;
  padding: 18px;
  background: rgba(17, 199, 189, 0.1);
}

.invoice-public-pay-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
}

.invoice-public-pay-main {
  display: grid;
  gap: 4px;
}

.invoice-public-pay-main span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoice-public-pay-main strong {
  color: var(--navy);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 0.95;
}

.invoice-public-pay-main em {
  color: var(--slate);
  font-size: 14px;
  font-style: normal;
  font-weight: 850;
}

.invoice-public-pay-button {
  min-width: 220px;
  min-height: 54px;
  font-size: 16px;
}

.invoice-public-payment-options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.invoice-public-payment-options button,
.invoice-public-payment-options a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  border: 1px solid rgba(23, 59, 90, 0.16);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
  color: var(--navy);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.invoice-public-payment-options button:hover,
.invoice-public-payment-options button:focus-visible,
.invoice-public-payment-options a:hover,
.invoice-public-payment-options a:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(17, 199, 189, 0.12);
}

.invoice-public-payment-options > * > svg:first-child {
  width: 24px;
  height: 24px;
  color: var(--teal-dark);
}

.invoice-public-payment-options > * > svg:last-child {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.invoice-public-payment-options span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.invoice-public-payment-options strong {
  color: var(--navy);
  font-size: 15px;
}

.invoice-public-payment-options small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.invoice-zelle-pending,
.invoice-zelle-rejected {
  grid-column: 1 / -1;
}

.invoice-zelle-rejected {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(190, 24, 93, 0.2);
  border-radius: 8px;
  padding: 11px 12px;
  background: rgba(255, 241, 242, 0.92);
  color: #9f1239;
}

.invoice-zelle-rejected svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.invoice-zelle-rejected span {
  display: grid;
  gap: 2px;
}

.invoice-zelle-rejected small {
  font-size: 12px;
  font-weight: 750;
}

.invoice-zelle-copy {
  width: 100%;
}

.invoice-public-other-methods {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.invoice-public-other-methods section {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-radius: 8px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.82);
}

.invoice-public-other-methods span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoice-public-other-methods strong {
  color: var(--navy);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.invoice-public-other-methods em {
  color: var(--slate);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

@media (max-width: 620px) {
  .invoice-public-payment-options,
  .invoice-public-other-methods {
    grid-template-columns: minmax(0, 1fr);
  }

  .invoice-public-payment-options button,
  .invoice-public-payment-options a {
    min-height: 62px;
  }

  .quote-zelle-instructions > div {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
  }

  .quote-zelle-instructions strong {
    font-size: 14px;
  }

  .quote-zelle-dialog-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

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

  .invoice-offline-methods > div {
    flex-basis: 100%;
  }
}

.invoice-public-receipt {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(21, 128, 61, 0.2);
  border-radius: 8px;
  padding: 18px;
  background: #f0fdf4;
}

.invoice-public-receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invoice-public-receipt-head div {
  display: grid;
  gap: 2px;
}

.invoice-public-receipt-head span,
.invoice-public-receipt-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoice-public-receipt-head strong {
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
}

.invoice-public-receipt-head em {
  border-radius: 999px;
  padding: 7px 12px;
  color: #fff;
  background: var(--success);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.invoice-public-receipt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.invoice-public-receipt-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(21, 128, 61, 0.14);
  border-radius: 8px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.86);
}

.invoice-public-receipt-grid strong {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.1;
}

.invoice-public-receipt .button {
  justify-self: end;
}

.quote-client-hub-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.quote-client-hub-strip > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border: 1px solid rgba(23, 59, 90, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 900;
}

.quote-client-hub-strip svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.quote-client-hub-strip .is-active {
  border-color: rgba(17, 199, 189, 0.38);
  color: var(--navy);
  background: #effdfb;
}

.quote-client-hub-strip .is-ready {
  color: var(--success);
}

.quote-client-hub-strip .is-next {
  color: var(--teal-dark);
}

.quote-public-card.is-public-portal {
  min-height: 0;
}

.quote-product-table.is-public-list {
  border-color: rgba(17, 199, 189, 0.28);
  gap: 8px;
  padding: 8px;
  background: rgba(244, 248, 251, 0.72);
}

.quote-product-table.is-public-list .quote-product-head {
  display: none;
}

.quote-public-line-row {
  position: relative;
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 8px;
  background: #fff;
  transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

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

.quote-product-table.is-public-list .quote-public-line-row {
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
  grid-template-areas:
    "main total"
    "desc total";
  gap: 5px 16px;
  align-items: center;
  padding: 14px 16px 14px 18px;
}

.quote-product-table.is-public-list .quote-public-line-main {
  grid-area: main;
  min-width: 0;
}

.quote-public-line-row strong > span {
  color: var(--deep);
  font-weight: 900;
}

.quote-public-line-main small,
.quote-public-line-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.quote-public-line-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quote-public-line-title {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  align-items: baseline;
  min-width: 0;
}

.quote-public-line-title > span {
  color: var(--deep);
  font-weight: 900;
}

.quote-line-inclusion-status {
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.quote-line-inclusion-status.is-included {
  color: var(--teal-dark);
}

.quote-line-inclusion-status.is-excluded {
  color: var(--danger);
}

.quote-line-toggle-help {
  color: var(--danger);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.quote-line-toggle-help[hidden] {
  display: none;
}

.quote-product-table.is-public-list .quote-public-line-desc {
  grid-area: desc;
  color: #506575;
  font-size: 14px;
  line-height: 1.35;
}

.quote-product-table.is-public-list .quote-public-line-total {
  grid-area: total;
  align-self: center;
  justify-self: end;
  color: var(--navy);
  font-size: 19px;
  font-weight: 1000;
  letter-spacing: 0;
  text-align: right;
}

.quote-public-line-row.is-included {
  background: rgba(17, 199, 189, 0.09);
  box-shadow: inset 4px 0 0 var(--teal);
}

.quote-public-line-row.is-selected {
  background: rgba(17, 199, 189, 0.13);
  box-shadow: inset 4px 0 0 var(--teal);
}

.quote-public-line-row.is-required {
  border-color: rgba(17, 199, 189, 0.26);
  background: rgba(17, 199, 189, 0.11);
  box-shadow: inset 4px 0 0 var(--teal);
}

.quote-public-line-row.is-required .quote-public-line-main {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
}

.quote-public-optional-divider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.quote-public-optional-divider span {
  flex: 0 0 auto;
}

.quote-public-optional-divider em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-transform: none;
}

.quote-public-optional-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(23, 59, 90, 0.16);
}

.quote-line-state {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(23, 59, 90, 0.22);
  border-radius: 7px;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.quote-line-state::after {
  content: "";
  width: 17px;
  height: 9px;
  margin-top: -2px;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(-45deg);
}

.quote-line-state.is-checked,
.quote-public-option-row.is-selected .quote-line-state {
  border-color: var(--teal-dark);
  background: var(--teal-dark);
}

.quote-line-state.is-checked::after,
.quote-public-option-row.is-selected .quote-line-state::after {
  border-left-color: #fff;
  border-bottom-color: #fff;
}

.quote-line-state.is-discount {
  border-color: rgba(23, 59, 90, 0.2);
  background: rgba(244, 248, 251, 0.9);
}

.quote-line-state.is-discount::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--teal-dark);
}

.quote-public-options-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.quote-public-options-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.quote-public-options-head strong,
.quote-public-options-head em {
  color: var(--navy);
  font-style: normal;
}

.quote-public-option-row {
  cursor: pointer;
}

.quote-public-option-row strong {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.quote-public-option-row .quote-public-line-main {
  grid-template-columns: 44px minmax(0, 1fr);
}

.quote-public-option-row input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.quote-public-option-row.is-selected {
  background: rgba(17, 199, 189, 0.14);
  box-shadow: inset 4px 0 0 var(--teal);
}

.quote-public-line-row.is-discount {
  background: #fff;
  box-shadow: none;
}

.quote-public-line-row.is-discount strong > span,
.quote-public-line-row.is-discount em {
  color: var(--navy);
  font-weight: 900;
}

.quote-deposit-customer-panel.is-paid {
  border-color: rgba(17, 199, 189, 0.34);
  background: rgba(17, 199, 189, 0.09);
}

.quote-total-discount-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: rgba(7, 149, 143, 0.07);
}

.quote-total-box > .quote-total-discount-group {
  grid-template-columns: 1fr;
}

.quote-total-discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(7, 149, 143, 0.22);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
}

.quote-total-discount-row span,
.quote-total-discount-row strong {
  color: var(--teal-dark);
  font-weight: 900;
}

.quote-total-discount-row span {
  justify-self: start;
  padding-right: 0;
  font-size: 15px;
}

.quote-total-discount-row strong {
  justify-self: end;
  border: 0;
  padding: 0;
  font-size: 16px;
}

.quote-public-decision-panel {
  align-items: stretch;
  border-color: rgba(7, 149, 143, 0.42);
  background: linear-gradient(135deg, rgba(17, 199, 189, 0.12), rgba(255, 255, 255, 0.92));
}

.quote-public-decision {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  min-width: min(100%, 460px);
}

.quote-approval-copy {
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.quote-approval-copy strong {
  font-size: inherit;
}

.quote-public-decision-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  width: 100%;
  max-width: 560px;
}

.quote-public-decision-actions .button.primary {
  min-height: 74px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #078b50, #0fb870);
  box-shadow: 0 14px 30px rgba(7, 139, 80, 0.26);
  color: #fff;
  font-size: 22px;
  font-weight: 950;
}

.quote-public-decision-actions .button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(7, 139, 80, 0.3);
}

.quote-public-change-panel {
  display: grid;
  gap: 8px;
  justify-self: end;
  width: min(100%, 440px);
}

.quote-public-change-request {
  border: 1px solid rgba(23, 59, 90, 0.18);
  border-radius: 8px;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.quote-public-change-request summary {
  cursor: pointer;
  padding: 14px 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), #23577d);
  font-size: 15px;
  font-weight: 950;
  text-align: center;
}

.quote-public-change-request summary::-webkit-details-marker {
  display: none;
}

.quote-public-change-request[open] {
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
}

.quote-public-change-request[open] summary {
  margin-bottom: 2px;
}

.quote-public-change-request .field,
.quote-public-change-request .button {
  margin-inline: 12px;
}

.quote-public-message {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.quote-terms.is-public-terms {
  overflow: hidden;
}

.quote-terms.is-public-terms > h3 {
  padding: 14px 16px 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 950;
}

.quote-terms.is-public-terms .quote-terms-body {
  border-top: 0;
}

.quote-section-title {
  margin: 0;
  color: #000;
  font-size: 20px;
}

.quote-product-row.is-discount strong,
.quote-product-row.is-discount em {
  color: #8d1f1f;
}

.quote-builder {
  display: grid;
  gap: 12px;
  margin-top: 0;
  border: 1px solid rgba(17, 199, 189, 0.3);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.quote-builder-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.quote-builder-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
}

.quote-builder-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.quote-builder-actions,
.quote-tax-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.quote-builder-actions .button {
  min-width: 0;
  min-height: 38px;
  padding-inline: 12px;
}

.quote-service-catalog {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: #f8fbfd;
}

.quote-service-catalog-head {
  display: grid;
  grid-template-columns: auto minmax(180px, 320px);
  gap: 10px;
  align-items: center;
}

.quote-service-catalog-head strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.quote-service-catalog-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

.quote-service-catalog-search svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.quote-service-catalog-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--navy);
  font-weight: 800;
}

.quote-service-catalog-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  max-height: 210px;
  overflow: auto;
}

.quote-service-card {
  display: grid;
  gap: 4px;
  min-height: 82px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.quote-service-card:hover,
.quote-service-card:focus-visible {
  border-color: rgba(17, 199, 189, 0.55);
  box-shadow: 0 10px 26px rgba(20, 58, 86, 0.08);
}

.quote-service-card span,
.quote-service-card em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quote-service-card strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.12;
}

.quote-service-catalog-empty {
  min-height: 64px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(20, 58, 86, 0.14);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.quote-tax-panel,
.quote-total-details,
.quote-secondary-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  overflow: hidden;
}

.quote-tax-panel summary,
.quote-total-details summary,
.quote-secondary-panel summary {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  color: var(--navy);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

.quote-tax-panel summary::-webkit-details-marker,
.quote-total-details summary::-webkit-details-marker,
.quote-secondary-panel summary::-webkit-details-marker {
  display: none;
}

.quote-tax-panel summary::after,
.quote-total-details summary::after,
.quote-secondary-panel summary::after {
  content: "+";
  margin-left: auto;
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
}

.quote-tax-panel[open] summary::after,
.quote-total-details[open] summary::after,
.quote-secondary-panel[open] summary::after {
  content: "-";
}

.quote-tax-controls {
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 10px;
  background: #fff;
}

.quote-tax-controls .field {
  min-width: 140px;
}

.quote-line-editor {
  display: grid;
  gap: 7px;
  overflow-x: auto;
}

.quote-line-head,
.quote-line-row {
  display: grid;
  grid-template-columns: 112px minmax(150px, 0.8fr) minmax(260px, 1.3fr) 76px 110px 100px 82px;
  gap: 8px;
  align-items: center;
  min-width: 948px;
}

.quote-line-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-line-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px;
  background: var(--soft);
}

.quote-line-row.is-optional {
  background: rgba(17, 199, 189, 0.08);
}

.quote-line-row.is-discount {
  background: rgba(229, 75, 75, 0.08);
}

.quote-line-row input,
.quote-line-row textarea,
.quote-line-row select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 9px;
  background: #fff;
}

.quote-line-row textarea {
  min-height: 46px;
  resize: vertical;
}

.quote-line-row strong {
  color: var(--navy);
  text-align: right;
  white-space: nowrap;
}

.quote-line-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 6px;
}

.secondary-icon-button {
  color: var(--navy);
  border: 1px solid var(--line);
  background: #fff;
}

.quote-line-taxable {
  grid-column: 2 / 4;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-line-taxable input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
}

.quote-builder-summary {
  justify-self: end;
  display: grid;
  width: min(100%, 420px);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.quote-builder-summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
}

.quote-builder-summary > div + div {
  border-top: 1px solid var(--line);
}

.quote-builder-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-builder-summary strong {
  color: var(--navy);
}

.quote-builder-total {
  background: rgba(17, 199, 189, 0.14) !important;
}

.quote-builder-total strong {
  font-size: 22px;
}

.quote-followup-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.quote-mobile-action-bar {
  display: none;
}

.quote-followup-mini-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quote-followup-mini-status div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.quote-followup-mini-status div.is-done {
  border-color: rgba(17, 199, 189, 0.45);
  background: rgba(17, 199, 189, 0.1);
}

.quote-followup-mini-status div.is-due,
.quote-followup-mini-status div.is-overdue {
  border-color: rgba(229, 75, 75, 0.35);
  background: rgba(229, 75, 75, 0.08);
}

.quote-followup-mini-status span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-followup-mini-status strong {
  color: var(--navy);
  font-size: 14px;
}

.quote-followup-mini-status em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
}

.quote-followup-fields {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1fr);
  gap: 12px;
}

.quote-followup-fields textarea {
  min-height: 86px;
}

.quote-followup-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.quote-followup-stat {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.quote-followup-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-followup-stat strong {
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
}

.quote-followup-stat em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
}

.quote-source-snapshot {
  margin-bottom: 14px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.quote-source-snapshot summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--navy);
  cursor: pointer;
  font-weight: 950;
  list-style: none;
}

.quote-source-snapshot summary::-webkit-details-marker {
  display: none;
}

.quote-source-snapshot summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.14);
}

.quote-source-snapshot[open] summary::after {
  content: "-";
}

.quote-source-snapshot summary span {
  min-width: 0;
}

.quote-source-snapshot summary em {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.quote-source-table {
  display: grid;
  gap: 7px;
  padding: 0 14px 14px;
  overflow-x: auto;
}

.quote-source-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(5, minmax(78px, 0.55fr));
  gap: 8px;
  align-items: center;
  min-width: 680px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  background: var(--soft);
}

.quote-source-row.header {
  border: 0;
  padding-block: 0;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.quote-source-row strong,
.quote-source-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}

.quote-source-row strong {
  color: var(--navy);
}

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

.quote-followup-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--open);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.quote-followup-card.is-converted,
.quote-followup-card.is-approved {
  border-left-color: var(--teal);
}

.quote-followup-card.is-not-converted,
.quote-followup-card.is-non-responsive,
.quote-followup-card.is-lost,
.quote-followup-card.is-cancelled {
  border-left-color: var(--muted);
}

.quote-followup-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 14px;
  align-items: start;
}

.quote-followup-money {
  display: grid;
  gap: 4px;
  justify-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.quote-followup-money span,
.quote-followup-money em {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quote-followup-money strong {
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
}

.quote-followup-money em {
  font-style: normal;
  text-align: right;
}

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

.quote-followup-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.quote-followup-check.is-due {
  border-color: rgba(17, 199, 189, 0.52);
  background: rgba(17, 199, 189, 0.1);
}

.quote-followup-check.is-overdue {
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.08);
}

.quote-followup-check.is-done {
  border-color: rgba(17, 199, 189, 0.4);
  background: rgba(17, 199, 189, 0.14);
}

.quote-followup-check span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-followup-check strong {
  display: block;
  margin: 3px 0;
  color: var(--navy);
  font-size: 16px;
}

.quote-followup-check em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.quote-followup-edit {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(150px, 0.65fr) minmax(170px, 0.75fr) minmax(240px, 1.4fr);
  gap: 10px;
  align-items: start;
}

.quote-followup-notes textarea {
  min-height: 76px;
}

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

.crm-job-main {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
}

.crm-job-time {
  display: grid;
  align-content: start;
  gap: 4px;
  border-right: 1px solid var(--line);
  padding-right: 12px;
}

.crm-job-time strong {
  color: var(--navy);
  font-size: 16px;
}

.crm-job-time.is-date-only {
  align-content: center;
}

.crm-job-time.is-date-only strong {
  font-size: 17px;
  line-height: 1.2;
}

.crm-job-time span,
.crm-address {
  color: var(--muted);
  font-size: 13px;
}

.crm-job-info {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.crm-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.crm-title-row h3 {
  margin: 0;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.15;
}

.crm-address,
.crm-job-info .muted {
  margin: 0;
}

.crm-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 9px;
  color: #fff;
  background: var(--open);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-status.complete,
.crm-status.invoiced,
.crm-status.paid,
.crm-status.approved,
.crm-status.converted,
.crm-status.won {
  color: #06343d;
  background: var(--teal);
}

.crm-status.new,
.crm-status.draft {
  color: var(--navy);
  background: #d9edf7;
}

.crm-status.sent,
.crm-status.awaiting-response,
.crm-status.quote-sent,
.crm-status.assessment-scheduled {
  color: #3c2a00;
  background: #f4d35e;
}

.crm-status.follow-up-needed,
.crm-status.overdue,
.crm-status.action-required,
.crm-status.requires-action,
.crm-status.requires-invoicing,
.crm-status.incomplete {
  color: #fff;
  background: var(--danger);
}

.crm-status.scheduled,
.crm-status.upcoming,
.crm-status.active,
.crm-status.in-progress {
  color: #06343d;
  background: #9eece6;
}

.crm-status.partial {
  color: #3c2a00;
  background: #f0b429;
}

.crm-status.cancelled,
.crm-status.declined,
.crm-status.lost,
.crm-status.void {
  background: var(--muted);
}

.crm-job-actions {
  justify-content: end;
  align-content: start;
  max-width: 360px;
}

.crm-detail-header .section-heading {
  align-items: center;
}

.crm-detail-actions {
  justify-content: flex-end;
}

.crm-detail-grid {
  grid-template-columns: minmax(0, 1fr);
}

.crm-textarea-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.crm-assignment-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.crm-assignment {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.crm-assignment input {
  width: 20px;
  height: 20px;
  accent-color: var(--danger);
}

.crm-assignment span {
  display: grid;
  gap: 2px;
}

.crm-assignment strong {
  color: var(--navy);
}

.crm-assignment em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.crm-summary-grid .detail strong {
  overflow-wrap: anywhere;
}

.invoice-payment-panel {
  border-color: rgba(17, 199, 189, 0.32);
}

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

.invoice-payment-summary > div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.invoice-payment-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoice-payment-summary strong {
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
}

.invoice-payment-summary .is-due {
  border-color: rgba(229, 75, 75, 0.28);
  background: rgba(229, 75, 75, 0.07);
}

.invoice-payment-summary .is-clear {
  border-color: rgba(17, 199, 189, 0.36);
  background: rgba(17, 199, 189, 0.08);
}

.invoice-collection-settings {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(17, 199, 189, 0.26);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  background: linear-gradient(135deg, rgba(17, 199, 189, 0.08), rgba(255, 255, 255, 0.96));
}

.invoice-collection-settings-head {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(150px, 1fr) minmax(130px, 0.75fr);
  gap: 10px;
  align-items: end;
}

.invoice-collection-settings-head > div {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(17, 199, 189, 0.24);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.invoice-collection-settings-head span,
.invoice-collection-methods span,
.invoice-offline-methods span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoice-collection-settings-head strong {
  color: var(--navy);
  font-size: 23px;
  line-height: 1;
}

.invoice-collection-methods,
.invoice-offline-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.invoice-method-check {
  min-height: 40px;
  margin: 0;
}

.invoice-method-check.is-wide {
  flex: 1 1 170px;
}

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

.invoice-cash-note {
  grid-column: 1 / -1;
}

.invoice-offline-methods {
  margin: 0 0 12px;
}

.invoice-offline-methods > div {
  flex: 1 1 160px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.invoice-offline-methods strong {
  color: var(--navy);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.invoice-offline-methods em {
  color: var(--slate);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.invoice-payment-link {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(17, 199, 189, 0.28);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(17, 199, 189, 0.07);
}

.invoice-payment-link span {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.invoice-payment-link div {
  display: grid;
  gap: 3px;
}

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

.invoice-public-payment-link {
  background: linear-gradient(135deg, rgba(17, 199, 189, 0.12), rgba(255, 255, 255, 0.92));
}

.invoice-payment-link em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

.invoice-payment-link.needs-setup {
  border-color: rgba(229, 75, 75, 0.24);
  background: rgba(229, 75, 75, 0.06);
}

.invoice-payment-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.invoice-payment-quick-actions .button {
  min-height: 38px;
  padding: 8px 10px;
}

.invoice-payment-quick-actions .button svg {
  width: 16px;
  height: 16px;
}

.invoice-payment-quick-actions .button.is-selected {
  border-color: var(--teal-dark);
  background: rgba(17, 199, 189, 0.12);
  color: var(--navy);
}

.invoice-payment-form {
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(135px, 0.55fr) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.invoice-payment-form .button {
  min-height: 42px;
  white-space: nowrap;
}

.invoice-payment-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.invoice-payment-row {
  display: grid;
  grid-template-columns: 110px 130px 110px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--soft);
}

.invoice-payment-row strong {
  color: var(--navy);
  font-size: 18px;
}

.invoice-payment-row span {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.invoice-payment-row em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.crm-notes-panel {
  border-color: rgba(18, 64, 95, 0.14);
}

.crm-note-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.24fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.crm-message-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.16fr) minmax(180px, 0.28fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(31, 185, 177, 0.32);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: #f5fcfb;
}

.crm-message-head {
  align-self: center;
}

.crm-message-head strong,
.crm-message-head span {
  display: block;
}

.crm-message-head strong {
  color: var(--navy);
  font-size: 14px;
}

.crm-call-logger {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(170px, 0.34fr) auto minmax(180px, 0.32fr) minmax(92px, 0.16fr) minmax(260px, 0.52fr);
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(18, 64, 95, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.76);
}

.crm-call-logger > div:first-child {
  align-self: center;
}

.crm-call-logger strong,
.crm-call-logger span {
  display: block;
}

.crm-call-logger strong {
  color: var(--navy);
  font-size: 14px;
}

.crm-call-logger span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.crm-call-outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.crm-call-outcomes .button {
  min-height: 36px;
  padding: 0 8px;
  font-size: 12px;
}

.crm-call-logger [data-crm-call-status] {
  grid-column: 1 / -1;
  margin: 0;
}

.crm-call-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px dashed rgba(18, 64, 95, 0.24);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.crm-call-empty p {
  margin: 0;
}

.client-call-history-section {
  border-color: rgba(31, 185, 177, 0.28);
}

.client-call-history-list {
  display: grid;
  gap: 10px;
}

.client-call-history-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.client-call-history-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #0a6d56;
  background: #dff7ef;
}

.client-call-history-icon svg {
  width: 18px;
  height: 18px;
}

.client-call-history-row strong,
.client-call-history-row span,
.client-call-history-row small {
  display: block;
}

.client-call-history-row strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.client-call-history-row span,
.client-call-history-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.client-call-history-row p {
  margin: 7px 0;
  color: var(--ink);
  font-size: 13px;
}

.message-template-row {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 8px;
}

.message-template-row .button {
  min-height: 36px;
}

.crm-message-form textarea {
  min-height: 64px;
}

.crm-note-form textarea {
  min-height: 64px;
}

.crm-note-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.crm-note-row {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--soft);
}

.crm-note-row.is-task {
  border-left-color: var(--warning);
}

.crm-note-row.is-issue {
  border-left-color: var(--open);
}

.crm-note-row.is-complete {
  border-left-color: #8a97a6;
  opacity: 0.76;
}

.crm-note-row > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.crm-note-row strong {
  color: var(--navy);
  font-size: 13px;
}

.crm-note-row span,
.crm-note-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.crm-note-row p {
  margin: 0;
  color: var(--ink);
  line-height: 1.4;
}

.crm-note-row .button.compact {
  justify-self: start;
  min-height: 32px;
  padding: 7px 10px;
  font-size: 12px;
}

.payments-view .section-body {
  display: grid;
  gap: 14px;
}

.payments-toolbar {
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.42fr) minmax(132px, 0.36fr) minmax(132px, 0.36fr) auto;
}

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

.payment-summary-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.payment-summary-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.payment-summary-card strong {
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
}

.payment-summary-card em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.payment-summary-card.is-due {
  border-color: rgba(229, 75, 75, 0.26);
  background: rgba(229, 75, 75, 0.06);
}

.payment-summary-card.is-warning {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
}

.payment-admin-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.3);
  border-radius: 8px;
  padding: 13px;
  background: #f4fffd;
}

.payment-admin-next.is-needs-work,
.payment-admin-next.is-watch,
.payment-admin-next.is-warn {
  border-color: rgba(240, 180, 41, 0.44);
  background: #fffaf0;
}

.payment-admin-next.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f2fff6;
}

.payment-admin-next span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.payment-admin-next strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.12;
}

.payment-admin-next p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.payment-admin-next-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.payment-admin-next-action em {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
}

.payment-method-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.payment-method-strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.payment-method-strip strong {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.payment-collection-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(18, 64, 95, 0.16);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.payment-collection-panel.is-clear {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: rgba(17, 199, 189, 0.3);
  background: rgba(17, 199, 189, 0.06);
}

.payment-collection-panel h3 {
  margin: 3px 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.1;
}

.payment-collection-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.payment-collection-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

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

.payment-collection-card {
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--soft);
}

.payment-collection-card.overdue {
  border-left-color: var(--open);
  background: rgba(229, 75, 75, 0.06);
}

.payment-collection-card.due_today,
.payment-collection-card.due_soon {
  border-left-color: var(--warning);
}

.payment-collection-status {
  display: grid;
  gap: 7px;
}

.payment-collection-status strong {
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
}

.payment-collection-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.payment-collection-main h4,
.payment-collection-main p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-collection-main h4 {
  color: var(--navy);
  font-size: 16px;
}

.payment-collection-main p {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.payment-collection-main em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.payment-collection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.payment-collection-actions .button {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 12px;
}

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

.payment-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 6px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.payment-card.is-unapplied {
  border-left-color: #f0b429;
}

.payment-card-amount {
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line);
  padding-right: 12px;
}

.payment-card-amount strong {
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
}

.payment-card-amount span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.payment-card-main {
  min-width: 0;
}

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

@media (max-width: 760px) {
  .time-clock-view .section-body {
    grid-template-columns: 1fr;
  }

  .time-next-move {
    grid-template-columns: 1fr;
  }

  .time-next-move-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .time-next-move-action .button {
    width: 100%;
  }

  .time-review {
    grid-column: auto;
  }

  .time-live-row,
  .time-entry-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .time-live-row em,
  .time-entry-row em {
    align-self: flex-start;
  }

  .payment-card-amount {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 10px;
  }

  .payment-admin-next {
    grid-template-columns: 1fr;
  }

  .payment-admin-next-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .payment-admin-next-action .button {
    width: 100%;
  }

  .payment-card-actions {
    justify-content: stretch;
  }

  .payment-card-actions .button {
    flex: 1 1 120px;
  }
}

.pricing-view {
  display: grid;
  gap: 16px;
}

.pricing-settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pricing-sales-hero,
.pricing-setup-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-radius: 8px;
  padding: 16px;
  background: rgba(17, 199, 189, 0.08);
}

.pricing-customer-step {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(17, 199, 189, 0.32);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.pricing-step-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.pricing-step-heading > span {
  display: inline-grid;
  place-items: center;
  min-width: 62px;
  border-radius: 999px;
  padding: 7px 10px;
  color: #fff;
  background: var(--navy);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-step-heading strong {
  color: var(--navy);
  font-size: 18px;
}

.pricing-step-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.pricing-followup-fields {
  margin: 0;
}

.pricing-notes-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.pricing-notes-panel summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--navy);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

.pricing-notes-panel summary::-webkit-details-marker {
  display: none;
}

.pricing-notes-panel summary::after {
  content: "+";
  margin-left: auto;
  color: var(--muted);
  font-size: 18px;
}

.pricing-notes-panel[open] summary::after {
  content: "-";
}

.pricing-notes-panel .pricing-followup-fields {
  border-top: 1px solid var(--line);
  padding: 10px;
  background: #fff;
}

.pricing-sales-hero .eyebrow {
  color: var(--muted);
}

.pricing-sales-hero h3 {
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.1;
}

.pricing-sales-hero p,
.pricing-setup-note span {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.pricing-flow-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pricing-flow-strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(17, 199, 189, 0.35);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.pricing-flow-strip strong {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #fff;
  background: var(--navy);
  font-size: 11px;
}

.pricing-next-move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  border: 1px solid rgba(17, 199, 189, 0.3);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.pricing-next-move.is-needs-work,
.pricing-next-move.is-watch {
  border-color: rgba(240, 180, 41, 0.44);
  background: #fffaf0;
}

.pricing-next-move.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f2fff6;
}

.pricing-next-move span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-next-move strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.12;
}

.pricing-next-move p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.pricing-next-move-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.pricing-next-move-action em {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-hero-total {
  display: grid;
  gap: 5px;
  min-width: 190px;
  border-radius: 8px;
  padding: 14px;
  color: #fff;
  background: var(--navy);
  text-align: right;
}

.pricing-hero-total span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-hero-total strong {
  font-size: 30px;
  line-height: 1;
}

.pricing-setup-note {
  grid-template-columns: 210px minmax(0, 1fr);
  margin-bottom: 12px;
}

.pricing-setup-note strong {
  color: var(--navy);
  font-size: 17px;
}

.pricing-unsaved-banner {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 8px;
  padding: 11px;
  color: var(--warning-ink);
  background: rgba(245, 158, 11, 0.12);
}

.pricing-unsaved-banner strong {
  font-size: 14px;
}

.pricing-unsaved-banner span {
  color: var(--warning-ink);
  font-size: 13px;
  line-height: 1.35;
}

.field.is-unsaved input,
.pricing-rate-row.is-unsaved input[type="number"] {
  border-color: rgba(245, 158, 11, 0.72);
  background: rgba(245, 158, 11, 0.1);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.pricing-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}

.pricing-view,
.pricing-shell,
.pricing-calculator,
.pricing-service-grid,
.pricing-service-card,
.pricing-service-body,
.pricing-area-row,
.pricing-row,
.pricing-count-grid,
.pricing-window-main,
.pricing-option-stack,
.pricing-mini-card,
.pricing-addon-panel {
  min-width: 0;
  max-width: 100%;
}

.pricing-calculator .section-body {
  display: grid;
  gap: 12px;
}

.pricing-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px;
}

.pricing-service-card {
  display: grid;
  gap: 12px;
  --pricing-service-accent: var(--teal);
  --pricing-service-gradient: linear-gradient(145deg, rgba(17, 199, 189, 0.26), rgba(18, 168, 216, 0.16));
  --pricing-service-tint: rgba(17, 199, 189, 0.08);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.pricing-service-pressure {
  --pricing-service-accent: #0284c7;
  --pricing-service-gradient: linear-gradient(135deg, #0284c7, #075985);
  --pricing-service-tint: rgba(2, 132, 199, 0.1);
}

.pricing-service-windows {
  --pricing-service-accent: #0f766e;
  --pricing-service-gradient: linear-gradient(135deg, #38bdf8, #0f766e);
  --pricing-service-tint: rgba(56, 189, 248, 0.12);
}

.pricing-service-gutters {
  --pricing-service-accent: #166534;
  --pricing-service-gradient: linear-gradient(135deg, #64748b, #166534);
  --pricing-service-tint: rgba(22, 101, 52, 0.1);
}

.pricing-service-softwash {
  --pricing-service-accent: #14b8a6;
  --pricing-service-gradient: linear-gradient(135deg, #14b8a6, #115e59);
  --pricing-service-tint: rgba(20, 184, 166, 0.12);
}

.pricing-service-roof {
  --pricing-service-accent: #ef4444;
  --pricing-service-gradient: linear-gradient(135deg, #ef4444, #334155);
  --pricing-service-tint: rgba(239, 68, 68, 0.1);
}

.pricing-service-stain {
  --pricing-service-accent: #f59e0b;
  --pricing-service-gradient: linear-gradient(135deg, #f59e0b, #92400e);
  --pricing-service-tint: rgba(245, 158, 11, 0.12);
}

.pricing-service-oxidation {
  --pricing-service-accent: #a855f7;
  --pricing-service-gradient: linear-gradient(135deg, #a855f7, #0f766e);
  --pricing-service-tint: rgba(168, 85, 247, 0.11);
}

.pricing-service-wood {
  --pricing-service-accent: #92400e;
  --pricing-service-gradient: linear-gradient(135deg, #92400e, #166534);
  --pricing-service-tint: rgba(146, 64, 14, 0.1);
}

.pricing-service-dryer {
  --pricing-service-accent: #475569;
  --pricing-service-gradient: linear-gradient(135deg, #94a3b8, #475569);
  --pricing-service-tint: rgba(71, 85, 105, 0.1);
}

.pricing-service-solar {
  --pricing-service-accent: #ea580c;
  --pricing-service-gradient: linear-gradient(135deg, #facc15, #ea580c);
  --pricing-service-tint: rgba(250, 204, 21, 0.14);
}

.pricing-service-fees {
  --pricing-service-accent: #22c55e;
  --pricing-service-gradient: linear-gradient(135deg, #22c55e, #14532d);
  --pricing-service-tint: rgba(34, 197, 94, 0.11);
}

.pricing-service-sealing {
  --pricing-service-accent: #1e3a8a;
  --pricing-service-gradient: linear-gradient(135deg, #0f766e, #1e3a8a);
  --pricing-service-tint: rgba(30, 58, 138, 0.1);
}

.pricing-service-card.is-disabled {
  background: var(--soft);
}

.pricing-service-card.is-disabled header {
  min-height: 82px;
}

.pricing-service-card:not(.is-disabled) {
  grid-column: 1 / -1;
  border-color: rgba(17, 199, 189, 0.45);
  box-shadow: 0 12px 26px rgba(5, 24, 44, 0.08);
}

.pricing-service-card.is-disabled .pricing-service-body,
.pricing-service-card.is-disabled footer {
  display: none;
}

.pricing-service-card.is-disabled h3 {
  color: var(--ink);
}

.pricing-service-card.is-disabled p {
  display: none;
}

.pricing-service-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.pricing-service-card header {
  cursor: pointer;
}

.pricing-service-card.is-disabled header {
  border-bottom: 0;
  padding-bottom: 0;
}

.pricing-service-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.pricing-service-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  color: #06343d;
  background: linear-gradient(145deg, rgba(17, 199, 189, 0.26), rgba(18, 168, 216, 0.16));
  font-size: 12px;
  font-weight: 900;
}

.pricing-service-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.4;
}

.pricing-service-card:not(.is-disabled) .pricing-service-icon {
  color: #fff;
  background: var(--pricing-service-gradient, var(--navy));
}

.pricing-service-card h3 {
  margin: 0 0 3px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: normal;
}

.pricing-service-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.pricing-service-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.pricing-include {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 9px 12px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-service-card:not(.is-disabled) .pricing-include {
  color: #fff;
  background: var(--danger);
}

.pricing-include input,
.pricing-active-check input,
.pricing-check-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--danger);
}

.pricing-include input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pricing-include span::before {
  content: "+";
  margin-right: 6px;
  font-size: 15px;
  line-height: 1;
}

.pricing-service-card:not(.is-disabled) .pricing-include span::before {
  content: "";
  margin-right: 0;
}

.pricing-service-body {
  display: grid;
  gap: 10px;
}

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

.pricing-area-row {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.pricing-area-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pricing-area-head strong {
  color: var(--navy);
  font-size: 14px;
}

.pricing-area-head .button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.pricing-add-row {
  justify-self: start;
}

.pricing-window-simple,
.pricing-window-main,
.pricing-option-stack {
  display: grid;
  gap: 12px;
}

.pricing-window-main {
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr);
  align-items: end;
}

.pricing-stepper-field {
  min-width: 0;
}

.pricing-stepper {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.pricing-stepper button {
  display: inline-grid;
  place-items: center;
  min-height: 43px;
  border: 0;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.16);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.pricing-stepper button:hover,
.pricing-stepper button:focus {
  background: rgba(17, 199, 189, 0.28);
}

.pricing-stepper input {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0 10px;
  color: var(--navy);
  background: #fff;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.pricing-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pricing-choice-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--navy);
  background: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.pricing-choice-card:has(input:checked) {
  border-color: rgba(17, 199, 189, 0.58);
  color: #06343d;
  background: rgba(17, 199, 189, 0.18);
}

.pricing-choice-card input {
  width: 18px;
  height: 18px;
  accent-color: var(--danger);
}

.pricing-addon-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.pricing-addon-panel summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--navy);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

.pricing-addon-panel summary::-webkit-details-marker {
  display: none;
}

.pricing-addon-panel summary::after {
  content: "+";
  margin-left: auto;
  color: var(--muted);
  font-size: 18px;
}

.pricing-addon-panel[open] summary::after {
  content: "-";
}

.pricing-addon-panel .pricing-count-grid {
  border-top: 1px solid var(--line);
  padding: 10px;
  background: var(--soft);
}

.roof-pitch-guide {
  overflow: hidden;
}

.roof-pitch-guide-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 10px;
  background: var(--soft);
}

.roof-pitch-guide-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.roof-pitch-guide-body img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #005ea8;
}

.pricing-mini-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.pricing-mini-card > strong {
  color: var(--navy);
  font-size: 14px;
}

.pricing-row,
.pricing-count-grid {
  display: grid;
  gap: 10px;
}

.pricing-row {
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

.pricing-count-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}

.pricing-check-field > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--soft);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.pricing-service-card footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.pricing-service-card footer span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-service-card footer strong {
  color: var(--navy);
  font-size: 20px;
}

.pricing-summary-panel {
  position: sticky;
  top: 92px;
}

.pricing-total-stack {
  display: grid;
  gap: 8px;
}

.pricing-total-stack > div,
.pricing-line-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}

.pricing-total-stack span,
.pricing-line-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-total-stack strong,
.pricing-line-summary strong {
  color: var(--navy);
  white-space: nowrap;
}

.pricing-total-stack .is-final {
  border-color: rgba(17, 199, 189, 0.5);
  background: rgba(17, 199, 189, 0.14);
}

.pricing-total-stack .is-final strong {
  font-size: 26px;
}

.pricing-line-summary {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}

.pricing-line-summary .needs-review {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.12);
}

.pricing-line-summary .needs-review strong {
  color: var(--warning-ink);
}

.pricing-minimum-alert,
.pricing-review-alert {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  border-radius: 8px;
  padding: 11px;
}

.pricing-minimum-alert {
  border: 1px solid rgba(17, 199, 189, 0.42);
  color: #06343d;
  background: rgba(17, 199, 189, 0.13);
}

.pricing-review-alert {
  border: 1px solid rgba(245, 158, 11, 0.48);
  color: var(--warning-ink);
  background: rgba(245, 158, 11, 0.12);
}

.pricing-minimum-alert strong,
.pricing-review-alert strong {
  font-size: 14px;
}

.pricing-minimum-alert span,
.pricing-review-alert span {
  font-size: 13px;
  line-height: 1.35;
}

.pricing-minimum-alert span {
  color: #06343d;
}

.pricing-review-alert span {
  color: var(--warning-ink);
}

.stain-pricing-note {
  border-color: rgba(17, 199, 189, 0.42);
  color: #06343d;
  background: rgba(17, 199, 189, 0.12);
}

.stain-pricing-note span {
  color: #06343d;
}

.pricing-summary-panel textarea {
  min-height: 160px;
}

.pricing-mobile-action-bar {
  display: none;
}

.pricing-rate-groups {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.pricing-rate-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.pricing-rate-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px;
  color: var(--navy);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.pricing-rate-group summary::-webkit-details-marker {
  display: none;
}

.pricing-rate-group summary span {
  color: var(--muted);
  font-size: 12px;
}

.pricing-rate-list {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}

.pricing-rate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px minmax(138px, auto);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  background: #fff;
}

.pricing-rate-row.is-unsaved {
  background: #fffaf0;
  box-shadow: inset 4px 0 0 var(--warning);
}

.pricing-rate-row div {
  display: grid;
  gap: 3px;
}

.pricing-rate-row strong {
  color: var(--navy);
  line-height: 1.2;
}

.pricing-rate-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pricing-rate-row input[type="number"] {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  color: var(--ink);
  background: var(--soft);
}

.pricing-active-check {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--navy);
  background: var(--soft);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.pricing-active-check input {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 20px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #dbe7ef;
  cursor: pointer;
}

.pricing-active-check input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(5, 24, 44, 0.25);
  transition: transform 0.16s ease;
}

.pricing-active-check input:checked {
  border-color: rgba(7, 149, 143, 0.45);
  background: var(--teal);
}

.pricing-active-check input:checked::after {
  transform: translateX(14px);
}

.pricing-active-check span {
  color: inherit;
  font-size: inherit;
  letter-spacing: 0;
  white-space: nowrap;
}

.button.is-unsaved {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.24), 0 10px 20px rgba(5, 24, 44, 0.16);
}

.time-map-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid #fff;
  border-radius: 999px 999px 999px 5px;
  transform: rotate(-45deg);
  box-shadow: 0 6px 14px rgba(5, 24, 44, 0.35);
}

.time-map-marker span {
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  transform: rotate(45deg);
}

.time-map-marker.is-in {
  background: var(--open);
}

.time-map-marker.is-out {
  background: var(--danger);
}

.schedule-map-canvas > .muted {
  display: grid;
  min-height: 320px;
  place-items: center;
  margin: 0;
  padding: 18px;
  text-align: center;
}

.schedule-map-jobs {
  position: sticky;
  top: 12px;
  max-height: 620px;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
}

.schedule-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  position: sticky;
  top: 0;
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.schedule-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.legend-dot.is-open {
  background: var(--open);
}

.legend-dot.is-complete {
  background: var(--success);
}

.legend-dot.is-unscheduled {
  background: var(--warning);
}

.map-job-section {
  display: grid;
  gap: 8px;
}

.map-job-section + .map-job-section {
  margin-top: 6px;
}

.map-job-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 8px 2px 6px;
}

.map-job-section-head strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.map-job-section-head span {
  min-width: 24px;
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--navy);
  background: var(--soft);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.map-job-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(86px, auto);
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 5px solid var(--open);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.map-job-card.is-complete {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.08);
}

.map-job-card.is-unscheduled {
  border-left-color: var(--warning);
  background: #fff8ec;
}

.map-job-card.is-submitted {
  border-color: rgba(7, 149, 143, 0.34);
  background: rgba(17, 199, 189, 0.06);
}

.map-job-pin {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #06343d;
  background: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.map-job-pin.is-open {
  color: #fff;
  background: var(--open);
}

.map-job-pin.is-complete {
  color: #fff;
  background: var(--success);
}

.map-job-pin.is-unscheduled {
  color: var(--warning-ink);
  background: var(--warning);
}

.map-job-card strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.map-job-card em {
  display: inline-flex;
  margin: 3px 0;
  border-radius: 999px;
  padding: 3px 7px;
  color: #fff;
  background: var(--open);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.map-job-card.is-complete em,
.map-job-card.is-submitted em {
  color: #06343d;
  background: var(--teal);
}

.map-job-card.is-unscheduled em {
  color: var(--warning-ink);
  background: rgba(245, 158, 11, 0.24);
}

.map-job-card span,
.map-job-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.map-job-card small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.map-job-actions {
  display: grid;
  gap: 6px;
}

.map-job-card .button {
  min-height: 34px;
  padding: 0 9px;
  font-size: 12px;
}

.map-popup {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.map-popup strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
}

.map-popup span,
.map-popup small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.map-popup em {
  justify-self: start;
  border-radius: 999px;
  padding: 3px 7px;
  color: #fff;
  background: var(--open);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.map-popup em.is-complete {
  color: #06343d;
  background: var(--teal);
}

.map-popup em.is-unscheduled {
  color: var(--warning-ink);
  background: rgba(245, 158, 11, 0.24);
}

.map-popup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.map-popup a,
.map-popup button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  color: #fff;
  background: var(--danger);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.map-popup button {
  color: var(--navy);
  background: var(--soft);
  border: 1px solid var(--line);
}

.job-map-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid #fff;
  border-radius: 999px 999px 999px 4px;
  transform: rotate(-45deg);
  box-shadow: 0 6px 14px rgba(5, 24, 44, 0.35);
}

.job-map-marker.is-highlighted {
  width: 54px;
  height: 54px;
  border: 5px solid #ffe600;
  box-shadow: 0 0 0 3px #10243a, 0 0 0 7px #fff, 0 0 0 11px #ffe600, 0 14px 28px rgba(5, 24, 44, 0.55);
}

.job-map-marker span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  transform: rotate(45deg);
}

.job-map-marker b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 24, 44, 0.85);
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  transform: rotate(45deg);
}

.job-map-marker.is-open {
  background: var(--open);
}

.job-map-marker.is-complete {
  background: var(--success);
}

.job-map-marker.is-unscheduled {
  background: var(--warning);
}

.job-map-marker.is-unscheduled span {
  color: var(--warning-ink);
}

.job-map-marker.is-unscheduled b {
  color: var(--warning-ink);
  background: #fff;
}

.schedule-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--open);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.schedule-card.is-complete {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.schedule-card.is-submitted {
  border-color: rgba(7, 149, 143, 0.34);
  background: rgba(17, 199, 189, 0.06);
}

.schedule-card-main {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
}

.schedule-time {
  display: grid;
  align-content: start;
  gap: 4px;
  border-right: 1px solid var(--line);
  padding-right: 12px;
}

.schedule-time strong {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.2;
}

.schedule-time span,
.schedule-info p {
  color: var(--muted);
  line-height: 1.35;
}

.schedule-info {
  min-width: 0;
}

.schedule-title-row {
  display: flex;
  gap: 10px;
  align-items: start;
  justify-content: space-between;
}

.schedule-title-row h3 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.22;
}

.schedule-info p {
  margin: 0 0 7px;
}

.schedule-address {
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.schedule-job-label {
  font-size: 13px;
}

.service-tags.compact {
  margin: 8px 0;
}

.service-tags.compact span {
  padding: 5px 8px;
  font-size: 11px;
}

.equipment-tags.compact {
  margin-top: 3px;
}

.equipment-tags.compact span {
  border: 1px solid rgba(23, 59, 90, 0.16);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--navy);
  background: #f6fafc;
  font-size: 11px;
  font-weight: 850;
}

.equipment-pack-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.equipment-pack-list > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.job-source-page {
  display: grid;
  gap: 16px;
}

.job-source-hero .section-heading {
  gap: 14px;
}

.job-source-hero-head h2 {
  margin-bottom: 4px;
}

.job-source-hero-head p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  margin: 0;
}

.job-source-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.job-source-main,
.job-source-rail {
  display: grid;
  gap: 16px;
}

.job-source-rail {
  position: sticky;
  top: 88px;
}

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

.job-source-status-tile {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.job-source-status-tile > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.16);
}

.job-source-status-tile.is-warn > span,
.job-quality-item.is-warn {
  background: rgba(244, 211, 94, 0.26);
}

.job-source-status-tile.is-good > span,
.job-quality-item.is-good {
  background: rgba(17, 199, 189, 0.13);
}

.job-source-status-tile em,
.job-quality-item span,
.job-money-grid span {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-source-status-tile strong {
  display: block;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.15;
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.job-source-status-tile small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.job-line-list,
.job-invoice-list,
.job-message-preview-list {
  display: grid;
  gap: 8px;
}

.job-line-row,
.job-invoice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--soft);
  text-decoration: none;
}

.job-line-row strong,
.job-invoice-row strong,
.job-contact-card strong {
  color: var(--navy);
}

.job-line-row span,
.job-invoice-row em,
.job-contact-card span,
.job-contact-card em {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.job-line-row em,
.job-line-row small {
  color: var(--navy);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.job-edit-drawer {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 10px;
}

.job-edit-drawer summary {
  color: var(--navy);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.job-edit-drawer .field,
.job-edit-drawer .form-grid {
  margin-top: 10px;
}

.job-schedule-grid,
.job-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.job-notes-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.job-quality-item,
.job-money-grid > div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.job-quality-item strong,
.job-money-grid strong {
  color: var(--navy);
  font-size: 20px;
  line-height: 1.1;
}

.job-quality-item em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.job-closeout-handoff {
  border-left: 5px solid var(--teal);
}

.job-closeout-handoff.is-needs-work {
  border-left-color: var(--danger);
}

.job-closeout-handoff.is-watch {
  border-left-color: #f59e0b;
}

.job-closeout-handoff.is-ready {
  border-left-color: var(--success);
}

.job-handoff-next {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(17, 199, 189, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(17, 199, 189, 0.07);
}

.job-closeout-handoff.is-needs-work .job-handoff-next {
  border-color: rgba(215, 25, 70, 0.18);
  background: rgba(255, 241, 242, 0.78);
}

.job-closeout-handoff.is-watch .job-handoff-next {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(255, 251, 235, 0.82);
}

.job-handoff-next span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-handoff-next strong {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.14;
}

.job-handoff-next p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.job-handoff-next .button {
  width: fit-content;
  margin-top: 2px;
}

.job-handoff-steps {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.job-handoff-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid rgba(23, 59, 90, 0.1);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.job-handoff-step.is-done {
  border-color: rgba(17, 199, 189, 0.22);
  background: rgba(17, 199, 189, 0.07);
}

.job-handoff-step svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #f59e0b;
}

.job-handoff-step.is-done svg {
  color: var(--success);
}

.job-handoff-step strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.15;
}

.job-handoff-step span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.28;
}

.job-photo-empty {
  margin: 12px 0 0;
}

.job-photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.job-contact-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.job-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.job-money-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.job-money-grid .is-due {
  border-color: rgba(229, 75, 75, 0.28);
  background: rgba(229, 75, 75, 0.07);
}

.job-money-grid .is-clear {
  border-color: rgba(17, 199, 189, 0.36);
  background: rgba(17, 199, 189, 0.08);
}

.job-invoice-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.job-message-preview-list {
  margin-top: 10px;
}

.job-source-save-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0;
  padding: 10px;
  background: var(--soft);
}

.schedule-actions {
  display: grid;
  grid-template-columns: minmax(210px, 0.9fr) minmax(180px, 1.1fr) minmax(140px, 0.8fr);
  gap: 8px;
  align-items: stretch;
}

.schedule-contact-actions,
.schedule-secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

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

.schedule-actions .button {
  width: 100%;
  min-height: 38px;
  padding: 0 8px;
  font-size: 13px;
}

.schedule-start-action {
  font-size: 14px;
}

.check {
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2.5px solid var(--navy);
  border-radius: 4px;
  appearance: none;
  background: #fff;
  cursor: pointer;
}

.check:checked {
  background: var(--teal);
  border-color: var(--success);
}

.check:checked::after {
  content: "";
  display: block;
  width: 7px;
  height: 12px;
  margin: 2px auto 0;
  border: solid #06343d;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.photo-drop,
.media-drop {
  border: 1.5px dashed #aac2d4;
  border-radius: 8px;
  padding: 16px;
  background: var(--soft);
}

.photo-drop input,
.media-drop input {
  display: block;
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
}

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

.photo-thumb {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.media-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  color: #fff;
  background: rgba(188, 44, 44, 0.94);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.media-delete:hover {
  background: var(--danger);
}

.media-save {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  color: #fff;
  background: rgba(12, 53, 81, 0.94);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.media-save:hover {
  background: var(--ink);
}

.photo-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.photo-thumb video,
.video-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  background: #081f33;
}

.photo-thumb video {
  object-fit: cover;
}

.video-placeholder {
  display: grid;
  place-items: center;
  padding: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.photo-thumb figcaption {
  overflow: hidden;
  padding: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.media-upload {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.media-upload strong {
  color: var(--navy);
}

.media-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.media-actions .button {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  font-size: 13px;
}

.native-media-input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.media-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  margin-left: 5px;
  border-radius: 999px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.24);
  font-size: 11px;
  font-weight: 900;
}

.media-upload p {
  margin: 4px 0 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.media-grid:empty {
  display: none;
}

.media-status {
  min-height: 22px;
  margin: 0;
  color: var(--success);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.camera-status {
  flex: 1 1 auto;
  align-self: center;
}

.batch-camera-view {
  margin: 14px 16px 0;
  overflow: hidden;
  border-radius: 8px;
  background: #081f33;
}

.batch-camera-view video {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
}

.batch-camera-view.layout-horizontal-split video {
  aspect-ratio: 8 / 5;
}

.batch-camera-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px 0;
}

.batch-camera-strip:empty {
  display: none;
}

.batch-camera-strip img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
}

.media-camera-button {
  width: 100%;
  margin-top: 10px;
}

.app-issue-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: max(16px, var(--safe-top)) max(14px, var(--safe-right)) max(16px, var(--safe-bottom)) max(14px, var(--safe-left));
  background: rgba(3, 21, 34, 0.62);
  backdrop-filter: blur(8px);
}

.app-issue-modal {
  width: min(560px, 100%);
  border: 1px solid rgba(13, 70, 94, 0.18);
  border-radius: 10px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(3, 21, 34, 0.22);
}

.app-issue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.app-issue-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.1;
}

.app-issue-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.app-issue-form label {
  display: grid;
  gap: 6px;
}

.app-issue-form label span {
  color: var(--slate);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-issue-form select,
.app-issue-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.app-issue-form textarea {
  min-height: 132px;
  resize: vertical;
}

.eta-message-modal {
  display: grid;
  gap: 12px;
}

.eta-message-modal .app-issue-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.eta-message-form {
  display: grid;
  gap: 12px;
}

.eta-message-form label {
  display: grid;
  gap: 6px;
}

.eta-message-form label span {
  color: var(--slate);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eta-message-form textarea {
  width: 100%;
  min-height: 150px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.eta-template-row,
.eta-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eta-template-row .button.active {
  border-color: rgba(17, 199, 189, 0.46);
  color: var(--navy);
  background: rgba(17, 199, 189, 0.18);
}

.eta-message-actions {
  justify-content: flex-end;
}

.copy-fallback-modal {
  display: grid;
  gap: 12px;
}

.copy-fallback-modal textarea {
  width: 100%;
  min-height: 160px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

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

.confirm-sheet-modal,
.text-input-sheet-modal {
  display: grid;
  gap: 12px;
}

.confirm-sheet-modal.is-danger,
.text-input-sheet-modal.is-danger {
  border-color: rgba(215, 25, 70, 0.28);
}

.confirm-sheet-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.confirm-sheet-list li {
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--deep);
  background: #fff8e9;
  font-weight: 850;
}

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

.text-input-sheet-modal form,
.text-input-sheet-modal label {
  display: grid;
  gap: 10px;
}

.text-input-sheet-modal label span {
  color: var(--slate);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text-input-sheet-modal textarea {
  width: 100%;
  min-height: 130px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.app-issue-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.app-issue-context span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--soft);
}

.app-issue-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.camera-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 24, 44, 0.78);
}

.camera-modal {
  width: min(1080px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.batch-camera-modal {
  width: min(820px, 100%);
}

.camera-head,
.camera-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.camera-head {
  color: #fff;
  background: var(--navy);
}

.camera-head h2 {
  margin: 0;
}

.camera-toolbar {
  padding: 14px 16px 0;
}

.angle-step {
  margin: 10px 0 0;
  border-radius: 999px;
  padding: 7px 10px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.2);
  font-size: 12px;
  font-weight: 900;
}

.layout-picker-wrap {
  display: grid;
  gap: 7px;
  padding: 12px 16px 0;
}

.layout-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.layout-option {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--navy);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}

.layout-option.is-active {
  border-color: rgba(7, 149, 143, 0.72);
  color: #06343d;
  background: var(--teal);
}

.layout-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.angle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px;
}

.angle-grid.layout-horizontal-split {
  grid-template-columns: minmax(0, 1fr);
  max-width: 780px;
  margin: 0 auto;
}

.angle-grid.single {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
}

.angle-grid.single.layout-horizontal-split {
  grid-template-columns: minmax(0, 1fr);
}

.angle-grid figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.angle-grid figcaption {
  padding: 9px 10px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.angle-grid img,
.angle-grid video {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  background: #081f33;
}

.angle-grid.layout-horizontal-split img,
.angle-grid.layout-horizontal-split video {
  aspect-ratio: 8 / 5;
}

.angle-frame {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: calc(100% - 32px);
  max-width: 960px;
  aspect-ratio: 8 / 5;
  margin: 14px auto;
  overflow: hidden;
  border: 10px solid #fff;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(5, 24, 44, 0.22);
}

.angle-frame.layout-horizontal-split {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  max-width: 640px;
  aspect-ratio: 4 / 5;
}

.angle-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  background: #11c7bd;
  pointer-events: none;
}

.angle-frame.layout-vertical-split::after {
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
}

.angle-frame.layout-horizontal-split::after {
  top: calc(50% - 1px);
  left: 0;
  right: 0;
  height: 2px;
}

.angle-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #081f33;
}

.angle-panel img,
.angle-panel video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.angle-panel figcaption,
.angle-panel-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  border-radius: 999px;
  padding: 5px 8px;
  color: #fff;
  background: rgba(8, 40, 61, 0.78);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.angle-frame-logo {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 50%;
  width: min(210px, 28%);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.36));
  pointer-events: none;
}

.angle-frame.native .native-camera-card {
  justify-items: center;
  align-content: center;
  border: 0;
  border-radius: 0;
  padding: 22px;
  text-align: center;
  background: #eef5f8;
}

.camera-actions {
  border-top: 1px solid var(--line);
}

.native-camera-card {
  display: grid;
  gap: 12px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--soft);
}

.native-camera-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

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

.sop-form aside .actions .button {
  flex: 1 1 132px;
}

.button {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  padding: 0 15px;
  color: #fff;
  background: var(--navy);
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button.primary {
  background: var(--danger);
}

.button.secondary {
  color: var(--navy);
  background: var(--soft);
  border: 1.5px solid var(--line);
}

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

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

.progress-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfeaf2;
}

.progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

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

.log-card {
  padding: 16px;
}

.log-card.is-clickable {
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.log-card.is-clickable:hover,
.log-card.is-clickable:focus-visible {
  border-color: rgba(17, 199, 189, 0.55);
  box-shadow: 0 14px 34px rgba(5, 24, 44, 0.14);
  transform: translateY(-1px);
  outline: none;
}

.log-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.log-head h3 {
  margin: 0;
  color: var(--navy);
}

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

.detail {
  border-radius: 6px;
  padding: 8px;
  background: var(--soft);
}

.detail span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.checked-summary {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.45;
}

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

.field-review-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(17, 199, 189, 0.24);
  border-radius: 8px;
  background: #f4fffd;
}

.field-review-next div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.field-review-next span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.field-review-next strong {
  color: var(--navy);
  font-size: 16px;
}

.field-review-next p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.field-review-next.is-blocked {
  border-color: rgba(180, 35, 24, 0.22);
  background: #fff7f6;
}

.field-review-next.is-blocked span {
  color: #b42318;
}

.field-review-next.is-ready {
  border-color: rgba(12, 147, 71, 0.22);
  background: #f2fff6;
}

.field-review-next.is-ready span {
  color: #0c9347;
}

.review-log-modal {
  width: min(1120px, calc(100vw - 28px));
  max-height: min(880px, calc(100dvh - 24px));
  overflow: auto;
}

.review-log-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.review-log-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  align-items: start;
}

.review-log-main,
.review-log-side {
  display: grid;
  gap: 14px;
}

.review-log-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.review-log-block h3,
.review-log-block h4 {
  margin: 0;
  color: var(--navy);
}

.review-log-block h4 {
  margin-top: 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-billing-handoff {
  display: grid;
  gap: 10px;
  border-color: rgba(17, 199, 189, 0.24);
  background: #f4fffd;
}

.review-billing-handoff.is-ready {
  border-color: rgba(12, 147, 71, 0.24);
  background: #f2fff6;
}

.review-billing-handoff p {
  margin: 0;
}

.review-billing-next {
  display: grid;
  gap: 8px;
}

.review-billing-next span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.review-billing-next strong {
  color: var(--navy);
  font-size: 15px;
}

.review-billing-next p {
  color: var(--muted);
  line-height: 1.45;
}

.review-billing-next.is-blocked span,
.review-billing-handoff.is-blocked .review-billing-next span {
  color: #b42318;
}

.review-billing-next.is-ready span {
  color: #0c9347;
}

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

.review-log-block-head h3,
.review-log-block-head p {
  margin: 0;
}

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

.review-media-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.review-media-tile {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0;
  background: var(--soft);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(5, 24, 44, 0.08);
}

.review-media-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.review-media-tile.is-selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(17, 199, 189, 0.18), 0 12px 26px rgba(5, 24, 44, 0.16);
}

.review-media-order {
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  background: var(--navy);
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.review-media-order:empty {
  display: none;
}

.review-media-label {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  overflow: hidden;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-collage-output {
  min-height: 74px;
}

.review-generated-collage {
  max-width: 640px;
}

.review-note {
  margin: 12px 0 0;
  color: var(--ink);
  line-height: 1.45;
}

.checked-summary.is-open {
  color: #8a4b16;
}

.empty-state {
  padding: 28px;
  text-align: center;
}

.hidden {
  display: none !important;
}

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

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(5, 24, 44, 0.42);
    backdrop-filter: blur(2px);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(302px, calc(100vw - 48px));
    padding-left: max(18px, calc(var(--safe-left) + 14px));
    transform: translateX(-105%);
    transition: transform 0.18s ease;
  }

  .sidebar-mobile-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    padding: max(10px, calc(var(--safe-top) + 8px)) 10px 10px;
    color: #fff;
    background: rgba(8, 40, 61, 0.98);
  }

  .sidebar-mobile-head strong {
    font-size: 13px;
    font-weight: 1000;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sidebar-mobile-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    padding: 0 10px;
    color: #dffefa;
    background: rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 900;
  }

  .sidebar-mobile-close svg {
    width: 16px;
    height: 16px;
  }

  body.nav-open .sidebar {
    transform: translateX(0);
  }

  .menu-button {
    display: inline-grid;
    place-items: center;
  }

  .topbar {
    align-items: center;
  }

  #app {
    padding-bottom: calc(92px + var(--safe-bottom));
  }

  .mobile-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 7px max(8px, var(--safe-right)) calc(7px + var(--safe-bottom)) max(8px, var(--safe-left));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(8, 40, 61, 0.14);
    box-shadow: 0 -14px 36px rgba(5, 24, 44, 0.16);
    backdrop-filter: blur(14px);
  }

  .mobile-tabbar a,
  .mobile-tabbar button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    border: 0;
    border-radius: 8px;
    padding: 5px 3px;
    color: #486476;
    background: transparent;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-tabbar svg {
    width: 20px;
    height: 20px;
  }

  .mobile-tabbar a.active,
  .mobile-tabbar button:active,
  .mobile-tabbar button[aria-expanded="true"] {
    color: #06343d;
    background: rgba(17, 199, 189, 0.18);
  }

  .mobile-tabbar [data-mobile-clock-nav] {
    position: relative;
  }

  .mobile-tabbar [data-mobile-clock-nav].is-clocked-in {
    color: #043a35;
    background: linear-gradient(180deg, rgba(168, 247, 198, 0.92) 0%, rgba(113, 233, 166, 0.8) 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 143, 82, 0.2);
  }

  .mobile-tabbar [data-mobile-clock-nav].is-clocked-in::after {
    content: "";
    position: absolute;
    top: 8px;
    right: calc(50% - 22px);
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #0f8f52;
    box-shadow: 0 0 0 4px rgba(15, 143, 82, 0.14);
  }

  .hero,
  .ops-hero,
  .jobber-home-layout,
  .home-command-bar,
  .manager-dispatch-grid,
  .crew-home-hero,
  .ops-layout,
  .grid.two,
  .grid.three,
  .form-grid,
  .log-details,
  .time-clock-grid,
  .report-toolbar,
  .admin-review-head,
  .admin-review-body,
  .admin-review-footer,
  .revenue-report-grid,
  .revenue-owner-signals,
  .jobber-overview-grid,
  .jobber-insight-grid.two,
  .jobber-insight-grid.three,
  .jobber-insight-grid.four,
  .sales-performance-kpis,
  .sales-performance-body,
  .jobber-revenue-map-shell,
  .jobber-detail-stats,
  .jobber-aging-grid,
  .report-stats,
  .field-activity-stats,
  .crm-toolbar,
  .crm-job-history-metrics,
  .crm-next-action-banner,
  .crm-jobs-next,
  .crm-leads-next,
  .crm-documents-next,
  .crm-job-card,
  .crm-job-main,
  .crm-client-main,
  .client-directory-row,
  .client-profile-hero,
  .client-pillar-handoff,
  .lead-intake-handoff,
  .client-profile-grid,
  .client-profile-layout,
  .client-work-grid,
  .client-communication-grid,
  .quote-client-picker,
  .pricing-client-search,
  .pricing-step-heading,
  .quote-followup-fields,
  .quote-followup-stats,
  .quote-followup-main,
  .quote-followup-checks,
  .quote-followup-edit,
  .quote-public-header,
  .quote-document-top,
  .quote-builder-head,
  .quote-tax-controls,
  .pricing-settings-grid,
  .pricing-shell,
  .pricing-sales-hero,
  .pricing-setup-note,
	  .pricing-service-grid,
	  .pricing-row,
	  .invoice-collection-settings-head,
	  .invoice-collection-instructions,
	  .invoice-payment-summary,
	  .invoice-payment-link,
	  .invoice-payment-form,
	  .invoice-payment-row,
	  .invoice-public-pay-panel,
	  .invoice-public-payment-options,
	  .invoice-public-other-methods,
	  .payment-setup-grid,
  .cloud-copy-row,
  .diagnostic-event-row,
  .crm-note-form,
  .crm-call-logger,
  .crm-call-empty,
  .team-layout,
  .team-member-row,
  .team-readiness-grid,
  .team-rollout-next,
  .team-readiness-item,
  .team-rollout-grid,
  .team-rollout-grid article,
  .payment-summary-grid,
  .payment-collection-panel.is-clear,
  .payment-collection-card,
  .payment-card,
  .payments-toolbar,
  .job-source-layout,
  .job-source-status-grid,
  .job-schedule-grid,
  .job-notes-grid,
  .job-quality-grid,
  .job-money-grid,
  .crm-message-form,
  .client-call-history-row,
  .message-status-strip,
  .message-inbox-layout,
  .message-conversation-body,
  .message-conversation-head,
  .message-conversation-title,
  .message-thread-card,
  .message-thread-main,
  .message-quick-form,
  .message-composer,
  .field-cockpit-grid,
    .field-cockpit-action,
    .manager-job-row,
    .command-hero,
    .command-hero-stats,
    .command-replacement-strip,
    .command-pillar-jump,
    .command-glance-card-grid,
    .command-glance-pillar-strip,
    .command-priority-list,
    .command-daily-grid,
    .command-cadence-grid,
    .command-system-map-grid,
    .command-gap-grid,
    .command-brief-stat-grid,
    .command-next-panel,
    .command-next-list,
    .command-pillar-grid,
    .command-metric-grid,
    .command-cutover-grid,
    .command-automation-summary,
    .command-automation-plan-grid,
    .command-automation-dependency-grid,
    .command-automation-guardrails,
    .command-automation-evidence-stats,
    .command-automation-preview-row,
    .command-build-grid,
    .ops-followups-hero,
    .ops-followups-next,
    .ops-followups-stats,
    .ops-followup-card,
    .inventory-add-form,
    .jobber-sync-next,
    .sync-hero,
    .sync-next-move,
    .sync-health-grid,
    .sync-center-grid,
    .sync-stat-grid,
    .sync-automation-card,
    .sync-rules-grid,
    .transition-readiness-summary,
    .transition-retirement-grid,
    .cloud-launch-next,
    .replacement-roadmap-grid,
    .native-schedule-status-grid,
    .native-schedule-dispatch,
    .dispatch-readiness-grid,
    .dispatch-day-grid,
    .messaging-replacement-next,
	    .messaging-replacement-safety-grid,
	    .messaging-provider-setup-hero,
	    .messaging-provider-setup-grid,
	    .messaging-provider-setup-split,
	    .messaging-provider-setup-guards,
	    .phone-system-owner-head,
	    .phone-setup-hero,
	    .phone-setup-current,
	    .phone-setup-stepper,
	    .phone-setup-action-grid,
    .phone-company-head,
    .phone-company-form,
    .phone-company-boundary,
    .phone-company-subaccount-form,
    .phone-system-hero,
    .phone-system-metrics,
    .phone-system-reference-row,
    .phone-system-gateway,
    .phone-system-collapsible > summary,
    .messaging-a2p-proof,
	    .messaging-a2p-checks,
	    .messaging-a2p-copy-grid,
	    .phone-a2p-mini-steps,
	    .phone-a2p-owner-form,
	    .twilio-setup-status,
	    .twilio-setup-grid,
	    .twilio-inline-form,
	    .twilio-confirm-form,
	    .twilio-profile-form,
	    .messaging-provider-test,
		    .messaging-test-lab-callbacks,
		    .messaging-test-lab-rails,
		    .messaging-test-lab-events,
		    .messaging-phone-route-grid,
		    .messaging-provider-check-grid,
	    .phone-test-actions,
	    .messaging-port-plan-list,
    .messaging-rehearsal-step-grid,
    .messaging-port-plan-metrics,
    .messaging-rehearsal-metrics,
    .messaging-cutover-steps,
    .import-detail-layout,
    .crm-textarea-grid,
    .crm-summary-grid,
    .dashboard-job-row,
    .schedule-card-main,
    .schedule-actions {
    grid-template-columns: 1fr;
  }

  .jobber-sync-next-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .jobber-sync-next-action .button {
    width: 100%;
  }

  .ops-followups-next-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .ops-followups-next-action .button {
    width: 100%;
  }

  .sync-next-move-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .sync-next-move-action .button {
    width: 100%;
  }

  .transition-lane {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .transition-lane-status {
    grid-column: 1 / -1;
  }

  .command-panel-heading {
    flex-direction: column;
  }

  .command-panel-heading > strong {
    width: fit-content;
  }

  .command-priority-head,
  .command-glance-head,
  .command-handoff-head {
    flex-direction: column;
  }

  .command-priority-head em {
    max-width: none;
    text-align: left;
  }

  .command-center-page > .section-heading {
    gap: 10px;
    padding: 12px;
  }

  .command-center-page > .section-heading h2 {
    font-size: 24px;
    line-height: 1.1;
  }

  .command-center-page > .section-heading p {
    display: none;
  }

  .command-center-page .section-actions {
    width: 100%;
  }

  .command-center-page .section-actions .button {
    flex: 1 1 140px;
    min-height: 38px;
  }

  .command-hero {
    gap: 10px;
    padding: 12px;
  }

  .command-today-glance + .command-hero {
    border-left-width: 0;
    border-top: 4px solid var(--teal);
    padding: 10px 12px;
  }

  .command-today-glance + .command-hero.needs-work {
    border-top-color: #f59e0b;
  }

  .command-today-glance + .command-hero.ready {
    border-top-color: var(--green);
  }

  .command-hero h3 {
    font-size: 18px;
  }

  .command-hero p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .command-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .command-hero-stats article {
    padding: 7px 6px;
  }

  .command-hero-stats span {
    font-size: 8px;
    letter-spacing: 0.04em;
  }

  .command-hero-stats strong {
    font-size: 15px;
  }

  .command-priority-rail {
    padding: 12px;
  }

  .command-today-glance {
    gap: 9px;
    padding: 12px;
  }

  .command-glance-head .button {
    width: 100%;
  }

  .command-glance-head strong {
    font-size: 16px;
  }

  .command-glance-head em {
    display: -webkit-box;
    overflow: hidden;
    max-width: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .command-glance-card {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: auto;
    padding: 8px 6px;
    text-align: center;
  }

  .command-glance-card svg {
    width: 17px;
    height: 17px;
  }

  .command-glance-card small {
    font-size: 8px;
    letter-spacing: 0.04em;
  }

  .command-glance-card strong {
    font-size: 12px;
    line-height: 1.15;
    -webkit-line-clamp: 3;
  }

  .command-glance-card em {
    display: none;
  }

  .command-glance-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .command-glance-pillar-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .command-glance-pillar {
    border-left-width: 0;
    border-top: 3px solid var(--teal);
    padding: 8px 6px;
    text-align: center;
  }

  .command-glance-pillar.urgent {
    border-top-color: #f59e0b;
  }

  .command-glance-pillar.quiet {
    border-top-color: var(--green);
  }

  .command-glance-pillar span {
    font-size: 8px;
    letter-spacing: 0.04em;
  }

  .command-glance-pillar strong {
    display: block;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .command-glance-pillar em {
    display: none;
  }

  .command-priority-item {
    min-height: auto;
  }

  .command-priority-item em {
    display: block;
    max-height: 2.7em;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

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

  .command-status-pill {
    padding: 9px;
  }

  .command-status-pill strong {
    font-size: 15px;
  }

  .command-pillar-jump {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .command-pillar-jump-link {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 9px 6px;
    text-align: center;
  }

  .command-pillar-jump-link svg {
    grid-row: auto;
  }

  .command-pillar-jump-link em {
    display: none;
  }

  .command-handoff-head .button {
    width: 100%;
  }

  .command-handoff-lines span {
    white-space: normal;
  }

  .job-source-rail {
    position: static;
  }

  .job-handoff-next .button {
    width: 100%;
  }

  .job-line-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .job-contact-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-contact-actions .button {
    width: 100%;
  }

  .role-focus-head,
  .manager-morning-head,
  .manager-dispatch-head,
  .manager-watchlist,
  .manager-crew-capacity,
  .field-cockpit-head,
  .field-cockpit-loadout,
  .team-auth-head,
  .team-readiness-head,
  .team-rollout-message,
  .crm-next-action-buttons {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-next-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .team-readiness-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .team-readiness-actions > span {
    margin-right: 0;
  }

  .team-readiness-actions .button {
    width: 100%;
  }

  .team-rollout-next-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .team-rollout-next-action .button {
    width: 100%;
  }

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

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

  .message-context-stats,
  .message-context-actions {
    grid-template-columns: 1fr;
  }

  .message-context-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .message-inbox-layout.has-active-thread .message-inbox-list,
  .message-inbox-layout.has-no-active-thread .message-conversation-panel {
    display: none;
  }

  .message-back-button {
    display: inline-flex;
  }

  .message-thread-actions,
  .message-conversation-actions {
    justify-content: stretch;
  }

  .message-thread-actions .button,
  .message-conversation-actions .button,
  .message-quick-form .button,
  .message-composer .button {
    width: 100%;
  }

  .message-quick-form,
  .message-composer {
    align-items: stretch;
  }

  .crm-call-empty {
    align-items: stretch;
    flex-direction: column;
  }

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

  .message-inbox-list,
  .message-conversation {
    min-height: auto;
  }

  .message-inbox-list {
    max-height: min(68dvh, 640px);
  }

  .message-conversation {
    height: auto;
  }

  .message-bubble-list {
    max-height: min(44dvh, 420px);
  }

  .message-context-panel {
    max-height: none;
    overflow: visible;
  }

  .message-bubble {
    max-width: 92%;
  }

  .guide-stepper {
    grid-template-columns: repeat(5, minmax(128px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .schedule-time,
  .crm-job-time,
  .dashboard-job-time {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 10px;
  }

  .ops-focus-grid,
  .role-focus-grid,
  .field-cockpit-chips,
  .jobber-home-workflow,
  .home-urgent-strip,
  .ops-stats,
  .workflow-stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .today-action-card {
    grid-template-columns: 28px 36px minmax(0, 1fr);
    align-items: start;
  }

  .today-action-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .today-action-summary-metrics {
    justify-content: flex-start;
  }

  .today-action-cta {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .today-command-section .section-heading {
    padding: 10px 12px;
  }

  .today-command-section .section-heading p {
    display: none;
  }

  .today-command-section .section-body {
    padding: 10px;
  }

  .today-action-summary {
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px;
  }

  .today-action-summary strong {
    font-size: 15px;
  }

  .today-action-summary-metrics {
    gap: 5px;
  }

  .today-action-summary-metrics span {
    padding: 5px 7px;
    font-size: 10px;
  }

  .today-action-list {
    gap: 8px;
  }

  .today-action-card {
    gap: 8px;
    padding: 10px;
  }

  .today-action-icon {
    width: 34px;
    height: 34px;
  }

  .today-action-copy strong {
    font-size: 15px;
  }

  .today-action-copy small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .today-action-foot {
    margin-top: 8px;
    padding: 8px;
  }

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

  .jobber-appointment-revenue {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .manager-quick-create {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manager-quick-create > span {
    grid-column: 1 / -1;
  }

  .manager-job-meta {
    justify-content: flex-start;
  }

  .manager-job-time {
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
  }

  .import-counts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .raw-type-grid,
  .verification-counts,
  .verification-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .schedule-timegrid-week.schedule-week-board {
    display: grid;
    grid-template-columns: 54px repeat(7, minmax(132px, 1fr));
    min-width: 980px;
    max-height: calc(100dvh - 250px);
  }

  .schedule-timegrid-week + .schedule-mobile-summary {
    display: none;
  }

  .schedule-resource-board {
    --schedule-resource-name-width: 118px;
    max-height: calc(100dvh - 240px);
  }

  .schedule-timegrid-day {
    display: grid;
    grid-template-columns: 54px minmax(240px, 1fr);
    min-width: 100%;
  }

  .schedule-resource-corner {
    padding: 9px;
  }

  .schedule-resource-corner strong,
  .schedule-resource-name strong {
    font-size: 12px;
  }

  .schedule-resource-corner span,
  .schedule-resource-name span,
  .schedule-resource-hours span {
    font-size: 10px;
  }

  .schedule-resource-job {
    padding: 6px;
  }

  .schedule-resource-job strong {
    font-size: 11px;
  }

  .schedule-resource-job time,
  .schedule-resource-job small {
    font-size: 9px;
  }

  .schedule-timegrid-corner {
    font-size: 10px;
  }

  .schedule-time-axis span {
    right: 6px;
    font-size: 10px;
  }

  .schedule-timegrid-column {
    min-width: 240px;
  }

  .schedule-time-job {
    padding: 6px;
  }

  .schedule-time-job-actions .button {
    min-height: 30px;
  }

  .schedule-month-calendar {
    display: none;
  }

  .schedule-mobile-summary {
    display: grid;
  }

  .schedule-map-layout {
    grid-template-columns: 1fr;
  }

  .schedule-map-jobs {
    position: static;
    order: 2;
    max-height: none;
  }

  .schedule-map-canvas {
    order: 1;
    min-height: min(64vh, 560px);
  }

  .schedule-dispatch-layout {
    grid-template-columns: 1fr;
  }

  .schedule-dispatch-map {
    position: static;
    order: -1;
  }

  .schedule-dispatch-map .schedule-map-canvas {
    min-height: min(56vh, 460px);
  }

  .schedule-unscheduled-strip {
    order: 3;
  }

  .invoice-payment-link {
    flex-direction: column;
    align-items: stretch;
  }

  .payment-setup-head {
    flex-direction: column;
  }

  .payment-collection-head {
    flex-direction: column;
  }

  .payment-collection-actions {
    justify-content: stretch;
  }

  .payment-collection-actions .button {
    flex: 1 1 118px;
  }

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

  .admin-review-panel {
    padding: 12px;
  }

  .admin-review-week-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    min-width: 0;
    width: 100%;
  }

  .admin-review-status {
    justify-content: center;
  }

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

  .admin-review-action,
  .admin-review-row {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .revenue-signal-grid,
  .revenue-small-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jobber-overview-metric {
    border-left: 0;
    border-top: 1px solid #d7dde2;
    padding: 12px 0 0;
  }

  .jobber-overview-metric:first-child {
    border-top: 0;
  }

  .jobber-card-head {
    display: grid;
  }

  .jobber-card-actions {
    justify-content: stretch;
    min-width: 0;
    width: 100%;
  }

  .jobber-range-control {
    justify-items: stretch;
    width: 100%;
  }

  .jobber-range-control label span {
    text-align: left;
  }

  .jobber-custom-range {
    grid-template-columns: 1fr;
  }

  .jobber-lead-card .jobber-donut-wrap {
    grid-template-columns: 1fr;
    min-height: 260px;
  }

  .jobber-revenue-chart {
    grid-template-columns: 40px minmax(620px, 1fr);
  }

  .jobber-month-chart {
    min-width: 620px;
  }

  .map-job-card {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .map-job-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .schedule-contact-actions,
  .schedule-secondary-actions,
  .crm-jobs-next-action,
  .crm-leads-next-action,
  .crm-documents-next-action,
  .crm-job-actions,
  .crm-detail-actions,
  .client-profile-actions,
  .dashboard-job-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crm-jobs-next-action,
  .crm-leads-next-action,
  .crm-documents-next-action,
  .crm-job-actions,
  .crm-detail-actions,
  .client-profile-actions,
  .dashboard-job-actions {
    display: grid;
    max-width: none;
    justify-content: stretch;
  }

  .crm-jobs-next-action,
  .crm-leads-next-action,
  .crm-documents-next-action {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .crm-jobs-next-action .button,
  .crm-leads-next-action .button,
  .crm-documents-next-action .button {
    width: 100%;
  }

  .crm-client-row {
    grid-template-columns: 1fr;
  }

  .client-row-counts {
    justify-content: flex-start;
    max-width: none;
  }

  .client-row-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

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

  .hero img {
    max-width: 260px;
  }

  .pricing-summary-panel {
    position: static;
  }

  .pricing-next-move {
    grid-template-columns: 1fr;
  }

  .pricing-next-move-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .pricing-next-move-action .button {
    width: 100%;
  }

  .pricing-hero-total {
    min-width: 0;
    text-align: left;
  }

  .client-pillar-handoff-lanes {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-pillar-handoff-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    min-width: 0;
  }

  .client-pillar-handoff-action .button {
    width: 100%;
  }

  .client-pillar-lane strong,
  .client-pillar-lane em {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .lead-intake-handoff-step,
  .quote-sales-handoff-step {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .lead-intake-handoff-step small,
  .quote-sales-handoff-step small {
    grid-column: 2;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .quote-public-actions,
  .quote-public-footer,
  .quote-builder-actions,
  .quote-followup-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-public-actions .button,
  .quote-public-footer .button,
  .quote-followup-actions .button {
    width: 100%;
  }

  .quote-public-card {
    padding: 24px;
  }

  .quote-number-panel {
    justify-self: stretch;
  }

  .quote-product-table {
    overflow-x: auto;
  }

  .quote-line-editor {
    overflow-x: visible;
  }

  .quote-line-head {
    display: none;
  }

  .quote-line-row {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .quote-line-row strong {
    justify-self: start;
    text-align: left;
  }

  .quote-line-taxable {
    grid-column: auto;
  }

  .quote-line-row .icon-button {
    justify-self: start;
  }

  .quote-product-head,
  .quote-product-row {
    min-width: 820px;
  }

  .team-form-panel {
    position: static;
  }

  .team-permissions-head {
    align-items: stretch;
    flex-direction: column;
  }

  .team-audit-row {
    grid-template-columns: 1fr;
  }

  .team-audit-row > span {
    justify-self: start;
    min-height: 28px;
    padding: 0 8px;
  }

  .team-hero {
    grid-template-columns: 1fr;
  }

  .team-auth-grid {
    grid-template-columns: 1fr;
  }

  .team-member-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .team-member-actions .button,
  .team-form-actions .button {
    width: 100%;
  }

  .team-list-tools {
    grid-template-columns: 1fr;
  }

  .team-list-count {
    justify-items: start;
  }
}

@media (max-width: 1100px) {
  .quote-workflow-layout {
    grid-template-columns: 1fr;
  }

  .quote-workflow-rail {
    position: static;
  }

  .quote-setup-grid,
  .quote-notes-workflow,
  .quote-client-search-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .schedule-dispatch-head {
    padding: 9px 10px;
  }

  .schedule-dispatch-head span {
    display: none;
  }

  .schedule-dispatch-map .schedule-map-canvas {
    min-height: 52vh;
  }

  .schedule-create-sheet {
    align-items: end;
    justify-items: stretch;
    padding: 0;
    background: rgba(5, 24, 44, 0.38);
  }

  .schedule-create-card {
    width: 100%;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 14px 14px 0 0;
    padding: 18px max(16px, var(--safe-right)) calc(18px + var(--safe-bottom)) max(16px, var(--safe-left));
  }

  .quote-workflow-header .crm-detail-actions,
  .quote-header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-step-heading {
    align-items: flex-start;
  }

  .quote-step-heading p {
    font-size: 12px;
  }

  .quote-client-results {
    grid-template-columns: 1fr;
  }

  .quote-client-option {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .quote-client-option-tag {
    grid-column: 2;
    justify-self: start;
  }

  .quote-selected-client {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .quote-selected-client .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .quote-followup-mini-status,
  .quote-followup-fields {
    grid-template-columns: 1fr;
  }

  .quote-side-total strong {
    font-size: 30px;
  }
}

@media (max-width: 760px) {
  .quote-workflow-form {
    gap: 12px;
  }

  .quote-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(86px, 0.55fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .quote-header-actions > .button,
  .quote-more-actions summary {
    width: 100%;
    min-height: 44px;
  }

  .quote-more-actions > div {
    right: 0;
    width: min(220px, calc(100vw - 32px));
  }

  .quote-step-heading {
    min-height: 46px;
  }

  .quote-client-search-row {
    gap: 8px;
  }

  .quote-client-results {
    max-height: 190px;
  }

  .quote-builder {
    padding: 10px;
  }

  .quote-builder-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .quote-builder-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .quote-builder-actions .button {
    width: 100%;
    padding-inline: 8px;
  }

  .quote-service-catalog-head {
    grid-template-columns: 1fr;
  }

  .quote-service-catalog-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 250px;
  }

  .quote-line-editor {
    overflow-x: visible;
  }

  .quote-line-head {
    display: none;
  }

  .quote-line-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.45fr) 88px;
    grid-template-areas:
      "kind total remove"
      "name name name"
      "desc desc desc"
      "qty price taxable";
    min-width: 0;
    gap: 8px;
    padding: 10px;
  }

  .quote-line-row [data-line-kind] {
    grid-area: kind;
  }

  .quote-line-row [data-line-name] {
    grid-area: name;
  }

  .quote-line-row [data-line-description] {
    grid-area: desc;
  }

  .quote-line-row [data-line-quantity] {
    grid-area: qty;
  }

  .quote-line-row [data-line-price] {
    grid-area: price;
  }

  .quote-line-row [data-line-total] {
    grid-area: total;
    justify-self: end;
    text-align: right;
  }

  .quote-line-actions {
    grid-area: remove;
    justify-self: end;
  }

  .quote-line-row textarea {
    min-height: 86px;
  }

  .quote-line-taxable {
    grid-area: taxable;
    grid-column: auto;
    justify-self: end;
  }

  .quote-builder-summary {
    justify-self: stretch;
    width: 100%;
  }

  .quote-side-panel {
    box-shadow: none;
  }

  .quote-mobile-action-bar {
    position: sticky;
    bottom: calc(76px + var(--safe-bottom));
    z-index: 35;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(17, 199, 189, 0.34);
    border-radius: 10px;
    padding: 10px max(12px, var(--safe-right)) 10px max(12px, var(--safe-left));
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(5, 24, 44, 0.16);
    backdrop-filter: blur(10px);
  }

  .quote-mobile-action-bar strong {
    min-width: 0;
    color: var(--navy);
    font-size: 22px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .quote-mobile-action-bar .button {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .quote-header-actions {
    grid-template-columns: 1fr 82px;
  }

  .quote-header-actions > .button.primary {
    grid-column: 1 / -1;
  }

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

  .quote-line-row {
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-areas:
      "kind remove"
      "name name"
      "desc desc"
      "qty price"
      "taxable total";
  }

  .quote-line-row [data-line-total] {
    align-self: center;
  }
}

@media print {
  body {
    background: #fff !important;
  }

  .sidebar,
  .topbar,
  .mobile-tabbar,
  .quote-public-actions,
  .quote-public-footer {
    display: none !important;
  }

  .app-shell,
  .workspace,
  #app {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .quote-public-shell {
    max-width: none;
  }

  .quote-public-card {
    min-height: 0;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}

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

  .pricing-summary-panel {
    position: static;
  }
}

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

  .workspace,
  .topbar,
  #app {
    max-width: 100vw;
  }

  .workspace {
    overflow-x: hidden;
  }

  #app {
    padding: 12px max(12px, var(--safe-right)) calc(92px + var(--safe-bottom)) max(12px, var(--safe-left));
  }

  .topbar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    justify-content: flex-start;
    padding: max(14px, calc(var(--safe-top) + 8px)) max(12px, var(--safe-right)) 12px max(12px, var(--safe-left));
  }

  .topbar > div:not(.topbar-actions) {
    min-width: 0;
  }

  .status-pill:not(.clock-status-pill) {
    display: none;
  }

  .topbar-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    margin-left: 0;
    gap: 6px;
  }

  .topbar-actions > *,
  .create-menu-wrap {
    min-width: 0;
  }

  .global-search {
    grid-column: 1 / -1;
    order: 3;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .global-search input,
  .field input,
  .field textarea,
  .field select,
  .login-form input,
  .quote-line-row input,
  .quote-line-row textarea,
  .quote-line-row select,
  .jobber-range-control select,
  .jobber-range-control input {
    font-size: 16px;
  }

  .role-focus-grid,
  .manager-pillar-grid,
  .crm-next-action-buttons {
    grid-template-columns: 1fr;
  }

  .role-focus-card {
    min-height: 0;
  }

  .jobber-home-header {
    min-height: 0;
  }

  .jobber-home-header h1 {
    font-size: 27px;
  }

  .jobber-home-header p {
    font-size: 13px;
  }

  .manager-pillar-card p {
    min-height: 0;
  }

  .manager-pillar-metrics {
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  }

  .manager-quick-create {
    gap: 7px;
  }

  .manager-quick-create a {
    min-height: 42px;
    padding: 8px 9px;
    font-size: 12px;
  }

  .manager-quick-create a strong {
    font-size: 12px;
  }

  .manager-dispatch-head .section-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .manager-job-row {
    grid-template-columns: 1fr;
  }

  .manager-job-main strong,
  .manager-job-main em,
  .manager-mini-row strong,
  .manager-mini-row em {
    white-space: normal;
  }

  .manager-mini-row {
    align-items: flex-start;
  }

  .field-cockpit-chips {
    grid-template-columns: 1fr;
  }

  .field-cockpit-action .button {
    width: 100%;
  }

  .topbar-actions {
    order: 4;
  }

  body[data-role="technician"] .global-search,
  body[data-role="crew_lead"] .global-search {
    display: none;
  }

  body[data-role="technician"] .topbar-actions,
  body[data-role="crew_lead"] .topbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-actions .clock-status-pill {
    display: none;
  }

  .create-button {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .create-button-icon {
    width: 16px;
    height: 16px;
    font-size: 14px;
  }

  .create-button-icon svg {
    width: 13px;
    height: 13px;
  }

  .jobsite-guide .section-heading {
    display: grid;
    gap: 10px;
  }

  .jobsite-sop-form .hero {
    padding: 16px;
  }

  .jobsite-sop-form .hero h2 {
    font-size: 25px;
  }

  .jobsite-sop-form .hero img {
    width: 108px;
  }

  .jobsite-quick-toolbar,
  .jobsite-launcher-next,
  .jobsite-quick-card {
    grid-template-columns: 1fr;
  }

  .jobsite-launcher-next-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .jobsite-launcher-next-action .button {
    width: 100%;
  }

  .jobsite-start-options {
    grid-template-columns: 1fr;
  }

  .jobsite-quick-time {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 10px;
  }

  .jobsite-quick-card .button {
    width: 100%;
  }

  .guide-stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }

  .guide-step-button {
    min-width: 0;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 8px 4px;
    text-align: center;
    scroll-snap-align: unset;
  }

  .guide-step-button strong,
  .guide-step-button em {
    display: none;
  }

  .guide-step-button span {
    width: 28px;
    height: 28px;
  }

  .guided-phase-head {
    grid-template-columns: 1fr;
  }

  .guided-phase-head strong {
    justify-self: start;
  }

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

  .create-menu {
    left: 0;
    right: auto;
    width: min(300px, calc(100vw - 24px));
  }

  .create-menu-item {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 9px;
  }

  .create-icon {
    width: 31px;
    height: 31px;
  }

  .clock-status-pill {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 7px 8px;
    font-size: 9px;
  }

  .logout-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 7px 8px;
    font-size: 10px;
  }

  #page-title {
    font-size: 22px;
  }

  .hero {
    padding: 22px;
  }

  .hero h2 {
    font-size: 34px;
  }

  .ops-hero {
    padding: 16px;
  }

  .ops-hero h2 {
    font-size: 28px;
  }

  .home-command-bar,
  .crew-home-hero {
    gap: 12px;
    padding: 14px;
  }

  .field-command-center {
    gap: 10px;
  }

  .field-command-center .dashboard-status {
    margin-top: -4px;
    font-size: 12px;
    border-radius: 8px;
  }

  .field-sync-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .field-sync-panel > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .field-sync-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-sync-item .button {
    width: 100%;
  }

  .global-network-banner,
  .global-action-banner {
    top: 66px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    min-height: 0;
    padding: 9px max(14px, calc(var(--safe-right) + 12px)) 9px max(14px, calc(var(--safe-left) + 12px));
  }

  .global-network-banner:not([hidden]) + .global-action-banner:not([hidden]) {
    top: 124px;
  }

  .global-network-copy {
    display: grid;
    gap: 2px;
  }

  .global-action-copy {
    gap: 2px;
  }

  .global-network-copy span,
  .global-action-copy span {
    font-size: 11px;
  }

  .global-network-banner .button,
  .global-action-buttons {
    grid-column: 1 / -1;
    width: 100%;
  }

  .global-action-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .crew-home-hero {
    grid-template-columns: 1fr;
  }

  .crew-home-side {
    gap: 8px;
  }

  .crew-home-hero .ops-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crew-home-hero .ops-actions .button {
    min-height: 44px;
    padding-inline: 8px;
  }

  .field-cockpit-panel {
    gap: 10px;
    padding: 12px;
  }

  .field-cockpit-head {
    align-items: flex-start;
  }

  .field-cockpit-head em {
    white-space: normal;
    text-align: right;
  }

  .field-cockpit-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .field-cockpit-action {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
  }

  .field-cockpit-action .button {
    grid-column: 1 / -1;
  }

  .field-cockpit-icon {
    width: 36px;
    height: 36px;
  }

  .field-cockpit-icon svg {
    width: 20px;
    height: 20px;
  }

  .field-cockpit-loadout {
    display: grid;
    gap: 10px;
  }

  .field-tomorrow-prep {
    grid-template-columns: 1fr;
  }

  .field-tomorrow-prep .button {
    width: 100%;
  }

  .field-cockpit-loadout .button,
  .field-assigned-jobs .section-heading .button {
    width: 100%;
  }

  .field-next-stop {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
  }

  .field-next-stop-icon {
    width: 36px;
    height: 36px;
  }

  .field-next-stop-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .field-next-stop-actions .button.primary {
    grid-column: 1 / -1;
  }

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

  .field-next-actions .section-heading,
  .field-assigned-jobs .section-heading {
    gap: 10px;
  }

  .jobber-home-header h1 {
    font-size: 26px;
  }

  .jobber-home-header h3 {
    font-size: 14px;
  }

  .jobber-home-workflow,
  .jobber-appointment-revenue {
    grid-template-columns: 1fr;
  }

  .jobber-workflow-primary strong {
    font-size: 28px;
  }

  .jobber-appointments-head {
    align-items: stretch;
    flex-direction: column;
  }

  .jobber-appointment-columns {
    display: none;
  }

  .jobber-appointment-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .jobber-assignee-stack {
    min-height: 28px;
  }

  .jobber-performance-table div {
    grid-template-columns: 1fr auto;
  }

  .jobber-performance-table em:last-child {
    display: none;
  }

  .home-command-bar h2,
  .crew-home-hero h2 {
    font-size: 25px;
  }

  .home-command-bar p,
  .crew-home-hero p {
    font-size: 13px;
  }

  .home-urgent-strip {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-urgent-strip .ops-focus-card {
    min-height: 88px;
  }

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

  .login-panel {
    width: 100%;
    max-width: calc(100vw - 24px);
    padding: 20px;
  }

  .password-input-row {
    gap: 6px;
  }

  .password-input-row input {
    width: 0;
  }

  .password-toggle {
    flex-basis: 54px;
    min-width: 0;
    padding: 0 6px;
    font-size: 12px;
  }

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

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

  .import-counts {
    grid-template-columns: 1fr 1fr;
  }

  .import-live-status,
  .import-mini-row {
    align-items: flex-start;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .raw-type-grid,
  .verification-counts,
  .verification-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ops-stat {
    min-height: 98px;
    padding: 11px;
  }

  .ops-stat strong {
    font-size: 25px;
  }

  .workflow-head {
    align-items: stretch;
    flex-direction: column;
  }

  .workflow-stage-grid {
    grid-template-columns: 1fr;
  }

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

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .section-heading .actions .button {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .section-body {
    padding: 14px;
  }

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

  .schedule-view {
    width: 100%;
    max-width: calc(100vw - 24px);
    overflow: hidden;
  }

  .schedule-view > .section-heading {
    display: none;
  }

  .schedule-view .section-body {
    gap: 9px;
    padding: 10px;
  }

  .schedule-view * {
    min-width: 0;
  }

  .schedule-control-panel {
    position: static;
    gap: 7px;
    margin: 0;
    border: 1px solid rgba(23, 59, 90, 0.1);
    border-radius: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
  }

  .schedule-control-top,
  .schedule-filter-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .schedule-toolbar,
  .schedule-display-toggle {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 6px;
  }

  .schedule-range,
  .schedule-display {
    flex: 1 1 0;
    max-width: 100%;
    overflow: hidden;
    min-height: 40px;
    padding: 0 6px;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-week-strip,
  .mobile-month-grid {
    max-width: 100%;
    gap: 4px;
  }

  .mobile-week-strip {
    display: flex;
  }

  .mobile-day-chip {
    flex: 1 1 0;
    padding: 6px 2px;
  }

  .mobile-day-chip strong,
  .mobile-month-cell strong {
    font-size: 11px;
  }

  .mobile-day-chip span {
    font-size: 9px;
  }

  .schedule-nav {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    max-width: 100%;
    gap: 6px;
  }

  .schedule-arrow,
  .schedule-current {
    min-height: 42px;
  }

  .schedule-arrow {
    width: 40px;
    min-width: 40px;
    font-size: 30px;
  }

  .schedule-current {
    padding: 0 8px;
    font-size: 14px;
  }

  .schedule-current small {
    font-size: 9px;
  }

  .schedule-control-panel [data-schedule-message] {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .schedule-timegrid-week.schedule-week-board {
    display: none;
  }

  .schedule-timegrid-week + .schedule-mobile-summary {
    display: grid;
  }

  .schedule-card {
    padding: 12px;
  }

  .schedule-start-action {
    order: -1;
    min-height: 46px;
    font-size: 14px;
  }

  .schedule-contact-actions {
    order: 0;
  }

  .schedule-secondary-actions {
    order: 1;
  }

  .task-row {
    padding: 15px 12px;
  }

  .schedule-map-canvas {
    min-height: clamp(390px, 62vh, 560px);
    max-height: none;
  }

  .schedule-map-layout {
    gap: 8px;
  }

  .schedule-map-legend {
    gap: 6px;
  }

  .report-map-canvas {
    min-height: 380px;
    max-height: 62vh;
  }

  .jobber-revenue-map-canvas {
    min-height: 380px;
    max-height: 62vh;
  }

  .jobber-revenue-map-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .revenue-map-legend,
  .revenue-map-areas {
    grid-column: 1 / -1;
  }

  .report-toolbar,
  .revenue-report-panel,
  .revenue-chart-card,
  .revenue-table-wrap,
  .revenue-open-wrap {
    min-width: 0;
    max-width: 100%;
  }

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

  .revenue-kpis {
    gap: 8px;
  }

  .revenue-kpi {
    padding: 11px;
  }

  .revenue-kpi strong {
    font-size: 22px;
  }

  .revenue-chart-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .revenue-legend {
    justify-content: start;
  }

  .revenue-table-wrap {
    overflow-x: auto;
  }

  .revenue-table {
    min-width: 860px;
  }

  .revenue-chart-scroll {
    grid-template-columns: 46px minmax(740px, 1fr);
  }

  .revenue-signal-grid,
  .revenue-small-metrics {
    grid-template-columns: 1fr;
  }

  .revenue-small-metrics span {
    align-items: center;
  }

  .report-time-head,
  .field-activity-head,
  .time-entry-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-map-jobs {
    padding-bottom: 8px;
  }

  .schedule-contact-actions,
  .schedule-secondary-actions,
  .map-job-actions,
  .crm-job-actions,
  .crm-detail-actions,
  .client-row-actions,
  .client-profile-actions,
  .crm-toolbar-actions {
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  }

  .crm-title-row,
  .crm-results-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .crm-toolbar-actions {
    display: grid;
  }

  .crm-client-main {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .client-avatar {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  .client-row-counts {
    grid-column: 1 / -1;
  }

  .client-row-counts span {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }

  .client-directory-summary {
    justify-content: flex-start;
    max-width: none;
  }

  .client-profile-rail {
    position: static;
  }

  .client-profile-hero {
    padding: 14px;
  }

  .client-profile-title {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
  }

  .client-avatar.large {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

  .client-profile-title h2 {
    font-size: 24px;
  }

  .client-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .client-stat {
    padding: 10px;
  }

  .client-stat strong {
    font-size: 22px;
  }

  .client-action-grid,
  .client-property-card,
  .quote-client-picker,
  .pricing-client-search,
  .pricing-window-main,
  .pricing-row,
  .pricing-count-grid,
  .pricing-rate-row,
  .client-activity-row,
  .client-linked-row {
    grid-template-columns: 1fr;
  }

  .pricing-view,
  .pricing-shell,
  .pricing-calculator,
  .pricing-service-grid,
  .pricing-service-card,
  .pricing-service-body {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .pricing-sales-hero {
    display: none;
  }

  .pricing-customer-step {
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
  }

  .pricing-step-heading {
    gap: 6px;
  }

  .pricing-step-heading > span {
    min-width: 0;
    justify-self: start;
    padding: 6px 8px;
  }

  .pricing-step-heading p {
    display: none;
  }

  .pricing-client-results {
    grid-template-columns: 1fr;
    max-height: 250px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pricing-client-result {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .pricing-client-result small {
    grid-column: 2;
    justify-self: start;
  }

  .pricing-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
  }

  .pricing-service-card:not(.is-disabled) {
    order: -1;
    grid-column: 1 / -1;
  }

  .pricing-service-card.is-disabled {
    gap: 7px;
    padding: 8px;
  }

  .pricing-service-card.is-disabled header {
    min-height: 0;
    justify-items: center;
    gap: 7px;
    padding: 4px 2px;
    text-align: center;
  }

  .pricing-service-card.is-disabled .pricing-service-title {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
  }

  .pricing-service-card.is-disabled .pricing-service-icon {
    width: 38px;
    height: 38px;
  }

  .pricing-service-card.is-disabled .pricing-service-icon svg {
    width: 22px;
    height: 22px;
  }

  .pricing-service-card.is-disabled h3 {
    font-size: 13px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .pricing-service-card.is-disabled small {
    font-size: 10px;
    line-height: 1.1;
  }

  .pricing-service-card.is-disabled .pricing-include {
    justify-self: center;
    min-height: 28px;
    padding: 5px 9px;
    font-size: 10px;
  }

  .pricing-service-card header,
  .pricing-total-stack > div,
  .pricing-line-summary > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricing-service-card header {
    grid-template-columns: 1fr;
  }

  .pricing-service-title {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .pricing-service-icon {
    width: 42px;
    height: 42px;
  }

  .pricing-service-icon svg {
    width: 24px;
    height: 24px;
  }

  .pricing-view[data-pricing-form] {
    padding-bottom: calc(82px + var(--safe-bottom));
  }

  .pricing-mobile-action-bar {
    position: fixed;
    left: max(10px, var(--safe-left));
    right: max(10px, var(--safe-right));
    bottom: calc(57px + var(--safe-bottom));
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(6, 45, 61, 0.14);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 32px rgba(5, 24, 44, 0.2);
  }

  .pricing-mobile-action-bar div {
    display: grid;
    gap: 1px;
  }

  .pricing-mobile-action-bar span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .pricing-mobile-action-bar strong {
    color: var(--navy);
    font-size: 22px;
    line-height: 1;
  }

  .pricing-line-items-field,
  .pricing-summary-panel .actions .button.secondary {
    display: none;
  }

  .pricing-include {
    justify-self: start;
  }

  .pricing-stepper {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .pricing-rate-row {
    align-items: stretch;
  }

  .pricing-active-check {
    justify-content: flex-start;
  }

  .quote-public-card {
    gap: 16px;
    padding: 14px;
  }

  .quote-public-header {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .quote-public-header img {
    width: 72px;
    height: 72px;
  }

  .quote-public-header h2 {
    font-size: 19px;
    line-height: 1.05;
  }

  .quote-public-header p {
    font-size: 12px;
    line-height: 1.3;
  }

  .quote-document-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .quote-number-panel h3 {
    padding: 12px 14px;
    font-size: 24px;
  }

  .quote-number-panel > div {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 10px 14px;
  }

  .quote-number-panel span,
  .quote-number-panel strong {
    min-width: 0;
    font-size: 14px;
  }

  .quote-number-panel .quote-number-total strong {
    font-size: 21px;
  }

  .quote-product-head {
    display: none;
  }

  .quote-product-table {
    overflow: visible;
    border-bottom: 0;
    gap: 10px;
  }

  .quote-product-row {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 7px;
    border: 1px solid #d6dee4;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
  }

  .quote-product-row strong {
    font-size: 16px;
    font-weight: 800;
  }

  .quote-product-row span {
    font-size: 14px;
  }

  .quote-product-row span:empty:not(.quote-line-state) {
    display: none;
  }

  .quote-product-row em {
    justify-self: start;
    border-radius: 999px;
    padding: 4px 8px;
    background: #f3f7f9;
    color: #203f52;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    white-space: normal;
  }

  .quote-product-row em:nth-of-type(1)::before {
    content: "Qty: ";
    color: #667b88;
  }

  .quote-product-row em:nth-of-type(2)::before {
    content: "Unit: ";
    color: #667b88;
  }

  .quote-product-row em:nth-of-type(3)::before {
    content: "Total: ";
    color: #667b88;
  }

  .quote-product-table.is-public-list .quote-public-line-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main total"
      "desc desc";
    gap: 7px 12px;
    width: 100%;
  }

  .quote-product-table.is-public-list .quote-public-line-row em {
    justify-self: end;
    padding: 0;
    background: transparent;
    color: var(--navy);
    font-size: 17px;
    font-weight: 1000;
    text-align: right;
    white-space: nowrap;
  }

  .quote-product-table.is-public-list .quote-public-line-row em::before {
    content: "" !important;
  }

  .quote-product-table.is-public-list .quote-public-line-row .quote-line-inclusion-status {
    justify-self: start;
    padding: 0;
    background: transparent;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-align: left;
  }

  .quote-product-table.is-public-list .quote-public-line-row .quote-line-inclusion-status.is-included {
    color: var(--teal-dark);
  }

  .quote-product-table.is-public-list .quote-public-line-row .quote-line-inclusion-status.is-excluded,
  .quote-product-table.is-public-list .quote-public-line-row .quote-line-toggle-help {
    color: var(--danger);
  }

  .quote-product-table.is-public-list .quote-public-option-row:not(.is-selected) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "desc"
      "total";
  }

  .quote-product-table.is-public-list .quote-public-option-row:not(.is-selected) .quote-public-line-total {
    justify-self: start;
    font-size: 16px;
  }

  .quote-product-table.is-public-list .quote-public-line-desc {
    font-size: 13px;
  }

  .quote-client-hub-strip {
    grid-template-columns: 1fr;
  }

  .quote-client-hub-strip > div {
    justify-content: flex-start;
  }

  .quote-public-options-head,
  .quote-public-footer,
  .quote-public-decision-actions {
    align-items: stretch;
  }

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

  .invoice-public-receipt .button {
    justify-self: stretch;
    width: 100%;
  }

  .quote-public-options-head {
    display: grid;
  }

  .quote-public-options-head span {
    white-space: normal;
  }

  .quote-public-option-row strong {
    align-items: start;
  }

  .quote-public-decision {
    min-width: 0;
  }

  .quote-total-box {
    justify-self: stretch;
  }

  .quote-total-box > div {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 0.8fr);
  }

  .quote-total-box span {
    padding-right: 12px;
    font-size: 14px;
  }

  .quote-followup-check {
    grid-template-columns: 1fr;
  }

  .quote-followup-money {
    justify-items: start;
  }

  .client-activity-row small {
    justify-self: start;
  }

  .crm-tabs {
    display: flex;
    max-width: calc(100vw - 56px);
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .crm-tabs a {
    flex: 0 0 auto;
    min-width: 108px;
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .match-card {
    grid-template-columns: 52px 1fr;
  }

  .match-card .button {
    grid-column: 1 / -1;
  }

  .generated-post-card {
    grid-template-columns: 1fr;
  }

  .generated-post-card img {
    width: 100%;
    max-height: 260px;
  }

  .angle-grid,
  .angle-grid.single,
  .media-actions,
  .generated-collage-actions,
  .camera-head,
  .camera-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
}

.imported-history-section {
  grid-column: 1 / -1;
}

.imported-history-summary {
  cursor: pointer;
  list-style: none;
}

.imported-history-summary::-webkit-details-marker {
  display: none;
}

.imported-history-summary::marker {
  content: "";
}

.imported-history-summary::after {
  content: "Open";
  border: 1px solid rgba(14, 64, 94, 0.18);
  border-radius: 999px;
  padding: 5px 10px;
  color: #0e405e;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.imported-history-section[open] .imported-history-summary::after {
  content: "Close";
}

.imported-history-summary-copy {
  display: grid;
  gap: 3px;
}

.imported-history-summary-copy em {
  color: #4d6e7f;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.imported-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.imported-history-block {
  border: 1px solid rgba(14, 64, 94, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.imported-history-block h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #0e405e;
}

.imported-key-values,
.imported-note-list {
  display: grid;
  gap: 8px;
}

.imported-key-values div,
.imported-note-list article {
  border: 1px solid rgba(14, 64, 94, 0.1);
  border-radius: 7px;
  padding: 9px;
  background: #f8fbfc;
}

.imported-key-values span,
.imported-note-list small,
.imported-attachment em {
  display: block;
  color: #5d7280;
  font-size: 12px;
}

.imported-key-values strong,
.imported-note-list strong {
  color: #0e405e;
}

.imported-note-list p {
  margin: 6px 0 0;
  color: #183848;
  white-space: pre-wrap;
}

.imported-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.imported-attachment {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.imported-attachment img,
.imported-attachment > span {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  border: 1px solid rgba(14, 64, 94, 0.14);
  background: #eef6f8;
  object-fit: cover;
}

.imported-attachment > span {
  display: grid;
  place-items: center;
  color: #0e405e;
  font-weight: 800;
}

/* UI polish pass: calmer app shell, cleaner hierarchy, stronger mobile defaults. */
:root {
  --navy: #143a56;
  --deep: #0b2538;
  --blue: #0f8fb9;
  --teal: #18bdb5;
  --ink: #17212b;
  --muted: #647383;
  --line: #dde7ef;
  --paper: #ffffff;
  --soft: #f5f8fb;
  --danger: #d71946;
  --success: #0a9188;
  --shadow: 0 14px 34px rgba(11, 37, 56, 0.09);
  --shadow-soft: 0 5px 18px rgba(11, 37, 56, 0.06);
}

body {
  background: #eef4f7;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.app-shell {
  grid-template-columns: 252px minmax(0, 1fr);
}

.workspace {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    linear-gradient(180deg, #f8fbfd 0, #eef4f7 380px, #eef4f7 100%);
}

.sidebar {
  padding-inline: 14px;
  background: #102f46;
  box-shadow: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-lockup {
  padding: 10px 8px 18px;
}

.brand-lockup img {
  max-height: 104px;
  object-fit: contain;
  filter: none;
}

.nav-list {
  gap: 14px;
}

.nav-section {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.nav-section summary {
  min-height: 42px;
  padding: 5px 8px;
  color: rgba(255, 255, 255, 0.55);
}

.nav-section summary::after {
  font-size: 15px;
}

.nav-section-links {
  gap: 3px;
  margin-top: 4px;
}

.nav-list a {
  position: relative;
  border-radius: 8px;
  padding: 10px 11px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 760;
}

.nav-list a.active,
.nav-list a:hover {
  color: #062d3d;
  background: #c9f7f3;
}

.nav-list a.active::before {
  content: "";
  position: absolute;
  left: -8px;
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: var(--teal);
}

.topbar {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(11, 37, 56, 0.1);
  box-shadow: 0 8px 22px rgba(11, 37, 56, 0.06);
}

.topbar > div:not(.topbar-actions) {
  min-width: 0;
}

.eyebrow {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}

#page-title {
  color: var(--navy);
  font-size: 25px;
  font-weight: 850;
}

.menu-button {
  color: var(--navy);
  border-color: var(--line);
  background: #fff;
}

.global-search {
  border-color: rgba(20, 58, 86, 0.14);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.global-search > svg {
  color: var(--muted);
}

.global-search input {
  color: var(--ink);
  font-weight: 700;
}

.global-search input::placeholder {
  color: #7a8997;
}

.global-search-clear {
  color: var(--muted);
  background: transparent;
}

.topbar-actions {
  gap: 8px;
}

.create-button {
  box-shadow: none;
  border: 1px solid rgba(24, 189, 181, 0.38);
}

.clock-status-pill,
.logout-button {
  border-color: var(--line);
  color: var(--navy);
  background: #fff;
  box-shadow: none;
}

.clock-status-pill.is-on {
  color: #06343d;
  background: #c9f7f3;
}

.clock-status-pill.is-on {
  color: #043a35;
  border-color: rgba(15, 143, 82, 0.42);
  background: linear-gradient(180deg, #a8f7c6 0%, #71e9a6 100%);
  box-shadow: 0 0 0 3px rgba(15, 143, 82, 0.13), 0 8px 18px rgba(15, 143, 82, 0.18);
}

.clock-status-pill.is-off {
  color: var(--navy);
  border-color: rgba(20, 58, 86, 0.18);
  background: #eef7fb;
}

#app {
  width: min(100%, 1480px);
  max-width: none;
  padding-top: 22px;
}

.section,
.card,
.panel,
.jobber-report-card,
.jobber-workflow-card,
.jobber-performance-card,
.crm-job-card,
.client-card,
.quote-followup-card,
.payment-card,
.schedule-card {
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.section {
  background: #fff;
}

.section-heading,
.section-heading.teal {
  color: var(--navy);
  background: #fff;
  border-bottom: 1px solid rgba(20, 58, 86, 0.1);
}

.section-heading h2,
.section-heading h3 {
  font-size: 17px;
  line-height: 1.2;
  text-transform: none;
}

.section-body,
.card {
  padding: 18px;
}

.button {
  border-radius: 7px;
  box-shadow: none;
}

.button.primary {
  color: #fff;
  background: var(--navy);
}

.button.primary:hover {
  background: #0b2d45;
}

.button.secondary {
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(20, 58, 86, 0.16);
}

.button.secondary:hover {
  border-color: rgba(24, 189, 181, 0.48);
  background: rgba(24, 189, 181, 0.08);
}

.field input,
.field textarea,
.field select,
.login-form input,
.quote-line-row input,
.quote-line-row textarea,
.quote-line-row select {
  border-color: rgba(20, 58, 86, 0.14);
  background: #fff;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.login-form input:focus,
.quote-line-row input:focus,
.quote-line-row textarea:focus,
.quote-line-row select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(24, 189, 181, 0.14);
}

.crm-tabs {
  padding: 4px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  background: rgba(20, 58, 86, 0.04);
}

.crm-tabs a {
  border: 0;
  background: transparent;
}

.crm-tabs a.active {
  color: var(--navy);
  background: #fff;
  box-shadow: 0 1px 6px rgba(11, 37, 56, 0.1);
}

.message-stats,
.report-stats,
.payment-summary-grid,
.quote-followup-stats,
.crm-summary-grid,
.client-profile-stats {
  gap: 12px;
}

.message-stat,
.report-stat,
.payment-summary-card,
.quote-followup-stat,
.client-stat,
.ops-stat,
.dashboard-stat-grid.compact div {
  border-color: rgba(20, 58, 86, 0.1);
  box-shadow: var(--shadow-soft);
}

.message-inbox-layout {
  gap: 14px;
}

.message-inbox-list,
.message-conversation-panel {
  border-color: rgba(20, 58, 86, 0.12);
  box-shadow: var(--shadow-soft);
}

.message-bubble-list {
  background: #f8fbfd;
}

.schedule-toolbar,
.schedule-display-toggle,
.schedule-nav {
  gap: 8px;
}

.schedule-range,
.schedule-display,
.schedule-arrow,
.schedule-current {
  border-color: rgba(20, 58, 86, 0.14);
  background: #fff;
}

.schedule-arrow {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  padding: 0;
  color: var(--navy);
  line-height: 1;
}

.schedule-arrow svg {
  width: 22px;
  height: 22px;
}

.schedule-arrow .schedule-arrow-text {
  font-size: 28px;
  line-height: 1;
}

.schedule-arrow svg + .schedule-arrow-text {
  display: none;
}

.schedule-range.active,
.schedule-display.active,
.schedule-range:hover,
.schedule-display:hover,
.schedule-arrow:hover,
.schedule-current:hover {
  color: #06343d;
  border-color: rgba(24, 189, 181, 0.5);
  background: #dffbf8;
}

.schedule-card {
  border-left-width: 4px;
}

.schedule-time {
  border-right-color: rgba(20, 58, 86, 0.1);
}

.check:checked::after {
  content: "\2713";
}

.mobile-tabbar {
  border-top-color: rgba(20, 58, 86, 0.12);
  box-shadow: 0 -8px 24px rgba(11, 37, 56, 0.11);
}

.mobile-tabbar a,
.mobile-tabbar button {
  border-radius: 8px;
}

.mobile-tabbar a.active,
.mobile-tabbar button:active,
.mobile-tabbar button[aria-expanded="true"] {
  color: #06343d;
  background: #dffbf8;
}

@media (max-width: 940px) {
  .topbar {
    position: sticky;
    background: rgba(255, 255, 255, 0.96);
  }

  .sidebar {
    width: min(300px, calc(100vw - 42px));
    box-shadow: 18px 0 48px rgba(11, 37, 56, 0.26);
  }
}

@media (max-width: 620px) {
  #app {
    padding: 12px max(10px, var(--safe-right)) calc(90px + var(--safe-bottom)) max(10px, var(--safe-left));
  }

  .topbar {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding-bottom: 10px;
  }

  .topbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-role="technician"] .topbar-actions,
  body[data-role="crew_lead"] .topbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section,
  .card,
  .panel,
  .schedule-card,
  .crm-job-card,
  .client-card,
  .payment-card {
    box-shadow: none;
  }

  .section-body,
  .card {
    padding: 13px;
  }

  .section-heading {
    gap: 8px;
    padding: 13px;
  }

  .section-heading h2,
  .section-heading h3 {
    font-size: 16px;
  }

  .message-stats,
  .payment-summary-grid,
  .quote-followup-stats,
  .report-stats,
  .client-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .message-status-strip,
  .message-stat,
  .payment-summary-card,
  .quote-followup-stat,
  .report-stat {
    box-shadow: none;
  }

  .message-inbox-layout.has-active-thread .message-inbox-list {
    display: none;
  }

  .message-conversation-panel {
    min-height: calc(100vh - 235px);
  }

  .schedule-map-canvas {
    min-height: clamp(390px, 62vh, 560px);
  }

  .report-map-canvas,
  .jobber-revenue-map-canvas {
    min-height: 360px;
  }

  .schedule-contact-actions,
  .schedule-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-actions .button,
  .crm-jobs-next-action .button,
  .crm-leads-next-action .button,
  .crm-documents-next-action .button,
  .crm-job-actions .button,
  .client-row-actions .button,
  .payment-collection-actions .button {
    min-height: 42px;
  }

  .mobile-tabbar {
    padding-top: 6px;
  }
}

/* Conversations: GHL-style working inbox tuned for KNHQ. */
.messages-page {
  overflow: hidden;
}

.messages-page .section-heading {
  min-height: 58px;
}

.messages-page .section-body {
  gap: 10px;
  padding: 12px;
  background: #f4f7fa;
}

.messages-page .crm-tabs {
  display: none;
}

.messages-page .crm-toolbar.simple {
  grid-template-columns: minmax(240px, 1fr) 150px auto;
  gap: 8px;
  align-items: end;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  box-shadow: none;
}

.messages-page .crm-toolbar .field span {
  color: #697786;
  font-size: 10px;
}

.messages-page .crm-toolbar input,
.messages-page .crm-toolbar select {
  min-height: 38px;
  border-radius: 7px;
  background: #f8fbfd;
}

.button.icon-only {
  width: 38px;
  min-width: 38px;
  padding-inline: 0;
  justify-content: center;
}

.button.icon-only span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.button.icon-only svg {
  width: 17px;
  height: 17px;
}

.messages-console {
  height: calc(100dvh - 218px);
  min-height: 650px;
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.messages-console .message-inbox-list,
.messages-console .message-conversation-panel {
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.messages-console .message-inbox-list {
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  border-right: 1px solid rgba(20, 58, 86, 0.12);
  background: #fff;
  overflow: hidden;
}

.messages-inbox-head {
  min-height: 64px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(20, 58, 86, 0.1);
  padding: 12px 14px;
}

.messages-inbox-head div {
  display: grid;
  gap: 2px;
}

.messages-inbox-head span {
  color: #697786;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.messages-inbox-head strong {
  color: var(--navy);
  font-size: 25px;
  line-height: 1;
}

.messages-inbox-health {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid rgba(20, 58, 86, 0.08);
  padding: 9px 14px;
  background: #f8fbfd;
}

.messages-inbox-health > span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #f0b429;
  box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.15);
}

.messages-inbox-health.is-ready > span {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(10, 145, 136, 0.12);
}

.messages-inbox-health div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.messages-inbox-health strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
}

.messages-inbox-health small,
.message-showing {
  color: #697786;
  font-size: 11px;
  font-weight: 800;
}

.message-showing {
  margin: 0;
  border-bottom: 1px solid rgba(20, 58, 86, 0.08);
  padding: 8px 14px;
  background: #fff;
}

.messages-inbox-next {
  display: grid;
  gap: 9px;
  border-bottom: 1px solid rgba(20, 58, 86, 0.08);
  padding: 10px 14px;
  background: #f4fffd;
}

.messages-inbox-next.is-needs-work,
.messages-inbox-next.is-watch {
  background: #fffaf0;
}

.messages-inbox-next.is-needs-reply {
  background: #eff8ff;
}

.messages-inbox-next span {
  display: block;
  color: #697786;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.messages-inbox-next strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.12;
}

.messages-inbox-next p {
  display: -webkit-box;
  margin: 3px 0 0;
  overflow: hidden;
  color: #5e6d7b;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.messages-inbox-next-action {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
}

.messages-inbox-next-action em {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
}

.messages-inbox-next-action .button {
  min-height: 32px;
  padding-inline: 10px;
}

.message-load-status {
  margin: 0;
  border-bottom: 1px solid rgba(20, 58, 86, 0.08);
  padding: 6px 14px;
  color: #697786;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}

.message-inbox-items {
  min-height: 0;
  overflow: auto;
}

.message-inbox-empty {
  margin: 12px;
  border: 1px dashed rgba(20, 58, 86, 0.18);
  border-radius: 8px;
  padding: 16px;
  color: #697786;
  background: #f8fbfd;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.messages-console .message-inbox-item {
  position: relative;
  border: 0;
  border-bottom: 1px solid rgba(20, 58, 86, 0.09);
  border-left: 0;
  padding: 0;
  background: #fff;
}

.messages-console .message-inbox-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: transparent;
}

.messages-console .message-inbox-item:hover {
  background: #f5fbfb;
}

.messages-console .message-inbox-item.active {
  background: #e9fbf8;
}

.messages-console .message-inbox-item.active::before {
  background: var(--teal);
}

.messages-console .message-inbox-main {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 13px 12px 14px;
}

.message-inbox-text {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.message-inbox-top {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.message-inbox-top strong {
  min-width: 0;
  color: #17212b;
  font-size: 14px;
  font-weight: 880;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-inbox-top time {
  color: #8a97a4;
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
}

.messages-console .message-inbox-main p {
  margin: 0;
  color: #5e6d7b;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.32;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-inbox-meta {
  min-width: 0;
  display: flex;
  gap: 7px;
  align-items: center;
}

.message-inbox-meta small {
  min-width: 0;
  margin: 0;
  color: #7c8997;
  font-size: 11px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-link-badge {
  min-height: 21px;
  gap: 4px;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1;
}

.message-link-badge svg {
  width: 11px;
  height: 11px;
}

.message-contact-kicker {
  display: block;
  margin-bottom: 2px;
  color: #71808e;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.messages-console .message-conversation-panel {
  min-width: 0;
  background: #f5f8fb;
}

.messages-console .message-conversation {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.messages-console .message-conversation-head {
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  border-bottom: 1px solid rgba(20, 58, 86, 0.1);
  padding: 12px 16px;
  background: #fff;
}

.messages-console .message-conversation-title {
  grid-template-columns: 44px minmax(0, 1fr);
}

.messages-console .message-thread-head strong {
  color: #17212b;
  font-size: 17px;
  font-weight: 920;
}

.messages-console .message-conversation-title p,
.messages-console .message-conversation-title small {
  margin-top: 2px;
  color: #667685;
  font-size: 12px;
  font-weight: 760;
}

.messages-console .message-conversation-actions {
  gap: 7px;
  align-items: center;
}

.messages-console .message-conversation-actions .button {
  min-height: 36px;
}

.messages-console .message-sync-note {
  border-bottom: 1px solid rgba(20, 58, 86, 0.08);
  padding: 7px 16px;
  color: #607182;
  background: #fbfcfd;
  font-size: 11px;
  font-weight: 800;
}

.messages-console .message-sync-note.is-error {
  color: #8a1c1c;
  background: #fff6f6;
}

.messages-console .message-conversation-mission {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(20, 58, 86, 0.1);
  padding: 10px 14px;
  background: #fff;
  box-shadow: inset 4px 0 0 rgba(24, 189, 181, 0.56);
}

.messages-console .message-conversation-mission span {
  display: block;
  color: #6b7a88;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.messages-console .message-conversation-mission strong {
  display: block;
  margin-top: 2px;
  color: #17212b;
  font-size: 14px;
  font-weight: 900;
}

.messages-console .message-conversation-mission p {
  margin: 2px 0 0;
  color: #5c6c79;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.messages-console .message-conversation-mission-action {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.messages-console .message-conversation-mission-action em {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #dbe4ea;
  border-radius: 999px;
  padding: 0 8px;
  color: #4d5e6b;
  background: #f8fafb;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.messages-console .message-conversation-mission.is-needs-reply {
  box-shadow: inset 4px 0 0 #19b981;
  background: #f5fffb;
}

.messages-console .message-conversation-mission.is-needs-work {
  box-shadow: inset 4px 0 0 #f0b429;
  background: #fffaf0;
}

.messages-console .message-conversation-mission.is-watch {
  box-shadow: inset 4px 0 0 #3f8ed8;
  background: #f3f8fd;
}

.messages-console .message-conversation-mission.is-ready {
  box-shadow: inset 4px 0 0 rgba(34, 197, 139, 0.78);
}

.messages-console .message-conversation-body {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 312px;
  background: #f5f8fb;
}

.messages-console .message-bubble-list {
  gap: 9px;
  padding: 18px 22px 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(245, 248, 251, 0.86)),
    #f5f8fb;
}

.messages-console .message-history-note {
  border-color: rgba(20, 58, 86, 0.12);
  color: #697786;
  background: #fff;
  box-shadow: none;
}

.messages-console .message-bubble {
  max-width: min(72%, 660px);
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 14px rgba(11, 37, 56, 0.07);
}

.messages-console .message-bubble.inbound {
  background: #fff;
}

.messages-console .message-bubble.outbound {
  border-color: #123b56;
  background: #143a56;
}

.messages-console .message-bubble p {
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.messages-console .message-context-panel {
  gap: 10px;
  border-left: 1px solid rgba(20, 58, 86, 0.1);
  padding: 12px;
  background: #fff;
}

.messages-console .message-context-card,
.messages-console .message-context-stats div,
.messages-console .message-context-section {
  border-color: rgba(20, 58, 86, 0.11);
  box-shadow: none;
}

.messages-console .message-context-card {
  border-left-width: 4px;
  border-radius: 7px;
}

.messages-console .message-context-section-head {
  background: #f8fbfd;
}

.messages-console .message-context-row:hover {
  background: #f1fbfa;
}

.messages-console .message-composer {
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  border-top: 1px solid rgba(20, 58, 86, 0.12);
  padding: 10px 12px;
  background: #fff;
}

.messages-console .message-composer [data-message-subject-field] {
  grid-column: 2 / 3;
}

.messages-console .message-composer [data-message-subject-field]:not([hidden]) {
  grid-column: 2 / -1;
}

.messages-console .message-composer [data-message-subject-field]:not([hidden]) ~ .message-field {
  grid-column: 1 / 3;
}

.messages-console .message-template-row {
  gap: 6px;
  grid-column: 1 / -1;
}

.messages-console .message-template-row .button {
  min-height: 30px;
  padding-inline: 9px;
  font-size: 11px;
}

.messages-console .message-composer .field span {
  color: #697786;
  font-size: 10px;
}

.messages-console .message-composer select,
.messages-console .message-composer input,
.messages-console .message-composer textarea {
  min-height: 40px;
  border-radius: 7px;
  background: #f8fbfd;
}

.messages-console .message-composer .message-field textarea {
  min-height: 42px;
  max-height: 118px;
}

.messages-console .message-composer > .muted {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  font-size: 11px;
}

@media (max-width: 1100px) {
  .messages-console {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .messages-console .message-conversation-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .messages-console .message-context-panel {
    display: none;
  }
}

@media (max-width: 760px) {
  .messages-page .section-heading {
    align-items: stretch;
  }

  .messages-page .section-heading .actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .messages-page .section-heading .actions .button {
    min-height: 38px;
    padding-inline: 8px;
    font-size: 12px;
  }

  .messages-page .crm-toolbar.simple {
    grid-template-columns: 1fr;
  }

  .messages-console {
    height: calc(100dvh - 250px);
    min-height: 560px;
    grid-template-columns: minmax(0, 1fr);
  }

  .messages-console.has-active-thread .message-inbox-list {
    display: none;
  }

  .messages-console.has-no-active-thread .message-conversation-panel {
    display: none;
  }

  .messages-console .message-inbox-list {
    border-right: 0;
  }

  .messages-inbox-next-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .messages-inbox-next-action .button {
    width: 100%;
  }

  .messages-console .message-conversation-head {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .messages-console .message-conversation-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .messages-console .message-conversation-actions .button {
    width: 100%;
    min-width: 0;
    padding-inline: 6px;
    font-size: 11px;
  }

  .messages-console .message-back-button {
    display: inline-flex;
  }

  .messages-console .message-conversation-mission {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 9px 10px;
  }

  .messages-console .message-conversation-mission p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .messages-console .message-conversation-mission-action {
    justify-content: space-between;
  }

  .messages-console .message-conversation-mission-action .button {
    min-height: 34px;
  }

  .messages-console .message-bubble-list {
    padding: 12px;
  }

  .messages-console .message-bubble {
    max-width: 88%;
  }

  .messages-console .message-composer {
    grid-template-columns: 1fr auto;
    align-items: end;
    padding: 9px;
  }

  .messages-console .message-composer .field.compact {
    grid-column: 1 / -1;
  }

  .messages-console .message-composer [data-message-subject-field],
  .messages-console .message-composer .message-field {
    grid-column: 1 / -1;
  }

  .messages-console .message-composer .button.primary {
    grid-column: 2 / 3;
    min-width: 82px;
  }

  .messages-console .message-template-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .messages-console .message-template-row .button {
    flex: 0 0 auto;
  }
}

@media (max-width: 430px) {
  .messages-page .section-body {
    padding: 8px;
  }

  .messages-page .section-heading .actions {
    grid-template-columns: 1fr;
  }

  .messages-console {
    height: calc(100dvh - 280px);
    min-height: 530px;
  }

  .messages-console .message-conversation-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .messages-console .message-bubble {
    max-width: 94%;
  }
}

/* Conversations v2: closer to GHL's crisp desk layout. */
.messages-page {
  background: #f7f9fb;
}

.messages-page .section-heading {
  border-bottom-color: #dbe4ea;
  background: #fff;
}

.messages-page .section-heading h2 {
  font-size: 20px;
  font-weight: 850;
}

.messages-page .section-heading .actions .button {
  min-height: 36px;
  border-color: #d8e2e9;
  color: #1f3445;
  background: #fff;
}

.messages-page .crm-toolbar.simple {
  border-color: #dbe4ea;
  background: #fff;
}

.messages-console {
  border-color: #d6e0e7;
  background: #f7f9fb;
}

.messages-console .message-inbox-list,
.messages-console .message-conversation-panel,
.messages-console .message-context-panel {
  background: #fff;
}

.messages-inbox-head {
  min-height: 58px;
  padding: 10px 13px;
  background: #fff;
}

.messages-inbox-head h3 {
  margin: 0;
  color: #1f3445;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
}

.messages-inbox-head span {
  text-transform: none;
  letter-spacing: 0;
}

.messages-inbox-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #e1e8ee;
  padding: 8px 10px;
  background: #fff;
  overflow-x: auto;
}

.messages-inbox-tabs span {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #dbe4ea;
  border-radius: 999px;
  padding: 0 10px;
  color: #607182;
  background: #fff;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.messages-inbox-tabs span.active {
  color: #06343d;
  border-color: rgba(24, 189, 181, 0.48);
  background: #e9fbf8;
}

.messages-inbox-health {
  grid-template-columns: 8px minmax(0, 1fr);
  padding: 8px 13px;
  background: #f8fafb;
}

.messages-inbox-health > span {
  width: 8px;
  height: 8px;
}

.messages-console .message-inbox-item {
  transition: background-color 0.14s ease;
}

.messages-console .message-inbox-item.active {
  background: #eefaf7;
}

.messages-console .message-inbox-item.active::before {
  width: 3px;
  background: #22c58b;
}

.messages-console .message-inbox-main {
  grid-template-columns: 38px minmax(0, 1fr);
  padding: 11px 12px;
}

.messages-console .client-avatar {
  color: #0b4654;
  background: #dff7f4;
}

.message-inbox-top strong {
  color: #1c2b36;
  font-size: 13.5px;
  font-weight: 820;
}

.message-inbox-top time {
  font-size: 10.5px;
}

.messages-console .message-inbox-main p {
  color: #5d6c78;
  font-size: 12px;
  font-weight: 650;
}

.message-channel-pill {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d7e2ea;
  border-radius: 5px;
  padding: 0 6px;
  color: #50616f;
  background: #f8fafb;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.messages-console .message-conversation-head {
  min-height: 66px;
  padding: 10px 14px;
  background: #fff;
}

.message-contact-kicker {
  color: #7b8794;
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

.messages-console .message-thread-head strong {
  color: #1c2b36;
  font-size: 16px;
  font-weight: 850;
}

.messages-console .message-conversation-actions .button {
  border-color: #d8e2e9;
  color: #263b4c;
  background: #fff;
}

.messages-console .message-conversation-actions .button:hover {
  border-color: rgba(24, 189, 181, 0.55);
  background: #effbf9;
}

.messages-console .message-conversation-actions .ghl-link-action.is-linked {
  color: #076b50;
  border-color: rgba(34, 197, 139, 0.42);
  background: #eafaf3;
}

.messages-console .message-conversation-actions .ghl-link-action.needs-link {
  color: #765400;
  border-color: rgba(240, 180, 41, 0.42);
  background: #fff8e6;
}

.messages-console .message-sync-note {
  color: #607182;
  background: #f8fafb;
}

.message-dialer-panel {
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) auto minmax(190px, 1fr) 90px minmax(260px, 1.3fr);
  gap: 8px;
  align-items: end;
  border-bottom: 1px solid #dbe4ea;
  padding: 9px 12px;
  background: #fff;
}

.message-dialer-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.message-dialer-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #0a6d56;
  background: #e7f8f1;
}

.message-dialer-icon svg {
  width: 18px;
  height: 18px;
}

.message-dialer-copy strong,
.message-dialer-copy small {
  display: block;
  min-width: 0;
}

.message-dialer-copy strong {
  color: #1c2b36;
  font-size: 13px;
  font-weight: 850;
}

.message-dialer-copy small {
  color: #697784;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}

.message-call-note,
.message-call-duration {
  margin: 0;
}

.message-call-outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.message-call-outcomes .button {
  min-width: 0;
  padding-inline: 7px;
}

.message-dialer-panel [data-message-call-status] {
  align-self: center;
  margin: 0;
  font-size: 11.5px;
}

.messages-console .message-conversation-body {
  background: #f7f9fb;
}

.messages-console .message-bubble-list {
  background: #f7f9fb;
}

.messages-console .message-bubble {
  border-radius: 12px;
  box-shadow: none;
}

.messages-console .message-bubble.inbound {
  border-color: #dbe4ea;
  background: #fff;
}

.messages-console .message-bubble.outbound {
  border-color: #17a978;
  background: #19b981;
}

.messages-console .message-bubble.is-pending {
  opacity: 0.72;
}

.messages-console .message-bubble.is-failed {
  border-color: #f2b7c4;
  color: #7a1029;
  background: #fff5f6;
}

.message-retry-button {
  margin-top: 8px;
}

.message-conversation-opening .message-bubble-list {
  display: grid;
  align-content: center;
}

.message-conversation-opening .empty-state {
  margin: auto;
  max-width: 320px;
  border: 1px dashed #d7e2ea;
  border-radius: 10px;
  background: #fff;
}

.messages-console .message-history-note .button {
  min-height: 32px;
}

.messages-console .message-bubble-meta strong {
  font-size: 12px;
  font-weight: 850;
}

.messages-console .message-bubble p {
  font-size: 13.5px;
}

.messages-console .message-bubble .message-empty-body,
.message-bubble .message-empty-body {
  color: var(--muted);
  font-style: italic;
}

.message-bubble.is-call {
  min-width: min(560px, 96%);
  max-width: min(760px, 96%);
}

.message-bubble.is-call.outbound {
  color: #123348;
  border-color: #bcdce7;
  background: #f7fcff;
}

.message-call-card {
  display: grid;
  gap: 9px;
}

.message-call-card-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.message-call-card-head > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #0a6d56;
  background: #dff7ef;
}

.message-call-card-head svg {
  width: 17px;
  height: 17px;
}

.message-call-card-head strong,
.message-call-card-head small {
  display: block;
}

.message-call-card-head strong {
  color: #1c2b36;
  font-size: 13px;
  font-weight: 850;
}

.message-call-card-head small,
.message-recording-empty {
  color: #667887;
  font-size: 11px;
  font-weight: 740;
}

.message-recording-list {
  display: grid;
  gap: 9px;
}

.message-recording {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 70px 30px 30px;
  gap: 5px;
  align-items: center;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 4px 5px;
  background: rgba(255, 255, 255, 0.78);
}

.message-recording audio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.message-recording-play {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 1px solid rgba(10, 130, 121, 0.2);
  border-radius: 999px;
  padding: 0;
  color: #073f3a;
  background: rgba(17, 199, 189, 0.16);
  cursor: pointer;
}

.message-recording-play svg {
  width: 16px;
  height: 16px;
}

.message-recording-play span {
  display: none;
}

.message-recording-range {
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  accent-color: #0a8279;
}

.message-recording-range:disabled {
  opacity: 0.45;
}

.message-recording-time {
  color: #425866;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.message-recording-speed,
.message-recording-more {
  min-width: 30px;
  height: 36px;
  min-height: 36px;
  border: 1px solid rgba(20, 58, 86, 0.16);
  border-radius: 7px;
  padding: 3px;
  color: #143a56;
  background: #fff;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.message-recording-more svg {
  width: 15px;
  height: 15px;
}

.message-recording-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.message-recording-details {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid rgba(20, 58, 86, 0.1);
  padding: 7px 5px 3px;
  overflow-wrap: anywhere;
}

.message-recording-details[hidden] {
  display: none;
}

.message-recording-details p {
  margin: 5px 0 0;
}

.native-call-dialer {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(120px, 0.8fr) auto auto auto auto;
  gap: 8px;
  align-items: end;
  border-top: 1px solid #dbe4ea;
  border-bottom: 1px solid #dbe4ea;
  padding: 8px 10px;
  background: #fff;
}

.native-call-dialer-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.native-call-dialer-main > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #0a6d56;
  background: #e6f8f1;
}

.native-call-dialer-main svg {
  width: 17px;
  height: 17px;
}

.native-call-dialer-main strong,
.native-call-dialer-main small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-call-dialer-main strong {
  color: #172b3a;
  font-size: 13px;
  font-weight: 880;
}

.native-call-dialer-main small {
  color: #617280;
  font-size: 11px;
  font-weight: 760;
}

.native-call-dialer label {
  min-width: 0;
  display: grid;
  gap: 3px;
  margin: 0;
}

.native-call-dialer label span {
  color: #647585;
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.native-call-dialer input {
  width: 100%;
  min-height: 34px;
  border: 1px solid #d8e2e9;
  border-radius: 7px;
  padding: 0 8px;
  color: #1b2d3b;
  background: #fbfdff;
  font-size: 12px;
  font-weight: 760;
}

.native-call-dialer .button {
  min-height: 34px;
}

.native-call-dialer p {
  grid-column: 1 / -1;
  margin: 0;
  color: #687888;
  font-size: 11px;
  font-weight: 760;
}

.native-call-dialer.is-blocked {
  background: #fbfcfd;
}

.messages-console .message-context-panel {
  gap: 12px;
  padding: 0;
  background: #fff;
}

.message-contact-card,
.messages-console .message-context-card,
.messages-console .message-context-stats,
.messages-console .message-context-section,
.messages-console .message-context-actions {
  margin-inline: 12px;
}

.message-contact-card {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.message-right-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.message-right-panel-head span {
  color: #1f3445;
  font-size: 14px;
  font-weight: 850;
}

.message-right-panel-head a {
  color: #0a8f88;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.message-contact-profile {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.message-contact-profile strong {
  display: block;
  min-width: 0;
  color: #1c2b36;
  font-size: 15px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-contact-profile span {
  color: #72808d;
  font-size: 12px;
  font-weight: 760;
}

.message-contact-lines {
  display: grid;
  gap: 7px;
}

.message-contact-lines a,
.message-contact-lines span {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: #334a5c;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.3;
  text-decoration: none;
}

.message-contact-lines svg {
  width: 16px;
  height: 16px;
  color: #73818d;
}

.message-contact-lines em,
.message-contact-lines span span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-style: normal;
}

.messages-console .message-context-card {
  margin-top: 0;
  border-left-color: #22c58b;
}

.messages-console .message-context-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.messages-console .message-context-stats div {
  padding: 8px;
}

.messages-console .message-context-section {
  border-radius: 8px;
}

.messages-console .message-context-section-head {
  background: #f8fafb;
}

.messages-console .message-composer {
  align-items: end;
  background: #fff;
}

.messages-console .message-composer textarea {
  border-color: #d8e2e9;
  background: #fff;
}

.messages-console .message-composer .button.primary {
  background: #19b981;
}

.messages-console .message-composer .button.primary:hover {
  background: #119c6b;
}

@media (max-width: 760px) {
  .messages-inbox-tabs {
    padding-inline: 9px;
  }

  .messages-console .message-conversation-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .message-dialer-panel {
    display: none;
  }

  .messages-console .message-conversation-head {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .messages-console .message-composer {
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
}

@media (max-width: 430px) {
  .messages-console .message-conversation-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* Messages mobile rescue: make the page act like an app, not a squeezed desktop. */
.message-page-actions .button {
  gap: 6px;
}

.message-page-actions .button svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 760px) {
  body:has(.messages-page) #app {
    padding-inline: 0;
    padding-top: 0;
  }

  .messages-page {
    min-height: calc(100dvh - 74px - 76px - var(--safe-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #f7f9fb;
  }

  .messages-page .section-heading {
    min-height: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-bottom-color: #dbe4ea;
  }

  .messages-page .section-heading .eyebrow {
    display: none;
  }

  .messages-page .section-heading h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.1;
  }

  .messages-page .section-heading .actions,
  .messages-page .section-heading .message-page-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
  }

  .messages-page .section-heading .actions .button {
    width: auto;
    min-width: 38px;
    min-height: 34px;
    padding-inline: 9px;
    font-size: 0;
  }

  .messages-page .section-heading .actions .button span {
    display: none;
  }

  .messages-page .section-heading .actions .button svg {
    width: 16px;
    height: 16px;
  }

  .messages-page .section-body {
    height: calc(100dvh - 74px - 76px - 49px - var(--safe-bottom));
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "alert"
      "toolbar"
      "results";
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .messages-page:has(.messages-console.has-active-thread) .section-heading,
  .messages-page:has(.messages-console.has-active-thread) .crm-toolbar.simple,
  .messages-page:has(.messages-console.has-active-thread) .message-alert-nudge {
    display: none;
  }

  .messages-page:has(.messages-console.has-active-thread) .section-body {
    height: calc(100dvh - 74px - var(--safe-bottom));
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "results";
  }

  .messages-page .message-alert-nudge {
    grid-area: alert;
  }

  .messages-page .crm-toolbar.simple {
    grid-area: toolbar;
  }

  .messages-page [data-crm-message-results] {
    grid-area: results;
    min-height: 0;
    overflow: hidden;
  }

  .messages-page .crm-toolbar.simple {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    align-items: end;
    border: 0;
    border-bottom: 1px solid #dbe4ea;
    border-radius: 0;
    padding: 8px 10px;
    box-shadow: none;
  }

  .messages-page .crm-toolbar.simple .field {
    min-width: 0;
  }

  .messages-page .crm-toolbar.simple .field.compact {
    display: none;
  }

  .messages-page .crm-toolbar.simple .field span {
    display: none;
  }

  .messages-page .crm-toolbar.simple input {
    min-height: 38px;
    border-radius: 999px;
    padding-inline: 14px;
  }

  .messages-page .crm-toolbar-actions {
    display: flex;
    gap: 5px;
    align-items: center;
  }

  .messages-page .crm-toolbar-actions .button {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .messages-page .crm-toolbar-actions .button.secondary {
    display: none;
  }

  .messages-console {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .messages-console .message-inbox-list {
    height: 100%;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
  }

  .messages-inbox-head {
    min-height: 48px;
    padding: 8px 10px;
  }

  .messages-inbox-head h3 {
    font-size: 16px;
  }

  .messages-inbox-tabs {
    padding: 7px 9px;
  }

  .messages-inbox-tabs span {
    min-height: 26px;
    font-size: 11px;
  }

  .messages-inbox-health {
    display: none;
  }

  .message-showing {
    padding: 6px 10px;
  }

  .message-load-status {
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .messages-console .message-inbox-main {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 10px;
  }

  .messages-console .client-avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .message-inbox-top strong {
    font-size: 13px;
  }

  .message-inbox-meta {
    gap: 5px;
  }

  .message-inbox-meta small {
    display: none;
  }

  .messages-console .message-conversation-panel,
  .messages-console .message-conversation {
    height: 100%;
    min-height: 0;
  }

  .messages-console .message-conversation {
    flex-direction: column;
  }

  .messages-console .message-conversation-head {
    position: static;
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px;
  }

  .messages-console .message-conversation-title {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
  }

  .messages-console .message-thread-head strong {
    max-width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
  }

  .messages-console .message-conversation-title p,
  .messages-console .message-conversation-title small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .messages-console .message-conversation-actions {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .messages-console .message-conversation-actions .message-secondary-action {
    display: none;
  }

  .messages-console .message-conversation-actions .button {
    flex: 0 0 auto;
    width: auto;
    min-width: 40px;
    min-height: 34px;
    padding-inline: 9px;
    font-size: 11px;
    white-space: nowrap;
  }

  .messages-console.has-active-thread .message-conversation-actions {
    scrollbar-width: none;
  }

  .messages-console.has-active-thread .message-conversation-actions::-webkit-scrollbar {
    display: none;
  }

  .messages-console .message-sync-note {
    padding: 6px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .messages-console .message-bubble-list {
    min-height: 0;
    max-height: none;
    padding: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .messages-console .message-bubble {
    max-width: 90%;
    padding: 9px 10px;
  }

  .messages-console .message-bubble p {
    font-size: 13px;
  }

  .messages-console .message-composer {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    align-items: end;
    border-top-color: #dbe4ea;
    padding: 8px 10px calc(8px + var(--safe-bottom));
  }

  .messages-console .message-send-blocker {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 9px 10px;
  }

  .messages-console .message-send-blocker .button {
    width: 100%;
  }

  .messages-console .message-template-row {
    grid-column: 1 / -1;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .messages-console .message-template-row .button {
    min-height: 28px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .messages-console .message-composer .field.compact {
    display: none;
  }

  .messages-console .message-composer [data-message-subject-field] {
    grid-column: 1 / -1;
  }

  .messages-console .message-composer .message-field {
    grid-column: 1 / 2;
  }

  .messages-console .message-composer .message-field span {
    display: none;
  }

  .messages-console .message-composer .message-field textarea {
    min-height: 42px;
    max-height: 92px;
    resize: none;
  }

  .messages-console .message-composer .button.primary {
    grid-column: 2 / 3;
    min-width: 64px;
    min-height: 42px;
    padding-inline: 12px;
  }

  .messages-console .message-composer > .muted {
    display: none;
  }
}

@media (max-width: 430px) {

  .messages-page .section-heading .actions .button {
    padding-inline: 8px;
  }

  .messages-page .crm-toolbar-actions .button {
    padding-inline: 9px;
  }

  .messages-console .message-conversation-actions {
    grid-template-columns: none;
  }

  .messages-console .message-bubble {
    max-width: 93%;
  }

  .jobsite-mobile-submit-bar {
    grid-template-columns: 1fr;
  }

  .jobsite-mobile-submit-bar .button {
    width: 100%;
  }

  .pricing-view[data-pricing-form] {
    padding-bottom: calc(132px + var(--safe-bottom));
  }

  .pricing-mobile-action-bar {
    grid-template-columns: 1fr;
  }

  .pricing-mobile-action-bar .button {
    width: 100%;
  }
}

/* Messages hardening: keep the inbox/app shell stable under slow mobile networks. */
.messages-console {
  contain: layout style;
}

.messages-console .message-inbox-items,
.messages-console .message-bubble-list {
  overscroll-behavior: contain;
}

.messages-console .message-bubble p,
.messages-console .message-inbox-main p,
.messages-console .message-thread-head strong {
  overflow-wrap: anywhere;
}

.messages-console .message-load-status {
  min-height: 28px;
}

@media (max-width: 760px) {
  .messages-page .crm-tabs {
    display: none;
  }

  .messages-page .section-body {
    height: calc(100dvh - 74px - 49px - var(--safe-bottom));
  }

  .messages-page .crm-toolbar.simple {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .messages-console .message-inbox-item {
    min-height: 64px;
  }

  .messages-console .message-conversation-head {
    box-shadow: 0 1px 0 rgba(20, 58, 86, 0.08);
  }

  .messages-console .message-sync-note {
    min-height: 28px;
  }

  .messages-console .message-bubble-list {
    padding-bottom: 14px;
  }

  .messages-console .message-composer textarea {
    font-size: 16px;
  }
}

/* KNHQ in-house messaging build lane. */
.message-mode-tabs {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  border: 1px solid #dbe4ea;
  border-radius: 999px;
  padding: 4px;
  background: #fff;
}

.message-mode-tabs a {
  min-height: 32px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border-radius: 999px;
  padding: 0 11px;
  color: #526777;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.message-mode-tabs svg {
  width: 15px;
  height: 15px;
}

.message-mode-tabs em {
  color: #8795a1;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.message-mode-tabs a.active {
  color: #06343d;
  background: #e9fbf8;
}

.message-mode-tabs a.active em {
  color: #0a8279;
}

.messages-page .message-mode-tabs {
  grid-area: mode;
}

.native-messages-page .section-body {
  gap: 8px;
  padding: 10px;
  background: #f6f8fb;
}

.native-workspace-tabs {
  width: fit-content;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid #dbe4ea;
  border-radius: 10px;
  padding: 4px;
  background: #fff;
}

.native-workspace-tabs a {
  min-height: 34px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 10px;
  color: #526372;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.native-workspace-tabs a.active {
  color: #06343d;
  background: #eafaf4;
}

.native-workspace-tabs svg {
  width: 15px;
  height: 15px;
}

[data-native-message-results].is-refreshing .native-message-console {
  opacity: 0.98;
}

[data-native-message-results].is-refreshing .native-setup-console {
  opacity: 0.98;
}

.native-message-console {
  position: relative;
  min-height: 650px;
  height: calc(100dvh - 190px);
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr) 324px;
  gap: 0;
  border: 1px solid #d6e0e7;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.native-message-console.hide-native-drawer {
  grid-template-columns: 332px minmax(0, 1fr) 48px;
}

.native-message-console.hide-native-drawer .native-contact-drawer-body {
  display: none;
}

.native-message-rail,
.native-message-thread-panel,
.native-message-status-panel {
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.native-message-rail,
.native-message-status-panel {
  display: flex;
  flex-direction: column;
}

.native-message-rail {
  border-right: 1px solid #dbe4ea;
}

.native-message-status-panel {
  border-left: 1px solid #dbe4ea;
  overflow-y: auto;
}

.native-message-rail-head,
.native-thread-head,
.native-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.native-message-rail-head {
  min-height: 54px;
  border-bottom: 1px solid #e2e9ee;
  padding: 10px 12px;
}

.native-message-rail-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.native-message-rail-head strong {
  color: #1c2b36;
  font-size: 17px;
  font-weight: 900;
}

.native-message-rail-head span,
.native-panel-head span {
  color: #748391;
  font-size: 11px;
  font-weight: 850;
}

.native-open-dialer {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  justify-content: center;
  border-radius: 9px;
  padding: 0;
}

.native-open-dialer span {
  display: none;
}

.native-open-dialer svg {
  width: 17px;
  height: 17px;
}

.native-dialer-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.native-dialer-grip {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  color: #8b99a6;
  background: transparent;
}

.native-dialer-grip svg {
  width: 15px;
  height: 15px;
}

.native-dialer-title {
  min-width: 0;
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

.native-dialer-title > span {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #0a6d56;
  background: #e6f8f1;
}

.native-dialer-title > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.native-dialer-title strong {
  overflow: hidden;
  color: #172b3a;
  font-size: 17px;
  font-weight: 920;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-dialer-title em {
  color: #0a6d56;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.native-dialer-head .button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
}

.native-dialer-head .button span {
  display: none;
}

.native-dialer-display {
  display: grid;
  gap: 10px;
}

.native-dialer-from,
.native-dialer-number,
.native-dialer-note {
  display: grid;
  gap: 5px;
  margin: 0;
}

.native-dialer-number span,
.native-dialer-note span,
.native-dialer-meta span,
.native-dialer-from span {
  color: #647585;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.native-dialer-from-button {
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  border: 0;
  border-radius: 9px;
  padding: 0;
  color: #415363;
  background: transparent;
  font: inherit;
  text-align: left;
}

.native-dialer-from-button strong {
  min-width: 0;
  overflow: hidden;
  color: #415363;
  font-size: 13px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-dialer-from-button svg {
  width: 14px;
  height: 14px;
  opacity: 0.65;
}

.native-dialer-number input,
.native-dialer-note input,
.native-dialer-transfer-panel input {
  width: 100%;
  min-width: 0;
  border: 1px solid #d8e2e9;
  border-radius: 10px;
  color: #102633;
  background: #fbfdff;
  letter-spacing: 0;
}

.native-dialer-number input {
  min-height: 42px;
  padding: 0 12px;
  font-size: 22px;
  font-weight: 820;
  text-align: center;
}

.native-dialer-note input,
.native-dialer-transfer-panel input {
  min-height: 38px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 820;
}

.native-dialer-meta {
  min-height: 18px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.native-dialer-meta strong,
.native-dialer-meta em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-dialer-meta strong {
  color: #172b3a;
  font-size: 13px;
  font-weight: 920;
  text-align: right;
}

.native-dialer-meta em {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #687888;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-dialer-live-panel {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(10, 109, 86, 0.2);
  border-radius: 12px;
  padding: 10px;
  background: #f2fbf8;
}

.native-dialer-live-panel[hidden] {
  display: none;
}

.native-dialer-live-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
}

.native-dialer-live-summary span,
.native-dialer-live-summary em {
  color: #0a6d56;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.native-dialer-live-summary strong {
  min-width: 0;
  overflow: hidden;
  color: #113528;
  font-size: 17px;
  font-weight: 940;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-dialer-live-summary em {
  grid-row: 1 / span 2;
  grid-column: 2;
  border-radius: 999px;
  padding: 6px 8px;
  color: #063c35;
  background: #dff8ef;
  font-size: 12px;
}

.native-dialer-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.native-dialer-control {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid rgba(9, 69, 103, 0.12);
  border-radius: 11px;
  color: #172b3a;
  background: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.native-dialer-control svg {
  width: 17px;
  height: 17px;
}

.native-dialer-control.is-active {
  border-color: rgba(10, 109, 86, 0.32);
  color: #075f52;
  background: #dff8ef;
}

.native-dialer-control:disabled {
  color: #a2adb8;
  cursor: not-allowed;
  background: #f5f7f9;
}

.native-dialer-control.is-end {
  color: #fff;
  border-color: #be123c;
  background: #be123c;
}

.native-dialer-control.is-end:disabled {
  color: #fff;
  border-color: #d88ba0;
  background: #d88ba0;
}

.native-dialer-control.is-recording.is-active {
  color: #be123c;
  border-color: rgba(190, 18, 60, 0.22);
  background: #fff1f2;
}

.native-dialer-transfer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
}

.native-dialer-transfer-panel[hidden] {
  display: none;
}

.native-dialer-live-panel small {
  min-height: 13px;
  color: #0a6d56;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}

.native-dialer-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  justify-items: center;
}

.native-dialer-keypad[hidden] {
  display: none;
}

.native-dialer-key {
  width: 64px;
  height: 64px;
  min-height: 0;
  display: grid;
  place-items: center;
  gap: 0;
  border: 0;
  border-radius: 999px;
  color: #172b3a;
  background: #eef1f4;
  font: inherit;
  cursor: pointer;
}

.native-dialer-key strong {
  font-size: 26px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
}

.native-dialer-key small {
  margin-top: -7px;
  color: #637382;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.native-dialer-key svg {
  width: 18px;
  height: 18px;
}

.native-dialer-key:hover:not(:disabled) {
  background: #e0e8ec;
}

.native-dialer-key:disabled {
  color: #9aa7b2;
  cursor: not-allowed;
  background: #f5f7f9;
}

.native-dialer-key.is-tool {
  color: #536575;
  background: transparent;
}

.native-dialer-keypad-actions {
  display: grid;
  grid-template-columns: 64px 66px 64px;
  justify-content: center;
  gap: 12px;
  align-items: center;
}

.native-dialer-keypad-actions[hidden] {
  display: none;
}

.native-dialer-call {
  width: 66px;
  min-width: 66px;
  height: 66px;
  min-height: 66px;
  justify-self: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 0;
}

.native-dialer-call span {
  display: none;
}

.native-dialer-call svg {
  width: 24px;
  height: 24px;
}

.native-dialer-mode-panel {
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 5px;
  border: 1px solid #edf2f5;
  border-radius: 14px;
  color: #6b7c8a;
  background: #f8fbfc;
  text-align: center;
}

.native-dialer-mode-panel[hidden] {
  display: none;
}

.native-dialer-mode-panel strong {
  color: #172b3a;
  font-size: 15px;
  font-weight: 900;
}

.native-dialer-mode-panel span {
  color: #6b7c8a;
  font-size: 12px;
  font-weight: 760;
}

.native-dialer-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  border-top: 1px solid #edf2f5;
  padding-top: 8px;
}

.native-dialer-nav button {
  min-width: 0;
  min-height: 50px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 0;
  border-radius: 11px;
  color: #506272;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
}

.native-dialer-nav button.is-active {
  color: #073d64;
  background: #edf8ff;
}

.native-dialer-nav svg {
  width: 19px;
  height: 19px;
}

.native-dialer-nav span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-standalone-dialer-card p {
  margin: 0;
  min-height: 16px;
  color: #687888;
  font-size: 11px;
  font-weight: 760;
  text-align: center;
}

.native-standalone-dialer-card.is-blocked {
  background: #fbfcfd;
}

.native-standalone-dialer-card.is-calling,
.native-standalone-dialer-card.is-call-started,
.native-call-dialer.is-calling,
.native-call-dialer.is-call-started {
  border-color: rgba(25, 185, 129, 0.38);
}

.native-standalone-dialer-card.is-calling p,
.native-standalone-dialer-card.is-call-started p,
.native-call-dialer.is-calling p,
.native-call-dialer.is-call-started p {
  color: #0a6d56;
  font-weight: 860;
}

.native-standalone-dialer-card.is-calling .native-dialer-call,
.native-standalone-dialer-card.is-call-started .native-dialer-call {
  opacity: 0.82;
}

.native-standalone-dialer-card.is-call-started .native-dialer-call {
  display: none;
}

.native-standalone-dialer-card.is-call-started .native-dialer-keypad-actions,
.native-standalone-dialer-card.is-keypad-collapsed .native-dialer-keypad,
.native-standalone-dialer-card.is-keypad-collapsed .native-dialer-keypad-actions {
  display: none;
}

.native-call-dialer .button.is-active {
  color: #0f5132;
  border-color: rgba(25, 185, 129, 0.42);
  background: #e8f8f0;
}

.native-message-thread-list {
  display: grid;
  min-height: 0;
  overflow-y: auto;
}

.native-contact-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 6px;
  border-bottom: 1px solid #edf2f5;
  padding: 8px;
}

.native-contact-search input {
  min-height: 38px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.2;
}

.native-contact-search .button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  justify-content: center;
  line-height: 0;
  overflow: hidden;
}

.native-contact-search .button span {
  display: none;
}

.native-contact-search .button svg {
  width: 17px;
  height: 17px;
}

.native-inbox-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border-bottom: 1px solid #edf2f5;
  padding: 8px;
}

.native-inbox-filters a {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  justify-content: center;
  gap: 6px;
  align-items: center;
  border: 1px solid #dbe4ea;
  border-radius: 999px;
  color: #435563;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.native-inbox-filters a.active {
  color: #06343d;
  border-color: rgba(25, 185, 129, 0.42);
  background: #eafaf4;
}

.native-inbox-filters em {
  color: #748391;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.native-thread-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid #edf2f5;
  border-left: 3px solid transparent;
  padding: 11px 12px;
}

.native-contact-item:not(.active) {
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
}

.native-thread-item.active {
  border-left-color: #19b981;
  background: #eefaf7;
}

.native-thread-item > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #0b4654;
  background: #dff7f4;
}

.native-thread-item svg {
  width: 17px;
  height: 17px;
}

.native-thread-item strong,
.native-thread-item p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-thread-item strong {
  display: block;
  color: #1c2b36;
  font-size: 13px;
  font-weight: 900;
}

.native-thread-item p {
  margin: 2px 0 0;
  color: #607182;
  font-size: 11.5px;
  font-weight: 720;
}

.native-thread-item em {
  min-width: 24px;
  border-radius: 999px;
  padding: 4px 6px;
  color: #0a6d56;
  background: #e7f8f1;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.native-contact-item {
  grid-template-rows: auto auto;
  align-items: start;
  text-decoration: none;
}

.native-contact-item > span {
  color: #0a4652;
  font-size: 12px;
  font-weight: 950;
}

.native-contact-item > small {
  grid-column: 2 / 4;
  min-width: 0;
  overflow: hidden;
  display: flex;
  gap: 5px;
  align-items: center;
  color: #748391;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.native-contact-item > small svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.native-contact-item > small b {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 999px;
  background: #0f8fb9;
}

.native-contact-item > small .native-potential-customer-label {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 2px 6px;
  color: #865b00;
  background: #fff3cf;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.2;
}

.native-contact-trailing {
  min-width: 48px;
  display: grid;
  gap: 5px;
  justify-items: end;
  align-content: start;
}

.native-contact-trailing time {
  color: #667786;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.native-contact-trailing em,
.native-contact-item.has-inbound .native-contact-trailing em {
  width: 22px;
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0;
  color: #fff;
  background: #1689d8;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(22, 137, 216, 0.25);
}

.native-contact-item.has-inbound {
  border-left-color: #0f8fb9;
}

.native-contact-item.has-inbound em {
  color: #064e67;
  background: rgba(15, 143, 185, 0.12);
}

.native-contact-item.is-starred > span {
  color: #8a5b00;
  background: #fff4d8;
}





.native-customer-thread-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.native-mobile-thread-back,
.native-mobile-more-action,
.native-thread-mobile-subtitle,
.native-mobile-message-meta {
  display: none;
}

.native-thread-identity {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.native-thread-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: #0a4652;
  background: #dff7f4;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.native-thread-title {
  min-width: 0;
}

.native-thread-head span {
  color: #71808e;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.native-thread-head h3 {
  margin: 2px 0 0;
  color: #1c2b36;
  font-size: 17px;
  font-weight: 900;
}

.native-thread-head p {
  margin: 2px 0 0;
  color: #607182;
  font-size: 12px;
  font-weight: 720;
}

.native-thread-badges {
  display: flex;
  gap: 6px;
  align-items: center;
}

.native-thread-badges span {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  color: #0a6d56;
  background: #e7f8f1;
  font-size: 10px;
  font-weight: 950;
}

.native-thread-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  align-items: center;
}

.native-thread-actions .button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  justify-content: center;
}

.native-thread-actions .button span {
  display: none;
}

.native-thread-actions .button svg {
  width: 16px;
  height: 16px;
}

.native-thread-actions .button.is-active {
  color: #8a5b00;
  border-color: rgba(217, 119, 6, 0.32);
  background: #fff4d8;
}

.native-thread-actions .button.danger:hover {
  color: #9f1239;
  border-color: rgba(225, 29, 72, 0.26);
  background: #fff1f3;
}



.native-message-date-divider {
  display: flex;
  justify-content: center;
  margin: 2px 0 5px;
}

.native-message-date-divider span {
  border: 1px solid rgba(95, 119, 133, 0.14);
  border-radius: 999px;
  padding: 5px 10px;
  color: #5b6b78;
  background: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.native-conversation-row {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.native-conversation-row.outbound,
.native-conversation-row.internal {
  justify-content: flex-end;
}

.native-conversation-row.inbound {
  justify-content: flex-start;
}

.native-conversation-row.native-email-conversation {
  justify-content: center;
  align-items: stretch;
}

.native-email-message-card {
  width: min(100%, 860px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  color: #192e3d;
  background: #fff;
  box-shadow: 0 7px 20px rgba(5, 24, 44, 0.05);
}

.native-email-conversation.has-delivery-issue .native-email-message-card {
  border-color: rgba(225, 29, 72, 0.35);
}

.native-email-card-head {
  min-height: 38px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #dfe6eb;
  background: #eef2f5;
}

.native-email-subject-button,
.native-email-card-controls button,
.native-email-summary-actions button,
.native-email-reader-head button {
  appearance: none;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.native-email-subject-button {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  text-align: left;
}

.native-email-subject-button span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-email-card-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-right: 4px;
}

.native-email-card-controls button,
.native-email-summary-actions button,
.native-email-reader-head button {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  color: #506575;
}

.native-email-card-controls button:hover,
.native-email-summary-actions button:hover,
.native-email-reader-head button:hover {
  color: #0b5e59;
  background: rgba(12, 118, 107, 0.09);
}

.native-email-card-controls svg,
.native-email-summary-actions svg,
.native-email-reader-head svg {
  width: 16px;
  height: 16px;
}

.native-email-toggle-button svg {
  transition: transform 0.16s ease;
}

.native-email-message-card.is-expanded .native-email-toggle-button svg {
  transform: rotate(180deg);
}

.native-email-summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}

.native-email-avatar,
.native-email-reader-avatar {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #075e58;
  background: #d8f7ef;
  font-size: 10px;
  font-weight: 950;
}

.native-email-avatar {
  width: 36px;
  height: 36px;
}

.native-email-avatar i,
.native-email-avatar > svg {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 2px;
  background: #e7f8f4;
}

.native-email-summary-copy {
  min-width: 0;
}

.native-email-sender-line {
  min-width: 0;
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.native-email-sender-line strong,
.native-email-sender-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-email-sender-line strong {
  flex: 0 1 auto;
  color: #162e3f;
  font-size: 13px;
  font-weight: 880;
}

.native-email-sender-line span {
  flex: 1 1 auto;
  color: #6d7d89;
  font-size: 11px;
  font-weight: 650;
}

.native-email-preview,
.native-email-recipient {
  margin: 3px 0 0;
  color: #596c7a;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
}

.native-email-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-email-recipient {
  display: none;
}

.native-email-recipient span {
  color: #3c5261;
  font-weight: 850;
}

.native-email-summary-actions {
  display: flex;
  gap: 1px;
  align-items: center;
}

.native-email-summary-actions time {
  margin-right: 3px;
  color: #687b89;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.native-email-body {
  display: none;
  border-top: 1px solid #e4eaee;
  padding: 15px 16px 13px;
  background: #fff;
}

.native-email-message-card.is-expanded .native-email-body {
  display: block;
}

.native-email-message-card.is-expanded .native-email-preview {
  display: none;
}

.native-email-message-card.is-expanded .native-email-recipient {
  display: block;
}

.native-email-body-copy,
.native-email-reader-body .native-email-body-copy {
  color: #1b2e3b;
  font-size: 14px;
  font-weight: 540;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.native-email-body-copy.is-html {
  white-space: normal;
}

.native-email-body-copy.is-html :first-child {
  margin-top: 0;
}

.native-email-body-copy.is-html :last-child {
  margin-bottom: 0;
}

.native-email-body-copy.is-html p,
.native-email-body-copy.is-html blockquote,
.native-email-body-copy.is-html ul,
.native-email-body-copy.is-html ol,
.native-email-body-copy.is-html pre {
  margin: 0 0 0.9em;
}

.native-email-body-copy.is-html a {
  color: #145fc0;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.native-email-body-copy.is-html blockquote {
  border-left: 3px solid #d8e0e7;
  padding-left: 12px;
  color: #596c7b;
}

.native-email-body-copy.is-html table {
  max-width: 100%;
  border-collapse: collapse;
}

.native-email-body-copy.is-html td,
.native-email-body-copy.is-html th {
  border: 1px solid #dce4ea;
  padding: 5px 7px;
  vertical-align: top;
}

.native-email-body-content .native-message-media-list {
  margin-top: 14px;
}

.native-email-body-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  border-top: 1px solid #e4eaee;
  padding-top: 12px;
}

.native-email-body-actions > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.native-email-body-actions > div > span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: #607383;
  font-size: 11px;
  font-weight: 800;
}

.native-email-body-actions svg {
  width: 14px;
  height: 14px;
}

.native-email-body-actions .native-delivery-issue,
.native-email-reader-error {
  color: #a20d3b;
  font-weight: 900;
}

body.native-email-reader-open {
  overflow: hidden;
}

.native-email-reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 24, 36, 0.68);
  backdrop-filter: blur(3px);
}

.native-email-reader {
  width: min(1180px, 100%);
  height: min(820px, calc(100dvh - 48px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(3, 16, 27, 0.34);
}

.native-email-reader-head {
  min-height: 72px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid #dce5ea;
  padding: 12px 16px;
  background: #f7f9fa;
}

.native-email-reader-head > div {
  min-width: 0;
}

.native-email-reader-head span,
.native-email-reader-head p {
  color: #6a7b87;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.native-email-reader-head h2 {
  margin: 2px 0;
  overflow: hidden;
  color: #132c3d;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-email-reader-head p {
  margin: 0;
  text-transform: none;
}

.native-email-reader-head button {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #d8e1e7;
  background: #fff;
}

.native-email-reader-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow-y: auto;
  padding: 16px;
  background: #f4f7f9;
}

.native-email-reader-message {
  border: 1px solid #d9e2e7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(5, 24, 44, 0.04);
}

.native-email-reader-message.is-failed {
  border-color: rgba(225, 29, 72, 0.34);
}

.native-email-reader-message > header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #e5ebef;
  padding: 11px 14px;
}

.native-email-reader-avatar {
  width: 36px;
  height: 36px;
}

.native-email-reader-message > header > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.native-email-reader-message > header strong,
.native-email-reader-message > header span,
.native-email-reader-message > header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-email-reader-message > header strong {
  color: #172f40;
  font-size: 13px;
  font-weight: 900;
}

.native-email-reader-message > header span,
.native-email-reader-message > header small,
.native-email-reader-message > header time {
  color: #6a7b88;
  font-size: 11px;
  font-weight: 650;
}

.native-email-reader-message > header time {
  white-space: nowrap;
}

.native-email-reader-body {
  padding: 18px 16px 24px;
}

.native-email-reader-error {
  margin: 0;
  border-top: 1px solid rgba(225, 29, 72, 0.15);
  padding: 10px 16px;
  font-size: 12px;
}

.native-email-reader-footer {
  display: flex;
  justify-content: flex-start;
  border-top: 1px solid #dce5ea;
  padding: 10px 16px;
  background: #fff;
}

.native-email-inline-reply {
  margin-top: 14px;
}

.native-email-message-card.is-replying .native-email-body-actions {
  display: none;
}

.native-email-inline-composer {
  position: relative;
  min-width: 0;
  overflow: visible;
  border: 1px solid #3276e8;
  border-radius: 3px;
  color: #203246;
  background: #fff;
  box-shadow: 0 6px 16px rgba(19, 47, 77, 0.08);
}

.native-email-compose-row {
  min-height: 41px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #e0e5eb;
  padding: 5px 10px;
}

.native-email-compose-row-label {
  flex: 0 0 auto;
  color: #65738b;
  font-size: 13px;
  font-weight: 540;
  white-space: nowrap;
}

.native-email-compose-row input {
  min-width: 0;
  width: 100%;
  height: 30px;
  border: 0;
  outline: 0;
  padding: 0;
  color: #1d2c3f;
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.native-email-compose-row input:focus {
  box-shadow: none;
}

.native-email-compose-to-row {
  padding-right: 6px;
}

.native-email-recipient-chip {
  min-width: 0;
  max-width: min(480px, 72%);
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid #cbd4df;
  border-radius: 4px;
  padding: 2px 6px 2px 3px;
  background: #fff;
}

.native-email-recipient-chip > span {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #59458d;
  background: #e8e2f7;
  font-size: 9px;
  font-weight: 900;
}

.native-email-recipient-chip input {
  overflow: hidden;
  text-overflow: ellipsis;
}

.native-email-compose-recipient-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.native-email-compose-recipient-actions button,
.native-email-compose-tools button,
.native-email-compose-file-button,
.native-email-compose-send-actions > button,
.native-email-format-menu button,
.native-email-emoji-menu button,
.native-email-reader-message-actions button {
  appearance: none;
  border: 0;
  color: #53647b;
  background: transparent;
  cursor: pointer;
}

.native-email-compose-recipient-actions button {
  height: 30px;
  min-width: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 12px;
}

.native-email-compose-recipient-actions button:hover,
.native-email-compose-tools button:hover,
.native-email-compose-file-button:hover,
.native-email-compose-send-actions > button:hover,
.native-email-reader-message-actions button:hover {
  color: #1b4f91;
  background: #edf4ff;
}

.native-email-compose-recipient-actions svg,
.native-email-compose-tools svg,
.native-email-compose-file-button svg,
.native-email-compose-send-actions svg,
.native-email-reader-message-actions svg {
  width: 16px;
  height: 16px;
}

.native-email-compose-optional-row {
  display: none;
}

.native-email-compose-optional-row.is-visible {
  display: flex;
}

.native-email-compose-subject-row {
  min-height: 39px;
}

.native-email-compose-subject-row input {
  font-weight: 650;
}

.native-email-compose-editor-shell {
  min-height: 118px;
  display: flex;
  padding: 12px 10px;
  background: #fff;
}

.native-email-compose-editor {
  min-width: 0;
  width: 100%;
  min-height: 94px;
  outline: 0;
  color: #1c2c40;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.native-email-compose-editor:empty::before {
  color: #7c889b;
  content: attr(data-placeholder);
  pointer-events: none;
}

.native-email-compose-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid #e6ebf0;
  padding: 7px 10px;
}

.native-email-compose-attachments span {
  max-width: 100%;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border-radius: 4px;
  padding: 4px 7px;
  color: #3c5368;
  background: #eef3f7;
  font-size: 11px;
  font-weight: 760;
}

.native-email-compose-attachments span > svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.native-email-compose-attachments button {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 3px;
  padding: 0;
  color: #637385;
  background: transparent;
  cursor: pointer;
}

.native-email-compose-attachments button svg {
  width: 12px;
  height: 12px;
}

.native-email-format-menu,
.native-email-emoji-menu {
  position: absolute;
  z-index: 4;
  left: 8px;
  bottom: 48px;
  display: flex;
  gap: 3px;
  align-items: center;
  border: 1px solid #d5dee7;
  border-radius: 5px;
  padding: 5px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(12, 36, 58, 0.16);
}

.native-email-emoji-menu {
  left: 42px;
}

.native-email-format-menu button,
.native-email-emoji-menu button {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  padding: 0 5px;
}

.native-email-format-menu button:hover,
.native-email-emoji-menu button:hover {
  color: #174f94;
  background: #eef4ff;
}

.native-email-format-menu svg {
  width: 15px;
  height: 15px;
}

.native-email-compose-toolbar {
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-top: 1px solid #e1e6ec;
  padding-left: 5px;
  background: #fff;
}

.native-email-compose-tools,
.native-email-compose-send-actions {
  min-width: 0;
  display: flex;
  align-items: center;
}

.native-email-compose-tools {
  overflow-x: auto;
  scrollbar-width: none;
}

.native-email-compose-tools::-webkit-scrollbar {
  display: none;
}

.native-email-compose-tools button,
.native-email-compose-file-button,
.native-email-compose-send-actions > button {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  padding: 0;
}

.native-email-compose-tools button span {
  font-size: 12px;
  font-weight: 700;
}

.native-email-compose-file-button {
  margin: 0;
}

.native-email-compose-send-actions {
  flex: 0 0 auto;
  gap: 5px;
  padding-right: 5px;
}

.native-email-split-send {
  position: relative;
  display: flex;
  overflow: visible;
  border-radius: 5px;
  background: #2469e8;
}

.native-email-split-send > button {
  appearance: none;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.native-email-split-send > button:first-child {
  width: 38px;
}

.native-email-split-send > button:nth-child(2) {
  width: 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.36);
}

.native-email-split-send > button:hover {
  background: rgba(0, 0, 0, 0.11);
}

.native-email-split-send svg {
  width: 16px;
  height: 16px;
}

.native-email-send-menu {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 38px;
  width: 150px;
  display: grid;
  gap: 2px;
  border: 1px solid #d6dfe7;
  border-radius: 5px;
  padding: 5px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(12, 36, 58, 0.18);
}

.native-email-send-menu button {
  min-height: 32px;
  display: flex;
  gap: 7px;
  align-items: center;
  border: 0;
  border-radius: 4px;
  padding: 6px 8px;
  color: #253b50;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 740;
  cursor: pointer;
}

.native-email-send-menu button:hover {
  background: #eef4ff;
}

.native-email-send-menu svg {
  width: 14px;
  height: 14px;
}

.native-email-reader-overlay {
  padding: 12px;
}

.native-email-reader {
  width: min(1720px, calc(100vw - 24px));
  height: calc(100dvh - 24px);
}

.native-email-reader-head {
  min-height: 42px;
  padding: 5px 12px 5px 16px;
  background: #fff;
}

.native-email-reader-head h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-email-reader-head > button {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  border-color: transparent;
}

.native-email-reader-list {
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
}

.native-email-reader-message {
  border: 0;
  box-shadow: none;
}

.native-email-reader-message > header {
  border-bottom: 0;
  padding: 8px 10px 4px;
}

.native-email-reader-message-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.native-email-reader-message-actions button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 4px;
}

.native-email-reader-body {
  padding: 10px 12px 20px;
}

.native-email-reader.is-replying .native-email-reader-list {
  flex: 0 1 46%;
  min-height: 180px;
}

.native-email-reader-reply {
  flex: 1 1 44%;
  min-height: 230px;
  overflow: auto;
  border-top: 1px solid #dbe3ea;
  padding: 0 8px 8px;
  background: #fff;
}

.native-email-reader-reply .native-email-inline-composer {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.native-email-reader-reply .native-email-compose-editor-shell {
  flex: 1 1 auto;
}

.native-email-reader-reply .native-email-compose-editor {
  min-height: 120px;
}

.native-conversation-card {
  min-width: 0;
  max-width: min(72%, 650px);
  display: grid;
  gap: 7px;
  border: 1px solid rgba(22, 47, 64, 0.1);
  border-radius: 10px;
  padding: 10px 12px 7px;
  color: #1b2d3a;
  background: #fff;
  box-shadow: 0 8px 22px rgba(5, 24, 44, 0.05);
}

.native-conversation-row.outbound .native-conversation-card {
  border-color: rgba(15, 86, 126, 0.1);
  background: #eef7fb;
}

.native-conversation-row.internal .native-conversation-card {
  max-width: min(64%, 560px);
  border: 2px solid #b45309;
  background: #ffe08a;
  box-shadow: none;
}

.native-internal-message-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #713f12;
  font-size: 11px;
  font-weight: 900;
}

.native-internal-message-label svg { width: 13px; height: 13px; }

.native-conversation-row.is-failed .native-conversation-card {
  border-color: rgba(225, 29, 72, 0.28);
  background: #fff5f6;
}

.native-conversation-row.is-pending .native-conversation-card {
  opacity: 0.82;
}

.native-conversation-row.is-confirmed .native-conversation-card {
  animation: native-message-settle 0.22s ease;
}

@keyframes native-message-settle {
  from {
    transform: translateY(3px);
    opacity: 0.84;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.native-conversation-text {
  margin: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 620;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.native-conversation-text.is-empty {
  color: #667887;
  font-style: italic;
}

.native-conversation-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  min-height: 14px;
  color: #687987;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
}

.native-conversation-foot .native-delivery-issue {
  color: #9f1239;
  font-weight: 950;
}

.native-message-sender-badge {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  position: relative;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  color: #0e354f;
  background: #fff;
  box-shadow: 0 8px 18px rgba(5, 24, 44, 0.07);
}

.native-message-sender-badge::after {
  content: attr(data-native-badge-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 10;
  width: max-content;
  max-width: min(240px, calc(100vw - 36px));
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  padding: 7px 9px;
  color: #102b3f;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 28px rgba(5, 24, 44, 0.16);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.22;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.native-conversation-row.inbound .native-message-sender-badge::after {
  right: auto;
  left: 0;
}

.native-message-sender-badge:hover::after,
.native-message-sender-badge:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.native-message-sender-badge:focus-visible {
  outline: 2px solid rgba(17, 199, 189, 0.36);
  outline-offset: 3px;
}

.native-message-sender-badge span {
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.native-message-sender-badge i,
.native-message-sender-badge svg {
  width: 15px;
  height: 15px;
}

.native-message-sender-badge > i,
.native-message-sender-badge > svg {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 2px;
  color: #075e58;
  background: #d8fbf3;
}

.native-message-sender-badge.is-inbound {
  color: #334155;
  background: #f2f6f8;
}

.native-message-sender-badge.is-internal > i,
.native-message-sender-badge.is-internal > svg {
  color: #8a5b00;
  background: #ffe7a8;
}

.native-message-system-row {
  align-self: center;
  max-width: min(84%, 760px);
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(95, 119, 133, 0.16);
  border-radius: 999px;
  padding: 6px 10px;
  color: #5d6e7c;
  background: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
}

.native-message-system-row svg {
  width: 14px;
  height: 14px;
  color: #0a8279;
}

.native-message-system-row time {
  color: #7a8894;
  font-size: 11px;
  font-weight: 840;
}

.native-conversation-row.is-call .native-conversation-card {
  width: min(720px, calc(100% - 42px));
  max-width: calc(100% - 42px);
  background: #f7fcff;
}

.native-conversation-card .message-call-card {
  border: 0;
  padding: 0;
  background: transparent;
}

.native-conversation-card .message-call-card-head {
  grid-template-columns: 30px minmax(0, 1fr);
}

.native-conversation-card .message-call-card-head > span {
  width: 30px;
  height: 30px;
}

.native-conversation-card .message-call-card-head strong {
  font-size: 13px;
}

.native-conversation-card .message-recording {
  width: 100%;
  background: #fff;
}

.native-test-bubble {
  max-width: min(74%, 660px);
  display: grid;
  gap: 7px;
  border: 1px solid #dbe4ea;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}

.native-test-bubble.outbound {
  align-self: flex-end;
  border-color: #17a978;
  color: #fff;
  background: #19b981;
}

.native-test-bubble.internal {
  align-self: flex-start;
  max-width: min(58%, 480px);
  margin-left: 34px;
  gap: 4px;
  border-color: rgba(217, 119, 6, 0.28);
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff7d3;
}

.native-test-bubble.is-failed {
  color: #7a1029;
  border-color: #f2b7c4;
  background: #fff5f6;
}

.native-test-bubble div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.native-test-bubble strong {
  font-size: 12px;
  font-weight: 900;
}

.native-test-bubble span,
.native-test-bubble em {
  font-size: 10.5px;
  font-style: normal;
  font-weight: 760;
  opacity: 0.82;
}

.native-test-bubble p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 680;
  line-height: 1.42;
}

.native-test-bubble .message-actor-audit {
  display: inline-flex;
  justify-content: flex-start;
  gap: 5px;
  width: fit-content;
}

.native-test-bubble .message-actor-audit strong,
.native-test-bubble .message-actor-audit span {
  font-size: inherit;
}

.native-test-bubble.internal strong,
.native-test-bubble.internal span,
.native-test-bubble.internal em {
  font-size: 10px;
}

.native-test-bubble.internal p {
  font-size: 12px;
  font-weight: 700;
}

.native-test-bubble.is-call {
  min-width: min(560px, 92%);
  max-width: min(760px, 92%);
}

.native-test-bubble .message-call-card {
  border: 1px solid rgba(10, 109, 86, 0.14);
  border-radius: 8px;
  padding: 9px;
  color: #1c2b36;
  background: rgba(255, 255, 255, 0.94);
}

.native-test-bubble .message-call-card-head {
  display: grid;
}

.native-test-bubble .message-call-card-head {
  grid-template-columns: 34px minmax(0, 1fr);
}

.native-test-bubble .message-call-card-head > div {
  min-width: 0;
  display: block;
}

.native-test-bubble .message-recording {
  background: #fff;
}

.native-message-media-list {
  display: grid;
  gap: 7px;
}

.native-message-media-thumb {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(21, 36, 49, 0.1);
  background: #f5f8fa;
}

.native-message-media-thumb img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.native-message-media-player,
.native-message-media-audio {
  width: 100%;
}

.native-message-media-link {
  color: #0a8279;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.native-empty-thread {
  margin: auto;
  max-width: 330px;
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px dashed #d7e2ea;
  border-radius: 10px;
  padding: 22px;
  color: #607182;
  background: #fff;
  text-align: center;
}

.native-empty-thread svg {
  width: 24px;
  height: 24px;
  color: #0a8279;
}

.native-empty-thread strong {
  color: #1c2b36;
  font-size: 15px;
}

.native-message-composer {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 46px;
  gap: 7px;
  align-items: center;
  border-top: 1px solid #dbe4ea;
  padding: 9px 10px;
  background: #fff;
}

.native-customer-composer {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
  padding: 8px 10px;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.native-customer-composer[data-channel="internal"] {
  border-top: 3px solid #b45309;
  background: #fff1b8;
}

.native-compose-bar,
.native-compose-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 6px;
  align-items: center;
}

.native-compose-bar {
  display: flex;
  flex-wrap: wrap;
}

.native-compose-destination {
  min-width: 0;
  flex: 1 1 100%;
  color: #526372;
  font-size: 11px;
}

.native-compose-channel-select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.native-compose-channel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.native-compose-channel-button,
.native-compose-internal-toggle {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 0 8px;
  color: #435563;
  background: #fff;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.native-compose-channel-button {
  padding: 0 9px;
}

.native-compose-channel-button.active,
.native-compose-channel-button:hover {
  color: #06343d;
  border-color: rgba(17, 199, 189, 0.42);
  background: #eafaf4;
}

.native-compose-channel-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.native-compose-internal-toggle {
  min-height: 27px;
  margin-left: 1px;
  border-color: rgba(217, 119, 6, 0.32);
  color: #7a4a00;
  background: #fff7d6;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.08);
}

.native-compose-internal-toggle.active,
.native-compose-internal-toggle:hover {
  border-color: rgba(217, 119, 6, 0.56);
  background: #ffe49b;
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.16);
}

.native-compose-channel-button svg,
.native-compose-internal-toggle svg {
  width: 16px;
  height: 16px;
}

.native-compose-fields,
.native-compose-internal-note {
  display: none;
}

.native-customer-composer:focus-within[data-channel="sms"] .native-compose-fields-text,
.native-customer-composer:focus-within[data-channel="whatsapp"] .native-compose-fields-text,
.native-customer-composer:focus-within[data-channel="messenger"] .native-compose-fields-text,
.native-customer-composer:focus-within[data-channel="instagram"] .native-compose-fields-text,
.native-customer-composer:focus-within[data-channel="email"] .native-compose-fields-email {
  display: grid;
}

.native-compose-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 6px;
  background: #f8fafc;
}

.native-compose-fields-email {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.native-compose-fields label {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.native-compose-fields span {
  color: #607182;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.native-compose-fields input,
.native-compose-fields select {
  width: 100%;
  min-height: 30px;
  font-size: 11.5px;
  font-weight: 760;
}

.native-compose-internal-note {
  align-items: center;
  justify-self: start;
  gap: 5px;
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 999px;
  padding: 4px 8px;
  color: #7a4a00;
  background: #fff0ba;
  font-size: 11px;
  font-weight: 850;
}

.native-customer-composer[data-channel="internal"] .native-compose-internal-note {
  display: inline-flex;
}

.native-compose-internal-note svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.native-message-composer select,
.native-message-composer input,
.native-message-composer textarea {
  min-height: 42px;
  border-radius: 9px;
  background: #fff;
}

.native-message-composer textarea {
  min-height: 42px;
  max-height: 96px;
  resize: vertical;
}

.native-customer-composer:focus-within textarea {
  min-height: 74px;
}

.native-customer-composer[data-channel="internal"] textarea {
  border-color: #b45309;
  background: #fff9dc;
}

.native-compose-body .button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  overflow: hidden;
  justify-content: center;
}

.native-compose-body .button span {
  display: none;
}

.native-compose-body .button svg {
  width: 18px;
  height: 18px;
}

.native-message-composer p {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: #748391;
  font-size: 11px;
  font-weight: 760;
}

.native-compose-lock-notice {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: 7px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 6px 7px;
  color: #435563;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 820;
}

.native-customer-composer:focus-within[data-native-live-ready="0"]:not([data-channel="internal"]) .native-compose-lock-notice {
  display: flex;
}

.native-compose-lock-notice svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #0a8279;
}

.native-compose-lock-notice strong {
  color: #1c2b36;
  white-space: nowrap;
}

.native-compose-lock-notice span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-compose-lock-notice .button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.native-compose-pilot-note {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 5px;
  border: 1px solid rgba(10, 130, 121, 0.22);
  border-radius: 999px;
  padding: 4px 8px;
  color: #075c55;
  background: #eafaf4;
  font-size: 10.5px;
  font-weight: 900;
}

.native-compose-pilot-note svg {
  width: 13px;
  height: 13px;
}

.native-customer-composer button[disabled] {
  opacity: 0.58;
}

.native-customer-composer button[aria-busy="true"] {
  opacity: 0.76;
}

.native-contact-drawer {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  border-left: 1px solid #dbe4ea;
  background: #fff;
}

.native-contact-drawer-icons {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  border-left: 1px solid #edf2f5;
  padding: 8px 6px;
  background: #f8fafc;
}

.native-contact-drawer-icons button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #5e6f7d;
  background: transparent;
  cursor: pointer;
}

.native-contact-drawer-icons button.active,
.native-contact-drawer-icons button:hover {
  color: #06343d;
  border-color: #dbe4ea;
  background: #fff;
}

.native-contact-drawer-icons svg {
  width: 17px;
  height: 17px;
}

.native-contact-drawer-body {
  min-width: 0;
  order: 1;
  overflow-y: auto;
  padding: 12px;
}

.native-side-pane {
  display: none;
}

.native-side-pane.active {
  display: grid;
  gap: 10px;
}

.native-side-pane-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.native-side-pane-head h3 {
  margin: 0;
  color: #1c2b36;
  font-size: 15px;
  font-weight: 950;
}

.native-side-pane-head button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  color: #607182;
  background: #fff;
  cursor: pointer;
}

.native-side-pane-head svg {
  width: 15px;
  height: 15px;
}

.native-detail-card,
.native-channel-card,
.native-side-list article {
  display: grid;
  gap: 7px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.native-detail-card a:not(.button),
.native-detail-card span {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: #435563;
  font-size: 12px;
  font-weight: 780;
  text-decoration: none;
}

.native-detail-card em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-detail-card svg {
  width: 15px;
  height: 15px;
}

.native-channel-card span,
.native-side-list span {
  color: #748391;
  font-size: 10.5px;
  font-weight: 900;
}

.native-channel-card p,
.native-side-list p {
  margin: 0;
  color: #607182;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
}

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

.native-side-list strong {
  color: #1c2b36;
  font-size: 12.5px;
  font-weight: 900;
}

.native-status-grid,
.native-outbox-panel,
.native-consent-panel,
.native-provider-events {
  display: grid;
  gap: 8px;
  padding: 10px;
}

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

.native-status-card,
.native-outbox-card,
.native-consent-row,
.native-event-row {
  display: grid;
  gap: 5px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.native-status-card.is-ready,
.native-thread-item.is-ready {
  border-color: rgba(34, 197, 139, 0.32);
  background: #f2fff8;
}

.native-status-card.needs-work,
.native-status-card.is-needs-work,
.native-thread-item.needs-work,
.native-thread-item.is-needs-work,
.native-consent-row.is-opted_out {
  border-color: rgba(225, 29, 72, 0.22);
  background: #fff5f6;
}

.native-status-card span,
.native-outbox-card span,
.native-consent-row span,
.native-event-row span {
  color: #748391;
  font-size: 10.5px;
  font-weight: 900;
}

.native-status-card strong,
.native-outbox-card strong,
.native-consent-row strong,
.native-event-row strong {
  color: #1c2b36;
  font-size: 13px;
  font-weight: 900;
}

.native-status-card p,
.native-outbox-card p,
.native-event-row p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #607182;
  font-size: 11.5px;
  font-weight: 720;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.native-outbox-card em {
  color: #9a5d00;
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
}

.native-outbox-card div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.native-panel-head {
  padding: 0;
}

.native-panel-head strong {
  color: #1c2b36;
  font-size: 14px;
  font-weight: 900;
}

.native-setup-console {
  display: grid;
  gap: 10px;
}

.native-setup-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #d6e0e7;
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.native-setup-hero.is-ready,
.native-setup-hero.is-ready-to-test {
  border-color: rgba(34, 197, 139, 0.34);
  background: #f4fff9;
}

.native-setup-hero.is-blocked,
.native-setup-hero.is-needs-work {
  border-color: rgba(225, 29, 72, 0.22);
  background: #fff7f8;
}

.native-setup-hero span {
  color: #0a8279;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.native-setup-hero strong {
  display: block;
  margin-top: 2px;
  color: #172633;
  font-size: 21px;
  font-weight: 950;
}

.native-setup-hero p {
  max-width: 760px;
  margin: 4px 0 0;
  color: #526372;
  font-size: 13px;
  font-weight: 740;
  line-height: 1.35;
}

.native-setup-hero-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.native-setup-status-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0;
}

.native-setup-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.35fr) repeat(3, minmax(190px, 1fr));
  gap: 10px;
}

.native-setup-grid-bottom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.native-setup-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid #d6e0e7;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.native-setup-wide {
  padding: 12px;
}

.native-setup-panel-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.native-setup-panel-head > span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #0a4652;
  background: #e8f8f5;
}

.native-setup-panel-head svg {
  width: 16px;
  height: 16px;
}

.native-setup-panel-head strong {
  min-width: 0;
  overflow: hidden;
  color: #1c2b36;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-setup-panel-head em {
  min-width: 0;
  overflow: hidden;
  color: #748391;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-setup-panel-test .native-message-composer {
  grid-template-columns: 84px minmax(0, 1fr) minmax(130px, 0.72fr) 44px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 7px;
}

.native-setup-panel-test .native-message-composer p {
  grid-column: 1 / -1;
}

.native-setup-mini-feed {
  display: grid;
  gap: 7px;
}

.native-setup-mini-feed .empty-state,
.native-setup-panel .empty-state {
  min-height: 88px;
  padding: 14px;
}

.native-setup-mini-feed .native-test-bubble {
  max-width: 100%;
}

.native-setup-check-list,
.native-setup-check-grid {
  display: grid;
  gap: 7px;
}

.native-setup-check-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.phone-setup-modal-body .native-setup-check-grid,
.phone-setup-modal-body .messaging-a2p-checks,
.phone-setup-modal-body .twilio-setup-status {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.phone-setup-modal-body .twilio-number-results {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-height: min(360px, 44vh);
}

.phone-setup-modal-body .native-setup-check-card strong,
.phone-setup-modal-body .native-setup-mini-check strong,
.phone-setup-modal-body .phone-system-check-detail strong {
  white-space: normal;
}

.native-setup-check-card,
.native-setup-mini-check {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.native-setup-mini-check {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
}

.native-setup-check-card.is-ready,
.native-setup-mini-check.is-ready {
  border-color: rgba(34, 197, 139, 0.32);
  background: #f2fff8;
}

.native-setup-check-card.is-watch,
.native-setup-check-card.is-ready-to-test,
.native-setup-mini-check.is-watch,
.native-setup-mini-check.is-ready-to-test {
  border-color: rgba(217, 119, 6, 0.24);
  background: #fffaf0;
}

.native-setup-check-card.is-blocked,
.native-setup-check-card.is-needs-work,
.native-setup-mini-check.is-blocked,
.native-setup-mini-check.is-needs-work {
  border-color: rgba(225, 29, 72, 0.22);
  background: #fff5f6;
}

.native-setup-check-card span,
.native-setup-mini-check span {
  color: #748391;
  font-size: 10.5px;
  font-weight: 900;
}

.native-setup-check-card strong,
.native-setup-mini-check strong {
  min-width: 0;
  overflow: hidden;
  color: #1c2b36;
  font-size: 12.5px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-setup-check-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #607182;
  font-size: 11.5px;
  font-weight: 720;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.native-setup-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.native-setup-action-row span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  color: #435563;
  background: #f2f5f7;
  font-size: 11px;
  font-weight: 900;
}

.native-setup-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-items: end;
}

.native-setup-form label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.native-setup-form label > span,
.native-toggle-line span {
  color: #748391;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.native-setup-form input,
.native-setup-form select,
.native-setup-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 8px 9px;
  background: #fbfdff;
  color: #172632;
  font: inherit;
  font-size: 12px;
  font-weight: 820;
}

.native-setup-form textarea {
  resize: vertical;
}

.native-setup-form .button {
  min-height: 36px;
}

.native-setup-form-wide {
  grid-column: 1 / -1;
}

.native-toggle-line {
  min-height: 36px;
  display: flex !important;
  align-items: center;
  gap: 7px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  padding: 7px 8px;
  background: #fbfdff;
}

.native-toggle-line input {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: #0d9488;
}

.native-manual-consent-form {
  grid-template-columns: minmax(100px, 1fr) 90px minmax(100px, 1fr) 38px;
}

.native-phone-config-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.native-phone-test-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.native-phone-test-row span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: #f2f5f7;
  color: #435563;
  font-size: 11px;
  font-weight: 900;
}

.native-setup-panel .native-consent-panel,
.native-setup-panel .native-outbox-panel,
.native-setup-panel .native-provider-events {
  padding: 0;
}

@media (max-width: 1180px) {
  .native-message-console {
    grid-template-columns: 290px minmax(0, 1fr);
  }

  .native-setup-status-grid,
  .native-setup-check-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .native-message-status-panel,
  .native-contact-drawer {
    display: none;
  }
}

@media (max-width: 760px) {
  .message-mode-tabs {
    width: auto;
    margin: 8px 10px;
  }

  .native-workspace-tabs {
    width: calc(100% - 20px);
    margin: 0 10px 8px;
  }

  .native-workspace-tabs a {
    flex: 1 1 0;
  }

  .message-mode-tabs a {
    flex: 1 1 0;
    justify-content: center;
  }

  .messages-page .section-body {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "mode"
      "alert"
      "toolbar"
      "results";
  }

  .messages-page:has(.messages-console.has-active-thread) .message-mode-tabs {
    display: none;
  }

  .native-messages-page .section-body {
    height: auto;
    min-height: calc(100dvh - 74px - 76px - var(--safe-bottom));
    display: block;
    padding: 0;
    overflow: auto;
  }

  .native-messages-page.is-native-thread-open > .section-heading,
  .native-messages-page.is-native-thread-open .message-mode-tabs,
  .native-messages-page.is-native-thread-open .native-workspace-tabs {
    display: none;
  }

  .native-message-console {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .native-message-console.hide-native-drawer {
    grid-template-columns: minmax(0, 1fr);
  }

  .native-message-console.has-native-explicit-contact {
    height: calc(100dvh - 74px - 76px - var(--safe-bottom));
    min-height: 0;
    overflow: hidden;
  }

  .native-message-console.has-native-list-focus .native-message-thread-panel,
  .native-message-console.has-native-list-focus .native-contact-drawer {
    display: none;
  }

  .native-message-status-panel {
    display: none;
  }

  .native-message-rail {
    display: flex;
    max-height: min(330px, 44dvh);
    border-right: 0;
    border-bottom: 1px solid #dbe4ea;
  }

  .native-message-console.has-native-explicit-contact .native-message-rail,
  .native-message-console.has-native-explicit-contact .native-contact-drawer {
    display: none;
  }

  .native-message-console.has-native-list-focus .native-message-rail {
    max-height: none;
    min-height: calc(100dvh - 168px - 76px - var(--safe-bottom));
    border-bottom: 0;
  }

  .native-message-thread-list {
    max-height: min(250px, 34dvh);
  }

  .native-message-console.has-native-list-focus .native-message-thread-list {
    max-height: none;
    flex: 1 1 auto;
  }

  .native-thread-head {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    padding: 8px 10px;
  }

  .native-message-console.has-native-explicit-contact .native-message-thread-panel {
    min-height: 0;
    height: 100%;
    display: flex;
  }

  .native-customer-thread-head {
    min-height: 64px;
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    border-bottom-color: rgba(20, 58, 86, 0.12);
    box-shadow: 0 8px 18px rgba(5, 24, 44, 0.08);
  }

  .native-mobile-thread-back {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #172b3a;
    text-decoration: none;
  }

  .native-mobile-thread-back svg {
    width: 25px;
    height: 25px;
  }

  .native-thread-identity {
    gap: 8px;
  }

  .native-thread-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 999px;
  }

  .native-thread-head h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.1;
  }

  .native-thread-head p {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 640;
    line-height: 1.15;
  }

  .native-thread-contact-line {
    display: none;
  }

  .native-thread-head .native-thread-mobile-subtitle {
    display: inline;
    color: #6b7884;
    font-size: 13px;
    font-weight: 640;
    text-transform: none;
    letter-spacing: 0;
  }

  .native-thread-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 5px;
  }

  .native-thread-actions .button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    border-color: transparent;
    background: transparent;
  }

  .native-thread-actions > .button:not([data-native-dial-focus]):not([data-native-thread-email]):not(.native-mobile-more-action) {
    display: none;
  }

  .native-thread-actions [href^="mailto:"] {
    order: 1;
  }

  .native-thread-actions [data-native-dial-focus] {
    order: 2;
  }

  .native-thread-actions .native-mobile-more-action {
    order: 3;
    display: inline-flex;
  }

  .native-thread-badges {
    flex-wrap: wrap;
  }

  .native-message-bubble-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 12px 18px;
    gap: 14px;
    background: #fff;
  }

  .native-conversation-row {
    gap: 6px;
  }

  .native-conversation-row.inbound {
    justify-content: flex-start;
  }

  .native-conversation-row.outbound,
  .native-conversation-row.internal {
    justify-content: flex-end;
  }

  .native-conversation-row.native-email-conversation {
    justify-content: stretch;
  }

  .native-email-message-card {
    width: 100%;
    border-radius: 8px;
    box-shadow: none;
  }

  .native-email-subject-button {
    padding: 8px 10px;
  }

  .native-email-card-controls button {
    width: 30px;
    height: 30px;
  }

  .native-email-summary {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 10px;
  }

  .native-email-avatar {
    width: 30px;
    height: 30px;
    font-size: 9px;
  }

  .native-email-sender-line span {
    display: none;
  }

  .native-email-summary-actions time {
    font-size: 10px;
  }

  .native-email-summary-actions button {
    width: 28px;
    height: 28px;
  }

  .native-email-body {
    padding: 13px 12px 11px;
  }

  .native-email-body-copy {
    font-size: 14px;
  }

  .native-email-body-actions {
    align-items: flex-end;
  }

  .native-email-reader-overlay {
    padding: 0;
    background: #fff;
    backdrop-filter: none;
  }

  .native-email-reader {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .native-email-reader-head {
    min-height: 64px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  }

  .native-email-reader-head h2 {
    font-size: 15px;
  }

  .native-email-reader-list {
    padding: 10px;
  }

  .native-email-reader-message > header {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 10px;
  }

  .native-email-reader-avatar {
    width: 32px;
    height: 32px;
  }

  .native-email-reader-body {
    padding: 15px 12px 20px;
  }

  .native-email-reader-footer {
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  }

  .native-email-inline-reply {
    margin-top: 10px;
  }

  .native-email-compose-row {
    min-height: 39px;
    padding-inline: 8px;
  }

  .native-email-recipient-chip {
    max-width: calc(100% - 128px);
  }

  .native-email-compose-row-label,
  .native-email-compose-row input {
    font-size: 12px;
  }

  .native-email-compose-recipient-actions button {
    min-width: 27px;
    padding-inline: 3px;
    font-size: 11px;
  }

  .native-email-compose-editor-shell {
    min-height: 132px;
    padding: 10px 8px;
  }

  .native-email-compose-editor {
    min-height: 112px;
    font-size: 14px;
  }

  .native-email-compose-toolbar {
    gap: 4px;
    padding-left: 2px;
  }

  .native-email-compose-tools button,
  .native-email-compose-file-button,
  .native-email-compose-send-actions > button {
    flex-basis: 30px;
    width: 30px;
  }

  .native-email-reader-head {
    min-height: calc(44px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 8px 0 12px;
  }

  .native-email-reader-list {
    padding: 6px 8px;
  }

  .native-email-reader.is-replying .native-email-reader-list {
    flex-basis: 40%;
    min-height: 130px;
  }

  .native-email-reader-reply {
    min-height: 270px;
    padding: 0 5px calc(5px + env(safe-area-inset-bottom));
  }

  .native-email-reader-message > header {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .native-email-reader-message-actions time {
    display: none;
  }

  .native-conversation-card,
  .native-conversation-row.internal .native-conversation-card {
    max-width: calc(100% - 54px);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: none;
  }

  .native-conversation-row.outbound .native-conversation-card {
    background: #e3eeee;
  }

  .native-conversation-row.inbound .native-conversation-card {
    background: #d2f1f2;
  }

  .native-conversation-row.internal .native-conversation-card,
  .native-message-system-row {
    max-width: 82%;
    border: 2px solid #b45309;
    background: #ffe08a;
  }

  .native-conversation-row.internal .native-conversation-card {
    color: #4f5d66;
  }

  .native-conversation-row.is-call .native-conversation-card {
    width: calc(100% - 54px);
    max-width: calc(100% - 54px);
  }

  .native-message-sender-badge {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    align-self: flex-end;
    box-shadow: none;
  }

  .native-message-sender-badge span {
    font-size: 9px;
  }

  .native-message-sender-badge > i,
  .native-message-sender-badge > svg {
    right: -4px;
    bottom: -4px;
    width: 13px;
    height: 13px;
    padding: 1px;
  }

  .native-mobile-message-meta {
    display: block;
    margin-bottom: 5px;
    color: #778690;
    font-size: 12px;
    font-weight: 720;
    line-height: 1.2;
  }

  .native-conversation-text {
    font-size: 15px;
    font-weight: 560;
    line-height: 1.42;
  }

  .native-conversation-foot {
    display: none;
  }

  .native-message-system-row {
    align-self: flex-end;
    justify-content: flex-start;
    border-radius: 14px;
    padding: 11px 12px;
    color: #172b3a;
    font-size: 14px;
    font-weight: 780;
  }

  .native-message-system-row time {
    margin-left: auto;
  }

  .native-test-bubble {
    max-width: 90%;
  }

  .message-bubble.is-call,
  .messages-console .message-bubble.is-call,
  .native-test-bubble.is-call {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .message-recording audio {
    min-width: 0;
  }

  .message-recording {
    gap: 6px;
  }

  .native-message-composer {
    position: sticky;
    bottom: 0;
    grid-template-columns: 82px minmax(0, 1fr) 44px;
    padding: 9px 10px calc(9px + var(--safe-bottom));
    border-top-color: rgba(20, 58, 86, 0.12);
    background: #fff;
  }

  .native-customer-composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .native-call-dialer {
    grid-template-columns: minmax(0, 1fr) repeat(4, 44px);
    align-items: end;
    padding: 8px 10px;
  }

  .native-call-dialer-main,
  .native-call-dialer label,
  .native-call-dialer p {
    grid-column: 1 / -1;
  }

  .native-call-dialer .button span {
    display: none;
  }

  .native-dialer-number input {
    min-height: 44px;
    font-size: 18px;
  }

  .native-dialer-key {
    min-height: 46px;
  }

  .native-compose-fields,
  .native-compose-fields-email {
    grid-template-columns: minmax(0, 1fr);
  }

  .native-message-composer textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .native-message-composer .button {
    min-height: 44px;
  }

  .native-compose-lock-notice {
    flex-wrap: wrap;
  }

  .native-compose-lock-notice span {
    flex-basis: 100%;
    white-space: normal;
  }

  .native-setup-console {
    padding: 0 10px 10px;
  }

  .native-setup-hero,
  .native-setup-grid,
  .native-setup-grid-bottom {
    grid-template-columns: minmax(0, 1fr);
  }

  .native-setup-hero {
    align-items: start;
  }

  .native-setup-hero-actions {
    justify-content: flex-start;
  }

  .native-setup-status-grid,
  .native-setup-check-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .native-setup-panel-test .native-message-composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .native-setup-form,
  .native-phone-config-form,
  .native-manual-consent-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Messages refinement: low-copy in-house inbox. */
.messages-page .section-heading .eyebrow {
  display: none;
}

.messages-page .message-page-actions .button {
  width: 38px;
  min-width: 38px;
  padding-inline: 0;
  justify-content: center;
}

.messages-page .message-page-actions .button span,
.messages-page .crm-toolbar-actions .button span {
  display: none;
}

.messages-page .crm-toolbar.simple .field {
  position: relative;
}

.messages-page .crm-toolbar.simple .field > span,
.messages-console .message-composer .field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.messages-page .crm-toolbar-actions .button {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding-inline: 0;
  justify-content: center;
}

.messages-inbox-health.is-ready,
.messages-inbox-next.is-ready,
.messages-console .message-conversation-mission.is-ready {
  display: none;
}

.messages-inbox-next span,
.messages-inbox-next-action em,
.messages-console .message-conversation-mission span,
.messages-console .message-conversation-mission-action em,
.message-contact-kicker,
.message-dialer-copy small,
.message-dialer-panel [data-message-call-status],
.messages-console .message-composer > .muted {
  display: none;
}

.messages-inbox-next,
.messages-console .message-conversation-mission {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.messages-inbox-next {
  gap: 8px;
  padding: 8px 12px;
}

.messages-inbox-next strong,
.messages-console .message-conversation-mission strong {
  margin: 0;
  font-size: 13px;
}

.messages-inbox-next p,
.messages-console .message-conversation-mission p {
  display: -webkit-box;
  margin-top: 1px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.messages-console .message-conversation-mission {
  gap: 10px;
  padding: 8px 12px;
  box-shadow: inset 3px 0 0 rgba(24, 189, 181, 0.56);
}

.messages-console .message-sync-note:not(.is-error):not(.is-test) {
  display: none;
}

.messages-console .message-sync-note.is-error,
.messages-console .message-sync-note.is-test {
  padding: 7px 12px;
}

.message-link-badge.is-linked {
  display: none;
}

.message-channel-pill {
  border-color: transparent;
  background: #eef4f7;
}

.messages-console .message-composer textarea {
  border-radius: 9px;
}

@media (min-width: 761px) {
  .messages-page .section-heading {
    min-height: 50px;
  }

  .messages-page .section-heading h2 {
    font-size: 18px;
  }

  .messages-page .section-body {
    gap: 8px;
    padding: 10px;
  }

  .messages-page .crm-toolbar.simple {
    grid-template-columns: minmax(260px, 1fr) 132px auto;
    gap: 7px;
    align-items: end;
    padding: 8px;
  }

  .messages-page .crm-toolbar input,
  .messages-page .crm-toolbar select {
    min-height: 40px;
    border-radius: 9px;
  }

  .messages-console {
    height: calc(100dvh - 184px);
    min-height: 620px;
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .messages-console .message-inbox-list {
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  }

  .messages-inbox-head {
    min-height: 52px;
    padding: 9px 12px;
  }

  .messages-inbox-head h3 {
    font-size: 17px;
  }

  .messages-inbox-tabs {
    padding: 7px 9px;
  }

  .messages-inbox-tabs span {
    min-height: 26px;
    padding-inline: 9px;
    font-size: 11px;
  }

  .message-load-status {
    min-height: 0;
    border-bottom: 0;
    padding: 0 12px 7px;
    color: #8a97a4;
    font-size: 10.5px;
  }

  .messages-console .message-inbox-main {
    padding: 10px 12px;
  }

  .message-inbox-meta {
    gap: 5px;
  }

  .messages-console .message-conversation-head {
    min-height: 58px;
    padding: 9px 12px;
  }

  .messages-console .message-conversation-title {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .messages-console .message-thread-head strong {
    font-size: 15.5px;
  }

  .messages-console .message-conversation-title p,
  .messages-console .message-conversation-title small {
    margin-top: 1px;
    font-size: 11.5px;
  }

  .message-dialer-panel {
    grid-template-columns: minmax(116px, 0.7fr) auto minmax(180px, 1fr) 76px minmax(220px, 1.2fr);
    gap: 7px;
    padding: 7px 10px;
  }

  .message-dialer-copy {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }

  .message-dialer-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .message-dialer-icon svg {
    width: 16px;
    height: 16px;
  }

  .message-call-outcomes .button {
    min-height: 34px;
    font-size: 11px;
  }

  .messages-console .message-conversation-body {
    grid-template-columns: minmax(0, 1fr) 286px;
  }

  .message-right-panel-head span {
    font-size: 13px;
  }

  .messages-console .message-context-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .messages-console .message-composer {
    grid-template-columns: 86px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 8px 10px;
  }

  .messages-console .message-composer select,
  .messages-console .message-composer input,
  .messages-console .message-composer textarea {
    min-height: 42px;
  }

  .messages-console .message-composer .button.primary {
    min-height: 42px;
    border-radius: 9px;
  }
}

@media (max-width: 760px) {
  .schedule-card {
    gap: 10px;
    padding: 12px;
  }

  .schedule-title-row h3 {
    font-size: 18px;
  }

  .schedule-job-label,
  .schedule-services,
  .schedule-assigned {
    display: none;
  }

  .schedule-actions {
    display: flex;
    flex-direction: column;
  }

  .schedule-start-action {
    order: -1;
    min-height: 46px;
  }

  .schedule-contact-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .schedule-contact-actions .button {
    min-height: 36px;
    font-size: 12px;
  }

  .jobsite-work-header {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .jobsite-work-main h2 {
    font-size: 24px;
  }

  .jobsite-work-meta {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
  }

  .jobsite-work-meta .button {
    width: 100%;
  }

  .jobsite-sop-form {
    padding-bottom: calc(92px + var(--safe-bottom));
  }

  .jobsite-sop-form .sop-progress-card,
  .jobsite-sop-form .sop-submit-card {
    display: none;
  }

  .jobsite-sop-form .sop-notes-card textarea {
    min-height: 96px;
  }

  .jobsite-mobile-submit-bar {
    position: fixed;
    left: max(10px, var(--safe-left));
    right: max(10px, var(--safe-right));
    bottom: calc(74px + var(--safe-bottom));
    z-index: 34;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(17, 199, 189, 0.36);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -14px 34px rgba(5, 24, 44, 0.18);
    backdrop-filter: blur(12px);
  }

  body:has(.camera-overlay) .jobsite-mobile-submit-bar {
    display: none;
  }

  .jobsite-mobile-submit-bar .button {
    min-height: 44px;
    padding-inline: 16px;
  }

  .time-payroll-panel {
    padding: 12px;
  }

  .time-payroll-header,
  .time-payroll-toolbar,
  .time-payroll-entry-main {
    display: grid;
  }

  .time-payroll-header .button,
  .time-payroll-actions .button {
    width: 100%;
  }

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

  .time-payroll-tabs {
    margin-inline: -2px;
  }

  .time-payroll-tabs .button {
    min-width: max-content;
  }

  .week-switcher {
    justify-content: space-between;
    width: 100%;
  }

  .compact-field {
    min-width: 0;
  }
}

/* Mobile shell width fix: keep content aligned to the full visual viewport on iOS PWAs. */
@media (max-width: 940px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell,
  .workspace,
  .topbar,
  #app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .app-shell {
    display: block;
  }

  .workspace {
    overflow-x: clip;
  }

  .topbar {
    left: 0;
    right: 0;
  }

  .mobile-tabbar {
    width: 100%;
    max-width: 100%;
  }

  .topbar-actions .clock-status-pill {
    display: none;
  }
}

@media (max-width: 620px) {
  .topbar {
    width: 100%;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .topbar-actions {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  }

  .create-button,
  .logout-button,
  .issue-report-button {
    width: 100%;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 11px;
  }
}

/* Mobile QA pass: make the app header behave like a field app, not a squeezed desktop toolbar. */
@media (max-width: 760px) {
  .global-search {
    display: none !important;
  }

  .topbar {
    min-height: 72px;
    align-items: center;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    padding: max(10px, calc(var(--safe-top) + 8px)) max(10px, var(--safe-right)) 10px max(10px, var(--safe-left));
  }

  .topbar > div:not(.topbar-actions) {
    overflow: hidden;
  }

  .topbar .eyebrow,
  #page-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar .eyebrow {
    margin-bottom: 2px;
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  #page-title {
    font-size: 24px;
    line-height: 1.08;
  }

  .topbar-actions {
    width: auto;
    min-width: 0;
    display: flex;
    grid-column: auto;
    justify-self: end;
    justify-content: flex-end;
    gap: 6px;
  }

  .topbar-actions .clock-status-pill {
    display: none !important;
  }

  .create-button {
    width: 44px;
    min-width: 44px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .create-button-icon {
    width: 24px;
    height: 24px;
  }

  body[data-role="technician"] .topbar,
  body[data-role="crew_lead"] .topbar {
    min-height: 50px;
    grid-template-columns: minmax(0, 1fr);
    padding: max(8px, calc(var(--safe-top) + 7px)) max(12px, var(--safe-right)) 8px max(12px, var(--safe-left));
  }

  body[data-role="technician"] .menu-button,
  body[data-role="crew_lead"] .menu-button,
  body[data-role="technician"] .topbar .eyebrow,
  body[data-role="crew_lead"] .topbar .eyebrow,
  body[data-role="technician"] .topbar-actions,
  body[data-role="crew_lead"] .topbar-actions {
    display: none !important;
  }

  body[data-role="technician"] #page-title,
  body[data-role="crew_lead"] #page-title {
    font-size: 20px;
  }

  .crm-tabs {
    max-width: 100%;
    padding-bottom: 0;
    scrollbar-width: none;
  }

  .crm-tabs::-webkit-scrollbar {
    display: none;
  }

  .report-toolbar.jobber-report-toolbar {
    inline-size: min(100%, calc(100vw - 48px)) !important;
    max-inline-size: calc(100vw - 48px) !important;
    grid-template-columns: minmax(0, 1fr);
    justify-self: stretch;
    overflow: hidden;
  }

  .report-toolbar.jobber-report-toolbar > *,
  .report-toolbar.jobber-report-toolbar .field,
  .report-toolbar.jobber-report-toolbar input,
  .report-toolbar.jobber-report-toolbar select,
  .revenue-year-controls,
  .revenue-year-controls > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .revenue-year-controls {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jobber-reports-view > .section-heading h2 {
    font-size: 28px;
  }

  .jobber-insights,
  .jobber-report-card {
    inline-size: min(100%, calc(100vw - 48px)) !important;
    max-inline-size: calc(100vw - 48px) !important;
    min-width: 0;
    justify-self: stretch;
  }

  .jobber-report-card {
    overflow: hidden;
  }

  .jobber-card-head,
  .jobber-overview-grid,
  .jobber-overview-metric,
  .jobber-insight-grid,
  .sales-performance-kpis,
  .sales-performance-body,
  .sales-source-panel,
  .jobber-revenue-map-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .jobber-overview-grid,
  .jobber-insight-grid.two,
  .jobber-insight-grid.three,
  .jobber-insight-grid.four,
  .jobber-quote-summary,
  .jobber-crew-metrics,
  .sales-performance-kpis,
  .sales-performance-body,
  .jobber-revenue-map-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-performance-body,
  .sales-performance-kpis {
    padding-left: 10px;
    padding-right: 10px;
  }

  .sales-source-table {
    min-width: 650px;
  }

  .jobber-crew-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .jobber-crew-row > span:nth-of-type(2),
  .jobber-crew-row > span:nth-of-type(3),
  .jobber-crew-row > span:nth-of-type(4) {
    display: none;
  }

  .job-work-timer {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .job-work-timer-actions {
    margin-left: auto;
  }

  .jobber-revenue-totals {
    flex-wrap: wrap;
    gap: 12px;
  }

  .jobber-revenue-chart {
    max-width: 100%;
  }

  .jobber-heatmap-card .jobber-revenue-map-canvas {
    min-height: 330px;
    margin: 10px;
  }

  .messages-page .section-heading .actions .button,
  .messages-console .message-conversation-actions .button,
  .message-call-outcomes .button,
  .section-heading .actions .button,
  .schedule-contact-actions .button,
  .schedule-secondary-actions .button,
  .schedule-mini-card .button,
  .map-job-card .button,
  .client-row-actions .button,
  .crm-job-actions .button,
  .actions.compact .button,
  .team-member-actions .button,
  .team-rollout-actions .button,
  .payment-collection-actions .button {
    min-height: 42px;
  }

  .messages-page .section-heading .actions .button,
  .messages-console .message-conversation-actions .button {
    min-width: 42px;
  }

  .crew-dashboard .section,
  .field-command-center .section {
    border-radius: 8px;
  }

  .field-task-card {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }

  .field-task-cta {
    grid-column: 1 / -1;
    width: 100%;
  }

  .field-route-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .field-route-mission {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }

  .field-route-mission-action {
    grid-column: 1 / -1;
    display: grid;
    min-width: 0;
    width: 100%;
  }

  .field-route-mission-action .button {
    width: 100%;
    min-height: 44px;
  }

  .field-route-mission strong {
    white-space: normal;
  }

  .field-route-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .field-route-time {
    grid-template-columns: minmax(0, 1fr) auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 9px;
  }

  .field-route-time span {
    grid-column: 1 / -1;
  }

  .field-route-time em {
    justify-self: end;
  }

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

  .field-route-actions .button.primary {
    grid-column: 1 / -1;
    min-height: 46px;
  }

  .field-loadout-strip {
    max-height: 128px;
    overflow: auto;
  }
}

/* App-wide UX cleanup: one calmer language for cards, actions, forms, badges, and mobile spacing. */
:root {
  --radius-sm: 6px;
  --radius: 8px;
  --surface-line: rgba(20, 58, 86, 0.12);
  --surface-line-strong: rgba(20, 58, 86, 0.18);
  --surface-hover: rgba(24, 189, 181, 0.08);
  --focus-ring: 0 0 0 3px rgba(24, 189, 181, 0.16);
}

img,
video,
canvas {
  max-width: 100%;
}

.workspace {
  color: var(--ink);
}

.section,
.card,
.panel,
.nested-section,
.import-card,
.jobber-report-card,
.jobber-workflow-card,
.jobber-performance-card,
.crm-job-card,
.client-card,
.quote-followup-card,
.payment-card,
.schedule-card,
.time-clock-card,
.time-live-panel,
.time-payroll-panel,
.team-readiness-item,
.ops-focus-card,
.manager-job-column,
.field-route-card,
.field-task-card {
  border-color: var(--surface-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.section-heading,
.section-heading.teal {
  min-height: 58px;
  color: var(--navy);
  background: #fff;
  border-bottom: 1px solid var(--surface-line);
}

.section-heading > div,
.section-heading .heading-copy {
  min-width: 0;
}

.section-heading h2,
.section-heading h3 {
  color: var(--navy);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

.section-heading p {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.section-heading .actions,
.section-actions,
.actions,
.crm-toolbar-actions,
.message-page-actions,
.team-member-actions,
.payment-collection-actions,
.schedule-contact-actions,
.schedule-secondary-actions {
  gap: 8px;
}

.button,
.create-button,
.logout-button,
.password-toggle,
.schedule-range,
.schedule-display,
.schedule-arrow,
.schedule-current,
.icon-button,
.layout-option,
.mobile-tabbar a,
.mobile-tabbar button {
  border-radius: var(--radius-sm);
  font-weight: 900;
  letter-spacing: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.button {
  gap: 7px;
  min-height: 42px;
  padding-inline: 14px;
  font-size: 13px;
}

.button svg,
.button i,
.create-button svg,
.schedule-range svg,
.schedule-display svg {
  flex: 0 0 auto;
}

.button.primary {
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
}

.button.primary:hover {
  background: var(--deep);
  border-color: var(--deep);
}

.button.secondary {
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--surface-line-strong);
}

.button.secondary:hover,
.icon-button:hover,
.password-toggle:hover,
.schedule-range:hover,
.schedule-display:hover,
.schedule-arrow:hover,
.schedule-current:hover {
  border-color: rgba(24, 189, 181, 0.52);
  background: var(--surface-hover);
}

.button:focus-visible,
.create-button:focus-visible,
.logout-button:focus-visible,
.password-toggle:focus-visible,
.schedule-range:focus-visible,
.schedule-display:focus-visible,
.schedule-arrow:focus-visible,
.schedule-current:focus-visible,
.mobile-tabbar a:focus-visible,
.mobile-tabbar button:focus-visible,
.field input:focus,
.field textarea:focus,
.field select:focus,
.login-form input:focus,
.quote-line-row input:focus,
.quote-line-row textarea:focus,
.quote-line-row select:focus {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.danger-button,
.button.danger,
.button.is-danger {
  color: #fff !important;
  background: var(--danger) !important;
  border-color: var(--danger) !important;
}

.button.danger-soft {
  color: #9f1239 !important;
  background: #fff3f6 !important;
  border-color: rgba(215, 25, 70, 0.28) !important;
}

.status-pill,
.clock-status-pill,
.pill,
.crm-status,
.mini-badge,
.import-progress-meta span,
.sop-meta span,
.time-payroll-duration,
.time-entry-row em {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
}

.crm-status,
.mini-badge,
.pill {
  border: 1px solid rgba(20, 58, 86, 0.1);
}

.field {
  min-width: 0;
}

.field span,
.field label,
.label {
  color: #667789;
  font-size: 10px;
  letter-spacing: 0.07em;
}

.field input,
.field textarea,
.field select,
.login-form input,
.quote-line-row input,
.quote-line-row textarea,
.quote-line-row select {
  min-width: 0;
  border: 1px solid var(--surface-line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}

.field textarea,
.quote-line-row textarea {
  min-height: 108px;
}

.form-alert {
  border-color: rgba(215, 25, 70, 0.24);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
}

.empty-state {
  min-height: 118px;
  display: grid;
  place-items: center;
  gap: 10px;
  border: 1px dashed rgba(20, 58, 86, 0.16);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  background: #f8fbfd;
}

.empty-state p {
  max-width: 440px;
  margin: 0;
  font-weight: 800;
}

.empty-state-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(20, 58, 86, 0.16);
  border-radius: 999px;
}

.empty-state.is-empty .empty-state-mark::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(24, 189, 181, 0.72);
}

.empty-state.is-loading .empty-state-mark {
  border-color: rgba(20, 58, 86, 0.13);
  border-top-color: var(--teal);
  animation: knhq-spin 0.8s linear infinite;
}

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

.nav-section summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.nav-section[open] summary::after {
  content: "";
  transform: rotate(225deg);
}

.pricing-addon-panel summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.pricing-addon-panel[open] summary::after {
  content: "";
  transform: rotate(225deg);
}

.create-menu-item::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
}

.client-directory-row,
.client-card,
.crm-job-card,
.schedule-card,
.payment-card,
.quote-followup-card,
.team-member-row,
.import-progress-row,
.import-event,
.message-thread-card {
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.client-directory-row:hover,
.client-card:hover,
.crm-job-card:hover,
.schedule-card:hover,
.payment-card:hover,
.quote-followup-card:hover,
.team-member-row:hover,
.import-progress-row:hover,
.message-thread-card:hover {
  border-color: rgba(24, 189, 181, 0.32);
  background-color: #fbfefe;
}

.payment-reconciliation-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--radius);
  background: #fff8eb;
}

.payment-reconciliation-panel h3 {
  margin: 2px 0 4px;
  color: var(--navy);
  font-size: 16px;
}

.payment-reconciliation-panel p,
.payment-reconciliation-panel .eyebrow {
  margin: 0;
}

.payment-reconciliation-list {
  display: grid;
  gap: 7px;
}

.payment-reconciliation-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 9px;
  padding: 8px 10px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: var(--radius-sm);
  background: #fff;
}

.payment-reconciliation-list strong {
  color: var(--navy);
}

.payment-reconciliation-list span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-reconciliation-list em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

@media (max-width: 760px) {
  .section-heading,
  .section-heading.teal {
    min-height: 0;
  }

  .section-heading .actions,
  .section-actions,
  .actions:not(.topbar-actions),
  .crm-toolbar-actions,
  .message-page-actions,
  .team-member-actions,
  .payment-collection-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .section-heading .actions .button,
  .section-actions .button,
  .actions:not(.topbar-actions) .button,
  .crm-toolbar-actions .button,
  .message-page-actions .button,
  .team-member-actions .button,
  .payment-collection-actions .button {
    width: 100%;
  }

  .form-grid,
  .crm-toolbar,
  .crm-toolbar.simple,
  .quote-line-row,
  .invoice-payment-form,
  .pricing-settings-grid,
  .payment-setup-grid,
  .team-member-row,
  .client-directory-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .empty-state {
    min-height: 96px;
    padding: 18px 14px;
  }

  .button {
    min-height: 44px;
  }
}

@media (max-width: 430px) {
  .section-body,
  .card {
    padding: 12px;
  }

  .section-heading {
    padding: 12px;
  }

  .section-heading h2,
  .section-heading h3 {
    font-size: 15px;
  }

  .status-pill,
  .clock-status-pill,
  .pill,
  .crm-status,
  .mini-badge {
    white-space: normal;
  }
}

/* App-wide QA pass: keep mobile actions tappable and prevent critical controls from disappearing. */
.schedule-arrow {
  min-width: 44px;
  min-height: 44px;
}

.schedule-arrow svg {
  width: 20px;
  height: 20px;
}

.field-next-stop-actions .button,
.field-route-actions .button,
.schedule-range,
.schedule-display {
  min-height: 44px;
}

@media (max-width: 760px) {
  .payment-reconciliation-panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .payment-reconciliation-panel .button {
    width: 100%;
  }

  .messages-console .message-composer .field.compact {
    display: grid;
    grid-column: 1 / -1;
  }

  .messages-console .message-composer .field.compact span {
    display: none;
  }

  .messages-console .message-composer .field.compact select {
    min-height: 36px;
    border-radius: 999px;
    font-size: 13px;
  }
}

/* Guided pricing flow: make sales feel like answering questions, not reading a spreadsheet. */
.pricing-guided-view .section-heading p {
  max-width: 820px;
}

.pricing-guided-view .pricing-customer-step,
.pricing-guided-view .pricing-sales-hero,
.pricing-guided-view .pricing-selected-services,
.pricing-guided-view .pricing-summary-panel {
  border-radius: var(--radius);
}

.pricing-guided-view .pricing-customer-step {
  border-color: rgba(24, 189, 181, 0.34);
  background: linear-gradient(180deg, #fff, #f8fefe);
}

.pricing-guided-view .pricing-sales-hero {
  border-color: rgba(20, 58, 86, 0.12);
  background: #f7fcfc;
}

.pricing-guided-view .pricing-shell {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  align-items: start;
}

.pricing-guided-view .pricing-calculator .section-heading {
  align-items: flex-start;
}

.pricing-selected-services {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  padding: 12px;
  background: #fff;
}

.pricing-selected-empty {
  display: grid;
  gap: 4px;
}

.pricing-selected-empty strong,
.pricing-selected-head strong {
  color: var(--navy);
}

.pricing-selected-empty span,
.pricing-selected-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.pricing-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pricing-selected-head span {
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pricing-selected-head strong {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(24, 189, 181, 0.16);
}

.pricing-selected-list {
  display: grid;
  gap: 7px;
}

.pricing-selected-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--navy);
  background: linear-gradient(90deg, var(--pricing-service-tint, rgba(17, 199, 189, 0.08)), #f9fbfd 64%);
  box-shadow: inset 4px 0 0 var(--pricing-service-accent, var(--teal));
  text-align: left;
  cursor: pointer;
}

.pricing-selected-row:hover,
.pricing-selected-row:focus-visible {
  border-color: var(--pricing-service-accent, rgba(24, 189, 181, 0.42));
  background: var(--pricing-service-tint, rgba(24, 189, 181, 0.08));
  outline: 0;
}

.pricing-selected-row.is-active {
  border-color: var(--pricing-service-accent, rgba(24, 189, 181, 0.58));
  background: var(--pricing-service-tint, rgba(24, 189, 181, 0.12));
  box-shadow: inset 4px 0 0 var(--pricing-service-accent, var(--teal));
}

.pricing-selected-row.needs-review {
  border-color: rgba(245, 158, 11, 0.48);
  background: rgba(245, 158, 11, 0.12);
}

.pricing-selected-row span,
.pricing-selected-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 950;
}

.pricing-selected-row strong {
  white-space: nowrap;
}

.pricing-guided-view .pricing-service-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: start;
}

.pricing-guided-view .pricing-service-card {
  border-color: rgba(20, 58, 86, 0.12);
}

.pricing-guided-view .pricing-service-card.is-disabled {
  min-height: 144px;
  border-color: rgba(20, 58, 86, 0.1);
  background: #f8fbfd;
}

.pricing-guided-view .pricing-service-card.is-disabled:hover {
  border-color: rgba(24, 189, 181, 0.38);
  background: rgba(24, 189, 181, 0.07);
}

.pricing-guided-view .pricing-service-card.is-disabled header {
  min-height: 0;
}

.pricing-guided-view .pricing-service-card.is-selected {
  order: -1;
  grid-column: 1 / -1;
}

.pricing-guided-view .pricing-service-card.is-selected:not(.is-editing) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-color: rgba(24, 189, 181, 0.25);
  box-shadow: none;
}

.pricing-guided-view .pricing-service-card.is-selected:not(.is-editing) .pricing-service-body {
  display: none;
}

.pricing-guided-view .pricing-service-card.is-selected:not(.is-editing) header,
.pricing-guided-view .pricing-service-card.is-selected:not(.is-editing) footer {
  border: 0;
  padding: 0;
}

.pricing-guided-view .pricing-service-card.is-selected:not(.is-editing) footer {
  justify-content: flex-end;
}

.pricing-guided-view .pricing-service-card.is-editing {
  border-color: rgba(24, 189, 181, 0.5);
  box-shadow: 0 14px 30px rgba(5, 24, 44, 0.1);
}

.pricing-guided-view .pricing-service-card.is-editing header {
  background: linear-gradient(180deg, #fff, #f7fdfd);
}

.pricing-guided-view .pricing-service-card.is-editing .pricing-service-body {
  gap: 12px;
}

.pricing-guided-view .pricing-summary-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pricing-guided-view .pricing-summary-intro span {
  border-radius: 999px;
  padding: 6px 9px;
  color: #fff;
  background: var(--navy);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-guided-view .pricing-summary-intro strong {
  color: var(--navy);
  font-size: 18px;
}

.pricing-guided-view .pricing-review-alert {
  border-width: 2px;
}

.pricing-guided-view .pricing-review-alert strong::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--warning);
  font-size: 12px;
}

.pricing-guided-view .pricing-summary-panel .button.primary {
  min-height: 46px;
}

@media (min-width: 961px) {
  .pricing-guided-view .pricing-summary-panel {
    position: sticky;
    top: 92px;
  }
}

@media (max-width: 960px) {
  .pricing-guided-view .pricing-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-guided-view .pricing-summary-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  .review-log-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 14px;
  }

  .review-log-summary,
  .review-log-layout,
  .review-log-block-head {
    grid-template-columns: 1fr;
  }

  .review-log-layout {
    display: grid;
  }

  .review-log-summary {
    display: grid;
  }

  .review-log-block-head {
    display: grid;
  }

  .field-review-next {
    display: grid;
    align-items: stretch;
  }

  .field-review-next .button {
    width: 100%;
  }

  .review-collage-actions {
    justify-content: stretch;
  }

  .review-collage-actions .button,
  .review-generated-collage .button {
    width: 100%;
  }

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

@media (max-width: 760px) {
  .pricing-guided-view .crm-tabs,
  .pricing-guided-view .pricing-sales-hero,
  .pricing-guided-view .pricing-hero-total {
    display: none;
  }

  .pricing-guided-view > .section > .section-heading p {
    display: none;
  }

  .pricing-guided-view .pricing-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-guided-view .pricing-service-card.is-selected:not(.is-editing) {
    display: none;
  }

  .pricing-guided-view .pricing-service-card.is-editing {
    order: -1;
    grid-column: 1 / -1;
  }

  .pricing-guided-view .pricing-service-card.is-disabled {
    min-height: 132px;
  }

  .pricing-guided-view .pricing-service-card.is-disabled .pricing-include {
    justify-self: center;
  }

  .pricing-guided-view .pricing-selected-services {
    padding: 10px;
  }

  .pricing-selected-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .pricing-selected-row strong {
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .pricing-guided-view .pricing-service-grid {
    gap: 8px;
  }

  .pricing-guided-view .pricing-service-card.is-disabled {
    min-height: 118px;
  }
}

/* Quick pricing: compact customer picker and visual service tiles. */
.pricing-start-view {
  width: min(760px, 100%);
  margin: 28px auto;
}

.pricing-start-panel .section-body {
  display: grid;
  gap: 16px;
}

.pricing-start-view .pricing-client-search {
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.8fr) 42px;
  align-items: end;
}

.pricing-start-button {
  min-height: 50px;
  min-width: 170px;
}

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

.pricing-start-actions .button {
  min-height: 50px;
}

.pricing-work-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(20, 58, 86, 0.13);
  padding: 2px 2px 12px;
}

.pricing-work-header > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.pricing-work-header span,
.pricing-work-header em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.pricing-work-header strong,
.pricing-work-header em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-work-header strong {
  color: var(--navy);
  font-size: 16px;
}

.pricing-quick-view .section-heading p,
.pricing-quick-view .pricing-service-card small {
  display: none;
}

.pricing-quick-view,
.pricing-quick-view > .section,
.pricing-quick-view > .section > .section-body,
.pricing-quick-view .pricing-customer-bar,
.pricing-quick-view .pricing-client-search,
.pricing-quick-view .pricing-client-lookup,
.pricing-quick-view .pricing-client-combobox {
  overflow: visible;
}

.pricing-quick-view > .section:first-child {
  position: relative;
  z-index: 35;
}

.pricing-quick-view .pricing-customer-bar {
  position: relative;
  z-index: 35;
  grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  gap: 10px;
  align-items: start;
  margin-bottom: 0;
  padding: 10px;
  border-color: rgba(20, 58, 86, 0.12);
  background: #fff;
}

.pricing-quick-view .pricing-client-search {
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 0.74fr) 42px;
  gap: 8px;
  align-items: end;
}

.pricing-quick-view .pricing-client-search .field {
  gap: 5px;
}

.pricing-quick-view .pricing-client-lookup {
  position: relative;
}

.pricing-client-combobox {
  position: relative;
}

.pricing-quick-view .pricing-client-combobox input {
  padding-right: 42px;
}

.pricing-client-clear {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border-color: transparent;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}

.pricing-client-clear:hover,
.pricing-client-clear:focus-visible {
  color: var(--navy);
  background: rgba(20, 58, 86, 0.08);
}

.pricing-client-results[hidden] {
  display: none;
}

.pricing-quick-view .pricing-client-search .field > span,
.pricing-quick-view .pricing-notes-panel summary {
  font-size: 11px;
}

.pricing-quick-view .pricing-client-search input,
.pricing-quick-view .pricing-client-search select {
  min-height: 42px;
}

.pricing-quick-view .pricing-client-results {
  position: absolute;
  z-index: 120;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  max-height: 292px;
  overflow: auto;
  border: 1px solid rgba(20, 58, 86, 0.16);
  border-radius: 8px;
  padding: 5px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(5, 24, 44, 0.18);
}

.pricing-quick-view .pricing-client-results[hidden] {
  display: none;
}

.pricing-quick-view .pricing-client-result {
  grid-template-columns: minmax(0, 1fr);
  min-height: 48px;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  background: #fff;
}

.pricing-quick-view .pricing-client-result:hover,
.pricing-quick-view .pricing-client-result:focus-visible {
  background: rgba(17, 199, 189, 0.1);
  box-shadow: none;
}

.pricing-quick-view .pricing-client-result-main strong {
  font-size: 14px;
}

.pricing-quick-view .pricing-client-result-main em {
  font-size: 12px;
}

.pricing-quick-view .pricing-client-no-results {
  border: 0;
  padding: 9px 10px;
  background: #fff;
}

.pricing-quick-view .pricing-client-no-results a {
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
}

.pricing-quick-view .quote-client-actions {
  align-items: end;
}

.pricing-quick-view .pricing-add-client {
  width: auto;
  min-width: 132px;
  height: 42px;
  border-radius: 8px;
  padding-inline: 12px;
}

.pricing-quick-view .pricing-client-summary {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
}

.pricing-quick-view .pricing-client-summary strong {
  font-size: 14px;
  line-height: 1.15;
}

.pricing-quick-view .pricing-client-summary span {
  font-size: 12px;
}

.pricing-quick-view .pricing-notes-panel {
  min-width: 132px;
  align-self: end;
}

.pricing-quick-view .pricing-shell {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  align-items: start;
}

.pricing-quick-view .pricing-summary-panel {
  border-radius: var(--radius);
}

.pricing-quick-view .pricing-summary-panel .button.primary {
  min-height: 46px;
}

.pricing-quick-view .pricing-selected-services {
  border-radius: var(--radius);
  padding: 10px;
}

.pricing-quick-view .pricing-service-grid {
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  align-items: start;
}

.pricing-quick-view .pricing-service-card {
  border-color: rgba(20, 58, 86, 0.12);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pricing-quick-view .pricing-service-card.is-disabled {
  min-height: 148px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
}

.pricing-quick-view .pricing-service-card.is-disabled:hover,
.pricing-quick-view .pricing-service-card.is-disabled:focus-within {
  border-color: rgba(24, 189, 181, 0.42);
  background: #f7fcfc;
  transform: translateY(-1px);
}

.pricing-quick-view .pricing-service-card.is-disabled header {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 0;
  gap: 10px;
  text-align: center;
}

.pricing-quick-view .pricing-service-card.is-disabled .pricing-service-title {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 9px;
}

.pricing-quick-view .pricing-service-card.is-disabled .pricing-service-icon {
  width: 68px;
  height: 58px;
  border-radius: 10px;
  color: #fff;
  box-shadow: inset 0 -18px 26px rgba(5, 24, 44, 0.18);
}

.pricing-quick-view .pricing-service-card.is-disabled h3 {
  font-size: 15px;
  line-height: 1.12;
}

.pricing-quick-view .pricing-service-card.is-disabled .pricing-include {
  display: none;
}

.pricing-quick-view .pricing-service-card.is-selected {
  order: -1;
  grid-column: 1 / -1;
}

.pricing-quick-view .pricing-service-card.is-selected:not(.is-editing) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-color: var(--pricing-service-accent, rgba(24, 189, 181, 0.42));
  background: linear-gradient(90deg, var(--pricing-service-tint, rgba(24, 189, 181, 0.08)), #fff 62%);
  box-shadow: none;
}

.pricing-quick-view .pricing-service-card.is-selected:not(.is-editing) .pricing-service-body {
  display: none;
}

.pricing-quick-view .pricing-service-card.is-selected:not(.is-editing) header,
.pricing-quick-view .pricing-service-card.is-selected:not(.is-editing) footer {
  border: 0;
  padding: 0;
}

.pricing-quick-view .pricing-service-card.is-selected:not(.is-editing) footer {
  justify-content: flex-end;
}

.pricing-quick-view .pricing-service-card.is-editing {
  border-color: var(--pricing-service-accent, rgba(24, 189, 181, 0.58));
  background: linear-gradient(180deg, var(--pricing-service-tint, rgba(24, 189, 181, 0.08)), #fff 34%);
  box-shadow: 0 14px 30px rgba(5, 24, 44, 0.1);
}

.pricing-quick-view .pricing-service-card.is-editing header {
  background: linear-gradient(180deg, #fff, var(--pricing-service-tint, #f7fdfd));
}

.pricing-service-icon.is-pressure {
  background: linear-gradient(135deg, #0284c7, #075985);
}

.pricing-service-icon.is-windows {
  background: linear-gradient(135deg, #38bdf8, #0f766e);
}

.pricing-service-icon.is-gutters {
  background: linear-gradient(135deg, #64748b, #166534);
}

.pricing-service-icon.is-softwash {
  background: linear-gradient(135deg, #14b8a6, #115e59);
}

.pricing-service-icon.is-roof {
  background: linear-gradient(135deg, #ef4444, #334155);
}

.pricing-service-icon.is-stain {
  background: linear-gradient(135deg, #f59e0b, #92400e);
}

.pricing-service-icon.is-oxidation {
  background: linear-gradient(135deg, #a855f7, #0f766e);
}

.pricing-service-icon.is-wood {
  background: linear-gradient(135deg, #92400e, #166534);
}

.pricing-service-icon.is-dryer {
  background: linear-gradient(135deg, #94a3b8, #475569);
}

.pricing-service-icon.is-solar {
  background: linear-gradient(135deg, #facc15, #ea580c);
}

.pricing-service-icon.is-fees {
  background: linear-gradient(135deg, #22c55e, #14532d);
}

.pricing-service-icon.is-sealing {
  background: linear-gradient(135deg, #0f766e, #1e3a8a);
}

@media (max-width: 960px) {
  .pricing-quick-view .pricing-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-quick-view .pricing-summary-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  .pricing-start-view {
    margin: 8px auto;
  }

  .pricing-start-view .pricing-client-search {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .pricing-start-view .pricing-property-select,
  .pricing-start-view .pricing-client-summary {
    grid-column: 1 / -1;
  }

  .pricing-start-button {
    width: 100%;
    justify-self: stretch;
  }

  .pricing-start-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pricing-work-header > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .pricing-work-header > div > span {
    display: none;
  }

  .pricing-quick-view .crm-tabs {
    display: none;
  }

  .pricing-quick-view .pricing-customer-bar {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px;
  }

  .pricing-quick-view .pricing-client-search {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .pricing-quick-view .pricing-client-lookup {
    min-width: 0;
  }

  .pricing-quick-view .pricing-property-select,
  .pricing-quick-view .pricing-client-summary {
    grid-column: 1 / -1;
  }

  .pricing-quick-view .pricing-notes-panel {
    min-width: 0;
  }

  .pricing-quick-view .pricing-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pricing-quick-view .pricing-service-card.is-selected:not(.is-editing) {
    display: none;
  }

  .pricing-quick-view .pricing-service-card.is-editing {
    order: -1;
    grid-column: 1 / -1;
  }

  .pricing-quick-view .pricing-service-card.is-disabled {
    min-height: 124px;
    padding: 8px;
  }

  .pricing-quick-view .pricing-service-card.is-disabled header {
    gap: 7px;
    padding: 2px;
  }

  .pricing-quick-view .pricing-service-card.is-disabled .pricing-service-title {
    gap: 6px;
  }

  .pricing-quick-view .pricing-service-card.is-disabled .pricing-service-icon {
    width: 48px;
    height: 44px;
  }

  .pricing-quick-view .pricing-service-card.is-disabled .pricing-service-icon svg {
    width: 24px;
    height: 24px;
  }

  .pricing-quick-view .pricing-service-card.is-disabled h3 {
    font-size: 13px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .pricing-quick-view .pricing-selected-services {
    padding: 9px;
  }
}

@media (max-width: 430px) {
  .pricing-quick-view .pricing-service-grid {
    gap: 8px;
  }

  .pricing-quick-view .pricing-service-card.is-disabled {
    min-height: 112px;
  }
}

.message-alert-nudge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(19, 178, 173, 0.28);
  border-radius: 8px;
  background: #f2fffd;
  color: var(--ink);
}

.message-alert-nudge > svg,
.message-alert-nudge > i {
  width: 22px;
  height: 22px;
  color: var(--teal-deep);
}

.message-alert-nudge strong,
.message-alert-nudge span {
  display: block;
}

.message-alert-nudge strong {
  font-size: 14px;
}

.message-alert-nudge span {
  color: var(--muted);
  font-size: 12px;
}

.message-alert-nudge.is-ready {
  border-color: rgba(21, 128, 61, 0.22);
  background: #f0fdf4;
}

.message-alert-nudge.needs-attention {
  border-color: rgba(220, 38, 38, 0.22);
  background: #fff5f5;
}

.message-alert-nudge.needs-attention > svg,
.message-alert-nudge.needs-attention > i {
  color: #b91c1c;
}

.payment-processor-readiness {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin: 12px 0 16px;
  padding: 14px;
  border: 1px solid rgba(19, 178, 173, 0.28);
  border-radius: 8px;
  background: #f2fffd;
}

.payment-processor-readiness.needs-setup {
  border-color: rgba(245, 158, 11, 0.32);
  background: #fffbeb;
}

.payment-processor-readiness h3 {
  margin: 2px 0 4px;
  color: var(--navy);
  font-size: 18px;
}

.payment-processor-readiness p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .message-alert-nudge {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .message-alert-nudge .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .payment-processor-readiness {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-processor-readiness .button {
    width: 100%;
  }

  .launch-readiness-head {
    align-items: stretch;
    flex-direction: column;
  }

  .launch-readiness-score {
    min-width: 0;
  }

  .launch-readiness-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cloud-field-rollout-head {
    align-items: stretch;
    flex-direction: column;
  }

  .cloud-field-rollout-head .button {
    width: 100%;
  }

  .cloud-field-rollout-actions {
    display: grid;
    width: 100%;
  }

  .cloud-field-rollout-list article {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .cloud-field-rollout-list .button {
    grid-column: 1 / -1;
    width: 100%;
  }

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

  .revenue-workflow-issue {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .revenue-workflow-issue .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .revenue-repair-history article {
    grid-template-columns: minmax(0, 1fr);
  }

  .revenue-repair-history article > span {
    width: fit-content;
  }

  .pilot-checklist-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pilot-checklist-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pilot-checklist-grid article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .pilot-checklist-grid .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Overnight hardening pass: mobile should never feel like a squeezed desktop app. */
@media (max-width: 760px) {
  .section,
  .section-body,
  .card,
  .ops-focus-card,
  .nested-section,
  .crm-list-card,
  .log-card,
  .jobsite-work-header {
    min-width: 0;
  }

  .section-heading {
    gap: 10px;
  }

  .actions:not(.topbar-actions) .button,
  .crm-toolbar-actions .button,
  .message-page-actions .button,
  .field-route-actions .button,
  .jobsite-quick-card .button {
    min-width: 0;
    white-space: normal;
  }

  .form-grid,
  .grid.two,
  .grid.three,
  .ops-focus-grid,
  .dashboard-stat-grid,
  .import-key-values {
    grid-template-columns: minmax(0, 1fr);
  }

  .million-pulse-card {
    padding: 12px;
  }

  .million-pulse-head {
    align-items: stretch;
  }

  .million-pulse-head strong {
    font-size: 22px;
  }

  .million-pulse-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .import-key-values strong,
  .detail strong,
  .detail span,
  .task-row strong,
  .task-row small {
    overflow-wrap: anywhere;
  }

  body:has(.messages-console.has-active-thread) .mobile-tabbar {
    display: none;
  }

  .messages-page:has(.messages-console.has-active-thread) {
    min-height: calc(100dvh - 74px - var(--safe-bottom));
  }

  .messages-page:has(.messages-console.has-active-thread) .section-body {
    height: calc(100dvh - 74px - var(--safe-bottom));
  }

  .messages-console .message-composer {
    padding-bottom: max(10px, calc(10px + var(--safe-bottom)));
  }
}

@media (max-width: 430px) {
  .messages-console .message-conversation-actions .button {
    min-width: 44px;
  }

  .messages-console .message-conversation-actions .button:not(.message-back-button) span,
  .messages-console .message-conversation-actions .button:not(.message-back-button) {
    font-size: 0;
  }

  .messages-console .message-conversation-actions .button svg {
    width: 16px;
    height: 16px;
  }
}

.pipeline-page .section-heading {
  align-items: flex-start;
}

.pipeline-toolbar {
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.38fr) minmax(120px, 0.28fr) auto;
  align-items: end;
  margin-bottom: 14px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  background: #f7fcfd;
}

.pipeline-mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.pipeline-mode-tabs a {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--deep);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 950;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(8, 40, 61, 0.04);
}

.pipeline-mode-tabs a:hover,
.pipeline-mode-tabs a:focus-visible,
.pipeline-mode-tabs a.is-active {
  border-color: rgba(17, 199, 189, 0.5);
  background: #effdfb;
  outline: none;
}

.pipeline-ledger-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(128px, max-content));
  gap: 6px;
  margin: 0 0 12px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 999px;
  padding: 5px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(8, 40, 61, 0.06);
}

.pipeline-ledger-switch a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border-radius: 999px;
  padding: 7px 13px;
  color: var(--slate);
  text-decoration: none;
  font-weight: 950;
}

.pipeline-ledger-switch a:hover,
.pipeline-ledger-switch a:focus-visible,
.pipeline-ledger-switch a.is-active {
  color: var(--deep);
  background: #effdfb;
  outline: none;
}

.pipeline-ledger-switch a.is-active {
  box-shadow: inset 0 0 0 1px rgba(17, 199, 189, 0.38);
}

.pipeline-ledger-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #fff;
  background: var(--teal);
  font-size: 0.78rem;
  font-weight: 1000;
}

.pipeline-ledger-mark.is-jobber {
  background: #0f8ee8;
}

.pipeline-focus-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(96px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.pipeline-focus-tabs a {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--deep);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(8, 40, 61, 0.04);
}

.pipeline-focus-tabs a:hover,
.pipeline-focus-tabs a:focus-visible,
.pipeline-focus-tabs a.is-active {
  border-color: rgba(17, 199, 189, 0.48);
  background: #effdfb;
  outline: none;
}

.pipeline-focus-tabs span,
.pipeline-focus-tabs strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-focus-tabs span {
  color: var(--slate);
  font-size: 0.82rem;
  font-weight: 900;
}

.pipeline-focus-tabs strong {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--deep);
  background: #eaf6f7;
  font-size: 0.78rem;
  font-weight: 1000;
}

.pipeline-focus-tabs a.is-active strong {
  color: #fff;
  background: #0f766e;
}

.pipeline-hud {
  --hud: #18bdb5;
  --hud-bg: #ecfffd;
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1.05fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--hud) 32%, white);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--hud) 17%, white), #fff 52%),
    var(--hud-bg);
  box-shadow: 0 16px 38px rgba(8, 40, 61, 0.08);
}

.pipeline-hud.is-urgent {
  --hud: #d71946;
  --hud-bg: #fff3f6;
}

.pipeline-hud.is-attention {
  --hud: #f59e0b;
  --hud-bg: #fff8e9;
}

.pipeline-hud.is-lead {
  --hud: #12a8d8;
  --hud-bg: #eaf9ff;
}

.pipeline-hud.is-approved {
  --hud: #16a34a;
  --hud-bg: #effdf4;
}

.pipeline-hud-main {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 14px;
  border-radius: 8px;
  color: var(--deep);
  background: rgba(255, 255, 255, 0.78);
}

.pipeline-hud-label,
.pipeline-hud-metric span,
.pipeline-sales-signals span,
.pipeline-path-node span,
.pipeline-path-node em {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-transform: uppercase;
}

.pipeline-hud-main strong {
  color: var(--deep);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
}

.pipeline-hud-main p {
  max-width: 460px;
  margin: 0;
  color: var(--slate);
  font-weight: 800;
  line-height: 1.35;
}

.pipeline-hud-main .button {
  width: fit-content;
  margin-top: 2px;
  background: var(--hud);
  border-color: var(--hud);
}

.pipeline-hud-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pipeline-hud-metric {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  background: #fff;
}

.pipeline-hud-metric strong {
  color: var(--deep);
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.pipeline-sales-command {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pipeline-sales-command-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 10px;
  color: var(--deep);
  background: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.pipeline-sales-command-card:hover,
.pipeline-sales-command-card:focus-visible {
  border-color: rgba(17, 199, 189, 0.42);
  box-shadow: 0 12px 24px rgba(8, 40, 61, 0.1);
  outline: none;
}

.pipeline-sales-command-card.is-urgent {
  border-color: rgba(215, 25, 70, 0.26);
  background: #fff5f7;
}

.pipeline-sales-command-card.is-lead,
.pipeline-sales-command-card.is-quote {
  border-color: rgba(37, 99, 235, 0.2);
  background: #f3f8ff;
}

.pipeline-sales-command-card.is-approved {
  border-color: rgba(22, 163, 74, 0.22);
  background: #f3fff6;
}

.pipeline-sales-command-card span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-transform: uppercase;
}

.pipeline-sales-command-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--deep);
  font-size: 1.08rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-sales-command-card em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 820;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-priority-queue {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.86);
}

.pipeline-priority-queue.is-clear {
  grid-template-columns: minmax(0, 1fr);
  color: var(--slate);
  background: rgba(255, 255, 255, 0.7);
}

.pipeline-priority-queue.is-clear p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.pipeline-priority-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pipeline-priority-head span,
.pipeline-priority-item small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pipeline-priority-head strong {
  color: var(--deep);
  font-size: 1rem;
}

.pipeline-priority-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.pipeline-priority-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: start;
  min-height: 74px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.pipeline-priority-item:hover,
.pipeline-priority-item:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(17, 199, 189, 0.42);
  box-shadow: 0 12px 26px rgba(8, 40, 61, 0.12);
  outline: none;
}

.pipeline-priority-item > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #fff;
  background: var(--hud);
  font-size: 0.76rem;
  font-weight: 1000;
}

.pipeline-priority-item strong,
.pipeline-priority-item em,
.pipeline-priority-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-priority-item strong {
  color: var(--deep);
  font-size: 0.9rem;
  line-height: 1.12;
}

.pipeline-priority-item em {
  grid-column: 2;
  color: var(--ink);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
}

.pipeline-priority-item small {
  grid-column: 2;
  line-height: 1.1;
}

.pipeline-priority-item.is-danger > span {
  background: #d71946;
}

.pipeline-priority-item.is-warn > span {
  background: #f59e0b;
}

.pipeline-priority-item.is-good > span {
  background: #16a34a;
}

.pipeline-path {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.pipeline-insights {
  grid-column: 1 / -1;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.pipeline-insights summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: var(--deep);
  cursor: pointer;
  list-style: none;
}

.pipeline-insights summary::-webkit-details-marker {
  display: none;
}

.pipeline-insights summary span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pipeline-insights summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--deep);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-insights[open] summary {
  border-bottom: 1px solid rgba(20, 58, 86, 0.1);
}

.pipeline-insights-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.pipeline-path-node {
  --stage: #18bdb5;
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--stage) 26%, white);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.pipeline-path-node::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 5px;
  background: var(--stage);
}

.pipeline-path-node.is-lead {
  --stage: #12a8d8;
}

.pipeline-path-node.is-quote {
  --stage: #7c5cff;
}

.pipeline-path-node.is-approved {
  --stage: #16a34a;
}

.pipeline-path-node.is-scheduled {
  --stage: #f59e0b;
}

.pipeline-path-node.is-completed {
  --stage: #0f766e;
}

.pipeline-path-node strong {
  color: var(--deep);
  line-height: 1.1;
}

.pipeline-sales-signals {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pipeline-sales-signals div {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 58px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.84);
}

.pipeline-sales-signals strong {
  color: var(--deep);
  font-size: 1rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.pipeline-source-performance {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.pipeline-source-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pipeline-source-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pipeline-source-head span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pipeline-source-head strong {
  color: var(--deep);
  font-size: 1rem;
}

.pipeline-source-head em {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.pipeline-source-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pipeline-source-row {
  display: grid;
  gap: 4px;
  min-height: 82px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.pipeline-source-row strong,
.pipeline-source-row span,
.pipeline-source-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-source-row strong {
  color: var(--deep);
  font-size: 0.94rem;
  line-height: 1.12;
}

.pipeline-source-row span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
}

.pipeline-source-row em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.pipeline-source-intake {
  display: grid;
  gap: 14px;
}

.lead-intake-status {
  display: grid;
  grid-template-columns: minmax(170px, 0.9fr) minmax(260px, 1.5fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(8, 40, 61, 0.05);
}

.lead-intake-status.is-ready {
  border-color: rgba(17, 199, 189, 0.34);
  background: #f4fffd;
}

.lead-intake-status.is-blocked {
  border-color: rgba(214, 86, 42, 0.28);
  background: #fff8f4;
}

.lead-intake-status-main,
.lead-intake-stats,
.lead-intake-endpoint,
.lead-intake-source-chips {
  min-width: 0;
}

.lead-intake-status-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.lead-intake-dot {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(17, 199, 189, 0.12);
}

.lead-intake-status.is-blocked .lead-intake-dot {
  background: #d6562a;
  box-shadow: 0 0 0 5px rgba(214, 86, 42, 0.12);
}

.lead-intake-status-main strong,
.lead-intake-status-main em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-intake-status-main strong {
  color: var(--deep);
  font-size: 0.98rem;
  font-weight: 1000;
}

.lead-intake-status-main em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
}

.lead-intake-endpoint {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.82);
}

.lead-intake-endpoint span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-intake-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.lead-intake-stats span,
.lead-intake-source-chips span {
  border-radius: 999px;
  padding: 6px 8px;
  color: var(--deep);
  background: rgba(20, 58, 86, 0.07);
  font-size: 0.73rem;
  font-weight: 900;
  white-space: nowrap;
}

.lead-intake-stats strong {
  font-size: 0.82rem;
}

.lead-intake-source-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lead-intake-source-chips span {
  background: rgba(17, 199, 189, 0.14);
}

.lead-intake-error {
  grid-column: 1 / -1;
  margin: 0;
  color: #9a3412;
  font-size: 0.8rem;
  font-weight: 900;
}

.pipeline-source-intake-head {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
}

.pipeline-source-total,
.pipeline-source-card {
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  padding: 12px;
  color: var(--deep);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(8, 40, 61, 0.06);
}

.pipeline-source-total:hover,
.pipeline-source-total:focus-visible,
.pipeline-source-total.is-active,
.pipeline-source-card:hover,
.pipeline-source-card:focus-visible,
.pipeline-source-card.is-active {
  border-color: rgba(17, 199, 189, 0.5);
  background: #effdfb;
  outline: none;
}

.pipeline-source-total {
  display: grid;
  gap: 3px;
  align-content: center;
  background: var(--deep);
  color: #fff;
}

.pipeline-source-total span,
.pipeline-source-card strong {
  font-size: 0.86rem;
  font-weight: 1000;
}

.pipeline-source-total strong {
  font-size: 1.8rem;
  line-height: 1;
}

.pipeline-source-total em,
.pipeline-source-card em {
  color: inherit;
  opacity: 0.72;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
}

.pipeline-source-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px 10px;
  align-items: center;
}

.pipeline-source-card span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  background: var(--teal);
  font-size: 0.72rem;
  font-weight: 1000;
}

.pipeline-source-card strong,
.pipeline-source-card em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-source-card b {
  color: var(--deep);
  font-size: 1.25rem;
  line-height: 1;
}

.pipeline-source-card em {
  grid-column: 2 / -1;
}

.pipeline-source-intake-list {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.pipeline-source-list-head,
.pipeline-source-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.pipeline-source-list-head {
  padding: 4px 4px 10px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pipeline-source-list-head strong {
  grid-column: 1 / 3;
  color: var(--deep);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.pipeline-source-list-head span {
  justify-self: end;
  grid-column: 4;
}

.pipeline-source-item {
  border: 1px solid rgba(20, 58, 86, 0.09);
  border-radius: 8px;
  padding: 9px;
  background: #f8fbfc;
  cursor: pointer;
}

.pipeline-source-item:hover,
.pipeline-source-item:focus-visible {
  border-color: rgba(17, 199, 189, 0.38);
  background: #effdfb;
  outline: none;
}

.pipeline-source-item-stage {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--deep);
  background: #eaf0f4;
  font-size: 0.74rem;
  font-weight: 1000;
}

.pipeline-source-item-stage.is-lead {
  color: #07536b;
  background: #d9f4ff;
}

.pipeline-source-item-stage.is-quote {
  color: #4e31c9;
  background: #ebe6ff;
}

.pipeline-source-item-stage.is-approved,
.pipeline-source-item-stage.is-scheduled,
.pipeline-source-item-stage.is-completed {
  color: #0f6b32;
  background: #dcfce7;
}

.pipeline-source-item strong,
.pipeline-source-item em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-source-item strong {
  color: var(--deep);
  font-size: 0.94rem;
}

.pipeline-source-item em {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 850;
}

.pipeline-source-item b {
  color: var(--deep);
  font-size: 0.9rem;
  white-space: nowrap;
}

.lsa-leads-page .section-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.lsa-leads-page [data-lsa-content] {
  width: 100%;
  min-width: 0;
}

.lsa-page-status {
  display: flex;
  justify-content: flex-end;
  min-height: 28px;
}

.lsa-connector-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.lsa-connector-status > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d6562a;
  box-shadow: 0 0 0 4px rgba(214, 86, 42, 0.1);
}

.lsa-connector-status.is-ready > span {
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(17, 199, 189, 0.12);
}

.lsa-connector-status strong,
.lsa-connector-status time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsa-connector-status strong {
  color: var(--deep);
}

.lsa-stat-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(86px, 1fr)) auto;
  gap: 7px;
  min-width: 0;
}

.lsa-stat-tabs a,
.lsa-response-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 45px;
  border: 1px solid rgba(20, 58, 86, 0.11);
  border-radius: 8px;
  padding: 8px 11px;
  color: var(--muted);
  background: #fff;
  text-decoration: none;
}

.lsa-stat-tabs a:hover,
.lsa-stat-tabs a:focus-visible,
.lsa-stat-tabs a.is-active {
  border-color: rgba(17, 199, 189, 0.5);
  color: var(--deep);
  background: #effdfb;
  outline: none;
}

.lsa-stat-tabs span {
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsa-stat-tabs strong {
  color: var(--deep);
  font-size: 1.08rem;
}

.lsa-response-stat {
  justify-content: center;
  color: var(--deep);
}

.lsa-response-stat svg {
  width: 17px;
  height: 17px;
}

.lsa-workspace {
  display: grid;
  grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
  min-width: 0;
  min-height: min(660px, calc(100vh - 275px));
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(8, 40, 61, 0.06);
}

.lsa-lead-queue,
.lsa-lead-detail,
.lsa-lead-card-main,
.lsa-detail-head > div,
.lsa-timeline-item > div {
  min-width: 0;
}

.lsa-lead-queue {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid rgba(20, 58, 86, 0.1);
  background: #f7fafb;
}

.lsa-filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 7px;
  border-bottom: 1px solid rgba(20, 58, 86, 0.09);
  padding: 9px;
  background: #fff;
}

.lsa-filter-bar label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.13);
  border-radius: 8px;
  padding: 0 9px;
  background: #fff;
}

.lsa-filter-bar label:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(17, 199, 189, 0.1);
}

.lsa-filter-bar svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.lsa-filter-bar input,
.lsa-filter-bar select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 0;
  padding: 6px 2px;
  color: var(--deep);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  outline: none;
}

.lsa-filter-bar select {
  border: 1px solid rgba(20, 58, 86, 0.13);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
}

.lsa-lead-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lsa-lead-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  min-width: 0;
  border-bottom: 1px solid rgba(20, 58, 86, 0.08);
  padding: 12px 10px;
  color: inherit;
  background: #fff;
  text-decoration: none;
}

.lsa-lead-card:hover,
.lsa-lead-card:focus-visible,
.lsa-lead-card.is-active {
  background: #edfafa;
  outline: none;
}

.lsa-lead-card.is-active {
  box-shadow: inset 3px 0 0 var(--teal);
}

.lsa-lead-card.needs-reply {
  background: #f3fbff;
}

.lsa-lead-channel {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #07536b;
  background: #d9f4ff;
}

.lsa-lead-channel svg {
  width: 17px;
  height: 17px;
}

.lsa-lead-card-main > div,
.lsa-lead-card-main footer {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lsa-lead-card-main > div {
  justify-content: space-between;
}

.lsa-lead-card-main strong,
.lsa-lead-card-main p,
.lsa-lead-card-main time,
.lsa-lead-card-main footer span,
.lsa-lead-card-main footer em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsa-lead-card-main strong {
  color: var(--deep);
  font-size: 0.92rem;
}

.lsa-lead-card-main time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.lsa-lead-card-main p {
  margin: 4px 0 7px;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.25;
}

.lsa-lead-card-main footer span,
.lsa-lead-card-main footer em {
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--deep);
  background: rgba(20, 58, 86, 0.07);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 900;
}

.lsa-lead-card-main footer span.is-booked {
  color: #0f6b32;
  background: #dcfce7;
}

.lsa-lead-card-main footer span.is-lost,
.lsa-lead-card-main footer span.is-spam {
  color: #8a243b;
  background: #fff0f3;
}

.lsa-lead-card > b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: #118fc4;
  font-size: 0.7rem;
}

.lsa-lead-detail {
  display: grid;
  grid-template-rows: auto auto auto minmax(180px, 1fr) auto;
  align-content: start;
  min-width: 0;
  background: #fff;
}

.lsa-lead-detail.is-empty {
  place-content: center;
  justify-items: center;
  gap: 9px;
  color: var(--muted);
}

.lsa-lead-detail.is-empty svg {
  width: 28px;
  height: 28px;
}

.lsa-mobile-back {
  display: none;
}

.lsa-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid rgba(20, 58, 86, 0.09);
  padding: 12px 14px;
}

.lsa-lead-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #fff;
  background: var(--deep);
  font-weight: 1000;
}

.lsa-detail-head h3,
.lsa-detail-head p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsa-detail-head h3 {
  margin: 0;
  color: var(--deep);
  font-size: 1.08rem;
}

.lsa-detail-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.lsa-detail-head nav {
  display: flex;
  gap: 5px;
}

.lsa-detail-head .icon-button {
  width: 38px;
  height: 38px;
}

.lsa-contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid rgba(20, 58, 86, 0.07);
  padding: 8px 14px;
  background: #f8fbfc;
}

.lsa-contact-strip a,
.lsa-charge-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
  text-decoration: none;
}

.lsa-contact-strip a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsa-contact-strip svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.lsa-charge-state {
  margin-left: auto;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(20, 58, 86, 0.07);
}

.lsa-charge-state.is-charged {
  color: #8a5a00;
  background: #fff2ce;
}

.lsa-workflow-form {
  display: grid;
  grid-template-columns: 125px 150px 184px minmax(130px, 1fr) auto;
  gap: 7px;
  align-items: end;
  min-width: 0;
  border-bottom: 1px solid rgba(20, 58, 86, 0.09);
  padding: 9px 14px;
}

.lsa-workflow-form label {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lsa-workflow-form label > span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lsa-workflow-form select,
.lsa-workflow-form input,
.lsa-action-panel select,
.lsa-action-panel input,
.lsa-action-panel textarea {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid rgba(20, 58, 86, 0.15);
  border-radius: 7px;
  padding: 7px 8px;
  color: var(--deep);
  background: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.lsa-timeline {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 180px;
  overflow-y: auto;
  padding: 14px;
  background: #fbfcfd;
}

.lsa-timeline-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-self: flex-start;
  width: min(76%, 620px);
  min-width: 0;
}

.lsa-timeline-item.is-outbound {
  align-self: flex-end;
}

.lsa-timeline-item > span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  color: #07536b;
  background: #d9f4ff;
}

.lsa-timeline-item.is-outbound > span {
  color: #0f6b32;
  background: #dcfce7;
}

.lsa-timeline-item > span svg {
  width: 15px;
  height: 15px;
}

.lsa-timeline-item > div {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
}

.lsa-timeline-item.is-outbound > div {
  background: #edf9f6;
}

.lsa-timeline-item.is-note > div {
  background: #fff8d9;
}

.lsa-timeline-item header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.lsa-timeline-item header strong {
  color: var(--deep);
  font-size: 0.78rem;
}

.lsa-timeline-item header time,
.lsa-timeline-item small,
.lsa-timeline-item em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

.lsa-timeline-item p {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.lsa-timeline-item audio {
  display: block;
  width: 100%;
  min-width: 220px;
  height: 36px;
  margin-top: 7px;
}

.lsa-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  min-height: 150px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.lsa-empty svg {
  width: 25px;
  height: 25px;
}

.lsa-detail-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid rgba(20, 58, 86, 0.09);
  padding: 9px 14px;
  background: #fff;
}

.lsa-action-panel {
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.11);
  border-radius: 8px;
  padding: 0 9px;
  background: #f8fbfc;
}

.lsa-action-panel summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  color: var(--deep);
  font-size: 0.79rem;
  font-weight: 950;
  cursor: pointer;
  list-style: none;
}

.lsa-action-panel summary::-webkit-details-marker {
  display: none;
}

.lsa-action-panel summary svg {
  width: 16px;
  height: 16px;
}

.lsa-action-panel form {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 176px auto;
  gap: 6px;
  align-items: end;
  padding: 0 0 9px;
}

.lsa-action-panel textarea {
  min-height: 36px;
  max-height: 90px;
  resize: vertical;
}

.lsa-action-panel > p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: lowercase;
}

@media (max-width: 1100px) {
  .lsa-workflow-form {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }

  .lsa-note-field {
    grid-column: 1 / -2;
  }

  .lsa-action-panel form {
    grid-template-columns: 100px minmax(0, 1fr) auto;
  }

  .lsa-action-panel form input[type="datetime-local"] {
    grid-column: 1 / 3;
  }
}

@media (max-width: 820px) {
  .lsa-page-status {
    justify-content: flex-start;
  }

  .lsa-stat-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .lsa-stat-tabs a {
    flex: 0 0 104px;
  }

  .lsa-response-stat {
    flex: 0 0 78px;
  }

  .lsa-workspace {
    display: block;
    width: calc(100% + 16px);
    max-width: calc(100% + 16px);
    min-height: calc(100dvh - 265px);
    border-radius: 0;
    margin-inline: -8px;
    border-right: 0;
    border-left: 0;
  }

  .lsa-workspace.has-selected .lsa-lead-queue,
  .lsa-workspace:not(.has-selected) .lsa-lead-detail {
    display: none;
  }

  .lsa-lead-queue {
    min-height: calc(100dvh - 265px);
    border-right: 0;
  }

  .lsa-lead-detail {
    width: 100%;
    max-width: 100%;
    min-height: calc(100dvh - 265px);
  }

  .lsa-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    padding: 9px 14px 0;
    color: var(--deep);
    font-size: 0.8rem;
    font-weight: 950;
    text-decoration: none;
  }

  .lsa-mobile-back svg {
    width: 17px;
    height: 17px;
  }

  .lsa-detail-head {
    padding-top: 9px;
  }

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

  .lsa-note-field {
    grid-column: 1 / -1;
  }

  .lsa-workflow-form .button {
    grid-column: 1 / -1;
  }

  .lsa-timeline {
    min-height: 45dvh;
    overflow: visible;
  }

  .lsa-detail-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .lsa-filter-bar {
    grid-template-columns: minmax(0, 1fr) 102px;
  }

  .lsa-detail-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .lsa-detail-head nav {
    grid-column: auto;
    max-width: 124px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .lsa-detail-head nav [data-lsa-action="customer"],
  .lsa-detail-head nav [data-lsa-action="request"] {
    display: none;
  }

  .lsa-detail-head .icon-button {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .lsa-contact-strip {
    align-items: flex-start;
  }

  .lsa-contact-strip a {
    max-width: 100%;
  }

  .lsa-charge-state {
    margin-left: 0;
  }

  .lsa-workflow-form {
    grid-template-columns: 1fr;
  }

  .lsa-note-field,
  .lsa-workflow-form .button {
    grid-column: auto;
  }

  .lsa-timeline-item {
    width: 94%;
  }

  .lsa-timeline-item audio {
    min-width: 0;
  }

  .lsa-action-panel form,
  .lsa-action-panel form input[type="datetime-local"] {
    grid-template-columns: 1fr;
    grid-column: auto;
  }
}

/* Launch navigation refresh: Resources, Inventory, and report directories */
.resources-page,
.report-directory-page {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.resources-page-head,
.report-directory-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 2px;
}

.resources-page-head h2,
.report-directory-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 30px;
  line-height: 1.1;
}

.resources-page-head p,
.report-directory-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-weight: 650;
}

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

.resource-panel {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
  border: 1px solid #d7e1e7;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
}

.resource-review-panel {
  grid-column: 1 / -1;
  grid-template-columns: 46px minmax(0, 1fr) 148px;
  align-items: center;
}

.resource-panel-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  color: #087c74;
  background: #e3f7f4;
}

.resource-panel-icon svg {
  width: 22px;
  height: 22px;
}

.resource-panel-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.resource-panel-copy h3 {
  margin: 0;
  color: var(--navy);
  font-size: 20px;
}

.resource-panel-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.resource-review-qr {
  display: block;
  width: 138px;
  height: 138px;
  border: 1px solid #d7e1e7;
  border-radius: 6px;
  padding: 6px;
  background: #fff;
  object-fit: contain;
}

.report-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.report-directory-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  background: #fff;
}

.report-directory-section h3 {
  margin: 0;
  padding: 17px 16px 13px;
  color: #012939;
  font-size: 21px;
  line-height: 1.15;
}

.report-directory-list {
  display: grid;
}

.report-directory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-top: 1px solid #e2e7eb;
  padding: 12px 16px;
  color: #012939;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.report-directory-row:hover,
.report-directory-row:focus-visible {
  color: #056f69;
  background: #f2faf9;
}

.report-directory-row > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.report-directory-row strong {
  font-size: 15px;
  line-height: 1.2;
}

.report-directory-row small {
  color: #536b7a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.report-directory-row svg {
  width: 17px;
  height: 17px;
  color: #8ba0ac;
}

.app-hub-page,
.settings-detail-page {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.app-hub-head,
.settings-detail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 2px;
}

.app-hub-head h2,
.settings-detail-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 30px;
  line-height: 1.1;
}

.app-hub-head p,
.settings-detail-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-weight: 650;
}

.app-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.app-hub-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  background: #fff;
}

.app-hub-section h3 {
  margin: 0;
  padding: 17px 16px 13px;
  color: #012939;
  font-size: 21px;
  line-height: 1.15;
}

.app-hub-list {
  display: grid;
}

.app-hub-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  border-top: 1px solid #e2e7eb;
  padding: 12px 14px;
  color: #012939;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.app-hub-row:hover,
.app-hub-row:focus-visible {
  color: #056f69;
  background: #f2faf9;
}

.app-hub-row-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: #087c74;
  background: #e3f7f4;
}

.app-hub-row-icon svg,
.app-hub-row > svg {
  width: 17px;
  height: 17px;
}

.app-hub-row > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.app-hub-row strong {
  font-size: 15px;
  line-height: 1.2;
}

.app-hub-row small {
  color: #536b7a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.app-hub-row > svg {
  color: #8ba0ac;
}

.app-hub-status {
  border-radius: 999px;
  padding: 4px 7px;
  color: #526a78;
  background: #edf2f4;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.stripe-settings-workspace {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.stripe-settings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  border-bottom: 1px solid #dce5e9;
  padding-bottom: 14px;
}

.stripe-settings-toolbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.stripe-settings-toolbar small {
  color: #647987;
  font-weight: 700;
}

.stripe-settings-toolbar .action-row {
  margin: 0;
}

.stripe-settings-toolbar .button svg,
.stripe-settings-alert .button svg {
  width: 17px;
  height: 17px;
}

.stripe-settings-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stripe-settings-metrics article {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid #d5e1e6;
  border-top: 4px solid #d49b22;
  border-radius: 8px;
  padding: 13px;
  background: #fff;
}

.stripe-settings-metrics article.is-ready {
  border-top-color: #0b9489;
}

.stripe-settings-metrics article > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #667b88;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stripe-settings-metrics article > span svg {
  width: 16px;
  height: 16px;
  color: #0b7d76;
}

.stripe-settings-metrics article strong {
  color: #123a53;
  font-size: 22px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.stripe-settings-metrics article small {
  color: #687d89;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.stripe-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.stripe-settings-grid.is-ledgers {
  align-items: start;
}

.stripe-settings-panel {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  border: 1px solid #d6e1e6;
  border-radius: 8px;
  padding: 15px;
  background: #fff;
}

.stripe-settings-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stripe-settings-panel > header h3 {
  margin: 3px 0 0;
  color: #123a53;
  font-size: 20px;
  line-height: 1.15;
}

.stripe-settings-panel > header > svg {
  width: 22px;
  height: 22px;
  color: #0b8b82;
}

.stripe-bank-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #dce6ea;
  border-radius: 7px;
  padding: 14px;
  background: #f6fafb;
}

.stripe-bank-summary strong {
  color: #123a53;
  font-size: 20px;
}

.stripe-bank-summary span {
  color: #607783;
  font-weight: 750;
}

.stripe-balance-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.stripe-balance-breakdown div {
  display: grid;
  gap: 3px;
  border: 1px solid #dce6ea;
  border-radius: 7px;
  padding: 12px;
  background: #f6fafb;
}

.stripe-balance-breakdown span {
  color: #667b88;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.stripe-balance-breakdown strong {
  color: #123a53;
  font-size: 18px;
}

.stripe-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e1e8eb;
  padding-top: 12px;
}

.stripe-panel-footer > span {
  color: #607783;
  font-weight: 700;
}

.stripe-activity-list {
  display: grid;
}

.stripe-activity-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(120px, auto);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-top: 1px solid #e2e9ec;
  padding: 10px 0;
}

.stripe-activity-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.stripe-activity-row:last-child {
  padding-bottom: 0;
}

.stripe-activity-row > span:not(.stripe-activity-icon) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stripe-activity-row > span:last-child {
  text-align: right;
}

.stripe-activity-row strong,
.stripe-activity-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stripe-activity-row strong {
  color: #173c53;
}

.stripe-activity-row small {
  color: #687d89;
  font-weight: 650;
}

.stripe-activity-row.is-failed strong {
  color: #b12645;
}

.stripe-activity-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: #087d75;
  background: #e3f7f4;
}

.stripe-activity-icon svg {
  width: 17px;
  height: 17px;
}

.stripe-settings-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #e3bd63;
  border-left: 4px solid #d29116;
  border-radius: 8px;
  padding: 13px;
  color: #533b12;
  background: #fff9eb;
}

.stripe-settings-alert > svg {
  width: 22px;
  height: 22px;
}

.stripe-settings-alert p {
  margin: 3px 0 0;
}

.stripe-settings-alert div div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.stripe-settings-alert div div span {
  border-radius: 999px;
  padding: 4px 7px;
  color: #6a4a0f;
  background: #f5e2b1;
  font-size: 11px;
  font-weight: 800;
}

.stripe-settings-page > [data-stripe-settings-panel] > .empty-state {
  min-height: 280px;
}

.settings-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #0b766f;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.settings-back-link svg {
  width: 16px;
  height: 16px;
}

.schedule-settings-form {
  overflow: hidden;
  border: 1px solid #d7dde2;
  border-radius: 8px;
  background: #fff;
}

.schedule-settings-policy-section {
  border-bottom: 1px solid #d7dde2;
  background: #f8fbfc;
}

.schedule-settings-policies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 18px 18px;
}

.schedule-settings-policy {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  border: 1px solid #d8e2e7;
  border-top: 3px solid #0b8178;
  border-radius: 7px;
  padding: 15px;
  background: #fff;
}

.schedule-settings-policy.is-christmas {
  border-top-color: #be123c;
}

.schedule-settings-policy-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.schedule-settings-policy-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 6px;
  color: #08766f;
  background: #e6f6f3;
}

.schedule-settings-policy.is-christmas .schedule-settings-policy-icon {
  color: #a50f35;
  background: #fff0f3;
}

.schedule-settings-policy-icon svg {
  width: 19px;
  height: 19px;
}

.schedule-settings-policy-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.schedule-settings-policy-head strong {
  color: var(--navy);
  font-size: 16px;
}

.schedule-settings-policy-head small,
.schedule-settings-policy-example {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
}

.schedule-settings-policy-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.schedule-settings-policy-example {
  margin: 0;
  border-left: 3px solid #c6d5dc;
  padding-left: 9px;
}

.schedule-settings-intro,
.schedule-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 18px;
}

.schedule-settings-intro {
  border-bottom: 1px solid #e1e7eb;
}

.schedule-settings-intro h3 {
  margin: 0;
  color: var(--navy);
  font-size: 20px;
}

.schedule-settings-intro p,
.schedule-settings-footer > span {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.schedule-settings-rules {
  display: grid;
}

.schedule-settings-rule {
  display: grid;
  gap: 14px;
  border-bottom: 1px solid #e1e7eb;
  padding: 16px 18px;
}

.schedule-settings-rule > header,
.schedule-rule-enabled,
.schedule-rule-order {
  display: flex;
  align-items: center;
}

.schedule-settings-rule > header {
  justify-content: space-between;
  gap: 12px;
}

.schedule-rule-enabled {
  gap: 9px;
  color: var(--navy);
  font-weight: 850;
}

.schedule-rule-enabled input {
  width: 18px;
  height: 18px;
  accent-color: #0b8178;
}

.schedule-rule-order {
  gap: 6px;
}

.schedule-rule-fields {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) 150px minmax(220px, 1.6fr) 92px 112px;
  align-items: end;
  gap: 12px;
}

.schedule-color-field input[type="color"] {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px;
  background: #fff;
}

.schedule-rule-preview {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  max-width: 420px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--schedule-rule-color) 28%, #d7dde2);
  border-radius: 6px;
  padding: 10px 12px 10px 0;
  color: #15394c;
  background: var(--schedule-rule-bg);
}

.schedule-rule-preview > span {
  align-self: stretch;
  background: var(--schedule-rule-color);
}

.schedule-rule-preview small {
  color: #506878;
  font-weight: 700;
}

.schedule-settings-empty {
  display: grid;
  gap: 4px;
  padding: 24px 18px;
  color: var(--muted);
}

.schedule-settings-empty strong {
  color: var(--navy);
}

.schedule-settings-footer {
  background: #f7fafb;
}

.schedule-settings-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #d8e2e7;
  border-radius: 7px;
  padding: 12px 14px;
  color: var(--navy);
  background: #fff;
  text-decoration: none;
}

.schedule-settings-link > span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.schedule-settings-link svg {
  width: 18px;
  height: 18px;
}

.schedule-settings-link:hover,
.schedule-settings-link:focus-visible {
  background: #f1faf8;
}

@media (max-width: 1100px) {
  .app-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .schedule-settings-policies {
    grid-template-columns: 1fr;
  }

  .schedule-rule-match {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .app-hub-head,
  .settings-detail-head,
  .schedule-settings-intro,
  .schedule-settings-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .stripe-settings-toolbar,
  .stripe-settings-alert,
  .stripe-panel-footer {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .stripe-settings-toolbar .action-row,
  .stripe-settings-toolbar .button,
  .stripe-settings-alert .button,
  .stripe-panel-footer .button {
    width: 100%;
  }

  .app-hub-head h2,
  .settings-detail-head h2 {
    font-size: 26px;
  }

  .app-hub-grid,
  .stripe-settings-metrics,
  .stripe-settings-grid,
  .schedule-rule-fields,
  .schedule-settings-policy-fields {
    grid-template-columns: 1fr;
  }

  .stripe-activity-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .stripe-activity-row > span:last-child {
    grid-column: 2;
    text-align: left;
  }

  .schedule-rule-match {
    grid-column: auto;
  }

  .schedule-settings-footer .actions,
  .schedule-settings-footer .button {
    width: 100%;
  }

  .schedule-settings-footer .actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .schedule-rule-preview {
    grid-template-columns: 5px minmax(0, 1fr);
  }

  .schedule-rule-preview small {
    grid-column: 2;
  }
}

.inventory-section-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  padding: 0 14px;
  background: #fff;
  scrollbar-width: none;
}

.inventory-section-tabs::-webkit-scrollbar {
  display: none;
}

.inventory-section-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 48px;
  border-bottom: 3px solid transparent;
  padding: 0 14px;
  color: #536b7a;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.inventory-section-tabs a:hover,
.inventory-section-tabs a:focus-visible,
.inventory-section-tabs a.active {
  color: #056f69;
  border-bottom-color: #0fa99f;
  background: #f4fbfa;
}

.inventory-page.is-christmas-lights .inventory-section-tabs a.active {
  color: #9b1c31;
  border-bottom-color: #c62843;
  background: #fff5f6;
}

.inventory-layout.is-christmas-lights .inventory-table-shell {
  border-top: 3px solid #0d7257;
}

.inventory-section-tabs svg {
  width: 18px;
  height: 18px;
}

.inventory-maintenance-layout {
  display: grid;
  gap: 14px;
}

.inventory-maintenance-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-left: 4px solid #0fa99f;
  border-radius: 6px;
  padding: 18px;
  background: #effaf8;
}

.inventory-maintenance-summary.is-watch {
  border-left-color: #e6a23c;
  background: #fff8ea;
}

.inventory-maintenance-summary h3,
.inventory-maintenance-summary p {
  margin: 0;
}

.inventory-maintenance-summary h3 {
  margin-top: 4px;
  color: var(--navy);
  font-size: 19px;
}

.inventory-maintenance-summary p {
  margin-top: 5px;
  color: var(--muted);
}

.inventory-maintenance-counts {
  display: flex;
  gap: 8px;
}

.inventory-maintenance-counts span {
  display: grid;
  min-width: 78px;
  gap: 2px;
  border: 1px solid rgba(1, 41, 57, 0.12);
  border-radius: 6px;
  padding: 9px 12px;
  color: #536b7a;
  background: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.inventory-maintenance-counts strong {
  color: var(--navy);
  font-size: 20px;
}

.inventory-maintenance-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.checklist-library {
  overflow: hidden;
  border: 1px solid #d7e1e7;
  border-radius: 8px;
  background: #fff;
}

.checklist-library > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.checklist-library > summary::-webkit-details-marker {
  display: none;
}

.checklist-library > summary span {
  display: grid;
  gap: 2px;
}

.checklist-library > summary strong {
  color: var(--navy);
}

.checklist-library > summary small {
  color: var(--muted);
  font-weight: 650;
}

.checklist-library > summary svg {
  width: 18px;
  height: 18px;
  transition: transform 120ms ease;
}

.checklist-library[open] > summary svg {
  transform: rotate(180deg);
}

.checklist-library-grid {
  display: grid;
  border-top: 1px solid #e2e7eb;
}

.checklist-library-grid article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #eef1f3;
  padding: 11px 16px;
}

.checklist-library-grid article:first-child {
  border-top: 0;
}

.checklist-library-grid article > div {
  display: grid;
  gap: 2px;
}

.checklist-library-grid small {
  color: var(--muted);
  font-weight: 650;
}

@media (max-width: 1050px) {
  .report-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .resources-page,
  .report-directory-page {
    gap: 12px;
  }

  .resources-page-head h2,
  .report-directory-head h2 {
    font-size: 25px;
  }

  .resources-grid,
  .report-directory-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .resource-review-panel {
    grid-column: auto;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .resource-panel {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .resource-panel-icon {
    width: 42px;
    height: 42px;
  }

  .resource-review-qr {
    grid-column: 1 / -1;
    justify-self: center;
    width: 168px;
    height: 168px;
    margin-top: 4px;
  }

  .resource-actions .button {
    flex: 1 1 145px;
  }

  .report-directory-section h3 {
    padding: 15px 14px 11px;
    font-size: 19px;
  }

  .report-directory-row {
    padding: 11px 14px;
  }

  .inventory-section-tabs {
    padding: 0 6px;
  }

  .inventory-section-tabs a {
    min-height: 44px;
    padding: 0 10px;
    font-size: 13px;
  }

  .inventory-maintenance-summary {
    grid-template-columns: minmax(0, 1fr);
    padding: 15px;
  }

  .inventory-maintenance-counts {
    width: 100%;
  }

  .inventory-maintenance-counts span {
    flex: 1 1 0;
  }

  .checklist-library-grid article {
    align-items: flex-start;
  }
}

.pipeline-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.pipeline-stat {
  background: #fff;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 4px;
  box-shadow: 0 8px 22px rgba(8, 40, 61, 0.05);
}

.pipeline-stat span,
.pipeline-stat em,
.pipeline-stage-head p,
.pipeline-card-meta,
.pipeline-freshness {
  color: var(--muted);
}

.pipeline-stat span,
.pipeline-stage-head p,
.pipeline-card-meta,
.pipeline-followup span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pipeline-stat strong {
  color: var(--deep);
  font-size: 1.45rem;
  line-height: 1;
}

.pipeline-stat em {
  font-style: normal;
  font-size: 0.88rem;
}

.pipeline-stat.is-primary {
  border-color: rgba(18, 168, 216, 0.35);
  background: #eefaff;
}

.pipeline-stat.is-good {
  border-color: rgba(17, 199, 189, 0.35);
  background: #effdfb;
}

.pipeline-stat.is-warn {
  border-color: rgba(245, 158, 11, 0.4);
  background: #fff8e9;
}

.pipeline-stat.is-danger {
  border-color: rgba(215, 25, 70, 0.28);
  background: #fff3f6;
}

.pipeline-board-wrap {
  overflow-x: auto;
  padding-bottom: 10px;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(230px, 1fr));
  gap: 12px;
  align-items: start;
  min-width: 1060px;
}

.pipeline-board-history .pipeline-card-open {
  color: #52677a;
}

.pipeline-board-attention {
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  min-width: 720px;
}

.pipeline-board-archive {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  min-width: 760px;
}

.pipeline-board .pipeline-stage {
  scroll-snap-align: start;
}

.pipeline-board-main .pipeline-stage-head p,
.pipeline-board-main .pipeline-stage-total {
  display: none;
}

.pipeline-stage {
  --stage: #18bdb5;
  --stage-bg: #ecfffd;
  --stage-soft: #c9fbf6;
  --stage-ink: var(--deep);
  background: linear-gradient(180deg, var(--stage-bg), #fff 170px);
  border: 1px solid color-mix(in srgb, var(--stage) 38%, white);
  border-radius: 8px;
  min-height: 220px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(8, 40, 61, 0.08);
}

.pipeline-stage.is-lead {
  --stage: #12a8d8;
  --stage-bg: #eaf9ff;
  --stage-soft: #c9f1ff;
}

.pipeline-stage.is-quote {
  --stage: #7c5cff;
  --stage-bg: #f4f1ff;
  --stage-soft: #e3dcff;
}

.pipeline-stage.is-approved {
  --stage: #16a34a;
  --stage-bg: #effdf4;
  --stage-soft: #cef7dc;
}

.pipeline-stage.is-scheduled {
  --stage: #f59e0b;
  --stage-bg: #fff8e9;
  --stage-soft: #ffedbe;
}

.pipeline-stage.is-completed {
  --stage: #0f766e;
  --stage-bg: #ecfdf9;
  --stage-soft: #c7f8ef;
}

.pipeline-stage.is-no_quote,
.pipeline-stage.is-quote_lost,
.pipeline-stage.is-job_attention {
  --stage: #d71946;
  --stage-bg: #fff3f6;
  --stage-soft: #ffd9e2;
}

.pipeline-stage.is-waiting,
.pipeline-stage.is-check_in,
.pipeline-stage.is-re_quote,
.pipeline-stage.is-extra_service,
.pipeline-stage.is-booked_again,
.pipeline-stage.is-christmas_lead,
.pipeline-stage.is-christmas_quote,
.pipeline-stage.is-christmas_approved,
.pipeline-stage.is-christmas_scheduled,
.pipeline-stage.is-christmas_completed,
.pipeline-stage.is-historic_lead,
.pipeline-stage.is-historic_quote,
.pipeline-stage.is-historic_approved,
.pipeline-stage.is-historic_scheduled,
.pipeline-stage.is-historic_completed {
  --stage: #18bdb5;
  --stage-bg: #ecfffd;
  --stage-soft: #c9fbf6;
}

.pipeline-stage.is-check_in {
  --stage: #2563eb;
  --stage-bg: #eef5ff;
  --stage-soft: #d8e7ff;
}

.pipeline-stage.is-re_quote,
.pipeline-stage.is-christmas_quote {
  --stage: #7c5cff;
  --stage-bg: #f4f1ff;
  --stage-soft: #e3dcff;
}

.pipeline-stage.is-extra_service,
.pipeline-stage.is-christmas_approved {
  --stage: #16a34a;
  --stage-bg: #effdf4;
  --stage-soft: #cef7dc;
}

.pipeline-stage.is-booked_again,
.pipeline-stage.is-christmas_scheduled {
  --stage: #f59e0b;
  --stage-bg: #fff8e9;
  --stage-soft: #ffedbe;
}

.pipeline-stage.is-christmas_completed {
  --stage: #0f766e;
  --stage-bg: #ecfdf9;
  --stage-soft: #c7f8ef;
}

.pipeline-stage.is-historic_lead,
.pipeline-stage.is-historic_quote,
.pipeline-stage.is-historic_approved,
.pipeline-stage.is-historic_scheduled,
.pipeline-stage.is-historic_completed {
  --stage: #52677a;
  --stage-bg: #f4f7f9;
  --stage-soft: #e2e9ef;
}

.pipeline-stage-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 12px;
  color: var(--stage-ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--stage) 20%, white), #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--stage) 24%, white);
}

.pipeline-stage-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--stage);
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--stage) 26%, transparent);
}

.pipeline-stage-head h3 {
  margin: 0;
  color: var(--deep);
  font-size: 1rem;
}

.pipeline-stage-title-button {
  min-width: 0;
  border: 0;
  padding: 0;
  color: var(--deep);
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.12;
  text-align: left;
  cursor: pointer;
}

.pipeline-stage-title-button:hover,
.pipeline-stage-title-button:focus-visible {
  color: var(--stage);
  outline: none;
}

.pipeline-stage-head p {
  margin: 3px 0 0;
}

.pipeline-stage-head > span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--stage) 30%, white);
  color: var(--deep);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.pipeline-stage-total {
  padding: 10px 12px;
  color: var(--navy);
  font-weight: 900;
  border-bottom: 1px solid color-mix(in srgb, var(--stage) 16%, white);
}

.pipeline-card-list {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.pipeline-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  padding: 11px;
  display: grid;
  gap: 7px;
  box-shadow: 0 10px 26px rgba(8, 40, 61, 0.08);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.pipeline-card:hover,
.pipeline-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--stage) 46%, white);
  box-shadow: 0 16px 34px rgba(8, 40, 61, 0.14);
  outline: none;
}

.pipeline-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 8px 0 0 8px;
  background: var(--stage);
}

.pipeline-card .button,
.pipeline-card a,
.pipeline-card button {
  position: relative;
  z-index: 1;
}

.pipeline-card.is-overdue,
.pipeline-card.is-followup-due {
  border-color: rgba(245, 158, 11, 0.55);
}

.pipeline-card.is-heat-hot {
  border-color: rgba(215, 25, 70, 0.42);
  box-shadow: 0 12px 28px rgba(215, 25, 70, 0.13);
}

.pipeline-card.is-heat-ready {
  border-color: rgba(22, 163, 74, 0.34);
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.12);
}

.pipeline-card.is-heat-warm {
  border-color: rgba(245, 158, 11, 0.34);
}

.pipeline-card-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 8px;
  padding-left: 3px;
}

.pipeline-client-link {
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--deep);
  background: transparent;
  font: inherit;
  font-weight: 950;
  line-height: 1.18;
  text-align: left;
  cursor: pointer;
}

.pipeline-client-link:hover {
  color: var(--stage);
  text-decoration: underline;
}

.pipeline-card-value {
  color: var(--deep);
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--stage-soft);
  font-size: 0.86rem;
}

.pipeline-card-top-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 48%;
}

.pipeline-origin-pill {
  color: #52677a;
  border: 1px solid rgba(82, 103, 122, 0.22);
  background: #f4f7f9;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.pipeline-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-left: 3px;
}

.pipeline-card-summary > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--slate);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-card-summary > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 7px;
  color: #52677a;
  background: #f1f5f7;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.pipeline-card-summary > span.is-warn {
  color: #8a5800;
  background: #fff0c7;
}

.pipeline-card-summary > span.is-danger {
  color: #a50f34;
  background: #ffe2ea;
}

.pipeline-nugget-lines {
  display: grid;
  gap: 6px;
  padding-left: 3px;
}

.pipeline-nugget-lines div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.pipeline-nugget-lines span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pipeline-nugget-lines strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pipeline-card-media {
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(82, 103, 122, 0.16);
  border-radius: 999px;
  padding: 5px 8px 5px 5px;
  color: #52677a;
  background: #f6f9fb;
  font-size: 0.76rem;
  font-weight: 950;
}

.pipeline-card-media span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: #52677a;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
}

.pipeline-card-media strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-nugget-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #f3fbff;
  border: 1px solid rgba(18, 168, 216, 0.24);
}

.pipeline-nugget-alert span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pipeline-nugget-alert strong {
  color: var(--deep);
  font-size: 0.86rem;
}

.pipeline-nugget-alert.is-danger {
  background: #fff3f6;
  border-color: rgba(215, 25, 70, 0.28);
}

.pipeline-nugget-alert.is-warn {
  background: #fff8e9;
  border-color: rgba(245, 158, 11, 0.34);
}

.pipeline-nugget-alert.is-good {
  background: #effdf4;
  border-color: rgba(22, 163, 74, 0.24);
}

.pipeline-followup {
  border-radius: 8px;
  padding: 8px;
  background: #f3fbff;
  border: 1px solid rgba(18, 168, 216, 0.28);
  display: grid;
  gap: 2px;
}

.pipeline-followup.is-due,
.pipeline-followup.is-overdue {
  background: #fff8e9;
  border-color: rgba(245, 158, 11, 0.45);
}

.pipeline-followup.is-overdue {
  background: #fff3f6;
  border-color: rgba(215, 25, 70, 0.35);
}

.pipeline-followup strong {
  color: var(--deep);
  font-size: 0.9rem;
}

.pipeline-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 3px;
}

.pipeline-card-actions .button.compact {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 0.86rem;
}

.pipeline-card-open {
  justify-self: start;
  color: var(--stage);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pipeline-stage-summary-overlay {
  place-items: center;
  background: rgba(3, 21, 34, 0.56);
}

.pipeline-stage-summary {
  display: grid;
  gap: 14px;
  width: min(720px, calc(100vw - 28px));
  max-height: min(88dvh, 780px);
  overflow: auto;
}

.pipeline-stage-summary > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pipeline-stage-summary h2 {
  margin: 2px 0 0;
  color: var(--deep);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.05;
}

.pipeline-stage-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pipeline-stage-summary-stats div,
.pipeline-stage-summary-section {
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  background: #fff;
}

.pipeline-stage-summary-stats div {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
}

.pipeline-stage-summary-stats span,
.pipeline-stage-summary-head strong,
.pipeline-stage-source-row span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pipeline-stage-summary-stats strong {
  color: var(--deep);
  font-size: 1.24rem;
  line-height: 1.1;
}

.pipeline-stage-summary-section {
  padding: 12px;
}

.pipeline-stage-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.pipeline-stage-source-list,
.pipeline-stage-item-list {
  display: grid;
  gap: 8px;
}

.pipeline-stage-source-row,
.pipeline-stage-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fcfd;
}

.pipeline-stage-source-row strong,
.pipeline-stage-item strong {
  min-width: 0;
  color: var(--deep);
  overflow-wrap: anywhere;
}

.pipeline-stage-source-row em,
.pipeline-stage-item em {
  color: var(--deep);
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.pipeline-stage-item span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.pipeline-empty {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.78);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 16px;
  font-weight: 800;
  text-align: center;
}

.pipeline-attention {
  margin-top: 20px;
}

.pipeline-client-overlay {
  z-index: 1500;
}

.pipeline-client-modal {
  width: min(680px, 100%);
}

.pipeline-decision-modal {
  width: min(560px, 100%);
}

.pipeline-decision-form {
  display: grid;
  gap: 12px;
}

.pipeline-decision-form textarea {
  min-height: 112px;
  resize: vertical;
}

.pipeline-client-title {
  display: flex;
  gap: 12px;
  align-items: center;
}

.pipeline-client-grid,
.pipeline-client-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

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

.pipeline-client-note {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.pipeline-client-note span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pipeline-client-note p {
  margin: 6px 0 0;
}

.pipeline-client-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.pipeline-opportunity-overlay {
  place-items: center;
  padding: max(18px, var(--safe-top)) max(16px, var(--safe-right)) max(18px, var(--safe-bottom)) max(16px, var(--safe-left));
  background: rgba(3, 21, 34, 0.54);
}

.pipeline-opportunity-drawer {
  --stage: #18bdb5;
  --stage-bg: #ecfffd;
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 32px));
  max-height: min(88dvh, 820px);
  border: 1px solid color-mix(in srgb, var(--stage) 30%, white);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(3, 21, 34, 0.3);
  overflow: hidden;
}

.pipeline-opportunity-drawer.is-lead {
  --stage: #12a8d8;
  --stage-bg: #eaf9ff;
}

.pipeline-opportunity-drawer.is-quote {
  --stage: #7c5cff;
  --stage-bg: #f4f1ff;
}

.pipeline-opportunity-drawer.is-approved {
  --stage: #16a34a;
  --stage-bg: #effdf4;
}

.pipeline-opportunity-drawer.is-scheduled {
  --stage: #f59e0b;
  --stage-bg: #fff8e9;
}

.pipeline-opportunity-drawer.is-completed {
  --stage: #0f766e;
  --stage-bg: #ecfdf9;
}

.pipeline-opportunity-drawer.is-no_quote,
.pipeline-opportunity-drawer.is-quote_lost,
.pipeline-opportunity-drawer.is-job_attention {
  --stage: #d71946;
  --stage-bg: #fff3f6;
}

.pipeline-opportunity-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: max(18px, var(--safe-top)) 18px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--stage) 24%, white);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--stage) 22%, white), #fff 58%),
    var(--stage-bg);
}

.pipeline-opportunity-stage-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  color: #fff;
  background: var(--stage);
  font-size: 0.82rem;
  font-weight: 1000;
  box-shadow: 0 14px 26px color-mix(in srgb, var(--stage) 32%, transparent);
}

.pipeline-opportunity-hero h2 {
  margin: 2px 0 8px;
  color: var(--deep);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.05;
}

.pipeline-opportunity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pipeline-opportunity-badges span,
.pipeline-opportunity-badges strong {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--deep);
  background: #fff;
  font-size: 0.76rem;
  font-weight: 950;
}

.pipeline-opportunity-badges .is-stage {
  border-color: color-mix(in srgb, var(--stage) 36%, white);
  background: color-mix(in srgb, var(--stage) 12%, white);
}

.pipeline-opportunity-badges .is-overdue {
  color: #a50f34;
  border-color: rgba(215, 25, 70, 0.24);
  background: #fff0f4;
}

.pipeline-opportunity-badges .is-due {
  color: #8a5800;
  border-color: rgba(245, 158, 11, 0.28);
  background: #fff8e9;
}

.pipeline-opportunity-scroll {
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 14px 18px max(18px, var(--safe-bottom));
  overflow-y: auto;
}

.pipeline-opportunity-next {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--stage) 30%, white);
  border-left: 6px solid var(--stage);
  border-radius: 8px;
  padding: 12px;
  background: var(--stage-bg);
}

.pipeline-opportunity-next.is-danger {
  border-color: rgba(215, 25, 70, 0.34);
  border-left-color: #d71946;
  background: #fff3f6;
}

.pipeline-opportunity-next.is-warn {
  border-color: rgba(245, 158, 11, 0.38);
  border-left-color: #f59e0b;
  background: #fff8e9;
}

.pipeline-opportunity-next span,
.pipeline-opportunity-section-head span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pipeline-opportunity-next strong {
  color: var(--deep);
  font-size: 1.22rem;
  line-height: 1.1;
}

.pipeline-opportunity-next p {
  margin: 0;
  color: var(--slate);
  font-weight: 800;
  line-height: 1.35;
}

.pipeline-opportunity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pipeline-opportunity-actions .button {
  min-height: 38px;
}

.pipeline-opportunity-path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.pipeline-opportunity-step {
  display: grid;
  gap: 5px;
  min-height: 68px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px;
  background: #f8fbfc;
}

.pipeline-opportunity-step span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--muted);
  background: #eaf0f4;
  font-size: 0.72rem;
  font-weight: 1000;
}

.pipeline-opportunity-step strong {
  color: var(--deep);
  font-size: 0.8rem;
  line-height: 1.05;
}

.pipeline-opportunity-step.is-done {
  border-color: rgba(22, 163, 74, 0.22);
  background: #f0fdf4;
}

.pipeline-opportunity-step.is-done span {
  color: #fff;
  background: #16a34a;
}

.pipeline-opportunity-step.is-current {
  border-color: color-mix(in srgb, var(--stage) 42%, white);
  background: var(--stage-bg);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--stage) 18%, transparent);
}

.pipeline-opportunity-step.is-current span {
  color: #fff;
  background: var(--stage);
}

.pipeline-opportunity-path-alert {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(215, 25, 70, 0.25);
  border-radius: 8px;
  padding: 12px;
  background: #fff3f6;
}

.pipeline-opportunity-path-alert strong {
  color: var(--deep);
}

.pipeline-opportunity-path-alert span {
  color: var(--slate);
  font-weight: 800;
}

.pipeline-opportunity-handoff {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 11px;
  background: #fff;
}

.pipeline-handoff-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 11px;
  background: #f8fbfc;
}

.pipeline-handoff-next span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pipeline-handoff-next strong {
  display: block;
  margin-top: 2px;
  color: var(--deep);
  font-size: 1rem;
  line-height: 1.1;
}

.pipeline-handoff-next p {
  margin: 4px 0 0;
  color: var(--slate);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.3;
}

.pipeline-handoff-next .button {
  justify-self: end;
  white-space: nowrap;
}

.pipeline-handoff-next.is-warn {
  border-color: rgba(245, 158, 11, 0.28);
  background: #fff8e9;
}

.pipeline-handoff-next.is-collect {
  border-color: rgba(20, 58, 86, 0.18);
  background: #edf7f7;
}

.pipeline-handoff-next.is-ready {
  border-color: rgba(22, 163, 74, 0.24);
  background: #f0fdf4;
}

.pipeline-handoff-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.pipeline-handoff-step,
.pipeline-handoff-step a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 58px;
  color: inherit;
  text-decoration: none;
}

.pipeline-handoff-step {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: #f8fbfc;
}

.pipeline-handoff-step > span,
.pipeline-handoff-step a > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--muted);
  background: #eaf0f4;
  font-size: 0.68rem;
  font-weight: 1000;
}

.pipeline-handoff-step strong,
.pipeline-handoff-step em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-handoff-step strong {
  color: var(--deep);
  font-size: 0.82rem;
  line-height: 1.1;
}

.pipeline-handoff-step em {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 850;
}

.pipeline-handoff-step.is-done {
  border-color: rgba(22, 163, 74, 0.24);
  background: #f0fdf4;
}

.pipeline-handoff-step.is-done > span,
.pipeline-handoff-step.is-done a > span {
  color: #fff;
  background: #16a34a;
}

.pipeline-handoff-step.is-warn {
  border-color: rgba(245, 158, 11, 0.35);
  background: #fff8e9;
}

.pipeline-handoff-step.is-warn > span,
.pipeline-handoff-step.is-warn a > span {
  color: #fff;
  background: #f59e0b;
}

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

.pipeline-opportunity-grid .pipeline-opportunity-detail:first-child {
  grid-column: span 2;
}

.pipeline-opportunity-detail strong {
  overflow-wrap: anywhere;
}

.pipeline-opportunity-checklist,
.pipeline-opportunity-notes,
.pipeline-opportunity-media {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.pipeline-opportunity-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pipeline-opportunity-media-head span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pipeline-opportunity-media-head strong {
  color: var(--deep);
}

.pipeline-opportunity-media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pipeline-opportunity-media-file {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 7px;
  color: var(--deep);
  background: #f8fbfc;
  text-decoration: none;
}

.pipeline-opportunity-media-file img,
.pipeline-opportunity-media-file > span {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  object-fit: cover;
  background: #eaf0f4;
}

.pipeline-opportunity-media-file > span {
  display: grid;
  place-items: center;
  padding: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-align: center;
}

.pipeline-opportunity-media-file strong,
.pipeline-opportunity-media-file em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-opportunity-media-file strong {
  font-size: 0.78rem;
}

.pipeline-opportunity-media-file em {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
}

.pipeline-opportunity-section-head {
  display: grid;
  gap: 3px;
}

.pipeline-opportunity-section-head strong {
  color: var(--deep);
  font-size: 1rem;
}

.pipeline-opportunity-task-list {
  display: grid;
  gap: 8px;
}

.pipeline-opportunity-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(20, 58, 86, 0.08);
  border-radius: 8px;
  padding: 9px;
  background: #f8fbfc;
}

.pipeline-opportunity-task span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #fff;
  background: var(--stage);
  font-weight: 1000;
}

.pipeline-opportunity-task strong {
  color: var(--deep);
  font-size: 0.92rem;
}

.pipeline-opportunity-notes span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pipeline-opportunity-notes p {
  margin: 0;
  color: var(--slate);
  line-height: 1.45;
  white-space: pre-wrap;
}

.pipeline-opportunity-history {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.pipeline-opportunity-history summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--deep);
  cursor: pointer;
  list-style: none;
}

.pipeline-opportunity-history summary::-webkit-details-marker {
  display: none;
}

.pipeline-opportunity-history summary span {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 950;
}

.pipeline-opportunity-history summary span svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.pipeline-opportunity-history summary strong {
  min-width: 25px;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--slate);
  background: #edf3f6;
  font-size: 0.72rem;
  text-align: center;
}

.pipeline-opportunity-history summary > svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
  transition: transform 160ms ease;
}

.pipeline-opportunity-history[open] summary > svg {
  transform: rotate(180deg);
}

.pipeline-opportunity-history-list {
  display: grid;
  padding: 0 12px 12px;
  border-top: 1px solid var(--line);
}

.pipeline-opportunity-history-event {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
}

.pipeline-opportunity-history-event + .pipeline-opportunity-history-event {
  border-top: 1px solid rgba(20, 58, 86, 0.08);
}

.pipeline-opportunity-history-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--stage);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage) 12%, white);
}

.pipeline-opportunity-history-event strong,
.pipeline-opportunity-history-event p,
.pipeline-opportunity-history-event small {
  display: block;
}

.pipeline-opportunity-history-event strong {
  color: var(--deep);
  font-size: 0.88rem;
}

.pipeline-opportunity-history-event p {
  margin: 3px 0 0;
  color: var(--slate);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pipeline-opportunity-history-event small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

/* Schedule dispatch refresh: closer to Jobber, with the map/calendar doing the work instead of noisy controls. */
.schedule-control-panel {
  gap: 12px;
  border-color: rgba(20, 58, 86, 0.12);
  background: linear-gradient(180deg, #fff, #f8fcfd);
}

.schedule-control-top {
  grid-template-columns: minmax(260px, 0.8fr) minmax(180px, 0.36fr);
}

.schedule-filter-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.schedule-current small {
  color: var(--teal-dark);
}

.schedule-pulse {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  box-shadow: none;
}

.schedule-pulse-main {
  flex: 1 1 280px;
  min-width: 0;
  display: grid;
  gap: 5px;
}

.schedule-pulse-copy {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  min-width: 0;
}

.schedule-pulse-copy span,
.schedule-pulse-metric span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.schedule-pulse-copy strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-pulse-brief {
  min-width: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: #526371;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.3;
}

.schedule-pulse-brief b {
  flex: 0 0 auto;
  color: #123b56;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schedule-pulse-brief span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-pulse-brief.is-warning b {
  color: #74470a;
}

.schedule-pulse-brief.is-ready b {
  color: #075e59;
}

.schedule-pulse-metrics {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.schedule-pulse-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 32px;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--soft);
  white-space: nowrap;
}

.schedule-pulse-metric strong {
  color: var(--navy);
  font-size: 0.95rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-pulse-metric.is-open {
  border-color: rgba(37, 99, 235, 0.18);
  background: #eef5ff;
}

.schedule-pulse-metric.is-complete,
.schedule-pulse-metric.is-checklist {
  border-color: rgba(17, 199, 189, 0.22);
  background: #effdfb;
}

.schedule-pulse-metric.is-unscheduled {
  border-color: rgba(245, 158, 11, 0.28);
  background: #fff8e9;
}

.schedule-pulse-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 999px;
  padding: 5px 10px;
  color: #123d68;
  background: #eef5ff;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.schedule-pulse-action svg {
  width: 14px;
  height: 14px;
}

.schedule-pulse-action.is-warning {
  border-color: rgba(245, 158, 11, 0.36);
  color: #74470a;
  background: #fff8e9;
}

.schedule-pulse-action.is-ready {
  border-color: rgba(17, 199, 189, 0.28);
  color: #075e59;
  background: #effdfb;
}

.schedule-ops-drawer {
  display: grid;
  gap: 0;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(5, 24, 44, 0.04);
}

.schedule-ops-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
}

.schedule-ops-summary::-webkit-details-marker {
  display: none;
}

.schedule-ops-summary span,
.schedule-ops-summary strong,
.schedule-ops-summary em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-ops-summary span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-ops-summary svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.schedule-ops-summary strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.15;
}

.schedule-ops-summary em {
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  background: var(--soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.schedule-ops-drawer[open] .schedule-ops-summary {
  border-bottom: 1px solid rgba(20, 58, 86, 0.08);
}

.schedule-ops-drawer[open] .schedule-ops-summary em {
  color: var(--navy);
  background: rgba(17, 199, 189, 0.12);
}

.schedule-ops-panels {
  display: grid;
  gap: 10px;
  padding: 10px 12px 12px;
}

.dispatch-readiness {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.dispatch-readiness.needs-work {
  border-left-color: #f59e0b;
  background: #fffaf0;
}

.dispatch-readiness.ready {
  border-left-color: var(--green);
  background: #f7fff9;
}

.dispatch-readiness.is-loading {
  border-left-color: var(--muted);
}

.dispatch-readiness-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.dispatch-readiness-head > div:first-child {
  min-width: 0;
}

.dispatch-readiness-head h3 {
  margin: 2px 0 3px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.dispatch-readiness-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.dispatch-readiness-mode {
  display: grid;
  gap: 4px;
  justify-items: end;
  flex: 0 0 auto;
}

.dispatch-readiness-mode small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.dispatch-readiness-grid,
.dispatch-day-grid {
  display: grid;
  gap: 8px;
}

.dispatch-readiness-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dispatch-readiness-metric,
.dispatch-day-card {
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.dispatch-readiness-metric {
  display: grid;
  gap: 4px;
}

.dispatch-readiness-metric span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dispatch-readiness-metric strong {
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
}

.dispatch-readiness-metric.blockers {
  border-color: rgba(245, 158, 11, 0.28);
  background: #fff8e9;
}

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

.dispatch-day-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
}

.dispatch-day-card.ready {
  border-color: rgba(12, 147, 71, 0.2);
}

.dispatch-day-card.needs-work {
  border-color: rgba(245, 158, 11, 0.28);
}

.dispatch-day-card div {
  min-width: 0;
}

.dispatch-day-card strong,
.dispatch-day-card b {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.15;
}

.dispatch-day-card span,
.dispatch-day-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.dispatch-day-card em {
  grid-column: 1 / -1;
}

.dispatch-issue-list {
  display: grid;
  gap: 7px;
}

.dispatch-issue {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.84);
}

.dispatch-issue.needs-work {
  border-color: rgba(245, 158, 11, 0.32);
  background: #fff8eb;
}

.dispatch-issue > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.14);
  font-weight: 1000;
}

.dispatch-issue.needs-work > span {
  background: rgba(245, 158, 11, 0.18);
}

.dispatch-issue div {
  min-width: 0;
}

.dispatch-issue strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.dispatch-issue small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.3;
}

.dispatch-issue svg,
.dispatch-ready-note svg {
  width: 18px;
  height: 18px;
  color: var(--teal-dark);
}

.dispatch-ready-note {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(12, 147, 71, 0.2);
  border-radius: 8px;
  padding: 9px 10px;
  color: #075e37;
  background: #f2fff6;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.dispatch-issue-queue {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-left: 5px solid #7c3aed;
  border-radius: 8px;
  padding: 12px;
  background: #fbf9ff;
}

.dispatch-issue-queue.ready {
  border-left-color: var(--green);
  background: #f7fff9;
}

.dispatch-issue-queue.needs-work {
  border-left-color: #f59e0b;
  background: #fff9ed;
}

.dispatch-issue-queue.is-loading {
  border-left-color: var(--muted);
}

.dispatch-issue-queue-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.dispatch-issue-queue-head > div:first-child {
  min-width: 0;
}

.dispatch-issue-queue-head h3 {
  margin: 2px 0 3px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.dispatch-issue-queue-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.dispatch-issue-queue-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.dispatch-issue-queue-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dispatch-issue-queue-stats article {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.86);
}

.dispatch-issue-queue-stats article.needs-work {
  border-color: rgba(245, 158, 11, 0.3);
  background: #fff8e9;
}

.dispatch-issue-queue-stats article.ready {
  border-color: rgba(12, 147, 71, 0.22);
  background: #f1fff5;
}

.dispatch-issue-queue-stats article.watch {
  border-color: rgba(37, 99, 235, 0.22);
  background: #f1f6ff;
}

.dispatch-issue-queue-stats span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dispatch-issue-queue-stats strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-issue-queue-stats em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-issue-groups {
  display: grid;
  gap: 9px;
}

.dispatch-issue-group {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.72);
}

.dispatch-issue-group.needs-work {
  border-color: rgba(245, 158, 11, 0.3);
}

.dispatch-issue-group-head {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.dispatch-issue-group-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dispatch-issue-group-head strong {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.15;
}

.dispatch-issue-group-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.dispatch-issue-group-head em {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(20, 58, 86, 0.08);
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
}

.dispatch-issue-queue-list {
  display: grid;
  gap: 7px;
}

.dispatch-issue-queue-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
}

.dispatch-issue-queue-item.blocker {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fff8ea;
}

.dispatch-issue-queue-item > span {
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(37, 99, 235, 0.12);
  font-size: 11px;
  font-weight: 1000;
}

.dispatch-issue-queue-item.blocker > span {
  background: rgba(245, 158, 11, 0.2);
}

.dispatch-issue-queue-item div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dispatch-issue-queue-item strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.dispatch-issue-queue-item small,
.dispatch-issue-queue-item em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-issue-queue-item b {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.dispatch-issue-more {
  margin: 0;
}

.dispatch-issue-queue-guardrails {
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(20, 58, 86, 0.09);
  padding-top: 8px;
}

.dispatch-issue-queue-guardrails span {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.3;
}

.dispatch-issue-queue-guardrails svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--teal-dark);
}

.dispatch-day-review {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-left: 5px solid var(--open);
  border-radius: 8px;
  padding: 12px;
  background: #f7fbff;
}

.dispatch-day-review.ready {
  border-left-color: var(--green);
  background: #f7fff9;
}

.dispatch-day-review.needs-work {
  border-left-color: #f59e0b;
  background: #fff9ed;
}

.dispatch-day-review.is-loading {
  border-left-color: var(--muted);
}

.dispatch-day-review-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.dispatch-day-review-head > div:first-child {
  min-width: 0;
}

.dispatch-day-review-head h3 {
  margin: 2px 0 3px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.dispatch-day-review-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.dispatch-day-review-status {
  display: grid;
  gap: 4px;
  justify-items: end;
  flex: 0 0 auto;
}

.dispatch-day-review-status small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.dispatch-day-review-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dispatch-day-review-metrics article {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.82);
}

.dispatch-day-review-metrics span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dispatch-day-review-metrics strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-day-review-form {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
  gap: 9px;
  align-items: end;
}

.dispatch-day-review-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dispatch-day-review-form label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dispatch-day-review-form select,
.dispatch-day-review-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.14);
  border-radius: 7px;
  padding: 9px 10px;
  color: var(--navy);
  background: #fff;
  font: inherit;
  font-weight: 850;
}

.dispatch-day-review-form textarea {
  min-height: 42px;
  resize: vertical;
  line-height: 1.35;
}

.dispatch-day-review-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.dispatch-day-review-actions .muted {
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
}

.dispatch-day-review-guardrails {
  display: grid;
  gap: 6px;
}

.dispatch-day-review-guardrails span {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.3;
}

.dispatch-day-review-guardrails svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--teal-dark);
}

.dispatch-handoff {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-left: 5px solid #2563eb;
  border-radius: 8px;
  padding: 12px;
  background: #f5f9ff;
}

.dispatch-handoff.ready {
  border-left-color: var(--green);
  background: #f7fff9;
}

.dispatch-handoff.needs-work {
  border-left-color: #f59e0b;
  background: #fff9ed;
}

.dispatch-handoff.is-loading {
  border-left-color: var(--muted);
}

.dispatch-handoff-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.dispatch-handoff-head > div:first-child {
  min-width: 0;
}

.dispatch-handoff-head h3 {
  margin: 2px 0 3px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

.dispatch-handoff-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.dispatch-handoff-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.dispatch-handoff-actions .button {
  min-height: 34px;
}

.dispatch-handoff-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dispatch-handoff-stats article {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.84);
}

.dispatch-handoff-stats article.needs-work {
  border-color: rgba(245, 158, 11, 0.3);
  background: #fff8e9;
}

.dispatch-handoff-stats article.ready {
  border-color: rgba(12, 147, 71, 0.22);
  background: #f1fff5;
}

.dispatch-handoff-stats article.watch {
  border-color: rgba(37, 99, 235, 0.22);
  background: #f1f6ff;
}

.dispatch-handoff-stats span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dispatch-handoff-stats strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-handoff-stats em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-handoff-crew {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dispatch-handoff-crew span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 30px;
  border: 1px solid rgba(17, 199, 189, 0.24);
  border-radius: 999px;
  padding: 5px 9px;
  color: #075e59;
  background: rgba(17, 199, 189, 0.1);
  font-size: 12px;
  font-weight: 900;
}

.dispatch-handoff-crew em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.dispatch-handoff-stops {
  display: grid;
  gap: 7px;
}

.dispatch-handoff-stop {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(120px, 0.38fr);
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 9px 10px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.86);
}

.dispatch-handoff-stop.needs-work {
  border-color: rgba(245, 158, 11, 0.3);
  background: #fff8ea;
}

.dispatch-handoff-stop > span {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 8px;
  color: var(--navy);
  background: rgba(37, 99, 235, 0.12);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.dispatch-handoff-stop div {
  min-width: 0;
}

.dispatch-handoff-stop strong {
  display: block;
  overflow: hidden;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-handoff-stop small,
.dispatch-handoff-stop em {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-handoff-stop em {
  text-align: right;
}

.dispatch-handoff-more {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

.schedule-crew-filter {
  gap: 7px;
}

.schedule-crew-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.schedule-crew-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid rgba(20, 58, 86, 0.14);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--navy);
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.schedule-crew-chip.active,
.schedule-crew-chip:hover {
  border-color: rgba(24, 189, 181, 0.55);
  background: #dffbf8;
}

.schedule-crew-chip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-crew-chip em {
  min-width: 22px;
  border-radius: 999px;
  padding: 3px 6px;
  color: #06343d;
  background: rgba(24, 189, 181, 0.25);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.schedule-assigned-crew {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.schedule-assigned-crew.is-compact {
  gap: 4px;
  margin-top: 3px;
}

.schedule-crew-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 5px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  border-radius: 999px;
  padding: 3px 8px 3px 3px;
  color: var(--navy);
  background: #f7fbfd;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
}

.schedule-assigned-crew.is-compact .schedule-crew-pill {
  padding: 2px 5px 2px 2px;
}

.schedule-crew-pill b,
.schedule-crew-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #06343d;
  background: var(--teal);
  font-size: 10px;
  font-weight: 1000;
}

.schedule-assigned-crew.is-compact .schedule-crew-pill b {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.schedule-crew-pill span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-crew-pill.is-unassigned {
  border-color: rgba(245, 158, 11, 0.28);
  background: #fff8e9;
}

.schedule-crew-pill.is-unassigned b {
  color: var(--warning-ink);
  background: var(--warning);
}

.schedule-crew-more,
.schedule-crew-count,
.schedule-crew-inline {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.schedule-crew-inline {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-crew-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid rgba(17, 199, 189, 0.42);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--navy);
  background: #dffbf8;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
}

.schedule-assigned-crew.is-compact .schedule-crew-edit {
  min-height: 26px;
  padding: 3px 6px;
  font-size: 10px;
}

.schedule-crew-edit svg {
  width: 14px;
  height: 14px;
}

.schedule-crew-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: end center;
  padding: 18px;
  background: rgba(6, 24, 44, 0.48);
}

.schedule-crew-card {
  display: grid;
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  border: 1px solid rgba(20, 58, 86, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(5, 24, 44, 0.28);
  overflow: hidden;
}

.schedule-crew-card-head {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  padding: 16px;
  color: #fff;
  background: var(--navy);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.schedule-crew-sheet.is-dragging .schedule-crew-card-head {
  cursor: grabbing;
}

.schedule-crew-card-head span,
.schedule-crew-card-head em {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schedule-crew-card-head strong {
  display: block;
  margin: 3px 0;
  font-size: 20px;
  line-height: 1.15;
}

.schedule-crew-card-head .icon-button {
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.schedule-crew-card-body {
  min-height: 160px;
  overflow: auto;
}

.schedule-crew-form {
  display: grid;
}

.schedule-crew-options {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.schedule-crew-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--navy);
  background: #f8fbfd;
  cursor: pointer;
}

.schedule-crew-option:has(input:checked) {
  border-color: rgba(17, 199, 189, 0.54);
  background: #e7fbf8;
}

.schedule-crew-option input {
  width: 20px;
  height: 20px;
}

.schedule-crew-option strong,
.schedule-crew-option em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-crew-option strong {
  font-size: 14px;
  font-weight: 950;
}

.schedule-crew-option em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.schedule-crew-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  background: #fff;
}

.schedule-dispatch-layout {
  grid-template-columns: minmax(420px, 1.24fr) minmax(340px, 0.76fr);
}

.schedule-dispatch-calendar {
  order: 1;
}

.schedule-dispatch-map {
  order: 2;
  position: sticky;
  top: 12px;
}

.schedule-dispatch-map .schedule-dispatch-head {
  border-color: rgba(20, 58, 86, 0.12);
  background: #fff;
}

.schedule-dispatch-map .schedule-map-canvas {
  min-height: min(74vh, 760px);
}

.schedule-dispatch-calendar {
  min-width: 0;
}

.schedule-dispatch-calendar .schedule-week-board,
.schedule-dispatch-calendar .schedule-resource-board,
.schedule-dispatch-calendar .schedule-month-calendar {
  max-height: min(74vh, 760px);
  overflow: auto;
}

.schedule-card {
  gap: 10px;
}

.schedule-contact-actions,
.schedule-secondary-actions {
  align-items: stretch;
}

.schedule-secondary-actions .button {
  min-height: 38px;
}

@media (max-width: 900px) {
  .admin-report-next {
    grid-template-columns: 1fr;
  }

  .admin-report-next-action {
    justify-content: flex-start;
    min-width: 0;
  }

  .marketing-roi-head,
  .marketing-roi-body,
  .admin-monthly-close-head,
  .admin-monthly-close-body,
  .admin-expenses-head,
  .admin-expenses-body {
    grid-template-columns: 1fr;
  }

  .marketing-roi-status,
  .admin-monthly-close-status,
  .admin-expenses-status {
    justify-content: flex-start;
    text-align: left;
  }

  .admin-filings-head,
  .admin-filings-grid {
    grid-template-columns: 1fr;
  }

  .admin-filings-status {
    justify-items: start;
    text-align: left;
  }

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

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

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

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

  .admin-monthly-close-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

  .marketing-roi-form .wide {
    grid-column: 1 / -1;
  }

  .pipeline-hud {
    grid-template-columns: 1fr;
  }

  .pipeline-hud-metrics,
  .pipeline-sales-command,
  .pipeline-sales-signals,
  .pipeline-priority-list,
  .pipeline-source-list,
  .pipeline-path,
  .pipeline-focus-tabs,
  .pipeline-mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pipeline-ledger-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .lead-intake-status {
    grid-template-columns: 1fr;
  }

  .lead-intake-stats {
    justify-content: flex-start;
  }

  .pipeline-source-intake-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pipeline-source-list-head,
  .pipeline-source-item {
    grid-template-columns: 96px minmax(0, 1fr) auto;
  }

  .pipeline-source-list-head span {
    grid-column: 3;
  }

  .pipeline-source-item .button {
    grid-column: 2 / -1;
    justify-self: start;
  }

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

  .pipeline-board-wrap {
    margin-inline: -2px;
    overflow-x: auto;
    padding-inline: 2px;
  }

  .pipeline-board {
    grid-template-columns: repeat(5, minmax(230px, 1fr));
  }

  .pipeline-board-attention {
    grid-template-columns: repeat(3, minmax(230px, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-report-next {
    padding: 10px;
  }

  .admin-report-next-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .admin-report-next-action .button {
    width: 100%;
  }

  .marketing-roi-panel {
    padding: 10px;
  }

  .admin-filings-panel {
    padding: 10px;
  }

  .admin-expenses-panel {
    padding: 10px;
  }

  .admin-monthly-close-panel {
    padding: 10px;
  }

  .admin-filings-stats {
    grid-template-columns: 1fr;
  }

  .admin-command-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .admin-command-head strong {
    text-align: left;
    white-space: normal;
  }

  .admin-command-grid {
    grid-template-columns: 1fr;
  }

  .admin-monthly-close-stats,
  .admin-monthly-close-form {
    grid-template-columns: 1fr;
  }

  .admin-expenses-stats,
  .admin-expenses-form {
    grid-template-columns: 1fr;
  }

  .admin-filing-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-filing-actions .button {
    flex: 1 1 44%;
  }

  .marketing-roi-stats,
  .marketing-roi-form {
    grid-template-columns: 1fr;
  }

  .marketing-roi-form .button {
    width: 100%;
  }

  .admin-expenses-form-actions .button,
  .admin-expenses-actions .button {
    flex: 1 1 42%;
  }

  .pipeline-hud {
    padding: 10px;
  }

  .pipeline-hud-metrics,
  .pipeline-sales-command,
  .pipeline-sales-signals,
  .pipeline-priority-list,
  .pipeline-source-list,
  .pipeline-path,
  .pipeline-focus-tabs,
  .pipeline-mode-tabs {
    grid-template-columns: 1fr;
  }

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

  .pipeline-ledger-switch {
    grid-template-columns: 1fr;
    border-radius: 8px;
  }

  .pipeline-ledger-switch a {
    border-radius: 8px;
  }

  .lead-intake-status {
    padding: 9px;
  }

  .lead-intake-endpoint {
    grid-template-columns: 1fr;
  }

  .lead-intake-endpoint .button {
    width: 100%;
  }

  .pipeline-source-intake-head {
    grid-template-columns: 1fr;
  }

  .pipeline-source-list-head,
  .pipeline-source-item {
    grid-template-columns: 1fr;
  }

  .pipeline-source-list-head strong,
  .pipeline-source-list-head span,
  .pipeline-source-item .button {
    grid-column: auto;
    justify-self: stretch;
  }

  .pipeline-source-list-head span {
    justify-self: start;
  }

  .pipeline-source-item-stage {
    justify-self: start;
  }

  .pipeline-priority-head,
  .pipeline-source-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .pipeline-stats {
    grid-template-columns: 1fr;
  }

  .pipeline-toolbar {
    grid-template-columns: 1fr;
  }

  .pipeline-board {
    grid-template-columns: repeat(5, calc(100vw - 28px));
    min-width: max-content;
  }

  .pipeline-board-attention {
    grid-template-columns: repeat(3, calc(100vw - 28px));
    min-width: max-content;
  }

  .pipeline-board-archive {
    grid-template-columns: repeat(3, calc(100vw - 28px));
    min-width: max-content;
  }

  .pipeline-board-wrap {
    scroll-snap-type: x mandatory;
  }

  .pipeline-focus-tabs a {
    min-height: 40px;
  }

  .pipeline-insights summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .pipeline-insights summary strong {
    white-space: normal;
  }

  .pipeline-card-actions .button.compact,
  .pipeline-card-actions .button {
    flex: 1 1 46%;
  }

  .pipeline-stage-summary-overlay {
    place-items: stretch;
    padding: 0;
  }

  .pipeline-stage-summary {
    width: 100%;
    max-height: none;
    border-radius: 0;
  }

  .pipeline-stage-summary-stats,
  .pipeline-stage-source-row,
  .pipeline-stage-item {
    grid-template-columns: 1fr;
  }

  .pipeline-stage-source-row em,
  .pipeline-stage-item em {
    white-space: normal;
  }

  .pipeline-opportunity-overlay {
    place-items: stretch;
  }

  .pipeline-opportunity-drawer {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-left: 0;
    border-radius: 0;
  }

  .pipeline-opportunity-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding-inline: 12px;
  }

  .pipeline-opportunity-stage-mark {
    width: 42px;
    height: 42px;
  }

  .pipeline-opportunity-scroll {
    padding-inline: 12px;
  }

  .pipeline-opportunity-actions .button,
  .pipeline-opportunity-actions .button.compact {
    flex: 1 1 46%;
    min-width: 0;
  }

  .pipeline-opportunity-path {
    grid-template-columns: repeat(5, minmax(74px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .pipeline-handoff-next {
    grid-template-columns: 1fr;
  }

  .pipeline-handoff-next .button {
    justify-self: stretch;
  }

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

  .pipeline-opportunity-grid {
    grid-template-columns: 1fr;
  }

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

  .pipeline-client-grid,
  .pipeline-client-stats {
    grid-template-columns: 1fr;
  }

  .pipeline-client-actions .button {
    flex: 1 1 100%;
  }

}

/* Property satellite measuring */
.pricing-area-actions,
.pricing-area-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pricing-gutter-heading,
.pricing-window-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pricing-gutter-heading > div,
.pricing-window-heading > div {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pricing-gutter-heading .button,
.pricing-window-heading .button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 10px;
}

.pricing-gutter-heading .button svg,
.pricing-window-heading .button svg {
  width: 16px;
  height: 16px;
}

.pricing-area-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pricing-measurement-badge {
  border-radius: 999px;
  padding: 4px 8px;
  color: #07574f;
  background: #eef5f5;
  box-shadow: inset 4px 0 0 var(--measurement-color, #0f766e);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.pricing-area-price {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border-radius: 6px;
  padding: 4px 8px;
  color: #fff;
  background: var(--navy);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.pricing-area-price[hidden] {
  display: none;
}

.pricing-area-price.is-review {
  color: #7c4a03;
  background: #fff2cf;
}

.pricing-area-optional {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #c9d8df;
  border-radius: 6px;
  color: var(--navy);
  background: #fff;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.pricing-area-optional input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--teal-dark);
}

.pricing-area-actions .icon-button,
.property-measurement-shell .icon-button {
  flex: 0 0 auto;
  border: 1px solid #c9d8df;
  color: var(--navy);
  background: #fff;
}

.property-measurement-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  height: min(820px, calc(100dvh - 32px));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #c7d7df;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 80px rgba(3, 23, 39, 0.3);
}

.property-measurement-dialog::backdrop {
  background: rgba(3, 23, 39, 0.62);
}

.property-measurement-shell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
  background: #f7fafb;
}

.property-measurement-shell.is-picker {
  grid-template-rows: auto minmax(0, 1fr);
}

.property-measurement-shell.is-map {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.property-measurement-header {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #d8e3e8;
  background: #fff;
}

.property-measurement-title,
.property-measurement-address {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.property-measurement-title > span {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #07574f;
  background: #d7f7f2;
}

.property-measurement-title div,
.property-measurement-address {
  display: grid;
  gap: 2px;
}

.property-measurement-title small,
.property-measurement-address small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.property-measurement-title h2,
.property-measurement-header > h2,
.property-measurement-address strong {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-measurement-picker {
  width: min(100%, 720px);
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  margin: 0 auto;
  padding: 24px;
  overflow: auto;
}

.property-measurement-search {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid #bfcfd7;
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
}

.property-measurement-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--navy);
  background: transparent;
  font: inherit;
  font-weight: 750;
}

.property-measurement-client-list,
.property-measurement-property-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.property-measurement-client,
.property-measurement-property {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #d2dfe5;
  border-radius: 8px;
  padding: 12px;
  color: var(--navy);
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.property-measurement-client:hover,
.property-measurement-client.is-current,
.property-measurement-property:hover {
  border-color: var(--teal);
  background: #effcf9;
}

.property-measurement-client > span:not(.client-avatar),
.property-measurement-property > strong {
  min-width: 0;
}

.property-measurement-client strong,
.property-measurement-client em {
  display: block;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-measurement-client em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.property-measurement-property > span {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #07574f;
  background: #d7f7f2;
}

.property-measurement-loading,
.property-measurement-error {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 32px;
  color: var(--muted);
  text-align: center;
}

.property-measurement-error svg {
  width: 32px;
  height: 32px;
  color: var(--danger);
}

.property-measurement-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #d8e3e8;
  background: #fff;
}

.property-measurement-mode {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid #c6d5dc;
  border-radius: 7px;
  background: #f3f7f8;
}

.property-measurement-mode button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.property-measurement-mode button + button {
  border-left: 1px solid #c6d5dc;
}

.property-measurement-mode button.is-active {
  color: #fff;
  background: var(--navy);
}

.property-measurement-mode svg {
  width: 16px;
  height: 16px;
}

.property-measurement-toolbar > label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.property-measurement-toolbar > label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.property-measurement-toolbar input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #c6d5dc;
  border-radius: 7px;
  padding: 0 10px;
  color: var(--navy);
  background: #fff;
  font: inherit;
  font-weight: 800;
}

.window-survey-toolbar {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid #d8e3e8;
  background: #fff;
}

.window-survey-elevations {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 6px;
}

.window-survey-elevation {
  --window-side-color: #64748b;
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  border: 1px solid #ccd9df;
  border-left: 4px solid var(--window-side-color);
  border-radius: 7px;
  padding: 0 9px;
  color: var(--navy);
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.window-survey-elevation:nth-child(1) {
  --window-side-color: #2563eb;
}

.window-survey-elevation:nth-child(2) {
  --window-side-color: #d97706;
}

.window-survey-elevation:nth-child(3) {
  --window-side-color: #9333ea;
}

.window-survey-elevation:nth-child(4) {
  --window-side-color: #0f766e;
}

.window-survey-elevation:nth-child(5) {
  --window-side-color: #dc2626;
}

.window-survey-elevation:hover,
.window-survey-elevation.is-active {
  border-color: var(--window-side-color);
  background: #f5f9fa;
  box-shadow: inset 0 0 0 1px var(--window-side-color);
}

.window-survey-elevation.is-hidden {
  background: #fff8e7;
}

.window-survey-elevation span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-survey-elevation strong {
  min-width: 20px;
  color: var(--window-side-color);
  font-size: 14px;
  text-align: right;
}

.window-survey-elevation svg {
  width: 14px;
  height: 14px;
  color: #91a2aa;
}

.window-survey-elevation.is-checked svg {
  color: #087f6f;
}

.window-survey-elevation.is-hidden svg {
  color: #a16207;
}

.window-survey-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.window-survey-view,
.window-survey-cleaning,
.window-survey-status {
  min-width: 0;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, auto);
  overflow: hidden;
  border: 1px solid #c6d5dc;
  border-radius: 7px;
  background: #f3f7f8;
}

.window-survey-view button,
.window-survey-cleaning button,
.window-survey-status button {
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.window-survey-view button + button,
.window-survey-cleaning button + button,
.window-survey-status button + button {
  border-left: 1px solid #c6d5dc;
}

.window-survey-view button.is-active,
.window-survey-cleaning button.is-active,
.window-survey-status button.is-active {
  color: #fff;
  background: var(--navy);
}

.window-survey-view svg {
  width: 15px;
  height: 15px;
}

.window-survey-onsite {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #c6d5dc;
  border-radius: 7px;
  padding: 0 11px;
  color: var(--muted);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.window-survey-onsite.is-active {
  border-color: #c08314;
  color: #5f3c00;
  background: #fff3cf;
}

.window-survey-onsite svg {
  width: 15px;
  height: 15px;
}

.window-survey-status button[data-window-status="hidden"].is-active {
  color: #5f3c00;
  background: #f8d878;
}

.window-survey-status svg {
  width: 15px;
  height: 15px;
}

.property-measurement-stats,
.property-measurement-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.property-measurement-tools {
  justify-content: flex-end;
}

.property-measurement-stats span {
  min-width: 92px;
  display: grid;
  gap: 1px;
  border-left: 1px solid #d8e3e8;
  padding-left: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.1;
}

.property-measurement-stats strong {
  color: var(--navy);
  font-size: 18px;
}

.property-measurement-map {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  z-index: 0;
  background: #dce8e5;
}

.property-measurement-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.property-measurement-view,
.window-street-shell,
.window-street-canvas,
.window-street-marker-layer,
.window-street-count-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.property-measurement-view[hidden] {
  display: none;
}

.window-street-shell {
  overflow: hidden;
  background: #dce8e5;
}

.window-street-canvas {
  z-index: 1;
}

.window-street-count-layer {
  z-index: 3;
  pointer-events: none;
}

.window-street-count-layer.is-active {
  cursor: crosshair;
  pointer-events: auto;
}

.window-street-marker-layer {
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.window-street-marker {
  position: absolute;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  border-radius: 50%;
  padding: 0;
  color: #fff;
  background: #0f766e;
  box-shadow: 0 2px 8px rgba(3, 23, 39, 0.6);
  font: inherit;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.window-street-marker:hover,
.window-street-marker:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  transform: translate(-50%, -50%) scale(1.2);
}

.window-street-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--navy);
  background: #edf4f2;
}

.property-measurement-map-canvas.is-drawing,
.property-measurement-map-canvas.is-drawing .property-measurement-map-3d {
  cursor: crosshair;
}

.property-measurement-map-3d {
  width: 100%;
  height: 100%;
  display: block;
}

.property-measurement-map-canvas.is-camera-dragging,
.property-measurement-map-canvas.is-camera-dragging * {
  cursor: grabbing !important;
}

.property-measurement-vertex {
  appearance: none;
  box-sizing: border-box;
  display: block;
  min-width: 0;
  min-height: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 0;
  color: transparent;
  background: var(--measurement-color, #0f766e);
  box-shadow: 0 1px 5px rgba(3, 23, 39, 0.5);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.property-measurement-vertex {
  width: 13px;
  height: 13px;
}

.property-window-marker {
  --measurement-color: #2563eb;
  width: 16px;
  height: 16px;
  border-width: 3px;
  opacity: 0.78;
  cursor: pointer;
}

.property-window-marker.is-current-elevation {
  opacity: 1;
  box-shadow: 0 1px 6px rgba(3, 23, 39, 0.62), 0 0 0 3px rgba(255, 255, 255, 0.72);
}

.property-window-marker:hover,
.property-window-marker:focus-visible {
  cursor: pointer;
  transform: scale(1.3);
}

.property-measurement-vertex:hover,
.property-measurement-vertex:focus-visible,
.property-measurement-vertex.is-active {
  opacity: 1;
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
  transform: scale(1.22);
}

.property-measurement-vertex:active,
.property-measurement-vertex.is-active {
  cursor: grabbing;
}

.property-measurement-map-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  display: flex;
  gap: 6px;
}

.property-measurement-map-actions .icon-button {
  width: 38px;
  height: 38px;
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 10px rgba(3, 23, 39, 0.24);
}

.property-measurement-map-actions .icon-button.is-active {
  color: #fff;
  background: var(--navy);
}

.property-measurement-map-hint {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  max-width: calc(100% - 250px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 7px;
  padding: 7px 10px;
  color: #fff;
  background: rgba(8, 49, 72, 0.9);
  box-shadow: 0 2px 10px rgba(3, 23, 39, 0.22);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
  text-align: center;
}

.property-measurement-map-error {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 30px;
  color: var(--navy);
  background: #edf4f2;
  text-align: center;
}

.property-measurement-map-error svg {
  width: 34px;
  height: 34px;
  color: var(--danger);
}

.property-measurement-close-area {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}

.property-measurement-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid #d8e3e8;
  background: #fff;
}

.property-measurement-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.property-measurement-footer-actions .button {
  min-height: 40px;
  white-space: nowrap;
}

.window-survey-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-top: 1px solid #d8e3e8;
  background: #fff;
}

.window-survey-total {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.window-survey-total span,
.window-survey-total em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.window-survey-total strong {
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
}

.window-survey-total em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-survey-footer-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.window-survey-footer-actions .button {
  min-height: 40px;
  white-space: nowrap;
}

.property-measurement-saved {
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.property-measurement-saved::-webkit-scrollbar {
  display: none;
}

.property-measurement-saved-item {
  min-width: 246px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 38px;
  align-items: stretch;
  border: 1px solid #d2dfe5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.property-measurement-saved-item.is-draft {
  border-style: dashed;
  border-color: var(--measurement-color, #0f766e);
  background: #f3fbf9;
}

.property-measurement-saved-item.is-active {
  border-color: var(--measurement-color, #0f766e);
  box-shadow: inset 0 0 0 1px var(--measurement-color, #0f766e);
}

.property-measurement-color {
  width: 8px;
  height: 8px;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: var(--measurement-color, #0f766e);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #c9d8df;
}

.property-measurement-shell .icon-button.is-danger {
  color: #a62545;
}

.property-measurement-saved-item > button:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 0;
  padding: 7px 10px;
  color: var(--navy);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.property-measurement-saved-item strong,
.property-measurement-saved-item span {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-measurement-saved-item span {
  color: var(--muted);
}

.property-scope-block {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.property-scope-block > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--navy);
  font-size: 17px;
}

.property-scope-block > h3 svg {
  width: 18px;
  height: 18px;
  color: var(--teal);
}

.property-scope-groups {
  display: grid;
  gap: 8px;
}

.property-scope-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c9d8df;
  border-radius: 8px;
  background: #fff;
}

.property-scope-group > summary {
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.property-scope-group > summary::-webkit-details-marker {
  display: none;
}

.property-scope-group > summary:hover {
  background: #f4f9f8;
}

.property-scope-group[open] > summary {
  border-bottom: 1px solid #dbe5e9;
  background: #f4f9f8;
}

.property-scope-group-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #07574f;
  background: #d9f2ed;
}

.property-scope-group-icon svg {
  width: 18px;
  height: 18px;
}

.property-scope-group-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.property-scope-group-copy strong {
  font-size: 15px;
}

.property-scope-group-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.property-scope-group-chevron {
  width: 18px;
  height: 18px;
  transition: transform 160ms ease;
}

.property-scope-group[open] .property-scope-group-chevron {
  transform: rotate(180deg);
}

.property-scope-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}

.property-scope-group > .property-scope-gallery {
  padding: 12px;
}

.property-scope-figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #c9d8df;
  border-top: 4px solid var(--measurement-color, #0f766e);
  border-radius: 8px;
  background: #fff;
}

.property-scope-figure img {
  width: 100%;
  aspect-ratio: 5 / 3;
  display: block;
  object-fit: cover;
  background-color: #dce8e5;
  background-image: linear-gradient(100deg, #dce8e5 18%, #edf4f2 42%, #dce8e5 66%);
  background-size: 240% 100%;
  animation: client-hub-loading-sweep 1.25s ease-in-out infinite;
}

.property-scope-figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  color: var(--navy);
}

.property-scope-figure figcaption strong {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.property-scope-figure figcaption strong i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--measurement-color, #0f766e);
}

.property-scope-figure figcaption span {
  color: #07574f;
  font-weight: 900;
  white-space: nowrap;
}

.property-scope-block.is-compact .property-scope-gallery {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 320px));
}

@media (max-width: 700px) {
  .property-measurement-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .property-measurement-header {
    min-height: 60px;
    padding: 9px 10px;
  }

  .property-measurement-title h2,
  .property-measurement-header > h2,
  .property-measurement-address strong {
    font-size: 16px;
  }

  .property-measurement-title > span {
    display: none;
  }

  .property-measurement-picker {
    padding: 14px 10px;
  }

  .property-measurement-shell.is-map {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .property-measurement-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 10px;
  }

  .property-measurement-toolbar > label {
    grid-column: 1 / -1;
  }

  .property-measurement-mode {
    justify-self: start;
  }

  .property-measurement-stats span {
    min-width: 76px;
    padding-left: 8px;
  }

  .property-measurement-stats strong {
    font-size: 15px;
  }

  .property-measurement-tools {
    gap: 6px;
  }

  .property-measurement-close-area {
    min-height: 36px;
    padding: 0 9px;
    font-size: 12px;
  }

  .property-measurement-map {
    min-height: 0;
  }

  .property-measurement-map-hint {
    top: 54px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 6px 8px;
    font-size: 11px;
  }

  .property-measurement-map-actions {
    top: 8px;
    right: 8px;
  }

  .property-measurement-footer {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  }

  .property-measurement-footer-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .property-measurement-footer-actions .button {
    width: 100%;
    padding-inline: 10px;
  }

  .property-measurement-shell.is-window-counter {
    grid-template-rows: auto auto minmax(260px, 1fr) auto;
  }

  .window-survey-toolbar {
    gap: 7px;
    padding: 7px 10px;
  }

  .window-survey-elevations {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }

  .window-survey-elevations::-webkit-scrollbar {
    display: none;
  }

  .window-survey-elevation {
    min-width: 88px;
    min-height: 36px;
    padding-inline: 7px;
  }

  .window-survey-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .window-survey-view,
  .window-survey-controls .property-measurement-mode,
  .window-survey-cleaning {
    width: 100%;
  }

  .window-survey-cleaning button {
    width: 100%;
  }

  .window-survey-cleaning,
  .window-survey-onsite {
    grid-column: 1 / -1;
    width: 100%;
  }

  .window-survey-status button {
    width: 100%;
  }

  .window-survey-footer {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 7px 10px max(7px, env(safe-area-inset-bottom));
  }

  .window-survey-footer-actions {
    width: 100%;
    display: flex;
    gap: 7px;
  }

  .window-survey-footer-actions .icon-button {
    flex: 0 0 38px;
  }

  .window-survey-footer-actions .button {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding-inline: 8px;
    font-size: 12px;
  }

  .window-survey-footer-actions .button:last-child {
    flex-grow: 1.25;
  }

  .pricing-area-head {
    align-items: flex-start;
  }

  .pricing-area-head > div:first-child {
    flex-wrap: wrap;
  }

  .property-scope-gallery,
  .property-scope-block.is-compact .property-scope-gallery {
    grid-template-columns: 1fr;
  }

  .property-scope-group-copy {
    display: grid;
    gap: 1px;
  }
}

@media (max-width: 430px) {
  .pricing-gutter-heading,
  .pricing-window-heading {
    align-items: flex-start;
  }

  .pricing-gutter-heading .pricing-measurement-badge,
  .pricing-window-heading .pricing-measurement-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .window-survey-controls {
    grid-template-columns: 1fr;
  }

  .window-survey-controls .property-measurement-mode,
  .window-survey-view,
  .window-survey-cleaning,
  .window-survey-onsite {
    grid-column: 1;
    width: 100%;
  }

  .window-survey-total {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .property-measurement-toolbar {
    grid-template-columns: 1fr;
  }

  .property-measurement-stats,
  .property-measurement-mode,
  .property-measurement-tools {
    width: 100%;
  }

  .property-measurement-stats {
    justify-content: flex-start;
  }

  .property-measurement-tools {
    justify-content: space-between;
  }

  .property-measurement-close-area {
    flex: 1 1 auto;
  }
}

@media (max-height: 650px) and (max-width: 700px) {
  .property-measurement-shell.is-map {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .property-measurement-map {
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .schedule-control-top,
  .schedule-filter-row,
  .schedule-dispatch-layout {
    grid-template-columns: 1fr;
  }

  .schedule-dispatch-map {
    position: static;
    order: 2;
  }

  .schedule-dispatch-calendar {
    order: 1;
  }

  .schedule-dispatch-map .schedule-map-canvas {
    min-height: min(58vh, 520px);
  }

  .schedule-pulse {
    align-items: flex-start;
  }

  .schedule-pulse-metrics {
    flex: 1 1 auto;
  }
}

@media (max-width: 560px) {
  .ops-followup-actions {
    justify-content: stretch;
    min-width: 0;
  }

  .ops-followup-actions .button {
    flex: 1 1 100%;
  }

  .dispatch-readiness {
    padding: 10px;
  }

  .schedule-ops-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 10px;
  }

  .schedule-ops-summary strong {
    grid-column: 1 / -1;
    font-size: 13px;
  }

  .schedule-ops-summary em {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .schedule-ops-panels {
    padding: 8px;
  }

  .dispatch-readiness-head,
  .dispatch-issue-queue-head,
  .dispatch-day-review-head,
  .dispatch-handoff-head {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .dispatch-readiness-mode,
  .dispatch-day-review-status {
    justify-items: start;
  }

  .dispatch-readiness-grid,
  .dispatch-issue-queue-stats,
  .dispatch-day-review-metrics,
  .dispatch-handoff-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dispatch-day-grid {
    grid-template-columns: 1fr;
  }

  .dispatch-day-review,
  .dispatch-issue-queue,
  .dispatch-handoff {
    padding: 10px;
  }

  .dispatch-issue-queue-actions {
    justify-content: stretch;
  }

  .dispatch-issue-queue-actions .button {
    flex: 1 1 100%;
  }

  .dispatch-issue-queue-item {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .dispatch-issue-queue-item b {
    grid-column: 1 / -1;
    text-align: left;
  }

  .dispatch-issue-queue-item small,
  .dispatch-issue-queue-item em {
    white-space: normal;
  }

  .dispatch-day-review-form {
    grid-template-columns: 1fr;
  }

  .dispatch-day-review-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dispatch-day-review-actions .button {
    width: 100%;
  }

  .dispatch-handoff-actions {
    justify-content: stretch;
  }

  .dispatch-handoff-actions .button {
    flex: 1 1 0;
  }

  .dispatch-handoff-crew {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .dispatch-handoff-crew span {
    flex: 0 0 auto;
  }

  .dispatch-handoff-stop {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .dispatch-handoff-stop em {
    grid-column: 1 / -1;
    text-align: left;
  }

  .dispatch-issue {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .dispatch-issue svg {
    display: none;
  }

  .schedule-pulse {
    display: block;
    padding: 7px;
  }

  .schedule-pulse-copy {
    display: none;
  }

  .schedule-pulse-brief {
    display: grid;
    gap: 3px;
    margin-bottom: 6px;
  }

  .schedule-pulse-brief span {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .schedule-pulse-metrics {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .schedule-pulse-metric {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 8px;
    font-size: 0.82rem;
  }

  .schedule-crew-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .schedule-crew-chip {
    flex: 0 0 auto;
    max-width: 180px;
  }

  .schedule-assigned-crew {
    align-items: stretch;
  }

  .schedule-crew-pill,
  .schedule-crew-edit {
    min-height: 32px;
  }

  .schedule-crew-sheet {
    align-items: end;
    padding: 10px max(10px, var(--safe-right)) max(10px, var(--safe-bottom)) max(10px, var(--safe-left));
  }

  .schedule-crew-card {
    width: 100%;
    max-height: 88vh;
  }

  .schedule-crew-card-head {
    padding: 14px;
    cursor: default;
    touch-action: auto;
  }

  .schedule-crew-options {
    padding: 10px;
  }

  .schedule-crew-option {
    min-height: 54px;
  }

  .schedule-crew-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .schedule-control-panel [data-schedule-message] {
    display: none;
  }

  .schedule-dispatch-map .schedule-map-canvas {
    min-height: min(52vh, 430px);
  }
}

/* Dense workspace pass: use the screen like Jobber instead of nesting every page in framed boxes. */
.app-shell {
  grid-template-columns: 232px minmax(0, 1fr);
}

.sidebar {
  padding: max(14px, calc(var(--safe-top) + 10px)) 10px max(14px, calc(var(--safe-bottom) + 10px));
}

.brand-lockup {
  padding: 6px 6px 12px;
}

.brand-lockup img {
  max-height: 88px;
}

.nav-list {
  gap: 10px;
}

.nav-list a {
  min-height: 36px;
  padding: 8px 9px;
}

.topbar {
  gap: 12px;
  min-height: 62px;
  padding: max(10px, calc(var(--safe-top) + 8px)) max(16px, calc(var(--safe-right) + 14px)) 10px max(16px, calc(var(--safe-left) + 14px));
  box-shadow: none;
}

#page-title {
  font-size: 22px;
}

.global-search {
  max-width: 640px;
}

#app {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px max(14px, var(--safe-right)) max(18px, calc(var(--safe-bottom) + 18px)) max(14px, var(--safe-left));
}

#app > .section {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

#app > .section > .section-heading {
  min-height: 0;
  border: 0;
  padding: 0 0 10px;
  background: transparent;
}

#app > .section > .section-body {
  padding: 0;
}

#app > .section > .section-heading h2 {
  font-size: 19px;
}

.grid,
.jobs-view .section-body,
.team-page .section-body,
.payments-view .section-body,
.reports-view .section-body,
.schedule-view .section-body {
  gap: 10px;
}

.section,
.card,
.panel,
.jobber-report-card,
.jobber-workflow-card,
.jobber-performance-card,
.crm-job-card,
.client-card,
.quote-followup-card,
.payment-card,
.schedule-card {
  box-shadow: none;
}

.section-body,
.card {
  padding: 12px;
}

.section-heading,
.section-heading.teal {
  min-height: 46px;
  padding: 10px 12px;
}

.schedule-view .section-body {
  padding: 0;
}

.schedule-control-panel {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  box-shadow: none;
}

.schedule-pulse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  padding: 4px 0 6px;
  background: transparent;
  box-shadow: none;
}

.schedule-pulse-copy {
  flex: 0 1 auto;
  max-width: 42%;
}

.schedule-pulse-copy span {
  display: none;
}

.schedule-pulse-copy strong {
  color: var(--muted);
  font-size: 12px;
}

.schedule-pulse-metrics {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: flex-end;
  overflow-x: auto;
  padding-bottom: 1px;
  -webkit-overflow-scrolling: touch;
}

.schedule-pulse-metric {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 999px;
}

.schedule-pulse-metric span {
  font-size: 0.62rem;
}

.schedule-pulse-metric strong {
  font-size: 0.84rem;
}

.schedule-pulse-action {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 0.72rem;
}

.schedule-list {
  gap: 8px;
}

.schedule-dispatch-layout {
  gap: 10px;
}

.schedule-dispatch-head {
  border-radius: 6px;
  padding: 8px 10px;
}

.schedule-dispatch-map .schedule-map-canvas,
.schedule-map-canvas {
  border-radius: 6px;
}

.schedule-week-board {
  gap: 8px;
}

.schedule-day-column,
.schedule-month-calendar,
.schedule-card,
.schedule-mini-card,
.month-job-pill {
  border-radius: 6px;
}

.schedule-card {
  padding: 10px;
}

.schedule-card-main {
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
}

.schedule-actions {
  gap: 8px;
}

@media (max-width: 940px) {
  .app-shell {
    display: block;
  }

  #app {
    padding: 8px max(8px, var(--safe-right)) calc(88px + var(--safe-bottom)) max(8px, var(--safe-left));
  }

  .topbar {
    min-height: 56px;
    padding: max(9px, calc(var(--safe-top) + 7px)) max(10px, var(--safe-right)) 9px max(10px, var(--safe-left));
  }

  #app > .section > .section-heading {
    padding-bottom: 8px;
  }

  .section-body,
  .card {
    padding: 10px;
  }
}

@media (max-width: 620px) {
  .field-cockpit-task-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-cockpit-task-pill {
    min-height: 48px;
  }

  .field-cockpit-task-pill strong {
    white-space: normal;
  }

  .schedule-pulse {
    display: block;
    padding: 2px 0 4px;
  }

  .schedule-pulse-copy {
    display: none;
  }

  .schedule-pulse-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    justify-content: stretch;
    overflow-x: visible;
  }

  .schedule-pulse-metric {
    justify-content: center;
    min-height: 25px;
    padding: 3px 7px;
  }
}

@media (max-width: 760px) {
  .automation-next-move {
    grid-template-columns: 1fr;
  }

  .automation-next-move-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .automation-next-move-action .button {
    width: 100%;
  }

  .automation-summary-grid,
  .automation-toggle-grid,
  .automation-number-grid,
  .automation-queue-metrics,
  .quote-followup-automation-main {
    grid-template-columns: 1fr;
  }

  .automation-panel,
  .automation-queue-panel {
    padding: 12px;
  }

  .automation-panel-head,
  .automation-queue-head {
    display: grid;
  }

  .automation-panel-head h3,
  .automation-queue-head h3 {
    font-size: 20px;
  }

  .quote-followup-automation-value {
    justify-items: start;
    text-align: left;
  }

  .quote-followup-automation-actions {
    justify-content: stretch;
  }

  .quote-followup-automation-actions .button {
    flex: 1 1 140px;
  }

  .automation-toggle-card {
    grid-template-columns: 40px minmax(0, 1fr) 48px;
    padding: 11px;
  }

  .automation-toggle-icon {
    width: 40px;
    height: 40px;
  }

  .automation-switch {
    width: 46px;
    height: 28px;
  }

  .automation-switch::after {
    width: 20px;
    height: 20px;
  }

  .automation-toggle-card.is-on .automation-switch::after {
    transform: translateX(18px);
  }

  .crew-dashboard {
    background: #fff;
  }

  .field-command-center {
    gap: 12px;
  }

  .field-command-center .dashboard-status,
  .field-command-center [data-field-sync-panel],
  .field-command-center .field-assigned-jobs {
    display: none;
  }

  .field-home-mobile {
    gap: 14px;
    margin: 2px -2px 0;
  }

  .field-home-topline > span {
    font-size: 16px;
  }

  .field-home-top-actions a {
    width: 44px;
    height: 40px;
  }

  .field-home-greeting {
    font-size: clamp(34px, 11vw, 46px);
  }

  .field-home-next-stack {
    gap: 7px;
  }

  .field-home-next-stack .field-cockpit-action {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 10px;
  }

  .field-home-next-stack .field-cockpit-action .button {
    grid-column: auto;
    min-height: 42px;
    padding-inline: 12px;
  }

  .field-home-next-stack .field-cockpit-action strong {
    font-size: 16px;
  }

  .field-home-next-stack .field-cockpit-action small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .field-home-next-stack .field-cockpit-task-strip {
    padding: 9px;
  }

  .field-home-map-card {
    min-height: 548px;
    margin: 0 -10px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    padding: 14px max(12px, var(--safe-right)) 14px max(12px, var(--safe-left));
    box-shadow: none;
  }

  .field-home-clock {
    gap: 12px;
    padding: 14px;
  }

  .field-home-clock strong {
    font-size: 19px;
  }

  .field-home-clock .button {
    min-width: 124px;
    min-height: 52px;
    font-size: 15px;
  }

  .field-home-map-pin em {
    font-size: 19px;
  }

  .field-home-map-pin svg {
    width: 38px;
    height: 38px;
  }

  .field-home-map-summary {
    align-items: center;
    margin-top: 198px;
  }

  .field-home-map-summary strong {
    font-size: 25px;
  }

  .field-home-map-summary span {
    font-size: 18px;
  }

  .field-home-map-summary a {
    padding: 12px 14px;
    font-size: 16px;
  }

  .field-home-visit-carousel {
    grid-auto-columns: minmax(300px, 86vw);
    margin-right: calc(-1 * max(12px, var(--safe-right)));
    margin-left: calc(-1 * max(12px, var(--safe-left)));
    padding-right: max(12px, var(--safe-right));
    padding-left: max(12px, var(--safe-left));
  }

  .field-home-visit-main {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    padding: 14px;
  }

  .field-home-visit-copy strong {
    font-size: 19px;
  }

  .field-home-visit-copy em,
  .field-home-visit-copy small,
  .field-home-visit-copy b {
    font-size: 14px;
  }

  .field-home-visit-status {
    min-width: 62px;
  }

  .field-home-visit-status i {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .field-task-command {
    margin-top: 2px;
  }
}

@media (max-width: 760px) {
  body:has(.messages-page) #app > .messages-page > .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid #dbe4ea;
    padding: 8px max(10px, var(--safe-right)) 8px max(10px, var(--safe-left));
    background: #fff;
  }

  body:has(.messages-page) #app > .messages-page > .section-heading h2 {
    overflow: hidden;
    font-size: 17px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.messages-page) #app > .messages-page > .section-heading .message-page-actions {
    width: auto;
    flex-wrap: nowrap;
  }

  #app > .native-messages-page.is-native-thread-open > .section-heading {
    display: none !important;
  }
}

/* Android field scrolling fix: nested schedule boards were trapping vertical swipes. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  body {
    overscroll-behavior-y: auto;
  }

  .schedule-timegrid,
  .schedule-resource-board {
    max-height: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .schedule-mini-card[draggable="true"],
  .schedule-card[draggable="true"],
  .month-job-pill[draggable="true"],
  .schedule-time-job[draggable="true"] {
    cursor: pointer;
    -webkit-user-drag: none;
  }

  .schedule-crew-card-head {
    cursor: default;
    touch-action: auto;
  }
}

/* Final schedule containment: keep late dense workspace rules from widening mobile dispatch. */
@media (max-width: 980px) {
  body:has(.schedule-view) {
    overflow-x: hidden;
  }

  .schedule-view,
  .schedule-view .section-body,
  .schedule-list,
  .schedule-ops-drawer,
  .schedule-ops-panels,
  .schedule-dispatch-layout,
  .schedule-dispatch-calendar,
  .schedule-dispatch-map,
  .dispatch-day-review,
  .dispatch-day-review-form,
  .dispatch-day-review-metrics,
  .dispatch-issue-queue,
  .dispatch-issue-queue-stats,
  .dispatch-issue-groups,
  .dispatch-issue-queue-list,
  .dispatch-handoff,
  .dispatch-handoff-stats,
  .dispatch-handoff-stops,
  .schedule-unscheduled-strip {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .schedule-control-top,
  .schedule-filter-row,
  .schedule-dispatch-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-toolbar,
  .schedule-display-toggle,
  .schedule-crew-chips,
  .schedule-source-health,
  .schedule-source-cards,
  .dispatch-day-review-actions,
  .dispatch-day-review-guardrails,
  .dispatch-issue-queue-actions,
  .dispatch-issue-queue-guardrails,
  .dispatch-handoff-actions,
  .dispatch-handoff-crew,
  .schedule-pulse-metrics {
    max-width: 100%;
    min-width: 0;
  }

  .schedule-source-health,
  .dispatch-day-review-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-source-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-source-health .button {
    width: 100%;
  }

  .schedule-dispatch-map {
    position: static;
    order: -1;
  }

  .schedule-dispatch-map .schedule-map-canvas,
  .schedule-map-canvas {
    max-width: 100%;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .schedule-timegrid-week.schedule-week-board {
    display: none;
    min-width: 0;
  }

  .schedule-timegrid-week + .schedule-mobile-summary,
  .schedule-mobile-summary {
    display: grid;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .schedule-resource-board.schedule-day-board {
    display: none;
  }

  .schedule-mobile-day-summary {
    overflow: visible;
  }

  .schedule-resource-board,
  .schedule-timegrid,
  .schedule-month-calendar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    contain: inline-size;
  }

  .schedule-resource-board,
  .schedule-timegrid {
    overflow-x: auto;
    overflow-y: visible;
  }

  .schedule-month-calendar {
    display: none;
  }

  .schedule-card-main,
  .schedule-actions,
  .schedule-contact-actions,
  .schedule-secondary-actions,
  .schedule-source-copy,
  .schedule-source-cards article {
    max-width: 100%;
    min-width: 0;
  }

  .schedule-source-cards {
    grid-template-columns: 1fr;
  }
}

body.is-role-preview {
  padding-top: 58px;
}

.role-preview-banner {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: max(8px, var(--safe-top)) max(14px, var(--safe-right)) 8px max(14px, var(--safe-left));
  color: #fff;
  background: #0b3048;
  box-shadow: 0 12px 34px rgba(5, 24, 44, 0.22);
}

.role-preview-banner span {
  min-width: 0;
  font-weight: 800;
}

.role-preview-page {
  display: grid;
  gap: 18px;
}

.role-preview-page .section-heading {
  align-items: start;
}

.role-preview-status,
.role-preview-panel,
.role-preview-phone-panel,
.role-preview-empty-phone {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
}

.role-preview-status {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.role-preview-status.is-active {
  border-color: rgba(7, 149, 143, 0.36);
  background: rgba(17, 199, 189, 0.1);
}

.role-preview-status-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  color: #063047;
  background: rgba(18, 168, 216, 0.14);
}

.role-preview-status strong,
.role-preview-status span {
  display: block;
}

.role-preview-status span {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 700;
}

.role-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.role-preview-panel,
.role-preview-phone-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.role-preview-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.role-preview-panel-head h3 {
  margin: 0;
  font-size: 1.02rem;
}

.role-preview-panel-head span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  text-align: right;
}

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

.role-preview-role-card,
.role-preview-route-chip {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.role-preview-role-card {
  padding: 12px;
}

.role-preview-role-card strong,
.role-preview-role-card small,
.role-preview-role-card em {
  display: block;
}

.role-preview-role-card small,
.role-preview-role-card em,
.role-preview-route-chip small {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.role-preview-role-card.is-selected,
.role-preview-route-chip.is-selected {
  border-color: rgba(7, 149, 143, 0.62);
  box-shadow: inset 0 0 0 2px rgba(17, 199, 189, 0.2);
}

.role-preview-route-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.role-preview-route-chip {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  padding: 10px;
}

.role-preview-route-chip svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.role-preview-route-chip span,
.role-preview-route-chip small {
  min-width: 0;
}

.role-preview-route-chip small {
  grid-column: 2;
}

.role-preview-route-chip:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.role-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.role-preview-phone-shell {
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 14px;
  border-radius: 28px;
  background: #0b1720;
  box-shadow: var(--shadow);
}

.role-preview-phone-shell iframe {
  display: block;
  width: 390px;
  max-width: 100%;
  height: min(780px, 76vh);
  border: 0;
  border-radius: 18px;
  background: var(--soft);
}

.role-preview-empty-phone {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 280px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.role-preview-empty-phone svg {
  width: 34px;
  height: 34px;
  color: var(--navy);
}

.role-preview-empty-phone strong {
  color: var(--ink);
}

@media (max-width: 920px) {
  body.is-role-preview {
    padding-top: 86px;
  }

  .role-preview-banner {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .role-preview-grid,
  .role-preview-role-grid,
  .role-preview-route-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .role-preview-panel-head,
  .role-preview-actions {
    align-items: stretch;
  }

  .role-preview-actions .button,
  .role-preview-actions a {
    width: 100%;
  }
}

/* Final quote mobile override: keep line items card-shaped after broad app QA rules. */
@media (max-width: 760px) {
  .crm-client-directory-head,
  .crm-client-directory-filter,
  .crm-client-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-client-filter-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-filter-pill {
    justify-content: space-between;
  }

  .client-filter-pill.is-link {
    justify-content: center;
  }

  .crm-client-table {
    display: grid;
    gap: 8px;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .crm-client-table-head {
    display: none;
  }

  .crm-client-table-body {
    display: grid;
    gap: 8px;
  }

  .crm-client-table-row {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }

  .crm-client-table-tags,
  .crm-client-table-status,
  .crm-client-table-activity {
    justify-self: start;
  }

  .quote-line-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.45fr) 80px;
    grid-template-areas:
      "kind total remove"
      "name name name"
      "desc desc desc"
      "qty price taxable";
  }

  .quote-line-row [data-line-kind] {
    grid-area: kind;
  }

  .quote-line-row [data-line-name] {
    grid-area: name;
  }

  .quote-line-row [data-line-description] {
    grid-area: desc;
  }

  .quote-line-row [data-line-quantity] {
    grid-area: qty;
  }

  .quote-line-row [data-line-price] {
    grid-area: price;
  }

  .quote-line-row [data-line-total] {
    grid-area: total;
    justify-self: end;
    text-align: right;
  }

  .quote-line-actions {
    grid-area: remove;
    justify-self: end;
  }

  .quote-line-taxable {
    grid-area: taxable;
    grid-column: auto;
    justify-self: end;
  }
}

@media (max-width: 430px) {
  .quote-line-row {
    grid-template-columns: minmax(0, 1fr) 88px;
    grid-template-areas:
      "kind remove"
      "name name"
      "desc desc"
      "qty price"
      "taxable total";
  }
}

/* Final phone-system override: broad mobile containment stacks grids at tablet width. */
@media (min-width: 641px) {
  .phone-system-page .phone-system-owner-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .phone-system-page .phone-setup-stepper {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .phone-system-page .phone-setup-step {
    min-height: 56px;
  }
}

@media (max-width: 640px) {
  .phone-system-page .phone-setup-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phone-setup-modal-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phone-setup-modal-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone-setup-modal-footer > div:first-child {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .phone-setup-modal-footer em {
    display: none;
  }

  .phone-setup-modal-actions {
    justify-content: stretch;
  }

  .phone-setup-modal-actions .button {
    flex: 1 1 0;
  }

  .phone-number-ready-step {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone-number-ready-actions {
    justify-content: stretch;
  }

  .phone-number-ready-actions .button,
  .phone-number-ready-actions form {
    flex: 1 1 0;
  }

	  .phone-number-ready-actions form .button {
	    width: 100%;
	  }

	  .phone-setup-audit-row {
	    grid-template-columns: minmax(0, 1fr);
	  }

	  .phone-setup-audit-row > span {
	    justify-self: start;
	    min-width: 58px;
	  }

	  .phone-setup-audit-row strong,
	  .phone-setup-audit-row em {
	    white-space: normal;
	  }

  .email-system-top,
  .email-system-grid,
  .email-system-card > header,
  .email-system-domain-card > header {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-system-top,
  .email-system-card > header,
  .email-system-domain-card > header {
    align-items: stretch;
  }

  .email-system-card > header,
  .email-system-domain-card > header {
    flex-direction: column;
  }

  .email-system-status,
  .email-system-form,
  .email-system-domain-form,
  .email-system-inline-form,
  .email-system-copy-row,
  .email-system-record {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-system-domain-actions {
    justify-content: stretch;
  }

  .email-system-domain-actions .button,
  .email-system-copy-row .button,
  .email-system-record .button {
    width: 100%;
  }

  .email-system-copy-row strong,
  .email-system-record strong,
  .email-system-record code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
	}

@media (max-width: 820px) {
  .crm-duplicate-review-page > .section-heading > div {
    gap: 8px;
  }

  .crm-duplicate-pair > header {
    align-items: flex-start;
  }

  .crm-duplicate-pair > header > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .crm-duplicate-pair-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-duplicate-divider {
    min-height: 28px;
  }

  .crm-duplicate-divider::before {
    top: 50%;
    right: 16px;
    bottom: auto;
    left: 16px;
    width: auto;
    height: 1px;
  }

  .crm-duplicate-divider span {
    padding: 4px 8px;
  }

  .crm-duplicate-merge-history article {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .crm-duplicate-merge-history article > .pill {
    display: none;
  }

  .crm-client-create-page {
    width: 100%;
  }

  .crm-client-create-form {
    grid-template-columns: 1fr;
  }

  .crm-client-create-more-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .crm-duplicate-review-page > .section-heading h2 {
    font-size: 18px;
  }

  .crm-duplicate-review-page > .section-heading .button.compact {
    width: 40px;
    min-width: 40px;
    padding: 0;
    font-size: 0;
  }

  .crm-duplicate-review-page > .section-heading .button.compact svg {
    width: 18px;
    height: 18px;
  }

  .crm-duplicate-pair > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 11px 12px;
  }

  .crm-duplicate-pair > header .button {
    min-height: 34px;
  }

  .crm-duplicate-customer {
    padding: 14px 12px;
  }

  .crm-duplicate-customer-head {
    grid-template-columns: 40px minmax(0, 1fr) 38px;
  }

  .crm-duplicate-merge-history article {
    grid-template-columns: minmax(0, 1fr) 38px;
  }

  .crm-duplicate-merge-history article > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .crm-client-create-header {
    gap: 9px;
    padding: 0 2px;
  }

  .crm-client-create-header .icon-button {
    width: 40px;
    height: 40px;
  }

  .crm-client-create-submit {
    width: 100%;
  }

  .crm-client-create-block {
    padding: 16px 14px;
  }

  .crm-client-create-contact-grid,
  .crm-client-create-address-grid,
  .crm-property-address-grid {
    grid-template-columns: 1fr;
  }

  .crm-client-name-field,
  .crm-client-contact-wide,
  .crm-client-phone-field,
  .crm-client-create-address-grid > .address-lookup-field,
  .crm-property-address-grid > .address-lookup-field {
    grid-column: auto;
  }

  .crm-client-create-block-head {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .crm-add-property-footer {
    min-height: 44px;
  }

  .crm-client-create-more summary {
    padding-inline: 14px;
  }

  .crm-client-create-more-grid {
    padding: 0 14px 14px;
  }

  .crm-client-create-footer {
    padding: 14px;
  }

  .crm-tag-new-row {
    grid-template-columns: minmax(0, 1fr) auto 38px;
  }

  .crm-customer-duplicate-match {
    grid-template-columns: 1fr;
  }

  .crm-customer-duplicate-match .button {
    width: 100%;
  }
}

/* Quote workspace: keep pricing central and move setup/history out of the way. */
.quote-workflow-form {
  width: min(100%, 1420px);
  margin: 0 auto;
  gap: 12px;
}

.quote-workflow-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: visible;
  border: 1px solid var(--surface-line);
  background: #fff;
}

.quote-workflow-header .quote-workflow-title {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 64px;
  border: 0;
  padding: 10px 14px;
}

.quote-workflow-title > div {
  display: grid;
  gap: 2px;
}

.quote-document-kicker {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.quote-workflow-title h2 {
  max-width: 620px;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-back-button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: 1px solid var(--surface-line-strong);
  color: var(--navy) !important;
  background: #fff;
}

.quote-back-button svg,
.quote-more-actions summary svg {
  width: 18px;
  height: 18px;
}

.quote-workflow-header > .quote-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 0;
  padding: 10px 14px 10px 4px;
}

.quote-header-actions > .button.primary {
  min-width: 112px;
}

.quote-more-actions summary {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}

.quote-more-actions > div {
  min-width: 188px;
}

.quote-workflow-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 12px;
}

.quote-workflow-main,
.quote-workflow-rail {
  gap: 12px;
}

.quote-workflow-rail {
  top: 76px;
}

.quote-step-card {
  border-color: var(--surface-line);
  background: #fff;
}

.quote-step-card > .quote-step-heading {
  min-height: 44px;
  padding: 10px 14px;
}

.quote-step-heading h2 {
  font-size: 15px;
}

.quote-step-card > .section-body {
  padding: 14px;
}

.quote-setup-grid {
  grid-template-columns: minmax(0, 2fr) minmax(170px, 0.7fr);
  gap: 10px;
}

.quote-client-search-row {
  grid-template-columns: minmax(220px, 1fr) minmax(190px, 0.72fr);
  gap: 9px;
}

.quote-client-select-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.quote-client-search-row > .icon-button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: 1px solid var(--surface-line-strong);
  color: var(--navy) !important;
  background: #fff;
}

.quote-client-results:empty {
  display: none;
}

.quote-client-summary {
  padding: 10px 12px;
}

.quote-selected-client {
  grid-template-columns: 46px minmax(0, 1fr) 40px;
  gap: 10px;
  border: 0;
  padding: 0;
  background: transparent;
}

.quote-selected-client .client-avatar.large {
  width: 46px;
  height: 46px;
  font-size: 15px;
}

.quote-selected-client strong {
  font-size: 17px;
  line-height: 1.15;
}

.quote-selected-client em,
.quote-selected-client p {
  font-size: 12px;
}

.quote-selected-client .icon-button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: 1px solid var(--surface-line-strong);
  color: var(--navy) !important;
  background: #fff;
}

.quote-line-items-step > .section-body {
  padding: 0;
}

.quote-builder {
  gap: 12px;
  border: 0;
  padding: 14px;
  background: #fff;
}

.quote-builder-head {
  min-height: 40px;
}

.quote-builder-head h3 {
  font-size: 17px;
}

.quote-builder-actions {
  flex-wrap: nowrap;
}

.quote-builder-actions .button {
  display: inline-flex;
  gap: 6px;
  min-height: 36px;
  padding: 0 11px;
  font-size: 12px;
}

.quote-builder-actions .button svg {
  width: 15px;
  height: 15px;
}

.quote-service-catalog {
  display: block;
  overflow: hidden;
  border: 1px solid var(--surface-line-strong);
  border-radius: 7px;
  padding: 0;
  background: #f8fafc;
}

.quote-service-catalog > summary,
.quote-editor-details > summary,
.quote-process-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  color: var(--navy);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

.quote-service-catalog > summary::-webkit-details-marker,
.quote-editor-details > summary::-webkit-details-marker,
.quote-process-details > summary::-webkit-details-marker {
  display: none;
}

.quote-service-catalog > summary span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.quote-service-catalog > summary svg,
.quote-editor-details > summary svg,
.quote-process-details > summary svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.quote-service-catalog[open] > summary > svg,
.quote-editor-details[open] > summary > svg,
.quote-process-details[open] > summary > svg {
  transform: rotate(180deg);
}

.quote-service-catalog-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--surface-line);
  padding: 10px;
  background: #fff;
}

.quote-service-catalog-head {
  grid-template-columns: minmax(0, 340px);
  justify-content: end;
}

.quote-service-catalog-search {
  min-height: 36px;
}

.quote-service-catalog-results {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  max-height: 248px;
}

.quote-service-card {
  min-height: 72px;
  box-shadow: none;
}

.quote-line-editor,
[data-quote-line-rows] {
  display: grid;
  gap: 9px;
  overflow: visible;
}

.quote-line-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--surface-line-strong);
  border-left: 4px solid var(--navy);
  border-radius: 7px;
  padding: 10px;
  background: #fff;
}

.quote-line-row.is-optional {
  border-left-color: var(--teal);
  background: rgba(24, 189, 181, 0.045);
}

.quote-line-row.is-discount {
  border-left-color: #ca8a04;
  background: rgba(250, 204, 21, 0.06);
}

.quote-line-primary {
  display: grid;
  grid-template-columns: 112px minmax(150px, 1fr) minmax(178px, auto) 82px;
  gap: 8px;
  align-items: center;
}

.quote-line-row input,
.quote-line-row textarea,
.quote-line-row select {
  min-height: 38px;
  border-radius: 6px;
  padding: 8px 9px;
  font-size: 13px;
}

.quote-line-row .quote-line-name {
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.quote-line-row .quote-line-description {
  min-height: 58px;
  max-height: 128px;
  resize: vertical;
  line-height: 1.35;
}

.quote-line-actions {
  gap: 4px;
}

.quote-line-actions .icon-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
}

.quote-line-actions .secondary-icon-button {
  border: 1px solid var(--surface-line-strong);
  color: var(--navy) !important;
  background: #fff;
}

.quote-line-actions .danger-button {
  border: 1px solid rgba(215, 25, 70, 0.2) !important;
  color: #b3123d !important;
  background: #fff3f6 !important;
}

.quote-line-amount-editor {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  white-space: nowrap;
}

.quote-line-price-control,
.quote-line-quantity-control {
  position: relative;
  display: block;
  min-width: 0;
}

.quote-line-price-control {
  width: 92px;
}

.quote-line-quantity-control {
  width: 38px;
}

.quote-line-currency {
  position: absolute;
  top: 50%;
  left: 9px;
  z-index: 1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  transform: translateY(-50%);
  pointer-events: none;
}

.quote-line-amount-editor input[type="number"] {
  appearance: textfield;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.quote-line-price-control input {
  width: 100%;
  padding-left: 22px;
  font-weight: 900;
}

.quote-line-quantity-control input {
  width: 100%;
  padding: 8px 5px;
  text-align: center !important;
}

.quote-line-amount-editor input[type="number"]::-webkit-inner-spin-button,
.quote-line-amount-editor input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.quote-line-times {
  color: var(--muted);
  font-weight: 900;
}

.quote-line-calculated-total {
  color: var(--navy);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.quote-line-taxable {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 38px;
  margin-left: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.quote-line-taxable[hidden] {
  display: none;
}

.quote-line-taxable input {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
}

.quote-tax-panel {
  justify-self: start;
  width: min(100%, 360px);
  border-color: var(--surface-line);
  background: #f8fafc;
}

.quote-tax-panel summary {
  min-height: 38px;
  padding: 0 11px;
  font-size: 12px;
}

.quote-tax-controls {
  gap: 12px;
  align-items: center;
}

.quote-builder-summary {
  width: min(100%, 380px);
  border-color: var(--surface-line-strong);
}

.quote-builder-summary > div {
  padding: 8px 11px;
}

.quote-builder-summary span {
  font-size: 11px;
}

.quote-builder-total {
  color: #fff;
  background: var(--navy) !important;
}

.quote-builder-total span,
.quote-builder-total strong {
  color: #fff;
}

.quote-builder-total strong {
  font-size: 23px;
}

.quote-editor-details {
  overflow: hidden;
  border: 1px solid var(--surface-line);
  background: #fff;
}

.quote-editor-details > summary {
  min-height: 46px;
  padding: 0 14px;
  font-size: 14px;
}

.quote-editor-details[open] > summary {
  border-bottom: 1px solid var(--surface-line);
}

.quote-notes-workflow {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  padding: 14px;
}

.quote-notes-workflow > .field textarea {
  min-height: 116px;
}

.quote-collapsed-section > .section {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.quote-collapsed-section > .section > .section-heading {
  border-top: 0;
}

.quote-side-panel {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.quote-side-panel > .section-body {
  display: grid;
  gap: 9px;
  padding: 0;
}

.quote-review-panel {
  gap: 11px;
  margin: 0;
  border-color: var(--surface-line-strong);
  padding: 13px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.quote-review-panel.is-approved,
.quote-review-panel.is-pending,
.quote-review-panel.is-draft,
.quote-review-panel.is-ready {
  background: #fff;
}

.quote-review-panel.is-approved {
  border-top: 4px solid var(--success);
}

.quote-review-panel.is-pending {
  border-top: 4px solid #d97706;
}

.quote-review-panel.is-ready {
  border-top: 4px solid var(--teal);
}

.quote-review-panel.is-draft {
  border-top: 4px solid var(--navy);
}

.quote-review-head strong {
  font-size: 18px;
}

.quote-review-total {
  border: 0;
  padding: 11px 12px;
  color: #fff;
  background: var(--navy);
}

.quote-review-total span,
.quote-review-total strong {
  color: #fff;
}

.quote-review-total strong {
  font-size: 24px;
}

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

.quote-review-actions .button.primary {
  grid-column: 1 / -1;
}

.quote-review-actions > :only-child {
  grid-column: 1 / -1;
}

.quote-send-overlay {
  place-items: center;
  padding: max(16px, var(--safe-top)) max(14px, var(--safe-right)) max(16px, var(--safe-bottom)) max(14px, var(--safe-left));
  background: rgba(3, 21, 34, 0.58);
}

.quote-send-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(980px, 100%);
  height: min(760px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.quote-send-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.quote-send-head h2,
.quote-send-head p {
  margin: 0;
}

.quote-send-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  margin-top: 14px;
  min-height: 0;
  overflow: hidden;
}

.quote-send-delivery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.quote-send-channels {
  display: inline-flex;
  gap: 7px;
}

.quote-send-channels label {
  position: relative;
  cursor: pointer;
}

.quote-send-channels input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quote-send-channels label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 104px;
  min-height: 36px;
  border: 1px solid var(--surface-line-strong);
  border-radius: 7px;
  padding: 0 10px;
  color: var(--deep);
  background: #fff;
  font-weight: 900;
}

.quote-send-channels input:checked + span {
  border-color: rgba(7, 149, 143, 0.42);
  background: #effbf9;
}

.quote-send-channels input:focus-visible + span {
  outline: 3px solid rgba(17, 199, 189, 0.24);
  outline-offset: 2px;
}

.quote-send-channels label > span > svg {
  width: 17px;
  height: 17px;
}

.quote-send-channel-check {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid var(--surface-line-strong);
  border-radius: 4px;
  color: transparent;
  background: #fff;
}

.quote-send-channel-check svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

.quote-send-channels input:checked + span .quote-send-channel-check {
  border-color: var(--teal-dark);
  color: #fff;
  background: var(--teal-dark);
}

.quote-send-editor-tabs {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  background: #edf3f5;
}

.quote-send-editor-tabs button {
  min-height: 34px;
  border: 0;
  padding: 0 12px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.quote-send-editor-tabs button + button {
  border-left: 1px solid var(--surface-line);
}

.quote-send-editor-tabs button[aria-selected="true"] {
  color: var(--navy);
  background: #fff;
}

.quote-send-editor-tabs button:disabled {
  color: #9cabb3;
  cursor: not-allowed;
}

.quote-send-workspace {
  min-height: 0;
  overflow: hidden;
}

.quote-send-email-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
}

.quote-send-email-layout[hidden],
.quote-send-sms-panel[hidden],
.quote-email-copy-fields[hidden] {
  display: none;
}

.quote-send-editor,
.quote-send-sms-panel {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  padding: 16px;
}

.quote-send-editor,
.quote-send-sms-panel,
.quote-send-attachments {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.quote-send-head .icon-button,
.quote-email-recipient-line .icon-button,
.quote-attachment-row .icon-button {
  border: 1px solid var(--surface-line-strong);
  color: var(--navy);
  background: #fff;
}

.quote-email-recipient-line {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 36px 36px;
  gap: 6px;
  align-items: start;
  min-width: 0;
}

.quote-email-recipient-line > span {
  padding-top: 11px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.quote-email-recipient-line .icon-button {
  width: 36px;
  min-width: 36px;
  height: 40px;
}

.quote-email-copy-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quote-send-recipient-group {
  display: grid;
  gap: 8px;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  padding: 10px;
  background: #f8fbfc;
}

.quote-send-recipient-group[hidden] {
  display: none;
}

.quote-send-recipient-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quote-send-recipient-group > header strong {
  color: var(--deep);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.quote-send-recipient-list {
  display: grid;
  gap: 7px;
}

.quote-send-recipient {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 7px;
  align-items: center;
}

.quote-send-recipient input {
  width: 100%;
  min-width: 0;
  height: 40px;
}

.quote-send-field {
  display: grid;
  gap: 5px;
}

.quote-send-field > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-send-field input,
.quote-send-field textarea {
  width: 100%;
}

.quote-send-message-field textarea {
  min-height: 210px;
  resize: vertical;
  line-height: 1.5;
}

.quote-send-sms-panel {
  height: 100%;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  background: #fff;
}

.quote-send-sms-panel .quote-send-message-field textarea {
  min-height: 130px;
}

.quote-send-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  color: var(--deep);
  font-size: 0.86rem;
  font-weight: 800;
}

.quote-send-copy input,
.quote-attachment-row input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.quote-send-attachments {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border-left: 1px solid var(--surface-line);
  padding: 16px;
  background: #f7fafb;
}

.quote-send-attachments > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.quote-send-attachments > header strong {
  color: var(--deep);
}

.quote-send-attachments > header span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.quote-attachment-drop {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 104px;
  border: 1px dashed var(--surface-line-strong);
  border-radius: 7px;
  padding: 15px;
  color: var(--muted);
  background: #fff;
  cursor: pointer;
}

.quote-attachment-drop.is-dragging {
  border-color: var(--teal);
  background: #ecfbfa;
}

.quote-attachment-drop svg {
  width: 20px;
  height: 20px;
  color: var(--teal-dark);
}

.quote-attachment-drop strong {
  color: var(--deep);
  font-size: 0.86rem;
}

.quote-attachment-drop span {
  font-size: 0.75rem;
}

.quote-attachment-meter {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce5e9;
}

.quote-attachment-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
  transition: width 160ms ease;
}

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

.quote-attachment-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  padding: 9px;
  background: #fff;
}

.quote-attachment-row.is-generated {
  grid-template-columns: 18px 22px minmax(0, 1fr);
}

.quote-attachment-row.is-generated.is-disabled {
  grid-template-columns: 22px minmax(0, 1fr);
  background: #f6f8f9;
  opacity: 0.72;
}

.quote-attachment-row > svg {
  width: 18px;
  height: 18px;
  color: var(--teal-dark);
}

.quote-attachment-row > span {
  display: grid;
  min-width: 0;
}

.quote-attachment-row strong,
.quote-attachment-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-attachment-row strong {
  color: var(--deep);
  font-size: 0.8rem;
}

.quote-attachment-row small {
  color: var(--muted);
  font-size: 0.7rem;
}

.quote-send-note,
.quote-send-form .form-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.quote-send-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quote-send-note svg {
  width: 15px;
  height: 15px;
}

.quote-send-form .form-status:not(:empty) {
  color: #b42348;
}

.quote-send-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.quote-send-actions [data-quote-send-submit] {
  min-width: 132px;
}

@media (max-width: 760px) {
  .quote-send-overlay {
    place-items: end stretch;
    padding: 0;
  }

  .quote-send-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: min(94dvh, 760px);
    max-height: 94dvh;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
  }

  .quote-send-form {
    min-height: 0;
    overflow: hidden;
  }

  .quote-send-delivery-row {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .quote-send-channels,
  .quote-send-editor-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-send-channels label > span {
    width: 100%;
    min-width: 0;
  }

  .quote-send-workspace {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .quote-send-email-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .quote-send-editor,
  .quote-send-sms-panel,
  .quote-send-attachments {
    overflow: visible;
  }

  .quote-send-sms-panel {
    height: auto;
    min-height: 100%;
  }

  .quote-send-attachments {
    border-top: 1px solid var(--surface-line);
    border-left: 0;
  }

  .quote-send-message-field textarea {
    min-height: 170px;
  }

  .quote-email-copy-fields {
    grid-template-columns: 1fr;
  }

  .quote-attachment-drop {
    min-height: 76px;
  }

  .quote-send-actions .button {
    flex: 1 1 50%;
  }
}

@media (max-width: 440px) {
  .quote-email-recipient-line {
    grid-template-columns: 24px minmax(0, 1fr) 34px;
  }

  .quote-email-recipient-line > [data-action="quote-toggle-copy-fields"] {
    grid-column: 3;
    grid-row: 2;
  }
}

.quote-workflow-actions {
  gap: 7px;
}

.quote-process-details {
  overflow: hidden;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  background: #fff;
}

.quote-process-details > summary {
  min-height: 40px;
  padding: 0 11px;
  font-size: 12px;
}

.quote-process-details > div {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--surface-line);
  padding: 10px;
}

.quote-process-details .quote-flow-panel {
  margin: 0;
  border: 0;
  padding: 0;
}

.quote-process-details .quote-sales-handoff {
  border-radius: 7px;
  padding: 10px;
}

.quote-flow-list {
  gap: 6px;
}

.quote-flow-list li,
.quote-flow-list a {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
}

.quote-flow-list li > span,
.quote-flow-list a > span {
  width: 25px;
  height: 25px;
}

.quote-save-message:empty {
  display: none;
}

@media (max-width: 1100px) {
  .quote-workflow-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .quote-line-primary {
    grid-template-columns: 104px minmax(0, 1fr) 82px;
    grid-template-areas:
      "kind name actions"
      "kind amount actions";
  }

  .quote-line-primary [data-line-kind] {
    grid-area: kind;
  }

  .quote-line-primary .quote-line-name {
    grid-area: name;
  }

  .quote-line-primary .quote-line-amount-editor {
    grid-area: amount;
    justify-content: flex-start;
  }

  .quote-line-primary .quote-line-actions {
    grid-area: actions;
  }
}

@media (max-width: 900px) {
  .quote-workflow-layout {
    grid-template-columns: 1fr;
  }

  .quote-workflow-rail {
    position: static;
  }

  .quote-side-panel > .section-body {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
    align-items: start;
  }

  .quote-side-panel .quote-review-panel {
    grid-row: span 2;
  }
}

@media (max-width: 760px) {
  .quote-workflow-form {
    gap: 9px;
  }

  .quote-workflow-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .quote-workflow-header .quote-workflow-title {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    min-height: 58px;
    padding: 8px 6px 8px 10px;
  }

  .quote-workflow-title > .crm-status {
    grid-column: 2;
    justify-self: start;
  }

  .quote-workflow-title h2 {
    font-size: 17px;
  }

  .quote-document-kicker {
    display: none;
  }

  .quote-back-button {
    width: 38px;
    height: 38px;
  }

  .quote-workflow-header > .quote-header-actions {
    display: flex;
    padding: 8px 10px 8px 0;
  }

  .quote-header-actions > .button.primary {
    display: none;
  }

  .quote-more-actions summary {
    width: 40px;
    min-height: 40px;
  }

  .quote-step-card > .quote-step-heading {
    min-height: 40px;
    padding: 8px 11px;
  }

  .quote-step-card > .section-body,
  .quote-builder {
    padding: 11px;
  }

  .quote-setup-grid,
  .quote-notes-workflow {
    grid-template-columns: 1fr;
  }

  .quote-client-search-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-client-search-field {
    grid-column: 1 / -1;
  }

  .quote-client-search-row > .icon-button {
    grid-column: 2;
    grid-row: 2;
  }

  .quote-builder-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .quote-builder-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 1 / -1;
  }

  .quote-builder-actions .button {
    justify-content: center;
    min-width: 0;
    padding: 0 7px;
  }

  .quote-service-catalog-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-line-row {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    gap: 8px;
    padding: 9px;
  }

  .quote-line-primary {
    grid-template-columns: minmax(100px, 1fr) auto;
    grid-template-areas:
      "kind actions"
      "name name"
      "amount amount";
  }

  .quote-line-primary [data-line-kind] {
    grid-area: kind;
  }

  .quote-line-primary .quote-line-name {
    grid-area: name;
  }

  .quote-line-primary .quote-line-actions {
    grid-area: actions;
  }

  .quote-line-primary .quote-line-amount-editor {
    grid-area: amount;
    justify-content: flex-start;
  }

  .quote-line-row .quote-line-description {
    grid-area: auto;
    min-height: 68px;
  }

  .quote-side-panel > .section-body {
    grid-template-columns: 1fr;
  }

  .quote-side-panel .quote-review-panel {
    grid-row: auto;
  }

  .quote-mobile-action-bar {
    position: fixed;
    right: max(10px, var(--safe-right));
    bottom: calc(72px + var(--safe-bottom));
    left: max(10px, var(--safe-left));
    border-radius: 8px;
  }

  .quote-workflow-form {
    padding-bottom: 70px;
  }
}

@media (max-width: 430px) {
  .quote-workflow-title > .crm-status {
    display: none;
  }

  .quote-selected-client {
    grid-template-columns: 42px minmax(0, 1fr) 38px;
  }

  .quote-selected-client .client-avatar.large {
    width: 42px;
    height: 42px;
  }

  .quote-service-catalog-results {
    grid-template-columns: 1fr;
  }

  .quote-line-primary {
    grid-template-columns: minmax(92px, 1fr) 72px;
  }

  .quote-line-actions .icon-button {
    width: 34px;
    height: 34px;
  }

  .quote-line-amount-editor {
    flex-wrap: wrap;
  }
}

/* The shared header owns notification panel placement on desktop and phone. */
.notification-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  width: min(390px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 92px));
  overflow: hidden;
  border: 1px solid rgba(20, 58, 86, 0.14);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 18px 42px rgba(6, 35, 55, 0.2);
}

@media (max-width: 760px) {
  .notification-panel {
    position: fixed;
    top: max(64px, calc(var(--safe-top) + 54px));
    right: max(8px, var(--safe-right));
    left: max(8px, var(--safe-left));
    width: auto;
    max-height: calc(100dvh - max(76px, calc(var(--safe-top) + 66px)) - var(--safe-bottom));
  }
}

.global-settings-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  padding: 0;
}

.global-settings-button svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 760px) {
  body[data-role="technician"] .topbar,
  body[data-role="crew_lead"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-role="technician"] .topbar-actions,
  body[data-role="crew_lead"] .topbar-actions {
    display: flex !important;
    grid-column: auto;
  }

  body[data-role="technician"] .topbar-actions > *:not(.notification-center-wrap),
  body[data-role="crew_lead"] .topbar-actions > *:not(.notification-center-wrap) {
    display: none !important;
  }
}

/* Company Gear */
.company-gear-page > .section-heading .button {
  width: 42px;
  height: 42px;
  padding: 0;
}

.company-gear-page > .section-heading .button svg {
  width: 18px;
  height: 18px;
}

.company-gear-page > .section-body {
  min-height: min(650px, calc(100dvh - 190px));
  padding: 28px;
  background: #f4f8fa;
}

.company-gear-layout {
  display: grid;
  gap: 24px;
  width: min(100%, 1040px);
  margin: 0 auto;
}

.company-gear-quick-layout {
  width: min(100%, 760px);
}

.company-gear-quick-launch {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 150px;
  border: 1px solid #d6e2e9;
  border-top: 4px solid #0b9f97;
  border-radius: 8px;
  padding: 24px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(6, 35, 55, 0.07);
}

.company-gear-quick-launch.is-pending {
  border-top-color: #96a9b5;
  box-shadow: none;
}

.company-gear-quick-launch > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-gear-quick-launch p,
.company-gear-quick-launch h3,
.company-gear-quick-launch span {
  margin: 0;
}

.company-gear-quick-launch p {
  color: #6a7e8e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.company-gear-quick-launch h3 {
  color: #123b58;
  font-size: 24px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.company-gear-quick-launch > div > span {
  color: #617788;
  font-size: 13px;
  font-weight: 750;
}

.company-gear-quick-launch .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.company-gear-quick-launch .button svg {
  width: 16px;
  height: 16px;
}

.company-gear-quick-settings > form {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(170px, 0.6fr) auto auto;
  align-items: end;
  gap: 12px;
  border-top: 1px solid #e1e9ed;
  padding: 18px;
}

.company-gear-quick-settings > form > label:not(.company-gear-switch) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.company-gear-quick-settings > form > label:not(.company-gear-switch) > span {
  color: #6a7e8e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.company-gear-quick-settings input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid #cbd9e1;
  border-radius: 6px;
  padding: 0 12px;
  color: #123b58;
  background: #fff;
}

.company-gear-quick-settings [data-company-gear-quick-store-status] {
  grid-column: 1 / -1;
  color: #b4233f;
  font-size: 12px;
  font-weight: 800;
}

.company-gear-legacy-note,
.company-gear-legacy-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #d6e2e9;
  border-radius: 8px;
  padding: 12px 16px;
  color: #617788;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
}

.company-gear-legacy-note > div,
.company-gear-legacy-banner > div:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.company-gear-legacy-note a {
  color: #123b58;
  font-weight: 900;
}

.company-gear-legacy-banner {
  border-left: 4px solid #96a9b5;
}

.company-gear-legacy-banner.is-live {
  border-left-color: #cb3451;
}

.company-gear-legacy-banner > div:first-child {
  display: grid;
  gap: 2px;
}

.company-gear-legacy-banner span,
.company-gear-legacy-banner small {
  color: #6a7e8e;
}

.company-gear-legacy-banner strong {
  color: #123b58;
  font-size: 16px;
}

.company-gear-store-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.company-gear-store {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 154px;
  border: 1px solid #d6e2e9;
  border-top: 4px solid #173b5a;
  border-radius: 8px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(6, 35, 55, 0.07);
}

.company-gear-store:first-child {
  border-top-color: #0b8f86;
}

.company-gear-store.is-off {
  box-shadow: none;
  opacity: 0.72;
}

.company-gear-store-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  color: #fff;
  background: #173b5a;
}

.company-gear-store:first-child .company-gear-store-icon {
  background: #0b8f86;
}

.company-gear-store-icon svg {
  width: 27px;
  height: 27px;
}

.company-gear-store-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-gear-store-copy > span {
  color: #6a7e8e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.company-gear-store-copy h3,
.company-gear-store-copy p {
  margin: 0;
  overflow-wrap: anywhere;
}

.company-gear-store-copy h3 {
  color: #123b58;
  font-size: 21px;
  line-height: 1.15;
}

.company-gear-store-copy p {
  color: #617788;
  font-size: 13px;
  font-weight: 750;
}

.company-gear-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 94px;
  white-space: nowrap;
}

.company-gear-open svg {
  width: 16px;
  height: 16px;
}

.company-gear-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 180px;
  color: #6c7f8d;
  text-align: center;
}

.company-gear-empty svg {
  width: 28px;
  height: 28px;
}

.company-gear-settings {
  overflow: hidden;
  border: 1px solid #d6e2e9;
  border-radius: 8px;
  background: #fff;
}

.company-gear-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 14px 18px;
  color: #173b5a;
  cursor: pointer;
  list-style: none;
}

.company-gear-settings > summary::-webkit-details-marker {
  display: none;
}

.company-gear-settings > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
}

.company-gear-settings > summary svg {
  width: 18px;
  height: 18px;
}

.company-gear-settings > summary small {
  color: #718493;
  font-size: 11px;
  font-weight: 800;
}

.company-gear-settings[open] > summary {
  border-bottom: 1px solid #dce6eb;
}

.company-gear-settings form {
  display: grid;
  gap: 0;
}

.company-gear-settings-row {
  display: grid;
  grid-template-columns: 130px minmax(150px, 0.65fr) minmax(280px, 1.5fr) 100px;
  align-items: end;
  gap: 14px;
  min-width: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #e3ebef;
  padding: 18px;
}

.company-gear-settings-title {
  grid-column: 1;
  align-self: center;
  color: #173b5a;
  font-size: 13px;
  font-weight: 900;
}

.company-gear-settings-row label:not(.company-gear-toggle) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.company-gear-name-field {
  grid-column: 2;
}

.company-gear-url-field {
  grid-column: 3;
}

.company-gear-settings-row label > span {
  color: #667b8b;
  font-size: 11px;
  font-weight: 850;
}

.company-gear-settings-row input[type="text"],
.company-gear-settings-row input[type="url"],
.company-gear-settings-row input:not([type]) {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid #c9d8e1;
  border-radius: 6px;
  padding: 0 12px;
  color: #163a55;
  background: #fff;
}

.company-gear-toggle {
  grid-column: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid #c9d8e1;
  border-radius: 6px;
  padding: 0 12px;
  color: #173b5a;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.company-gear-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #0b8f86;
}

.company-gear-settings-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-height: 72px;
  padding: 14px 18px;
}

.company-gear-settings-foot > span {
  margin-right: auto;
  color: #c63753;
  font-size: 12px;
  font-weight: 800;
}

.company-gear-admin {
  display: grid;
}

.company-gear-readiness {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px;
  background: #f5f8fa;
}

.company-gear-ready-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid #d8e3e8;
  border-radius: 6px;
  padding: 11px 12px;
  color: #617787;
  background: #fff;
}

.company-gear-ready-item.is-ready {
  color: #08746e;
  border-color: #b8e1dc;
  background: #f0fbf9;
}

.company-gear-ready-item > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.company-gear-ready-item > span,
.company-gear-ready-item strong,
.company-gear-ready-item small {
  display: block;
  min-width: 0;
}

.company-gear-ready-item strong {
  color: #173b5a;
  font-size: 13px;
}

.company-gear-ready-item small {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 750;
}

.company-gear-admin-section {
  border-top: 1px solid #e0e8ec;
}

.company-gear-admin-section > summary,
.company-gear-product > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 13px 18px;
  color: #173b5a;
  cursor: pointer;
  list-style: none;
}

.company-gear-admin-section > summary::-webkit-details-marker,
.company-gear-product > summary::-webkit-details-marker {
  display: none;
}

.company-gear-admin-section > summary > span {
  font-weight: 900;
}

.company-gear-admin-section > summary > small,
.company-gear-product > summary > small {
  color: #708391;
  font-size: 11px;
  font-weight: 800;
}

.company-gear-admin-section[open] > summary {
  border-bottom: 1px solid #e0e8ec;
}

.company-gear-connection-form {
  grid-template-columns: repeat(2, minmax(180px, 1fr)) minmax(130px, 0.55fr) auto;
  align-items: end;
  gap: 12px !important;
  padding: 18px;
}

.company-gear-connection-form label,
.company-gear-shop-form label:not(.company-gear-switch),
.company-gear-product form > label,
.company-gear-product-main > label:not(.company-gear-switch) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.company-gear-connection-form label > span,
.company-gear-shop-form label > span,
.company-gear-product form label > span {
  color: #667b8b;
  font-size: 11px;
  font-weight: 850;
}

.company-gear-connection-form input,
.company-gear-shop-form input:not([type="checkbox"]),
.company-gear-product input:not([type="checkbox"]),
.company-gear-product select,
.company-gear-product textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #c9d8e1;
  border-radius: 6px;
  color: #163a55;
  background: #fff;
}

.company-gear-connection-form input,
.company-gear-shop-form input:not([type="checkbox"]),
.company-gear-product input:not([type="checkbox"]),
.company-gear-product select {
  height: 44px;
  padding: 0 11px;
}

.company-gear-connection-form > span {
  grid-column: 1 / -1;
  min-height: 0;
  color: #c63753;
  font-size: 12px;
  font-weight: 800;
}

.company-gear-shop-form {
  gap: 0 !important;
}

.company-gear-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.company-gear-shop-url {
  grid-column: 1 / -1;
}

.company-gear-discount-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  overflow: hidden;
  border: 1px solid #c9d8e1;
  border-radius: 6px;
  background: #fff;
}

.company-gear-discount-input input {
  border: 0 !important;
  border-radius: 0 !important;
}

.company-gear-discount-input b {
  display: grid;
  place-items: center;
  border-left: 1px solid #d7e2e8;
  color: #667b8b;
}

.company-gear-switches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid #e1e9ed;
  padding: 15px 18px;
  background: #f8fafb;
}

.company-gear-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  border: 1px solid #d7e2e8;
  border-radius: 6px;
  padding: 8px 10px;
  color: #173b5a;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.company-gear-switch input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: #0b8f86;
}

.company-gear-switch span,
.company-gear-switch small {
  display: block;
}

.company-gear-switch small {
  margin-top: 2px;
  color: #8a6b29;
  font-size: 9px;
  line-height: 1.2;
}

.company-gear-switch.compact {
  min-height: 44px;
}

.company-gear-product-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.company-gear-product-tools .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.company-gear-product-tools .button svg {
  width: 16px;
  height: 16px;
}

.company-gear-product-tools > span {
  color: #718492;
  font-size: 11px;
  font-weight: 750;
}

.company-gear-products {
  display: grid;
  border-top: 1px solid #e1e9ed;
}

.company-gear-product + .company-gear-product {
  border-top: 1px solid #e1e9ed;
}

.company-gear-product-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.company-gear-product-title img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  object-fit: cover;
  background: #edf3f5;
}

.company-gear-product-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-gear-product[open] > summary {
  border-bottom: 1px solid #e1e9ed;
  background: #f8fafb;
}

.company-gear-product form {
  gap: 14px !important;
  padding: 16px 18px;
}

.company-gear-product-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.42fr) 120px;
  align-items: end;
  gap: 12px;
}

.company-gear-product textarea {
  min-height: 70px;
  resize: vertical;
  padding: 10px 11px;
}

.company-gear-variant-list {
  display: grid;
  gap: 7px;
}

.company-gear-variant {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(110px, 0.6fr) minmax(110px, 0.6fr) 66px;
  align-items: end;
  gap: 9px;
  border: 1px solid #dce6eb;
  border-radius: 6px;
  padding: 9px;
}

.company-gear-variant > span {
  align-self: center;
  color: #173b5a;
  font-size: 12px;
  font-weight: 850;
}

.company-gear-variant label:not(.company-gear-variant-visible) {
  display: grid;
  gap: 4px;
}

.company-gear-variant label > b {
  color: #6c808f;
  font-size: 9px;
  text-transform: uppercase;
}

.company-gear-variant input:not([type="checkbox"]) {
  height: 38px;
}

.company-gear-variant-visible {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid #d7e2e8;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 850;
}

.company-gear-variant-visible input {
  width: 17px;
  height: 17px;
  accent-color: #0b8f86;
}

.company-gear-product-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.company-gear-product-foot > span {
  margin-right: auto;
  color: #08746e;
  font-size: 11px;
  font-weight: 800;
}

.company-gear-orders {
  display: grid;
  padding: 6px 18px 16px;
}

.company-gear-order {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(110px, auto) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e0e8ec;
  padding: 12px 0;
}

.company-gear-order > div strong,
.company-gear-order > div span {
  display: block;
}

.company-gear-order > div strong,
.company-gear-order > b {
  color: #173b5a;
}

.company-gear-order > div span {
  margin-top: 2px;
  color: #6e8190;
  font-size: 11px;
  font-weight: 750;
}

.company-gear-order-status {
  border-radius: 999px;
  padding: 6px 9px;
  color: #476171;
  background: #edf3f5;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}

.company-gear-empty.compact {
  min-height: 110px;
}

@media (max-width: 820px) {
  .company-gear-page > .section-body {
    min-height: calc(100dvh - 168px);
    padding: 14px;
  }

  .company-gear-store-grid {
    grid-template-columns: 1fr;
  }

  .company-gear-store {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    min-height: 118px;
    padding: 16px;
  }

  .company-gear-store-icon {
    width: 52px;
    height: 52px;
  }

  .company-gear-settings-row {
    grid-template-columns: 1fr;
  }

  .company-gear-settings-title {
    grid-column: 1;
    margin-bottom: 2px;
  }

  .company-gear-name-field,
  .company-gear-url-field,
  .company-gear-toggle {
    grid-column: 1;
  }

  .company-gear-toggle {
    justify-self: start;
  }

  .company-gear-readiness,
  .company-gear-switches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-gear-connection-form {
    grid-template-columns: 1fr;
  }

  .company-gear-connection-form .button {
    width: 100%;
  }

  .company-gear-product-main {
    grid-template-columns: 1fr;
  }

  .company-gear-variant {
    grid-template-columns: minmax(0, 1fr) minmax(100px, 0.55fr) minmax(100px, 0.55fr);
  }

  .company-gear-variant-visible {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0 10px;
  }

  .company-gear-order {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .company-gear-order-status,
  .company-gear-order .button {
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .company-gear-store {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .company-gear-store-icon {
    width: 48px;
    height: 48px;
  }

  .company-gear-store-copy h3 {
    font-size: 18px;
  }

  .company-gear-open {
    grid-column: 1 / -1;
    width: 100%;
  }

  .company-gear-settings > summary small {
    display: none;
  }

  .company-gear-settings-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .company-gear-settings-foot .button {
    width: 100%;
  }

  .company-gear-readiness,
  .company-gear-shop-grid,
  .company-gear-switches,
  .company-gear-product-main,
  .company-gear-variant {
    grid-template-columns: 1fr;
  }

  .company-gear-shop-url {
    grid-column: 1;
  }

  .company-gear-product-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .company-gear-variant-visible {
    grid-column: 1;
  }

  .company-gear-product > summary {
    align-items: flex-start;
  }

  .company-gear-product > summary > small {
    flex: 0 0 auto;
  }
}

/* Company Gear manager */
.company-gear-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #d6e2e9;
  border-radius: 8px;
  background: #fff;
}

.company-gear-tabs a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 54px;
  border-right: 1px solid #e1e9ed;
  color: #637887;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.company-gear-tabs a:last-child {
  border-right: 0;
}

.company-gear-tabs a:hover,
.company-gear-tabs a.is-active {
  color: #123b58;
  background: #edf8f7;
}

.company-gear-tabs a.is-active::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #0b9f97;
  content: "";
}

.company-gear-tabs svg {
  width: 17px;
  height: 17px;
}

.company-gear-tabs b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 5px;
  color: #fff;
  background: #cb3451;
  font-size: 10px;
}

.company-gear-manager-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d6e2e9;
  border-radius: 8px;
  background: #fff;
}

.company-gear-panel-heading,
.company-gear-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.company-gear-panel-heading {
  min-height: 74px;
  border-bottom: 1px solid #e1e9ed;
  padding: 16px 20px;
}

.company-gear-panel-heading h3,
.company-gear-panel-heading p,
.company-gear-subhead h4 {
  margin: 0;
}

.company-gear-panel-heading h3 {
  color: #123b58;
  font-size: 20px;
}

.company-gear-panel-heading p {
  margin-top: 3px;
  color: #708391;
  font-size: 12px;
  font-weight: 750;
}

.company-gear-heading-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.company-gear-heading-actions .button,
.company-gear-panel-heading .button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.company-gear-heading-actions svg,
.company-gear-panel-heading .button svg {
  width: 16px;
  height: 16px;
}

.company-gear-source-note {
  margin: 0;
  border-bottom: 1px solid #e1e9ed;
  padding: 9px 20px;
  color: #5f7483;
  background: #f7fafb;
  font-size: 12px;
  font-weight: 700;
}

.company-gear-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #e1e9ed;
}

.company-gear-metric {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 10px;
  min-width: 0;
  border-right: 1px solid #e1e9ed;
  padding: 18px 20px;
}

.company-gear-metric:last-child {
  border-right: 0;
}

.company-gear-metric svg {
  grid-row: 1 / 3;
  align-self: center;
  width: 22px;
  height: 22px;
  color: #0b8f86;
}

.company-gear-metric span {
  color: #718492;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.company-gear-metric strong {
  min-width: 0;
  color: #123b58;
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.company-gear-metrics.compact .company-gear-metric {
  padding-block: 14px;
}

.company-gear-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.company-gear-overview-section {
  min-width: 0;
  padding: 20px;
}

.company-gear-overview-section + .company-gear-overview-section {
  border-left: 1px solid #e1e9ed;
}

.company-gear-subhead h4 {
  color: #173b5a;
  font-size: 14px;
}

.company-gear-subhead a,
.company-gear-subhead > span {
  color: #0a7d78;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

.company-gear-overview-section .company-gear-readiness {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  background: transparent;
}

.company-gear-orders.compact {
  margin-top: 8px;
  padding: 0;
}

.company-gear-order.is-compact {
  grid-template-columns: minmax(0, 1fr) auto;
}

.company-gear-order.is-compact .company-gear-order-status {
  display: none;
}

.company-gear-product-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 0.32fr) minmax(150px, 0.28fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e1e9ed;
  padding: 12px 20px;
  background: #f7fafb;
}

.company-gear-product-filters label {
  position: relative;
  display: block;
}

.company-gear-product-filters label svg {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  color: #6e8190;
  transform: translateY(-50%);
  pointer-events: none;
}

.company-gear-product-filters input,
.company-gear-product-filters select {
  width: 100%;
  height: 42px;
  border: 1px solid #c9d8e1;
  border-radius: 6px;
  color: #173b5a;
  background: #fff;
}

.company-gear-product-filters input {
  padding: 0 12px 0 39px;
}

.company-gear-product-filters select {
  padding: 0 10px;
}

.company-gear-product-filters > span {
  color: #708391;
  font-size: 10px;
  font-weight: 750;
}

.company-gear-products {
  gap: 10px;
  border-top: 0;
  padding: 14px;
  background: #f4f8fa;
}

.company-gear-product {
  overflow: hidden;
  border: 1px solid #d6e2e9;
  border-radius: 7px;
  background: #fff;
}

.company-gear-product.is-archived {
  border-style: dashed;
  background: #f8fafb;
}

.company-gear-product + .company-gear-product {
  border-top: 1px solid #d6e2e9;
}

.company-gear-product-title > span {
  display: grid;
  min-width: 0;
}

.company-gear-product-title em {
  color: #718493;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.company-gear-product form,
.company-gear-connection-form,
.company-gear-shop-form {
  display: grid;
}

.company-gear-product-media {
  overflow: hidden;
  border: 1px solid #dce6eb;
  border-radius: 6px;
}

.company-gear-product-media > .company-gear-subhead {
  min-height: 50px;
  border-bottom: 1px solid #e1e9ed;
  padding: 9px 12px;
  background: #f8fafb;
}

.company-gear-media-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.company-gear-media-upload {
  position: relative;
  overflow: hidden;
}

.company-gear-media-upload.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.company-gear-media-list {
  display: grid;
}

.company-gear-media-row {
  display: grid;
  grid-template-columns: 66px minmax(110px, 0.35fr) minmax(150px, 1fr) auto 42px;
  align-items: end;
  gap: 10px;
  min-width: 0;
  border-bottom: 1px solid #e6edf0;
  padding: 10px 12px;
}

.company-gear-media-row:last-child {
  border-bottom: 0;
}

.company-gear-media-row > img {
  align-self: center;
  width: 66px;
  height: 66px;
  border-radius: 5px;
  object-fit: cover;
  background: #edf3f5;
}

.company-gear-media-row > label:not(.company-gear-media-primary) {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.company-gear-media-row label > span {
  color: #6b7f8e;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.company-gear-media-row input:not([type="radio"]),
.company-gear-media-row select {
  width: 100%;
  height: 38px;
  min-width: 0;
  border: 1px solid #c9d8e1;
  border-radius: 6px;
  padding: 0 9px;
  color: #173b5a;
  background: #fff;
}

.company-gear-media-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  color: #173b5a;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.company-gear-media-primary input {
  width: 17px;
  height: 17px;
  accent-color: #0b8f86;
}

.company-gear-media-empty {
  padding: 20px;
  color: #718492;
  font-size: 12px;
  text-align: center;
}

.company-gear-provider-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 7px;
  min-height: 38px;
  border: 1px solid #d7e2e8;
  border-radius: 6px;
  padding: 5px 9px;
  background: #f8fafb;
}

.company-gear-provider-price b {
  grid-column: 1 / -1;
  color: #6c808f;
  font-size: 9px;
  text-transform: uppercase;
}

.company-gear-provider-price strong {
  color: #173b5a;
  font-size: 13px;
}

.company-gear-provider-price svg {
  width: 14px;
  height: 14px;
  color: #7c8d98;
}

.company-gear-category-add {
  display: grid;
  grid-template-columns: minmax(220px, 420px) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  border-bottom: 1px solid #e1e9ed;
  padding: 16px 20px;
}

.company-gear-category-add label,
.company-gear-category-row > label:not(.company-gear-switch) {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.company-gear-category-add label > span,
.company-gear-category-row label > span {
  color: #6b7f8e;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.company-gear-category-add input,
.company-gear-category-row input:not([type="checkbox"]) {
  width: 100%;
  height: 42px;
  min-width: 0;
  border: 1px solid #c9d8e1;
  border-radius: 6px;
  padding: 0 11px;
  color: #173b5a;
  background: #fff;
}

.company-gear-category-add > span,
.company-gear-category-row > span[data-category-status] {
  color: #b52d49;
  font-size: 11px;
  font-weight: 750;
}

.company-gear-category-list {
  display: grid;
}

.company-gear-category-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 90px 110px 100px 42px 42px;
  align-items: end;
  gap: 10px;
  border-bottom: 1px solid #e1e9ed;
  padding: 12px 20px;
}

.company-gear-category-row:last-child {
  border-bottom: 0;
}

.company-gear-category-count {
  align-self: center;
  color: #708391;
  font-size: 11px;
  font-weight: 750;
}

.company-gear-category-row .icon-button {
  width: 42px;
  height: 42px;
}

.company-gear-category-row > span[data-category-status] {
  grid-column: 1 / -1;
}

.company-gear-orders-page {
  padding: 4px 20px 20px;
}

.company-gear-orders-page .company-gear-order {
  min-height: 68px;
}

.company-gear-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.company-gear-settings-section {
  min-width: 0;
  padding: 20px;
}

.company-gear-settings-section + .company-gear-settings-section {
  border-left: 1px solid #e1e9ed;
}

.company-gear-settings-section > .company-gear-subhead {
  margin-bottom: 14px;
}

.company-gear-settings-section .company-gear-connection-form {
  grid-template-columns: 1fr;
  padding: 0;
}

.company-gear-settings-section .company-gear-shop-grid,
.company-gear-settings-section .company-gear-switches,
.company-gear-settings-section .company-gear-settings-foot {
  padding-inline: 0;
}

.company-gear-settings-section .company-gear-shop-grid {
  grid-template-columns: 1fr;
  padding-top: 0;
}

.company-gear-settings-section .company-gear-switches {
  grid-template-columns: 1fr;
}

.company-gear-settings-section .company-gear-shop-url {
  grid-column: 1;
}

@media (max-width: 900px) {
  .company-gear-overview-grid,
  .company-gear-settings-grid {
    grid-template-columns: 1fr;
  }

  .company-gear-overview-section + .company-gear-overview-section,
  .company-gear-settings-section + .company-gear-settings-section {
    border-top: 1px solid #e1e9ed;
    border-left: 0;
  }

  .company-gear-media-row {
    grid-template-columns: 60px minmax(100px, 0.4fr) minmax(130px, 1fr) auto 42px;
  }
}

@media (max-width: 700px) {
  .company-gear-page > .section-body {
    padding: 10px;
  }

  .company-gear-layout {
    gap: 10px;
  }

  .company-gear-quick-launch {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;
    min-height: 0;
    padding: 18px;
  }

  .company-gear-quick-launch .company-gear-store-icon {
    width: 52px;
    height: 52px;
  }

  .company-gear-quick-launch h3 {
    font-size: 20px;
  }

  .company-gear-quick-launch > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .company-gear-quick-settings > form {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .company-gear-legacy-note,
  .company-gear-legacy-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .company-gear-legacy-note > div,
  .company-gear-legacy-banner > div:last-child {
    justify-content: space-between;
  }

  .company-gear-tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .company-gear-tabs::-webkit-scrollbar {
    display: none;
  }

  .company-gear-tabs a {
    flex: 0 0 auto;
    min-width: 104px;
    padding: 0 12px;
  }

  .company-gear-panel-heading {
    min-height: 66px;
    padding: 13px 14px;
  }

  .company-gear-panel-heading h3 {
    font-size: 18px;
  }

  .company-gear-panel-heading p {
    white-space: normal;
  }

  .company-gear-source-note {
    padding: 9px 14px;
  }

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

  .company-gear-metric:nth-child(2) {
    border-right: 0;
  }

  .company-gear-metric:nth-child(-n + 2) {
    border-bottom: 1px solid #e1e9ed;
  }

  .company-gear-metric {
    padding: 13px 14px;
  }

  .company-gear-metric strong {
    font-size: 19px;
  }

  .company-gear-overview-section,
  .company-gear-settings-section {
    padding: 14px;
  }

  .company-gear-product-filters {
    grid-template-columns: 1fr;
    padding: 10px 14px;
  }

  .company-gear-product-filters > span {
    display: none;
  }

  .company-gear-products {
    padding: 8px;
  }

  .company-gear-product form {
    padding: 12px;
  }

  .company-gear-product-media > .company-gear-subhead {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-gear-media-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .company-gear-media-row {
    grid-template-columns: 56px minmax(0, 1fr) 42px;
    align-items: center;
  }

  .company-gear-media-row > img {
    width: 56px;
    height: 56px;
  }

  .company-gear-media-row > label:not(.company-gear-media-primary) {
    grid-column: 2;
  }

  .company-gear-media-row .company-gear-media-label {
    grid-column: 1 / 3 !important;
  }

  .company-gear-media-primary {
    grid-column: 1 / 3;
  }

  .company-gear-media-row .icon-button {
    grid-column: 3;
    grid-row: 1;
  }

  .company-gear-category-add {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px;
  }

  .company-gear-category-add > span {
    grid-column: 1 / -1;
  }

  .company-gear-category-row {
    grid-template-columns: minmax(0, 1fr) 80px 42px 42px;
    padding: 12px 14px;
  }

  .company-gear-category-row .company-gear-switch,
  .company-gear-category-count {
    grid-column: span 2;
  }

  .company-gear-orders-page {
    padding: 2px 14px 14px;
  }
}

@media (max-width: 460px) {
  .company-gear-panel-heading {
    align-items: flex-start;
  }

  .company-gear-panel-heading > .button span,
  .company-gear-heading-actions .button span {
    display: none;
  }

  .company-gear-heading-actions .button,
  .company-gear-panel-heading > .button {
    width: 42px;
    min-width: 42px;
    padding: 0;
  }

  .company-gear-category-row {
    grid-template-columns: minmax(0, 1fr) 42px 42px;
  }

  .company-gear-category-order {
    grid-column: 1;
  }

  .company-gear-category-row .company-gear-switch,
  .company-gear-category-count {
    grid-column: 1 / -1;
  }
}

/* Company Gear keeps Printful as the product source and KNHQ focused on merchandising. */
.company-gear-source-note {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
}

.company-gear-source-note > span:not(.company-gear-auto-status) {
  min-width: 0;
}

.company-gear-source-note > small {
  margin-left: auto;
  color: #708391;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.company-gear-auto-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 900;
}

.company-gear-auto-status svg {
  width: 14px;
  height: 14px;
}

.company-gear-auto-status.is-ready {
  color: #08675f;
  background: #dff5f1;
}

.company-gear-auto-status.is-watch {
  color: #795913;
  background: #fff3d5;
}

.company-gear-product-filters {
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 0.32fr) minmax(150px, 0.28fr);
}

.company-gear-products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.company-gear-product + .company-gear-product {
  border-top: 1px solid #d6e2e9;
}

.company-gear-product > summary {
  min-height: 78px;
  padding: 10px 13px;
}

.company-gear-product-title img {
  width: 56px;
  height: 56px;
}

.company-gear-product-title em {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-gear-product form {
  gap: 12px !important;
  padding: 13px;
}

.company-gear-product-identity {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.company-gear-product-identity > img {
  display: block;
  width: 100px;
  height: 112px;
  border-radius: 6px;
  object-fit: cover;
  background: #edf3f5;
}

.company-gear-product-identity > div {
  min-width: 0;
}

.company-gear-product-identity strong,
.company-gear-product-identity span {
  display: block;
}

.company-gear-product-identity strong {
  color: #173b5a;
  font-size: 15px;
}

.company-gear-product-identity span {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: #708391;
  font-size: 11px;
  font-weight: 700;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.company-gear-product-controls {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 120px;
  align-items: end;
  gap: 10px;
}

.company-gear-product-controls > label:not(.company-gear-switch) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.company-gear-product-controls > label > span {
  color: #667b8b;
  font-size: 11px;
  font-weight: 850;
}

.company-gear-product-controls select {
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0 11px;
  border: 1px solid #c9d8e1;
  border-radius: 6px;
  color: #163a55;
  background: #fff;
}

.company-gear-product-foot {
  padding-top: 2px;
  border-top: 1px solid #e1e9ed;
}

.company-gear-product-foot .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.company-gear-product-foot .button svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 1050px) {
  .company-gear-products {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .company-gear-source-note {
    align-items: flex-start;
    flex-wrap: wrap;
    padding-inline: 14px;
  }

  .company-gear-source-note > small {
    width: 100%;
    margin-left: 0;
    white-space: normal;
  }

  .company-gear-product-filters {
    grid-template-columns: 1fr;
  }

  .company-gear-product-identity {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .company-gear-product-identity > img {
    width: 82px;
    height: 92px;
  }

  .company-gear-product-controls {
    grid-template-columns: 1fr;
  }

  .company-gear-product-controls .company-gear-switch {
    width: 100%;
  }
}

/* Finance */
.finance-view {
  --finance-navy: #143f5c;
  --finance-teal: #0c9b91;
  --finance-mint: #e4f7f3;
  --finance-ink: #193a50;
  --finance-muted: #6a7d8a;
  --finance-line: #d7e2e8;
  --finance-warm: #f5a524;
}

.finance-heading {
  align-items: end;
}

.finance-heading > div:first-child {
  min-width: 0;
}

.finance-heading .eyebrow,
.finance-panel .eyebrow,
.finance-review-head .eyebrow,
.finance-accounts-head .eyebrow,
.finance-close .eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #678093;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.finance-heading-actions {
  display: flex;
  align-items: end;
  gap: 8px;
}

.finance-heading-actions .button {
  min-height: 44px;
  gap: 7px;
}

.finance-heading-actions .secondary-icon-button {
  color: var(--finance-ink);
  border: 1px solid var(--finance-line);
  background: #fff;
}

.finance-heading-actions .button svg,
.finance-heading-actions .secondary-icon-button svg,
.finance-bank-actions svg,
.finance-bank-panel header .button svg {
  width: 16px;
  height: 16px;
}

.finance-month-control {
  display: grid;
  gap: 4px;
}

.finance-month-control > span {
  color: #667d8c;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.finance-month-control input {
  width: 158px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid #cbd9e1;
  border-radius: 6px;
  color: var(--finance-ink);
  background: #fff;
  font: inherit;
  font-weight: 800;
}

.finance-body {
  display: grid;
  gap: 16px;
}

.finance-tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-bottom: 1px solid var(--finance-line);
  scrollbar-width: none;
}

.finance-tabs::-webkit-scrollbar {
  display: none;
}

.finance-tabs a {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 44px;
  padding: 0 15px;
  color: #617686;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.finance-tabs a::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  content: "";
}

.finance-tabs a.is-active {
  color: var(--finance-navy);
}

.finance-tabs a.is-active::after {
  background: var(--finance-teal);
}

.finance-tabs a > span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 7px;
  padding: 0 5px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #d63e60;
  font-size: 10px;
}

.finance-workspace {
  min-width: 0;
}

.finance-weekly-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.finance-weekly-head,
.finance-weekly-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.finance-weekly-head > div:first-child,
.finance-weekly-section > header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.finance-weekly-head h3,
.finance-weekly-section h3 {
  margin: 0;
  color: var(--finance-ink);
  line-height: 1.1;
}

.finance-weekly-head h3 {
  font-size: 22px;
}

.finance-weekly-section h3 {
  font-size: 17px;
}

.finance-weekly-nav {
  display: flex;
  align-items: center;
  gap: 7px;
}

.finance-weekly-nav .button svg {
  width: 15px;
  height: 15px;
}

.finance-week-nav-button {
  border: 1px solid var(--finance-line);
  color: var(--finance-ink);
  background: #fff;
}

.finance-week-nav-button:hover {
  color: var(--finance-navy);
  background: var(--finance-mint);
}

.finance-weekly-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background: #fff;
}

.finance-weekly-metric {
  display: grid;
  min-width: 0;
  min-height: 110px;
  align-content: space-between;
  gap: 9px;
  padding: 15px;
  border-right: 1px solid var(--finance-line);
}

.finance-weekly-metric:last-child {
  border-right: 0;
}

.finance-weekly-metric > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--finance-muted);
  font-size: 11px;
  font-weight: 850;
}

.finance-weekly-metric > span svg {
  width: 16px;
  height: 16px;
}

.finance-weekly-metric > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--finance-ink);
  font-size: 24px;
  line-height: 1;
}

.finance-weekly-metric.is-profit > strong,
.finance-weekly-metric.is-profit > span svg {
  color: #0f8f66;
}

.finance-weekly-metric.is-negative > strong,
.finance-weekly-metric.is-negative > span svg {
  color: #b42d4b;
}

.finance-weekly-metric > small,
.finance-weekly-rates small,
.finance-feed-row small,
.finance-weekly-actions small,
.finance-weekly-footnote {
  color: var(--finance-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.finance-weekly-rates {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.finance-weekly-rates article {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 11px 12px;
  border-left: 3px solid #9fb2bd;
  background: #f6f9fa;
}

.finance-weekly-rates article.is-ready {
  border-left-color: #17a878;
  background: #f0fbf7;
}

.finance-weekly-rates article.is-watch {
  border-left-color: #d88b1f;
  background: #fff8ec;
}

.finance-weekly-rates span {
  color: var(--finance-muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.finance-weekly-rates strong {
  color: var(--finance-ink);
  font-size: 18px;
  line-height: 1;
}

.finance-weekly-lower {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  padding-top: 4px;
}

.finance-weekly-section {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border-top: 1px solid var(--finance-line);
  padding-top: 14px;
}

.finance-feed-summary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 14px;
  color: #8d5d13;
  background: #fff4d9;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.finance-feed-summary.is-ready {
  color: #0c7452;
  background: #e8f8f2;
}

.finance-feed-list,
.finance-weekly-actions {
  display: grid;
  gap: 7px;
}

.finance-feed-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid #edf2f4;
}

.finance-feed-row:last-child {
  border-bottom: 0;
}

.finance-feed-row > svg {
  width: 18px;
  height: 18px;
  color: #8a9ba5;
}

.finance-feed-row.is-ready > svg {
  color: #13956b;
}

.finance-feed-row.is-review > svg,
.finance-feed-row.is-setup > svg {
  color: #c47815;
}

.finance-feed-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.finance-feed-row strong {
  color: var(--finance-ink);
  font-size: 13px;
}

.finance-weekly-actions > a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 2px 10px;
  min-width: 0;
  border-left: 3px solid #a7b6bf;
  padding: 9px 10px;
  color: inherit;
  background: #f6f9fa;
  text-decoration: none;
}

.finance-weekly-actions > a.is-urgent {
  border-left-color: #d63e60;
  background: #fff2f5;
}

.finance-weekly-actions > a > span {
  grid-row: 1 / 3;
  color: var(--finance-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.finance-weekly-actions strong {
  min-width: 0;
  color: var(--finance-ink);
  font-size: 13px;
}

.finance-weekly-clear {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  color: #0c7452;
  font-weight: 800;
}

.finance-weekly-clear svg {
  width: 20px;
  height: 20px;
}

.finance-weekly-footnote {
  margin: 0;
  border-top: 1px solid var(--finance-line);
  padding-top: 10px;
}

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

.finance-summary-card {
  display: grid;
  min-width: 0;
  min-height: 114px;
  align-content: space-between;
  gap: 18px;
  padding: 17px 18px;
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background: #fff;
}

.finance-summary-card > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--finance-muted);
  font-size: 12px;
  font-weight: 850;
}

.finance-summary-card > span svg {
  width: 17px;
  height: 17px;
}

.finance-summary-card > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--finance-ink);
  font-size: 28px;
  line-height: 1;
}

.finance-summary-card.is-income > span svg,
.finance-summary-card.is-profit > span svg {
  color: var(--finance-teal);
}

.finance-summary-card.is-expense > span svg {
  color: #b36a13;
}

.finance-summary-card.is-negative > strong,
.finance-summary-card.is-negative > span svg {
  color: #b42d4b;
}

.finance-detail-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 10px;
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background: #f8fbfc;
}

.finance-detail-strip > span,
.finance-detail-strip > a {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 13px 16px;
  border-right: 1px solid var(--finance-line);
  color: inherit;
  text-decoration: none;
}

.finance-detail-strip > :last-child {
  border-right: 0;
}

.finance-detail-strip small {
  color: var(--finance-muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.finance-detail-strip strong {
  overflow-wrap: anywhere;
  color: var(--finance-ink);
  font-size: 15px;
}

.finance-detail-strip a:hover {
  background: var(--finance-mint);
}

.finance-division-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  padding: 11px 14px;
  background: #fff;
}

.finance-division-strip > strong {
  color: var(--finance-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.finance-division-strip > div {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  min-width: 0;
}

.finance-division-row {
  display: grid;
  grid-template-columns: 8px auto auto;
  gap: 3px 7px;
  align-items: center;
  min-width: 0;
}

.finance-division-row > i {
  grid-row: 1 / 3;
  width: 8px;
  height: 28px;
  border-radius: 2px;
  background: var(--finance-teal);
}

.finance-division-row.is-christmas_lights > i {
  background: #c9344c;
}

.finance-division-row.is-unassigned > i {
  background: #8b99a2;
}

.finance-division-row > b,
.finance-division-row > strong,
.finance-division-row > small {
  min-width: 0;
  line-height: 1.1;
  white-space: nowrap;
}

.finance-division-row > b {
  color: var(--finance-ink);
  font-size: 12px;
}

.finance-division-row > strong {
  color: var(--finance-ink);
  font-size: 14px;
}

.finance-division-row > small {
  grid-column: 2 / 4;
  color: var(--finance-muted);
  font-size: 10px;
}

.finance-inline-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 4px solid var(--finance-warm);
  border-radius: 4px;
  color: var(--finance-ink);
  background: #fff8e9;
}

.finance-inline-notice > svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

.finance-inline-notice > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.finance-inline-notice strong,
.finance-inline-notice span {
  overflow-wrap: anywhere;
}

.finance-inline-notice span {
  color: #6d7780;
  font-size: 12px;
}

.finance-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  gap: 14px;
  margin-top: 14px;
}

.finance-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background: #fff;
}

.finance-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.finance-panel h3,
.finance-review-head h3,
.finance-accounts-head h3,
.finance-close h3 {
  margin: 0;
  color: var(--finance-ink);
  font-size: 19px;
  line-height: 1.2;
}

.finance-pl-panel {
  grid-row: span 2;
}

.finance-pl-section + .finance-pl-section {
  margin-top: 20px;
}

.finance-pl-section h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e2eaee;
  color: #557080;
  font-size: 11px;
  text-transform: uppercase;
}

.finance-pl-section h4 strong {
  color: var(--finance-ink);
  font-size: 13px;
}

.finance-pl-row,
.finance-pl-total,
.finance-entry-row,
.finance-bank-row {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.finance-pl-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 0;
  color: #506878;
  font-size: 13px;
}

.finance-pl-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.finance-pl-row strong {
  color: var(--finance-ink);
}

.finance-pl-total {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 18px;
  padding: 14px 0 0;
  border-top: 2px solid var(--finance-navy);
  color: var(--finance-ink);
  font-size: 16px;
  font-weight: 900;
}

.finance-panel-empty {
  margin: 12px 0;
  color: #758793;
  font-size: 13px;
}

.finance-bank-list,
.finance-entry-list {
  display: grid;
}

.finance-bank-row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  padding: 11px 0;
  border-top: 1px solid #e3ebef;
}

.finance-bank-row:first-child,
.finance-entry-row:first-child {
  border-top: 0;
}

.finance-bank-row > span:nth-child(2),
.finance-entry-row > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.finance-bank-row strong,
.finance-bank-row small,
.finance-entry-row strong,
.finance-entry-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.finance-bank-row small,
.finance-entry-row small {
  color: var(--finance-muted);
  font-size: 11px;
}

.finance-row-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  color: var(--finance-navy);
  background: #e9f0f4;
}

.finance-row-icon svg {
  width: 17px;
  height: 17px;
}

.finance-bank-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e3ebef;
}

.finance-entry-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px 0;
  border-top: 1px solid #e3ebef;
}

.finance-entry-row > strong {
  color: var(--finance-ink);
}

.finance-review-head,
.finance-accounts-head,
.finance-close > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.finance-review-head > strong,
.finance-accounts-head > span {
  color: var(--finance-muted);
  font-size: 13px;
}

.finance-review-list {
  display: grid;
  gap: 9px;
}

.finance-review-row {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background: #fff;
}

.finance-review-primary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.finance-review-primary > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.finance-review-primary strong,
.finance-review-primary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.finance-review-primary small {
  color: var(--finance-muted);
  font-size: 11px;
}

.finance-review-primary > strong {
  font-size: 16px;
}

.finance-review-primary > strong.is-outflow {
  color: #9a5412;
}

.finance-review-primary > strong.is-inflow {
  color: #08796f;
}

.finance-row-icon.is-outflow {
  color: #99530f;
  background: #fff1db;
}

.finance-row-icon.is-inflow {
  color: #08796f;
  background: var(--finance-mint);
}

.finance-review-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e4ecef;
}

.finance-review-actions form {
  display: grid;
  flex: 1 1 360px;
  grid-template-columns: minmax(170px, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.finance-review-actions select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 34px 0 11px;
  border: 1px solid #cbd9e1;
  border-radius: 5px;
  color: var(--finance-ink);
  background: #fff;
  font: inherit;
  font-size: 13px;
}

.finance-match-suggestion {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 5px;
  background: var(--finance-mint);
}

.finance-match-suggestion > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.finance-match-suggestion small {
  color: #58756f;
  font-size: 10px;
}

.finance-review-actions .danger-subtle {
  flex: 0 0 auto;
  color: #a7334b;
}

.finance-review-complete {
  display: grid;
  min-height: 250px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--finance-muted);
  text-align: center;
}

.finance-review-complete svg {
  width: 34px;
  height: 34px;
  color: var(--finance-teal);
}

.finance-review-complete strong {
  color: var(--finance-ink);
  font-size: 18px;
}

.finance-account-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.finance-account-group {
  min-width: 0;
  border-top: 3px solid var(--finance-navy);
  background: #fff;
}

.finance-account-group h4 {
  margin: 0;
  padding: 13px 14px 9px;
  color: var(--finance-ink);
  font-size: 14px;
}

.finance-account-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 14px;
  border-top: 1px solid #e2eaee;
}

.finance-account-row code {
  color: #718391;
  font-family: inherit;
  font-size: 11px;
  font-weight: 850;
}

.finance-account-row > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.finance-account-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--finance-ink);
  font-size: 13px;
}

.finance-account-row small {
  color: var(--finance-muted);
  font-size: 9px;
  text-transform: uppercase;
}

.finance-account-row em {
  color: #5d746e;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.finance-close {
  max-width: 680px;
  padding: 20px;
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background: #fff;
}

.finance-period-status {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  padding: 0 10px;
  border-radius: 15px;
  color: #6c4d0c;
  background: #fff0ce;
  font-size: 11px;
  font-weight: 900;
}

.finance-period-status.is-closed {
  color: #0b6a62;
  background: var(--finance-mint);
}

.finance-close-checks {
  border-top: 1px solid #e1e9ed;
}

.finance-close-checks > div {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid #e1e9ed;
}

.finance-close-checks svg {
  width: 19px;
  height: 19px;
}

.finance-close-checks .is-ready svg {
  color: var(--finance-teal);
}

.finance-close-checks .is-open svg {
  color: #c17719;
}

.finance-close-checks span {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.finance-close-checks strong,
.finance-close-checks small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.finance-close-checks small {
  color: var(--finance-muted);
}

.finance-close-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0;
  border: 1px solid #dbe5ea;
  border-radius: 8px;
  overflow: hidden;
}

.finance-close-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
}

.finance-close-summary > div + div {
  border-left: 1px solid #dbe5ea;
}

.finance-close-summary span {
  color: var(--finance-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.finance-close-summary strong {
  min-width: 0;
  color: var(--finance-ink);
  font-size: 18px;
  overflow-wrap: anywhere;
}

.finance-close-action {
  width: 100%;
  min-height: 48px;
}

.finance-close > p {
  margin: 11px 0 0;
  color: var(--finance-muted);
  font-size: 11px;
  text-align: center;
}

.payroll-page {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.payroll-period-bar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.payroll-period-bar > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.payroll-period-bar span,
.payroll-period-bar small {
  color: var(--finance-muted);
  font-size: 10px;
  font-weight: 800;
}

.payroll-period-bar span {
  text-transform: uppercase;
}

.payroll-period-bar strong {
  color: var(--finance-ink);
  font-size: 16px;
}

.payroll-period-bar .icon-button {
  border: 1px solid var(--finance-line);
  background: #fff;
}

.payroll-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background: #fff;
}

.payroll-summary article {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 14px 16px;
}

.payroll-summary article + article {
  border-left: 1px solid var(--finance-line);
}

.payroll-summary span {
  color: var(--finance-muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.payroll-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--finance-ink);
  font-size: 19px;
}

.payroll-status {
  color: #9a6510 !important;
}

.payroll-status.is-ready,
.payroll-status.is-approved,
.payroll-status.is-exported,
.payroll-status.is-processed {
  color: #08766d !important;
}

.payroll-next {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 14px 16px;
  border-left: 4px solid var(--finance-navy);
  border-radius: 5px;
  color: var(--finance-ink);
  background: #eef4f7;
}

.payroll-next.is-attention {
  border-left-color: var(--finance-warm);
  background: #fff8e9;
}

.payroll-next.is-ready,
.payroll-next.is-complete {
  border-left-color: var(--finance-teal);
  background: var(--finance-mint);
}

.payroll-next-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: var(--finance-navy);
}

.payroll-next.is-attention .payroll-next-icon {
  color: #79530d;
  background: #ffe5ae;
}

.payroll-next.is-ready .payroll-next-icon,
.payroll-next.is-complete .payroll-next-icon {
  background: var(--finance-teal);
}

.payroll-next-icon svg {
  width: 21px;
  height: 21px;
}

.payroll-next > div:not(.payroll-next-actions) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.payroll-next > div > span {
  color: var(--finance-muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.payroll-next h3,
.payroll-next p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.payroll-next h3 {
  font-size: 17px;
}

.payroll-next p {
  color: #607785;
  font-size: 11px;
}

.payroll-next-actions,
.payroll-provider-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.payroll-section,
.payroll-completion,
.payroll-settings,
.payroll-history {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--finance-line);
  border-radius: 6px;
  background: #fff;
}

.payroll-section-head {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--finance-line);
}

.payroll-section-head > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.payroll-section-head span,
.payroll-section-head small {
  color: var(--finance-muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.payroll-section-head h3 {
  margin: 0;
  color: var(--finance-ink);
  font-size: 17px;
}

.payroll-section-head > strong {
  color: #8c641a;
  font-size: 11px;
}

.payroll-section-head > strong.is-connected {
  color: #08766d;
}

.payroll-employee-list {
  display: grid;
  min-width: 0;
}

.payroll-employee-row {
  min-width: 0;
  border-top: 1px solid #e4ebef;
}

.payroll-employee-row:first-child {
  border-top: 0;
}

.payroll-employee-row.is-locked {
  display: grid;
  grid-template-columns: 38px minmax(160px, 1fr) repeat(3, minmax(90px, 120px));
  align-items: center;
  gap: 11px;
  padding: 11px 15px;
}

.payroll-employee-row.is-editable {
  display: grid;
  grid-template-columns: 38px minmax(150px, 1fr) 100px 110px auto minmax(130px, 170px) 40px;
  align-items: end;
  gap: 9px;
  padding: 11px 15px;
}

.payroll-employee-avatar {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 6px;
  color: var(--finance-navy);
  background: var(--finance-mint);
  font-size: 11px;
  font-weight: 900;
}

.payroll-employee-name {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.payroll-employee-name strong,
.payroll-employee-name small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-employee-name strong {
  color: var(--finance-ink);
  font-size: 13px;
}

.payroll-employee-name small {
  color: var(--finance-muted);
  font-size: 10px;
}

.payroll-employee-row.is-locked > span:not(.payroll-employee-avatar, .payroll-employee-name) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.payroll-employee-row.is-locked small,
.payroll-employee-row.is-editable label > span,
.payroll-completion label > span,
.payroll-settings label > span {
  color: var(--finance-muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.payroll-employee-row.is-locked > span > strong {
  color: var(--finance-ink);
  font-size: 13px;
}

.payroll-employee-row.is-editable label,
.payroll-completion label,
.payroll-settings label {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.payroll-employee-row.is-editable input:not([type="checkbox"]),
.payroll-employee-row.is-editable select,
.payroll-completion input,
.payroll-settings input,
.payroll-settings select {
  width: 100%;
  height: 38px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid #cbd9e1;
  border-radius: 5px;
  color: var(--finance-ink);
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.payroll-overtime-toggle {
  display: flex !important;
  min-height: 38px;
  align-items: center;
  gap: 6px !important;
  padding: 0 8px;
  border: 1px solid #cbd9e1;
  border-radius: 5px;
  cursor: pointer;
}

.payroll-overtime-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--finance-teal);
}

.payroll-overtime-toggle span {
  color: var(--finance-ink) !important;
  font-size: 10px !important;
  text-transform: none !important;
}

.payroll-employee-row.is-editable > .icon-button {
  width: 40px;
  height: 38px;
  border: 1px solid var(--finance-line);
  color: #fff;
  background: var(--finance-navy);
}

.payroll-completion > summary,
.payroll-settings > summary,
.payroll-history > summary {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 15px;
  color: var(--finance-ink);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.payroll-completion > summary::-webkit-details-marker,
.payroll-settings > summary::-webkit-details-marker,
.payroll-history > summary::-webkit-details-marker {
  display: none;
}

.payroll-completion[open] > summary,
.payroll-settings[open] > summary,
.payroll-history[open] > summary {
  border-bottom: 1px solid var(--finance-line);
}

.payroll-settings > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.payroll-settings > summary svg {
  width: 16px;
  height: 16px;
}

.payroll-completion form,
.payroll-settings form {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  align-items: end;
  gap: 10px;
  padding: 14px 15px;
}

.payroll-completion-reference {
  grid-column: span 2;
}

.payroll-completion form > .button,
.payroll-settings form > .button {
  min-height: 38px;
}

.payroll-settings form {
  grid-template-columns: repeat(3, minmax(130px, 1fr));
}

.payroll-provider-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
}

.payroll-provider-mark {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: #2ca01c;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.payroll-provider-row > div:not(.payroll-provider-actions) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.payroll-provider-row strong,
.payroll-provider-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.payroll-provider-row strong {
  color: var(--finance-ink);
  font-size: 13px;
}

.payroll-provider-row small {
  color: var(--finance-muted);
  font-size: 10px;
}

.payroll-provider-error {
  margin: 0;
  padding: 9px 15px;
  border-top: 1px solid #f0d4d8;
  color: #9c2942;
  background: #fff2f4;
  font-size: 11px;
}

.payroll-history > div {
  display: grid;
}

.payroll-history a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 15px;
  border-top: 1px solid #e5ecef;
  color: inherit;
  text-decoration: none;
}

.payroll-history a:first-child {
  border-top: 0;
}

.payroll-history a > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.payroll-history a strong,
.payroll-history a small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.payroll-history a strong {
  color: var(--finance-ink);
  font-size: 12px;
}

.payroll-history a small {
  color: var(--finance-muted);
  font-size: 10px;
}

.payroll-history a svg {
  width: 16px;
  height: 16px;
  color: var(--finance-muted);
}

@media (max-width: 980px) {
  .finance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-overview-grid {
    grid-template-columns: 1fr;
  }

  .finance-pl-panel {
    grid-row: auto;
  }

  .payroll-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .payroll-summary article:nth-child(4) {
    border-left: 0;
  }

  .payroll-summary article:nth-child(n + 4) {
    border-top: 1px solid var(--finance-line);
  }

  .payroll-employee-row.is-editable {
    grid-template-columns: 38px minmax(150px, 1fr) repeat(2, minmax(100px, 120px)) auto 40px;
  }

  .payroll-provider-employee {
    grid-column: 2 / -2;
  }

  .payroll-completion form {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 720px) {
  .finance-heading {
    align-items: stretch;
  }

  .finance-heading-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    width: 100%;
  }

  .finance-month-control input {
    width: 100%;
  }

  .finance-heading-actions .button {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .finance-heading-actions .button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .finance-tabs {
    width: 100%;
  }

  .finance-tabs a {
    flex: 1 0 auto;
    min-width: 82px;
    padding-inline: 10px;
  }

  .finance-weekly-head {
    align-items: flex-start;
  }

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

  .finance-weekly-metric {
    min-height: 96px;
    border-right: 1px solid var(--finance-line);
    border-bottom: 1px solid var(--finance-line);
    padding: 13px;
  }

  .finance-weekly-metric:nth-child(2n) {
    border-right: 0;
  }

  .finance-weekly-metric:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }

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

  .finance-weekly-rates article:last-child {
    grid-column: 1 / -1;
  }

  .finance-weekly-lower {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .finance-summary-grid {
    gap: 8px;
  }

  .finance-summary-card {
    min-height: 98px;
    gap: 12px;
    padding: 14px;
  }

  .finance-summary-card > strong {
    font-size: 22px;
  }

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

  .finance-detail-strip > :nth-child(2) {
    border-right: 0;
  }

  .finance-detail-strip > :nth-child(-n + 2) {
    border-bottom: 1px solid var(--finance-line);
  }

  .finance-division-strip {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .finance-division-strip > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .finance-division-row > b,
  .finance-division-row > strong,
  .finance-division-row > small {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .finance-panel {
    padding: 15px;
  }

  .finance-account-groups {
    grid-template-columns: 1fr;
  }

  .finance-review-row {
    padding: 13px;
  }

  .finance-review-actions {
    align-items: stretch;
  }

  .finance-review-actions form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .finance-match-suggestion {
    align-items: flex-start;
  }

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

  .payroll-summary article:nth-child(3),
  .payroll-summary article:nth-child(5) {
    border-left: 0;
  }

  .payroll-summary article:nth-child(n + 3) {
    border-top: 1px solid var(--finance-line);
  }

  .payroll-summary article:nth-child(5) {
    grid-column: 1 / -1;
  }

  .payroll-next {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 13px;
  }

  .payroll-next-icon {
    width: 40px;
    height: 40px;
  }

  .payroll-next > .button,
  .payroll-next-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .payroll-next-actions > * {
    flex: 1 1 auto;
  }

  .payroll-employee-row.is-locked {
    grid-template-columns: 38px repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .payroll-employee-row.is-locked .payroll-employee-name {
    grid-column: 2 / -1;
  }

  .payroll-employee-row.is-locked > span:not(.payroll-employee-avatar, .payroll-employee-name) {
    grid-row: 2;
  }

  .payroll-employee-row.is-locked > span:nth-child(3) {
    grid-column: 2;
  }

  .payroll-employee-row.is-locked > span:nth-child(4) {
    grid-column: 3;
  }

  .payroll-employee-row.is-locked > span:nth-child(5) {
    grid-column: 4;
  }

  .payroll-employee-row.is-editable {
    grid-template-columns: 38px minmax(0, 1fr) 40px;
    align-items: center;
  }

  .payroll-employee-row.is-editable .payroll-employee-name {
    grid-column: 2;
  }

  .payroll-employee-row.is-editable > .icon-button {
    grid-column: 3;
    grid-row: 1;
  }

  .payroll-employee-row.is-editable > label {
    grid-column: 1 / -1;
  }

  .payroll-completion form,
  .payroll-settings form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-completion-reference {
    grid-column: 1 / -1;
  }

  .payroll-provider-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .payroll-provider-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .finance-summary-card {
    min-height: 82px;
  }

  .finance-summary-card > strong {
    font-size: 20px;
  }

  .finance-review-primary {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .finance-review-primary > strong {
    grid-column: 2;
    justify-self: start;
  }

  .finance-review-actions {
    flex-wrap: wrap;
  }

  .finance-review-actions form,
  .finance-match-suggestion {
    flex-basis: calc(100% - 48px);
  }

  .finance-review-actions form {
    grid-template-columns: 1fr;
  }

  .finance-match-suggestion {
    display: grid;
  }

  .finance-match-suggestion .button {
    width: 100%;
  }

  .finance-account-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .finance-account-row em {
    grid-column: 2;
  }

  .finance-close-checks span {
    display: grid;
    gap: 2px;
  }

  .finance-close-summary {
    grid-template-columns: 1fr;
  }

  .finance-close-summary > div + div {
    border-top: 1px solid #dbe5ea;
    border-left: 0;
  }

  .payroll-period-bar {
    gap: 7px;
  }

  .payroll-period-bar strong {
    font-size: 14px;
  }

  .payroll-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .payroll-completion form,
  .payroll-settings form {
    grid-template-columns: 1fr;
  }

  .payroll-completion-reference {
    grid-column: 1;
  }
}

/* Christmas Lights division */
.christmas-lights-page,
.christmas-lights-drawer-overlay,
.christmas-lights-dialog-overlay {
  --lights-evergreen: #176b55;
  --lights-evergreen-dark: #0d4f40;
  --lights-red: #c9344c;
  --lights-gold: #d89a24;
  --lights-blue: #2d6b9f;
  --lights-line: #d7e2e7;
  --lights-soft: #f4f8f9;
}

.christmas-lights-heading {
  align-items: center;
}

.christmas-lights-heading .actions,
.christmas-lights-heading .button {
  align-items: center;
}

.christmas-lights-heading .button svg {
  width: 18px;
  height: 18px;
}

.christmas-lights-heading .secondary-icon-button {
  border-color: var(--lights-line);
  color: var(--deep);
  background: #fff;
}

.christmas-lights-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.christmas-lights-controls {
  display: grid;
  grid-template-columns: minmax(130px, 170px) minmax(280px, 520px) auto;
  gap: 10px;
  align-items: end;
  justify-content: start;
}

.christmas-lights-control-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.christmas-lights-control-actions .button,
.christmas-lights-control-actions .icon-button {
  min-height: 44px;
}

.christmas-lights-control-actions svg {
  width: 18px;
  height: 18px;
}

.christmas-lights-control-actions .secondary-icon-button {
  color: var(--deep);
}

.christmas-lights-season-control,
.christmas-lights-form label,
.christmas-lights-customer-search {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.christmas-lights-season-control > span,
.christmas-lights-form label > span,
.christmas-lights-customer-search > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.christmas-lights-season-control select,
.christmas-lights-search,
.christmas-lights-form input,
.christmas-lights-form select,
.christmas-lights-form textarea,
.christmas-lights-customer-search > div {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.christmas-lights-season-control select,
.christmas-lights-form input,
.christmas-lights-form select {
  min-height: 44px;
  padding: 9px 11px;
}

.christmas-lights-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 4px 4px 4px 12px;
}

.christmas-lights-search > svg,
.christmas-lights-customer-search > div > svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.christmas-lights-search input,
.christmas-lights-customer-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
}

.christmas-lights-tabs {
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  border-bottom: 1px solid var(--lights-line);
  overflow-x: auto;
}

.christmas-lights-tabs a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 42px;
  border-bottom: 3px solid transparent;
  padding: 7px 13px;
  color: var(--slate);
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.christmas-lights-tabs a svg {
  width: 17px;
  height: 17px;
}

.christmas-lights-tabs a.is-active {
  border-bottom-color: var(--lights-evergreen);
  color: var(--lights-evergreen-dark);
}

.christmas-lights-content,
.christmas-lights-board-wrap {
  min-width: 0;
}

.christmas-lights-board-wrap {
  padding-bottom: 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.christmas-lights-board {
  display: grid;
  grid-template-columns: minmax(300px, 1.35fr) repeat(6, minmax(216px, 1fr));
  gap: 10px;
  width: max(100%, 1640px);
  align-items: start;
}

.christmas-lights-stage {
  min-width: 0;
  border: 1px solid var(--lights-line);
  border-top: 4px solid var(--lights-blue);
  border-radius: 8px;
  background: var(--lights-soft);
  overflow: hidden;
}

.christmas-lights-stage[data-christmas-stage="quoted"] {
  border-top-color: var(--lights-blue);
}

.christmas-lights-stage[data-christmas-stage="approved"] {
  border-top-color: var(--lights-evergreen);
}

.christmas-lights-stage[data-christmas-stage="scheduled"] {
  border-top-color: var(--lights-gold);
}

.christmas-lights-stage[data-christmas-stage="in_season"] {
  border-top-color: #b72b45;
}

.christmas-lights-stage[data-christmas-stage="takedown_scheduled"] {
  border-top-color: #7c5aa6;
}

.christmas-lights-stage[data-christmas-stage="taken_down_stored"] {
  border-top-color: #536b7b;
}

.christmas-lights-stage > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--lights-line);
  background: #fff;
}

.christmas-lights-stage > header > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: var(--lights-evergreen-dark);
  background: #e4f4ef;
}

.christmas-lights-stage > header svg {
  width: 16px;
  height: 16px;
}

.christmas-lights-stage-head-actions {
  display: flex;
  gap: 2px;
  align-items: center;
}

.christmas-lights-stage-head-actions > a,
.christmas-lights-stage-head-actions > button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.christmas-lights-stage-head-actions > a:hover,
.christmas-lights-stage-head-actions > a:focus-visible,
.christmas-lights-stage-head-actions > button:hover,
.christmas-lights-stage-head-actions > button:focus-visible {
  color: var(--lights-evergreen-dark);
  background: #e4f4ef;
  outline: 0;
}

.christmas-lights-stage > header strong {
  min-width: 0;
  color: var(--deep);
  font-size: 0.87rem;
  line-height: 1.1;
}

.christmas-lights-stage > header b {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  padding-inline: 6px;
  color: var(--slate);
  background: #eaf0f3;
  font-size: 0.75rem;
}

.christmas-lights-stage-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 170px;
  max-height: calc(100dvh - 330px);
  padding: 8px;
  overflow-y: auto;
}

.christmas-lights-stage[data-christmas-stage="needs_quote"] .christmas-lights-stage-list {
  height: calc(100dvh - 330px);
  min-height: 360px;
  max-height: 680px;
  overflow: hidden;
}

.christmas-lights-stage-empty {
  align-self: center;
  margin: 44px 0;
  color: #8a9aa4;
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
}

.christmas-needs-quote-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.christmas-origin-group {
  flex: 0 0 auto;
  min-width: 0;
  border: 1px solid #d8e3e7;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}

.christmas-origin-group.is-expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.christmas-origin-group > header {
  min-height: 0;
  border-bottom: 0;
  padding: 0;
  color: #435d6a;
  background: #f2f6f7;
}

.christmas-origin-group.is-expanded > header {
  border-bottom: 1px solid #d8e3e7;
}

.christmas-origin-group-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  border: 0;
  padding: 7px 9px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-origin-group-toggle:hover,
.christmas-origin-group-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.48);
  outline: 0;
}

.christmas-origin-group-toggle > span:first-child {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.christmas-origin-group-toggle svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.christmas-origin-group-toggle strong {
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.christmas-origin-group-summary {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  flex: 0 0 auto;
}

.christmas-origin-group-summary b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  padding-inline: 6px;
  background: rgba(54, 77, 89, 0.1);
  font-size: 0.67rem;
}

.christmas-origin-group-chevron {
  transition: transform 150ms ease;
}

.christmas-origin-group.is-expanded .christmas-origin-group-chevron {
  transform: rotate(180deg);
}

.christmas-origin-group-list {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 7px;
  min-height: 0;
  max-height: none;
  padding: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.christmas-origin-group-list > p {
  margin: 9px;
  color: #84949d;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

.christmas-origin-group.is-renewal {
  border-color: #b9d9ce;
}

.christmas-origin-group.is-renewal > header {
  border-bottom-color: #b9d9ce;
  color: #0d5b49;
  background: #eaf7f2;
}

.christmas-origin-group.is-renewal .christmas-lights-record {
  border-left-color: var(--lights-evergreen);
}

.christmas-origin-group.is-previous_quote {
  border-color: #bfd5e8;
}

.christmas-origin-group.is-previous_quote > header {
  border-bottom-color: #bfd5e8;
  color: #245b88;
  background: #edf5fb;
}

.christmas-origin-group.is-previous_quote .christmas-lights-record {
  border-left-color: var(--lights-blue);
}

.christmas-origin-group.is-new_lead {
  border-color: #ead49f;
}

.christmas-origin-group.is-new_lead > header {
  border-bottom-color: #ead49f;
  color: #79530a;
  background: #fff8e7;
}

.christmas-origin-group.is-new_lead .christmas-lights-record {
  border-left-color: var(--lights-gold);
}

.christmas-origin-badge,
.christmas-renewal-origin {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  width: fit-content;
  min-height: 23px;
  border-radius: 999px;
  padding: 4px 7px;
  color: #4a5f6c;
  background: #edf3f5;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.christmas-origin-badge svg,
.christmas-renewal-origin svg {
  width: 12px;
  height: 12px;
}

.christmas-origin-badge.is-renewal,
.christmas-renewal-origin.is-renewal {
  color: #0d5b49;
  background: #e4f4ef;
}

.christmas-origin-badge.is-previous_quote,
.christmas-renewal-origin.is-previous_quote {
  color: #245b88;
  background: #e8f2fa;
}

.christmas-origin-badge.is-new_lead,
.christmas-renewal-origin.is-new_lead {
  color: #79530a;
  background: #fff2cf;
}

.christmas-lights-record {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  border: 1px solid #d6e0e4;
  border-left: 4px solid var(--lights-blue);
  border-radius: 7px;
  padding: 11px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 3px 10px rgba(5, 35, 50, 0.05);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-lights-record:hover,
.christmas-lights-record:focus-visible {
  border-color: #81aaa9;
  outline: 0;
  box-shadow: 0 7px 18px rgba(5, 35, 50, 0.11);
  transform: translateY(-1px);
}

.christmas-lights-record.is-service {
  border-left-color: var(--lights-gold);
}

.christmas-lights-record.is-urgent {
  border-left-color: var(--lights-red);
  background: #fffafb;
}

.christmas-lights-record-top,
.christmas-lights-record-meta {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.christmas-lights-record-top {
  justify-content: space-between;
}

.christmas-lights-record-top strong {
  min-width: 0;
  overflow: hidden;
  color: var(--deep);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-lights-record-top b {
  flex: 0 0 auto;
  color: var(--lights-evergreen-dark);
  font-size: 0.8rem;
}

.christmas-lights-record-address {
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.christmas-lights-record-meta {
  flex-wrap: wrap;
}

.christmas-lights-record-meta em,
.christmas-lights-record-meta small {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 23px;
  border-radius: 999px;
  padding: 4px 7px;
  color: #49606e;
  background: #edf3f5;
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.christmas-lights-record-meta small svg {
  width: 12px;
  height: 12px;
}

.christmas-lights-record-meta small.is-service {
  color: #775007;
  background: #fff1ce;
}

.christmas-lights-record-meta small.is-urgent {
  color: #9d1e35;
  background: #ffe8ed;
}

.christmas-renewal-card {
  gap: 9px;
  padding: 10px;
  cursor: default;
}

.christmas-renewal-card.is-no-response {
  border-left-color: #d69b20;
}

.christmas-renewal-card.is-connected,
.christmas-renewal-card.is-quote {
  border-left-color: var(--lights-evergreen);
}

.christmas-renewal-card.is-follow-up {
  border-left-color: #7c5aa6;
}

.christmas-renewal-card.is-nurture {
  border-left-color: #5d7390;
}

.christmas-renewal-card-main {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-renewal-card-main:hover .christmas-lights-record-top strong,
.christmas-renewal-card-main:focus-visible .christmas-lights-record-top strong {
  color: var(--lights-evergreen);
}

.christmas-renewal-card-main:focus-visible,
.christmas-renewal-checkpoint:focus-visible,
.christmas-renewal-status:focus-visible,
.christmas-renewal-message:focus-visible {
  border-radius: 5px;
  outline: 3px solid rgba(23, 107, 85, 0.18);
  outline-offset: 2px;
}

.christmas-renewal-card-main .christmas-lights-record-address {
  display: -webkit-box;
  min-height: 1.92em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.christmas-renewal-checkpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.christmas-renewal-checkpoint {
  position: relative;
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 43px;
  border: 1px solid #d9e3e6;
  border-radius: 6px;
  padding: 5px 3px;
  color: #526774;
  background: #f7fafb;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.christmas-renewal-checkpoint:hover {
  border-color: #80aaa9;
  color: var(--lights-evergreen-dark);
  background: #f0faf7;
}

.christmas-renewal-checkpoint > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.christmas-renewal-checkpoint > span > svg {
  width: 17px;
  height: 17px;
}

.christmas-renewal-checkpoint > span > b {
  position: absolute;
  right: -7px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--lights-evergreen);
}

.christmas-renewal-checkpoint > span > b svg {
  width: 8px;
  height: 8px;
  stroke-width: 3;
}

.christmas-renewal-checkpoint em {
  overflow: hidden;
  max-width: 100%;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-renewal-checkpoint.is-complete {
  border-color: #a6d5c7;
  color: #0d5b49;
  background: #eaf7f2;
}

.christmas-renewal-checkpoint.has-reply {
  border-color: #67a9a6;
  box-shadow: inset 0 0 0 1px #67a9a6;
}

.christmas-renewal-checkpoint.is-unavailable {
  opacity: 0.48;
  cursor: not-allowed;
}

.christmas-renewal-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 6px;
  align-items: stretch;
  min-width: 0;
}

.christmas-renewal-status {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) 13px;
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 36px;
  border: 1px solid #d8e1e5;
  border-radius: 6px;
  padding: 6px 8px;
  color: #3f5665;
  background: #f5f8f9;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-renewal-status > svg {
  width: 16px;
  height: 16px;
}

.christmas-renewal-status > svg:last-child {
  width: 13px;
  height: 13px;
}

.christmas-renewal-status span {
  display: flex;
  gap: 5px;
  align-items: baseline;
  min-width: 0;
}

.christmas-renewal-status strong,
.christmas-renewal-status em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-renewal-status strong {
  font-size: 0.68rem;
}

.christmas-renewal-status em {
  color: #667986;
  font-size: 0.61rem;
  font-style: normal;
  font-weight: 850;
}

.christmas-renewal-status.is-no-response {
  border-color: #ecd79c;
  color: #79530a;
  background: #fff8e7;
}

.christmas-renewal-status.is-connected,
.christmas-renewal-status.is-quote {
  border-color: #a6d5c7;
  color: #0d5b49;
  background: #eaf7f2;
}

.christmas-renewal-status.is-follow-up {
  border-color: #d7cae6;
  color: #60447e;
  background: #f7f2fb;
}

.christmas-renewal-status.is-nurture {
  border-color: #cbd7e3;
  color: #405a75;
  background: #f0f5fa;
}

.christmas-renewal-message {
  width: 36px;
  height: 36px;
  border-color: #b9d4d2;
  color: var(--lights-evergreen-dark);
  background: #eef9f6;
}

.christmas-renewal-message svg {
  width: 17px;
  height: 17px;
}

.christmas-not-closed {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.christmas-not-closed-list {
  display: grid;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.christmas-not-closed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--lights-line);
  padding: 8px 10px;
}

.christmas-not-closed-row:last-child {
  border-bottom: 0;
}

.christmas-not-closed-row > button:first-child {
  display: grid;
  grid-template-columns: 38px minmax(190px, 1.35fr) auto minmax(150px, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-not-closed-row > button:first-child:hover .christmas-lights-list-main strong,
.christmas-not-closed-row > button:first-child:focus-visible .christmas-lights-list-main strong {
  color: var(--lights-evergreen);
}

.christmas-not-closed-row > button:first-child:focus-visible {
  border-radius: 6px;
  outline: 3px solid rgba(23, 107, 85, 0.18);
  outline-offset: 3px;
}

.christmas-not-closed-reason {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.christmas-not-closed-reason strong,
.christmas-not-closed-reason em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-not-closed-reason strong {
  color: #536874;
  font-size: 0.74rem;
}

.christmas-not-closed-reason em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
}

.christmas-not-closed-row > button:first-child > b {
  color: var(--deep);
  font-size: 0.78rem;
  white-space: nowrap;
}

.christmas-lights-stage-tabs {
  display: none;
}

.christmas-lights-stage-tabs.is-always-visible {
  display: flex;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
}

.christmas-lights-stage-tabs.is-always-visible a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  flex: 1 0 auto;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--lights-line);
  border-radius: 7px;
  padding: 7px 10px;
  color: var(--slate);
  background: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  text-decoration: none;
}

.christmas-lights-stage-tabs.is-always-visible a.is-active {
  border-color: var(--lights-evergreen);
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-lights-stage-tabs.is-always-visible b {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding-inline: 5px;
  color: inherit;
  background: rgba(130, 149, 158, 0.16);
  font-size: 0.68rem;
}

.christmas-lights-stage-tabs.is-always-visible a.is-active b {
  background: rgba(255, 255, 255, 0.2);
}

.christmas-lights-sheet {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.christmas-lights-sheet-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}

.christmas-lights-sheet-head > div {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.christmas-lights-sheet-head h3,
.christmas-lights-sheet-head span {
  margin: 0;
}

.christmas-lights-sheet-head h3 {
  color: var(--deep);
  font-size: 1.05rem;
}

.christmas-lights-sheet-head span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.christmas-lights-sheet-head .button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.christmas-lights-sheet-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.christmas-lights-import-review {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid #ead49f;
  border-radius: 8px;
  padding: 9px 11px;
  color: #5e470e;
  background: #fff9e9;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-lights-import-review > svg:first-child {
  width: 20px;
  height: 20px;
  color: #9a6d0e;
}

.christmas-lights-import-review > svg:last-child {
  width: 17px;
  height: 17px;
}

.christmas-lights-import-review > span {
  display: grid;
  gap: 2px;
}

.christmas-lights-import-review strong,
.christmas-lights-import-review em {
  font-size: 0.77rem;
  font-style: normal;
}

.christmas-lights-import-review em {
  color: #806a36;
  font-size: 0.68rem;
  font-weight: 750;
}

.christmas-lights-sheet-head svg {
  width: 16px;
  height: 16px;
}

.christmas-lights-sheet-wrap {
  min-width: 0;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  background: #fff;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

.christmas-lights-sheet table {
  width: max(100%, 101rem);
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.christmas-lights-sheet th,
.christmas-lights-sheet td {
  border-bottom: 1px solid var(--lights-line);
  padding: 10px;
  vertical-align: middle;
  text-align: left;
}

.christmas-lights-sheet th {
  position: sticky;
  z-index: 2;
  top: 0;
  color: #526b78;
  background: #eff5f6;
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.christmas-lights-sheet tbody tr:last-child td {
  border-bottom: 0;
}

.christmas-lights-sheet tbody tr:hover td {
  background: #f7fbfa;
}

.christmas-lights-sheet th:nth-child(1) { width: 58px; }
.christmas-lights-sheet th:nth-child(2) { width: 178px; }
.christmas-lights-sheet th:nth-child(3) { width: 170px; }
.christmas-lights-sheet th:nth-child(4) { width: 210px; }
.christmas-lights-sheet th:nth-child(5) { width: 130px; }
.christmas-lights-sheet th:nth-child(6) { width: 120px; }
.christmas-lights-sheet th:nth-child(7) { width: 115px; }
.christmas-lights-sheet th:nth-child(8) { width: 190px; }
.christmas-lights-sheet th:nth-child(9) { width: 190px; }
.christmas-lights-sheet th:nth-child(10) { width: 115px; }
.christmas-lights-sheet th:nth-child(11) { width: 126px; }

.christmas-lights-sheet td {
  min-width: 0;
  color: var(--slate);
  font-size: 0.75rem;
  font-weight: 720;
}

.christmas-lights-sheet td > strong,
.christmas-lights-sheet td > small {
  display: block;
}

.christmas-lights-sheet td > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.66rem;
}

.christmas-lights-sheet-customer {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--deep);
  text-decoration: none;
}

.christmas-lights-sheet-photo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  color: #71848d;
  background: #edf3f5;
  overflow: hidden;
}

.christmas-lights-sheet-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.christmas-lights-sheet-photo svg {
  width: 17px;
  height: 17px;
}

.christmas-lights-sheet-customer > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  color: #fff;
  background: var(--lights-evergreen-dark);
  font-size: 0.7rem;
  font-weight: 950;
}

.christmas-lights-sheet-customer > div,
.christmas-lights-sheet-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.christmas-lights-sheet-customer strong,
.christmas-lights-sheet-customer small,
.christmas-lights-sheet-stack a,
.christmas-lights-sheet-property,
.christmas-lights-sheet-inventory,
.christmas-lights-sheet-notes {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-lights-sheet-customer small {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--muted);
  font-size: 0.63rem;
}

.christmas-lights-sheet-customer small svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.christmas-lights-sheet-stack a {
  color: var(--slate);
  text-decoration: none;
}

.christmas-lights-sheet-stack a:hover,
.christmas-lights-sheet-stack a:focus-visible,
.christmas-lights-sheet-customer:hover strong,
.christmas-lights-sheet-customer:focus-visible strong {
  color: var(--lights-evergreen);
}

.christmas-lights-storage-state,
.christmas-lights-sheet-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 7px;
  color: #48606d;
  background: #edf3f5;
  font-size: 0.67rem;
  font-weight: 900;
  line-height: 1.05;
}

.christmas-lights-storage-state.is-company_bin {
  color: #145749;
  background: #def2ec;
}

.christmas-lights-storage-state.is-customer_property {
  color: #24577f;
  background: #e4f0f9;
}

.christmas-lights-storage-state.is-unknown {
  color: #865c08;
  background: #fff0cc;
}

.christmas-lights-sheet-actions {
  position: sticky;
  z-index: 1;
  right: 0;
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  background: #fff;
}

.christmas-lights-sheet-actions .icon-button {
  width: 34px;
  min-height: 34px;
  border-color: var(--lights-line);
  color: var(--lights-evergreen-dark);
  background: #fff;
}

.christmas-lights-sheet-actions svg {
  width: 15px;
  height: 15px;
}

.christmas-lights-sheet-empty {
  height: 130px;
  color: var(--muted);
  text-align: center !important;
}

.christmas-lights-list-view {
  width: min(980px, 100%);
}

.christmas-lights-list-head {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--lights-line);
  padding: 6px 0 12px;
}

.christmas-lights-list-head > div {
  display: flex;
  gap: 9px;
  align-items: baseline;
  min-width: 0;
}

.christmas-lights-list-head h3 {
  margin: 0;
  color: var(--deep);
  font-size: 1.1rem;
}

.christmas-lights-list-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.christmas-lights-service-list,
.christmas-lights-storage-list,
.christmas-lights-history-list {
  display: grid;
}

.christmas-lights-list-row {
  display: grid;
  grid-template-columns: 40px minmax(190px, 1fr) minmax(90px, auto) minmax(90px, auto) 18px;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--lights-line);
  padding: 13px 6px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-lights-list-row:hover,
.christmas-lights-list-row:focus-visible {
  outline: 0;
  background: #f2f8f8;
}

.christmas-lights-list-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  color: var(--lights-evergreen-dark);
  background: #e5f4ef;
}

.christmas-lights-ticket-row.is-overdue .christmas-lights-list-icon,
.christmas-lights-ticket-row.is-due-soon .christmas-lights-list-icon {
  color: #9d1e35;
  background: #ffe8ed;
}

.christmas-lights-list-icon svg {
  width: 18px;
  height: 18px;
}

.christmas-lights-list-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.christmas-lights-list-main strong,
.christmas-lights-list-main em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-lights-list-main strong {
  color: var(--deep);
  font-size: 0.9rem;
}

.christmas-lights-list-main em {
  color: var(--muted);
  font-size: 0.77rem;
  font-style: normal;
  font-weight: 750;
}

.christmas-lights-sla,
.christmas-lights-list-status,
.christmas-lights-kit-location,
.christmas-lights-history-source {
  min-width: 0;
  color: var(--slate);
  font-size: 0.74rem;
  font-weight: 900;
  text-align: right;
}

.christmas-lights-sla {
  border-radius: 999px;
  padding: 5px 8px;
  color: #236354;
  background: #e3f5ef;
}

.christmas-lights-sla.is-overdue,
.christmas-lights-sla.is-due-soon {
  color: #9d1e35;
  background: #ffe8ed;
}

.christmas-lights-history-row {
  grid-template-columns: 60px minmax(190px, 1fr) minmax(70px, auto) minmax(105px, auto) minmax(80px, auto) 18px;
}

.christmas-lights-history-year {
  color: var(--lights-evergreen-dark);
  font-size: 0.96rem;
  font-weight: 1000;
}

.christmas-lights-history-row > b {
  color: var(--deep);
  font-size: 0.82rem;
  text-align: right;
}

.christmas-lights-retry {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.christmas-lights-customer-page .christmas-lights-body {
  gap: 12px;
}

.christmas-customer-head {
  display: grid;
  grid-template-columns: 42px 46px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--lights-line);
  padding: 3px 2px 13px;
}

.christmas-customer-head > .icon-button,
.christmas-customer-head-actions .icon-button {
  border-color: var(--lights-line);
  color: var(--lights-evergreen-dark);
  background: #fff;
}

.christmas-customer-identity {
  min-width: 0;
}

.christmas-customer-identity > span,
.christmas-customer-identity h2,
.christmas-customer-identity p {
  margin: 0;
}

.christmas-customer-identity > span {
  display: block;
  color: var(--lights-evergreen);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.christmas-customer-identity h2 {
  overflow: hidden;
  margin-block: 2px;
  color: var(--deep);
  font-size: 1.22rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-customer-identity p {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-customer-head-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.christmas-customer-head-actions .button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.christmas-customer-head-actions .christmas-customer-open-quote {
  min-width: max-content;
  min-height: 44px;
  padding-inline: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.christmas-customer-head-actions svg {
  width: 17px;
  height: 17px;
}

.christmas-customer-workflow {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(220px, 0.8fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--lights-line);
  border-left: 4px solid var(--lights-evergreen);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.christmas-customer-workflow ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.christmas-customer-workflow li {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-width: 0;
  color: #8a989f;
  font-size: 0.68rem;
  font-weight: 900;
}

.christmas-customer-workflow li:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 10px;
  right: 4px;
  left: 25px;
  height: 2px;
  background: #dce7e8;
  content: "";
}

.christmas-customer-workflow li svg {
  z-index: 1;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  padding: 4px;
  color: #83949b;
  background: #edf2f3;
}

.christmas-customer-workflow li span {
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-customer-workflow li.is-complete {
  color: var(--lights-evergreen-dark);
}

.christmas-customer-workflow li.is-complete::after,
.christmas-customer-workflow li.is-complete svg {
  color: #fff;
  background: var(--lights-evergreen);
}

.christmas-customer-workflow li.is-current {
  color: var(--deep);
}

.christmas-customer-workflow li.is-current svg {
  color: var(--lights-gold-dark);
  background: #fff2ce;
}

.christmas-customer-workflow > div {
  display: grid;
  gap: 1px;
  min-width: 0;
  border-left: 1px solid #e1e9e9;
  padding-left: 14px;
}

.christmas-customer-workflow > div > span {
  color: var(--lights-evergreen);
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.christmas-customer-workflow strong {
  overflow: hidden;
  color: var(--deep);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-customer-workflow small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-customer-workflow > .button {
  min-width: max-content;
  min-height: 40px;
  white-space: nowrap;
}

.christmas-customer-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  padding: 4px;
  background: #fff;
}

.christmas-customer-tabs a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 42px;
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.christmas-customer-tabs a:hover,
.christmas-customer-tabs a:focus-visible {
  color: var(--lights-evergreen-dark);
  background: #eef7f4;
}

.christmas-customer-tabs a.is-active {
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-customer-tabs svg {
  width: 17px;
  height: 17px;
}

.christmas-customer-tabs b {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  border-radius: 999px;
  padding-inline: 5px;
  color: var(--lights-evergreen-dark);
  background: #e3f5ef;
  font-size: 0.66rem;
}

.christmas-customer-tabs a.is-active b {
  color: var(--lights-evergreen-dark);
  background: #fff;
}

.christmas-customer-tab-content {
  min-width: 0;
}

.christmas-customer-designs,
.christmas-customer-details,
.christmas-customer-jobs {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.christmas-customer-section-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

.christmas-customer-section-head > div {
  display: grid;
  gap: 1px;
}

.christmas-customer-section-head h3,
.christmas-customer-section-head span {
  margin: 0;
}

.christmas-customer-section-head h3 {
  color: var(--deep);
  font-size: 1.02rem;
}

.christmas-customer-section-head span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.christmas-customer-section-head .button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.christmas-customer-section-head .button svg {
  width: 17px;
  height: 17px;
}

.christmas-customer-design-status {
  min-height: 0;
  margin: -5px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.christmas-customer-design-status:empty {
  display: none;
}

.christmas-design-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  min-width: 0;
}

.christmas-design-card {
  position: relative;
  min-width: 0;
  border: 1px solid #cadbd6;
  border-radius: 8px;
  color: var(--deep);
  background: #fff;
  overflow: hidden;
}

.christmas-design-card:hover,
.christmas-design-card:focus-within {
  border-color: #6ba595;
  box-shadow: 0 0 0 3px rgba(23, 107, 85, 0.12);
}

.christmas-design-card-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0 0 11px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-design-card-open:focus-visible {
  outline: 0;
}

.christmas-design-card-preview {
  position: relative;
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: var(--design-aspect, 16 / 10);
  max-height: 260px;
  background: #d9e4e5;
  overflow: hidden;
}

.christmas-design-card-preview img,
.christmas-design-card-preview > i,
.christmas-design-card-preview svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.christmas-design-card-preview img {
  object-fit: contain;
}

.christmas-design-card-preview > i {
  background: #061a26;
}

.christmas-design-card-preview svg {
  pointer-events: none;
}

.christmas-design-card-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-left: 12px;
}

.christmas-design-card-meta strong,
.christmas-design-card-meta em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-card-meta strong {
  font-size: 0.84rem;
}

.christmas-design-card-meta em {
  color: var(--muted);
  font-size: 0.69rem;
  font-style: normal;
  font-weight: 750;
}

.christmas-design-card-count {
  color: var(--lights-evergreen-dark);
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

.christmas-design-card-open > svg {
  width: 17px;
  height: 17px;
  margin-right: 10px;
  color: var(--muted);
}

.christmas-design-card-actions {
  position: absolute;
  z-index: 4;
  top: 9px;
  right: 9px;
  display: flex;
  gap: 6px;
}

.christmas-design-card-actions .icon-button {
  width: 38px;
  min-height: 38px;
  border-color: rgba(255, 255, 255, 0.62);
  color: #fff;
  box-shadow: 0 5px 16px rgba(9, 22, 26, 0.24);
  backdrop-filter: blur(5px);
}

.christmas-design-card-duplicate {
  background: rgba(9, 68, 58, 0.9);
}

.christmas-design-card-delete {
  background: rgba(117, 18, 38, 0.9);
}

.christmas-design-card-duplicate:hover,
.christmas-design-card-duplicate:focus-visible {
  color: #fff;
  background: #0d5f4f;
}

.christmas-design-card-delete:hover,
.christmas-design-card-delete:focus-visible {
  color: #fff;
  background: #981b35;
}

.christmas-design-gallery-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: min(46vh, 430px);
  border: 1px dashed #9bbeb4;
  border-radius: 8px;
  padding: 28px;
  color: var(--muted);
  background: #f4faf8;
  text-align: center;
}

.christmas-design-gallery-empty > svg {
  width: 34px;
  height: 34px;
  color: var(--lights-evergreen);
}

.christmas-design-gallery-empty strong {
  color: var(--deep);
  font-size: 0.96rem;
}

.christmas-customer-details {
  max-width: 900px;
}

.christmas-customer-record-section {
  display: grid;
  gap: 13px;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.christmas-customer-record-head,
.christmas-customer-record-head > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.christmas-customer-record-head {
  justify-content: space-between;
}

.christmas-customer-record-head > div {
  min-width: 0;
}

.christmas-customer-record-head h3 {
  margin: 0;
  color: var(--deep);
  font-size: 0.95rem;
}

.christmas-customer-record-head svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--lights-evergreen);
}

.christmas-customer-record-head .button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.christmas-previous-quotes .christmas-customer-record-head span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  padding-inline: 6px;
  color: var(--lights-evergreen-dark);
  background: #dff2ec;
  font-size: 0.68rem;
  font-weight: 950;
}

.christmas-previous-quotes > div {
  display: grid;
  gap: 8px;
}

.christmas-previous-quote {
  border: 1px solid #d9e4e5;
  border-radius: 7px;
  background: #fbfdfd;
  overflow: hidden;
}

.christmas-previous-quote > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 9px 11px;
  color: var(--deep);
  cursor: pointer;
  list-style: none;
}

.christmas-previous-quote > summary::-webkit-details-marker {
  display: none;
}

.christmas-previous-quote > summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.christmas-previous-quote > summary strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-previous-quote > summary em {
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 750;
}

.christmas-previous-quote > summary b {
  font-size: 0.82rem;
}

.christmas-previous-quote > summary > svg {
  width: 17px;
  height: 17px;
  transition: transform 160ms ease;
}

.christmas-previous-quote[open] > summary > svg {
  transform: rotate(180deg);
}

.christmas-previous-quote-body {
  display: grid;
  gap: 11px;
  border-top: 1px solid #dfe8e9;
  padding: 11px;
  background: #fff;
}

.christmas-previous-quote-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 7px;
}

.christmas-previous-quote-media a {
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid #d9e4e5;
  border-radius: 6px;
  background: #e9eff0;
  overflow: hidden;
}

.christmas-previous-quote-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.christmas-previous-quote-lines {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.christmas-previous-quote-lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: start;
  border-bottom: 1px solid #e5ebec;
  padding: 8px 0;
}

.christmas-previous-quote-lines li:first-child {
  padding-top: 0;
}

.christmas-previous-quote-lines li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.christmas-previous-quote-lines li.is-note {
  grid-template-columns: 1fr;
}

.christmas-previous-quote-lines strong,
.christmas-previous-quote-lines b {
  color: var(--deep);
  font-size: 0.76rem;
}

.christmas-previous-quote-lines p,
.christmas-previous-quote-lines span,
.christmas-previous-quote-empty {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.christmas-previous-quote-totals {
  display: grid;
  gap: 5px;
  justify-self: end;
  min-width: 190px;
  margin: 0;
}

.christmas-previous-quote-totals > div {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.7rem;
}

.christmas-previous-quote-totals dt,
.christmas-previous-quote-totals dd {
  margin: 0;
}

.christmas-previous-quote-totals .is-total {
  border-top: 1px solid #dfe8e9;
  padding-top: 6px;
  color: var(--deep);
  font-size: 0.82rem;
  font-weight: 950;
}

.christmas-previous-quote-copy {
  color: var(--muted);
  font-size: 0.7rem;
}

.christmas-previous-quote-copy summary {
  color: var(--deep);
  font-weight: 850;
  cursor: pointer;
}

.christmas-previous-quote-copy p {
  margin: 7px 0 0;
  line-height: 1.45;
  white-space: pre-wrap;
}

.christmas-previous-quote-body > footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e5ebec;
  padding-top: 10px;
}

.christmas-previous-quote-body > footer > span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
}

.christmas-customer-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid #e1e9e9;
}

.christmas-customer-facts.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.christmas-customer-facts > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border-right: 1px solid #e1e9e9;
  padding: 11px 12px;
}

.christmas-customer-facts > div:first-child {
  padding-left: 0;
}

.christmas-customer-facts > div:last-child {
  border-right: 0;
  padding-right: 0;
}

.christmas-customer-facts dt,
.christmas-customer-note > span,
.christmas-customer-extras > span,
.christmas-customer-storage-current > span {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-customer-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--deep);
  font-size: 0.84rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.christmas-customer-facts dd small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 750;
}

.christmas-customer-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--lights-evergreen-dark);
  background: #e3f5ef;
  font-size: 0.7rem;
  line-height: 1;
}

.christmas-customer-note,
.christmas-customer-extras,
.christmas-customer-storage-current {
  display: grid;
  gap: 5px;
}

.christmas-customer-note p,
.christmas-customer-none {
  margin: 0;
  color: var(--slate);
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.christmas-customer-none {
  color: var(--muted);
  font-style: italic;
}

.christmas-customer-storage-current {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
}

.christmas-customer-storage-current strong {
  color: var(--deep);
  font-size: 0.84rem;
}

.christmas-customer-storage-warning {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0;
  border: 1px solid #f0d798;
  border-radius: 7px;
  padding: 8px 9px;
  color: #7b570b;
  background: #fff8e4;
  font-size: 0.72rem;
  font-weight: 800;
}

.christmas-customer-storage-warning svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.christmas-customer-static-more,
.christmas-customer-edit-more {
  border-top: 1px solid #e1e9e9;
  padding-top: 9px;
}

.christmas-customer-static-more summary,
.christmas-customer-edit-more summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  color: var(--deep);
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.christmas-customer-static-more summary::-webkit-details-marker,
.christmas-customer-edit-more summary::-webkit-details-marker {
  display: none;
}

.christmas-customer-static-more summary svg,
.christmas-customer-edit-more summary svg {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

.christmas-customer-static-more[open] summary svg,
.christmas-customer-edit-more[open] summary svg {
  transform: rotate(180deg);
}

.christmas-customer-static-more dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 0;
}

.christmas-customer-static-more dl > div {
  display: grid;
  gap: 3px;
}

.christmas-customer-static-more dt {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-customer-static-more dd {
  margin: 0;
  color: var(--slate);
  font-size: 0.77rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.christmas-customer-edit-more > .christmas-lights-form-grid {
  margin-top: 10px;
}

.christmas-customer-history-fields .is-wide,
.christmas-customer-record-section .christmas-lights-form-grid .is-wide {
  grid-column: 1 / -1;
}

.christmas-reference-photos {
  display: grid;
  gap: 8px;
}

.christmas-reference-photos > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.christmas-reference-photos > header > div {
  display: flex;
  gap: 7px;
  align-items: center;
}

.christmas-reference-photos > header strong {
  color: var(--deep);
  font-size: 0.82rem;
}

.christmas-reference-photos > header span {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  border-radius: 999px;
  padding-inline: 5px;
  color: var(--lights-evergreen-dark);
  background: #dff2ec;
  font-size: 0.67rem;
  font-weight: 950;
}

.christmas-reference-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.christmas-reference-photo-grid figure {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: 1px solid var(--lights-line);
  border-radius: 7px;
  background: #e8eff1;
  overflow: hidden;
}

.christmas-reference-photo-grid a,
.christmas-reference-photo-grid img {
  display: block;
  width: 100%;
  height: 100%;
}

.christmas-reference-photo-grid img {
  object-fit: cover;
}

.christmas-reference-photo-grid .icon-button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 34px;
  min-height: 34px;
  color: #fff;
  background: rgba(130, 24, 46, 0.9);
}

.christmas-reference-photo-empty {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 104px;
  border: 1px dashed #9bbeb4;
  border-radius: 8px;
  color: var(--muted);
  background: #f5faf9;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 850;
}

.christmas-reference-photo-empty.is-static {
  cursor: default;
}

.christmas-reference-photo-empty svg {
  width: 24px;
  height: 24px;
}

.christmas-reference-photos > p {
  min-height: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.christmas-reference-photos > p:empty {
  display: none;
}

.quote-prior-evidence {
  margin-bottom: 12px;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  background: #f7fafb;
  overflow: hidden;
}

.quote-prior-evidence > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 43px;
  padding: 8px 11px;
  cursor: pointer;
  list-style: none;
}

.quote-prior-evidence > summary::-webkit-details-marker {
  display: none;
}

.quote-prior-evidence > summary span {
  display: flex;
  gap: 7px;
  align-items: center;
}

.quote-prior-evidence > summary svg {
  width: 17px;
  height: 17px;
  color: var(--lights-evergreen);
}

.quote-prior-evidence > summary em {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  border-radius: 999px;
  color: var(--lights-evergreen-dark);
  background: #dff2ec;
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 900;
}

.quote-prior-evidence > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 7px;
  border-top: 1px solid var(--surface-line);
  padding: 9px;
  background: #fff;
}

.quote-prior-evidence a {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: #e9eff0;
  overflow: hidden;
}

.quote-prior-evidence img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.christmas-inventory-items {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.christmas-inventory-items > span {
  display: grid;
  grid-template-columns: 18px auto;
  gap: 1px 6px;
  align-items: center;
  border: 1px solid #d4e1e3;
  border-radius: 7px;
  padding: 7px 9px;
  color: var(--deep);
  background: #f7fafb;
}

.christmas-inventory-items svg {
  grid-row: 1 / 3;
  width: 16px;
  height: 16px;
  color: var(--lights-evergreen);
}

.christmas-inventory-items strong {
  font-size: 0.73rem;
}

.christmas-inventory-items em {
  color: var(--muted);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 750;
}

.christmas-customer-jobs .christmas-lights-work-orders {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 720px) {
  .christmas-customer-head {
    grid-template-columns: 40px 42px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .christmas-customer-head .christmas-lights-avatar {
    width: 42px;
    height: 42px;
  }

  .christmas-customer-head-actions .button {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }

  .christmas-customer-head-actions .button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .christmas-customer-head-actions .button.christmas-customer-open-quote {
    width: auto;
    min-width: max-content;
    padding-inline: 14px;
  }

  .christmas-customer-head-actions .christmas-customer-open-quote span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .christmas-customer-workflow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .christmas-customer-workflow ol {
    grid-column: 1 / -1;
  }

  .christmas-customer-workflow > div {
    border-left: 0;
    padding-left: 0;
  }

  .christmas-design-gallery {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }

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

  .christmas-customer-facts > div:first-child {
    padding-left: 12px;
  }

  .christmas-customer-facts > div:nth-child(2n) {
    border-right: 0;
  }

  .christmas-customer-facts > div:nth-child(-n + 2) {
    border-bottom: 1px solid #e1e9e9;
  }

  .christmas-previous-quote > summary {
    grid-template-columns: minmax(0, 1fr) auto 16px;
  }

  .christmas-previous-quote-media,
  .quote-prior-evidence > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .christmas-previous-quote-lines li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .christmas-previous-quote-lines li > span {
    display: none;
  }

  .christmas-previous-quote-body > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .christmas-previous-quote-body > footer .button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .christmas-customer-head {
    grid-template-columns: 38px 40px minmax(0, 1fr);
  }

  .christmas-customer-head-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    border-top: 1px solid #e2e9eb;
    padding-top: 8px;
  }

  .christmas-customer-identity h2 {
    font-size: 1.05rem;
  }

  .christmas-customer-tabs a {
    gap: 5px;
    padding-inline: 6px;
    font-size: 0.72rem;
  }

  .christmas-customer-tabs b {
    min-width: 19px;
    height: 19px;
  }

  .christmas-customer-workflow {
    grid-template-columns: 1fr;
  }

  .christmas-customer-workflow ol {
    grid-column: auto;
  }

  .christmas-customer-workflow li {
    grid-template-columns: 20px minmax(0, 1fr);
    font-size: 0.61rem;
  }

  .christmas-customer-workflow li svg {
    width: 19px;
    height: 19px;
  }

  .christmas-customer-workflow li:not(:last-child)::after {
    top: 9px;
    left: 23px;
  }

  .christmas-customer-workflow > .button {
    width: 100%;
  }

  .christmas-design-gallery {
    grid-template-columns: 1fr;
  }

  .christmas-lights-sheet-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .christmas-lights-sheet-head-actions {
    width: 100%;
  }

  .christmas-lights-sheet-head-actions .button {
    flex: 1 1 0;
  }

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

  .christmas-customer-record-section {
    padding: 12px;
  }

  .christmas-customer-record-head {
    align-items: flex-start;
  }

  .christmas-customer-facts,
  .christmas-customer-facts.is-compact,
  .christmas-customer-static-more dl {
    grid-template-columns: 1fr;
  }

  .christmas-customer-facts > div,
  .christmas-customer-facts > div:first-child,
  .christmas-customer-facts > div:last-child {
    border-right: 0;
    border-bottom: 1px solid #e1e9e9;
    padding: 10px 0;
  }

  .christmas-customer-facts > div:last-child {
    border-bottom: 0;
  }

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

  .christmas-import-summary > span {
    min-height: 76px;
    border-bottom: 1px solid var(--lights-line);
  }

  .christmas-import-summary > span:nth-child(2n) {
    border-right: 0;
  }

  .christmas-import-summary > span:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }
}

.christmas-lights-drawer-overlay {
  place-items: center end;
  padding-left: max(14px, var(--safe-left));
  background: rgba(3, 21, 34, 0.48);
}

.christmas-lights-drawer {
  display: flex;
  flex-direction: column;
  width: min(690px, calc(100vw - 32px));
  max-height: calc(100dvh - max(30px, var(--safe-top)) - max(30px, var(--safe-bottom)));
  border: 1px solid rgba(13, 79, 64, 0.24);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(3, 21, 34, 0.3);
  overflow: hidden;
}

.christmas-lights-drawer-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 17px;
  border-bottom: 1px solid #cfe0dc;
  background: #edf8f4;
}

.christmas-lights-drawer-head .icon-button,
.christmas-lights-dialog .icon-button {
  border-color: var(--lights-line);
  color: var(--deep);
  background: #fff;
}

.christmas-lights-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  color: #fff;
  background: var(--lights-evergreen-dark);
  font-size: 0.95rem;
  font-weight: 1000;
}

.christmas-lights-drawer-head > div {
  min-width: 0;
}

.christmas-lights-drawer-head p,
.christmas-lights-drawer-head h2,
.christmas-lights-drawer-head span {
  margin: 0;
}

.christmas-lights-drawer-head p {
  color: var(--lights-evergreen-dark);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.christmas-lights-drawer-head h2 {
  overflow: hidden;
  margin-block: 3px;
  color: var(--deep);
  font-size: 1.3rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-lights-drawer-head > div > span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-lights-drawer-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  border-bottom: 1px solid var(--lights-line);
  padding: 10px 16px;
  overflow-x: auto;
}

.christmas-lights-drawer-actions > * {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid var(--lights-line);
  border-radius: 7px;
  padding: 7px 10px;
  color: var(--deep);
  background: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
}

.christmas-lights-drawer-actions svg,
.christmas-lights-work-orders svg,
.christmas-lights-list-head .button svg {
  width: 16px;
  height: 16px;
}

.christmas-lights-drawer-scroll {
  display: grid;
  gap: 16px;
  min-height: 0;
  padding: 16px max(16px, var(--safe-right)) max(18px, var(--safe-bottom)) max(16px, var(--safe-left));
  overflow-y: auto;
}

.christmas-lights-form {
  display: grid;
  gap: 13px;
}

.christmas-lights-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.christmas-lights-form-grid.is-lifecycle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.christmas-lights-form-grid.is-lifecycle > :nth-child(3) {
  grid-column: 1 / -1;
}

.christmas-lights-form-grid.is-renewal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.christmas-lights-renewal-details > div {
  gap: 12px;
}

.christmas-lights-renewal-inventory {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

[data-christmas-renewal-entry] {
  display: grid;
  gap: 11px;
}

[data-christmas-renewal-entry][hidden],
[data-christmas-storage-bin][hidden] {
  display: none;
}

.christmas-lights-form textarea {
  min-height: 86px;
  padding: 10px 11px;
  line-height: 1.4;
  resize: vertical;
}

.christmas-lights-form input:focus,
.christmas-lights-form select:focus,
.christmas-lights-form textarea:focus,
.christmas-lights-season-control select:focus,
.christmas-lights-search:focus-within,
.christmas-lights-customer-search > div:focus-within {
  border-color: #52a99a;
  outline: 3px solid rgba(23, 107, 85, 0.13);
}

.christmas-lights-form footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.christmas-lights-form-status {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 800;
}

.christmas-lights-notes {
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.christmas-lights-notes summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 43px;
  padding: 9px 11px;
  color: var(--deep);
  font-size: 0.82rem;
  font-weight: 950;
  cursor: pointer;
  list-style: none;
}

.christmas-lights-notes summary::-webkit-details-marker {
  display: none;
}

.christmas-lights-notes summary svg {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

.christmas-lights-notes[open] summary svg {
  transform: rotate(180deg);
}

.christmas-lights-notes > div {
  display: grid;
  gap: 11px;
  padding: 0 11px 11px;
}

.christmas-lights-work-orders {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--lights-line);
  padding-top: 14px;
}

.christmas-lights-work-orders header strong {
  color: var(--deep);
  font-size: 0.82rem;
}

.christmas-lights-work-orders > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.christmas-lights-work-order-links {
  display: grid !important;
  gap: 7px !important;
}

.christmas-lights-work-order-link {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--lights-line);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--deep);
  background: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
}

.christmas-lights-work-order-link:hover,
.christmas-lights-work-order-link:focus-visible {
  border-color: #80aaa9;
  outline: 0;
  background: #f2fbf8;
}

.christmas-lights-work-order-link svg {
  width: 16px;
  height: 16px;
}

.christmas-lights-work-order-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-lights-work-orders-empty {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.christmas-lights-dialog-overlay {
  z-index: 1450;
}

.christmas-lights-dialog {
  display: grid;
  gap: 12px;
  width: min(600px, 100%);
  max-height: min(88dvh, 820px);
  overflow-y: auto;
}

.christmas-sales-progress-dialog {
  width: min(560px, 100%);
}

.christmas-renewal-email-dialog {
  width: min(620px, 100%);
}

.christmas-renewal-email-dialog .app-issue-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.christmas-renewal-email-dialog form,
.christmas-renewal-email-dialog label {
  display: grid;
  gap: 7px;
}

.christmas-renewal-email-dialog form {
  gap: 12px;
}

.christmas-renewal-email-dialog label > span {
  color: #526774;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.christmas-renewal-email-dialog input,
.christmas-renewal-email-dialog textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--lights-line);
  border-radius: 7px;
  padding: 10px 11px;
  color: var(--deep);
  background: #fff;
  font: inherit;
}

.christmas-renewal-email-dialog textarea {
  min-height: 190px;
  line-height: 1.45;
  resize: vertical;
}

.christmas-renewal-email-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0;
  border: 1px solid #b8ddd2;
  border-radius: 7px;
  padding: 9px 10px;
  color: #285c4f;
  background: #edf8f4;
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1.35;
}

.christmas-renewal-email-note svg {
  width: 18px;
  height: 18px;
}

.christmas-renewal-email-dialog .form-status.is-success {
  color: var(--lights-evergreen-dark);
}

.christmas-sales-progress-dialog .app-issue-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.christmas-sales-progress-dialog form {
  display: grid;
  gap: 12px;
}

.christmas-sales-progress-dialog fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.christmas-sales-progress-dialog legend,
.christmas-sales-progress-fields label > span {
  margin-bottom: 6px;
  color: #526774;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.christmas-sales-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.christmas-sales-outcomes legend {
  grid-column: 1 / -1;
}

.christmas-sales-outcome {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 17px;
  gap: 8px;
  align-items: center;
  min-height: 61px;
  border: 1px solid #d7e1e5;
  border-radius: 7px;
  padding: 8px 9px;
  background: #fff;
  cursor: pointer;
}

.christmas-sales-outcome:hover,
.christmas-sales-outcome:has(input:focus-visible) {
  border-color: #79a9a4;
  outline: 3px solid rgba(23, 107, 85, 0.1);
}

.christmas-sales-outcome:has(input:checked) {
  border-color: var(--lights-evergreen);
  color: var(--lights-evergreen-dark);
  background: #edf8f4;
  box-shadow: inset 0 0 0 1px var(--lights-evergreen);
}

.christmas-sales-outcome.is-danger:has(input:checked) {
  border-color: #b72b45;
  color: #8e1e33;
  background: #fff0f3;
  box-shadow: inset 0 0 0 1px #b72b45;
}

.christmas-sales-outcome input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.christmas-sales-outcome > svg:first-of-type {
  width: 22px;
  height: 22px;
}

.christmas-sales-outcome > svg:last-child {
  width: 16px;
  height: 16px;
  opacity: 0;
}

.christmas-sales-outcome:has(input:checked) > svg:last-child {
  opacity: 1;
}

.christmas-sales-outcome span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.christmas-sales-outcome strong {
  color: var(--deep);
  font-size: 0.78rem;
}

.christmas-sales-outcome em {
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.christmas-sales-progress-fields {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1fr);
  gap: 8px;
}

.christmas-sales-progress-fields label {
  display: grid;
  align-content: start;
  min-width: 0;
}

.christmas-sales-progress-fields input,
.christmas-sales-progress-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--lights-line);
  border-radius: 7px;
  padding: 10px 11px;
  color: var(--deep);
  background: #fff;
  font: inherit;
}

.christmas-sales-progress-fields textarea {
  min-height: 45px;
  resize: vertical;
}

.christmas-sales-outside-contact {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--lights-line) !important;
  padding-top: 11px !important;
}

.christmas-sales-outside-contact > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.christmas-sales-outside-contact label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  border: 1px solid #d7e1e5;
  border-radius: 6px;
  padding: 6px 9px;
  color: #526774;
  background: #f8fafb;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
}

.christmas-sales-outside-contact label:has(input:checked),
.christmas-sales-outside-contact label.is-complete {
  border-color: #a6d5c7;
  color: #0d5b49;
  background: #eaf7f2;
}

.christmas-sales-outside-contact label.is-unavailable {
  opacity: 0.45;
  cursor: not-allowed;
}

.christmas-sales-outside-contact svg {
  width: 15px;
  height: 15px;
}

.christmas-sales-progress-dialog .form-status {
  min-height: 18px;
  margin: 0;
  color: #9d1e35;
  font-size: 0.72rem;
  font-weight: 850;
}

.christmas-sales-progress-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.christmas-import-dialog {
  width: min(720px, 100%);
}

.christmas-import-form {
  display: grid;
  gap: 10px;
}

.christmas-import-file {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  padding: 9px 11px;
  background: #fff;
  cursor: pointer;
}

.christmas-import-file:hover,
.christmas-import-file:focus-within {
  border-color: #72a99d;
  outline: 3px solid rgba(23, 107, 85, 0.1);
}

.christmas-import-file > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  color: var(--lights-evergreen-dark);
  background: #e2f3ee;
}

.christmas-import-file svg {
  width: 19px;
  height: 19px;
}

.christmas-import-file > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.christmas-import-file strong,
.christmas-import-file em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-import-file strong {
  color: var(--deep);
  font-size: 0.82rem;
}

.christmas-import-file em {
  color: var(--muted);
  font-size: 0.71rem;
  font-style: normal;
  font-weight: 750;
}

.christmas-import-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.christmas-import-preview {
  min-height: 105px;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  background: #f7fafb;
  overflow: hidden;
}

.christmas-import-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 105px;
}

.christmas-import-summary > span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-right: 1px solid var(--lights-line);
  padding: 9px 5px;
  text-align: center;
}

.christmas-import-summary > span:last-child {
  border-right: 0;
}

.christmas-import-summary svg {
  width: 17px;
  height: 17px;
  color: var(--lights-evergreen);
}

.christmas-import-summary b {
  color: var(--deep);
  font-size: 1.15rem;
}

.christmas-import-summary em {
  color: var(--muted);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 850;
}

.christmas-import-form footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.christmas-import-photo-summary {
  margin: 0;
  border-top: 1px solid var(--lights-line);
  padding: 8px 10px;
  color: var(--muted);
  background: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.christmas-import-review-list {
  display: grid;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  overflow: hidden;
}

.christmas-import-review-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid var(--lights-line);
  padding: 8px 10px;
  color: inherit;
  text-decoration: none;
}

.christmas-import-review-row:last-child {
  border-bottom: 0;
}

.christmas-import-review-row > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: #8a5f08;
  background: #fff0cc;
}

.christmas-import-review-row > span.is-bin_conflict {
  color: #9d1e35;
  background: #ffe8ed;
}

.christmas-import-review-row svg {
  width: 16px;
  height: 16px;
}

.christmas-import-review-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.christmas-import-review-row strong {
  color: var(--deep);
  font-size: 0.8rem;
}

.christmas-import-review-row em {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.69rem;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-lights-customer-search > div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 44px;
  padding: 9px 11px;
}

.christmas-lights-customer-results {
  display: grid;
  grid-auto-rows: minmax(58px, auto);
  max-height: 310px;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  overflow-y: auto;
}

.christmas-lights-customer-results[hidden] {
  display: none;
}

[data-christmas-customer-mode][hidden] {
  display: none;
}

.christmas-lights-customer-results > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--lights-line);
  padding: 7px 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-lights-customer-results > button:last-child {
  border-bottom: 0;
}

.christmas-lights-customer-results > button:hover,
.christmas-lights-customer-results > button:focus-visible {
  outline: 0;
  background: #eff8f5;
}

.christmas-lights-customer-results > button > span,
.christmas-lights-selected-customer > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  color: var(--lights-evergreen-dark);
  background: #dff2ec;
  font-size: 0.76rem;
  font-weight: 1000;
}

.christmas-lights-customer-results > button > div,
.christmas-lights-selected-customer > div {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.christmas-lights-customer-results strong,
.christmas-lights-customer-results em,
.christmas-lights-selected-customer strong,
.christmas-lights-selected-customer em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-lights-customer-results strong,
.christmas-lights-selected-customer strong {
  display: block;
  color: var(--deep);
  font-size: 0.84rem;
  line-height: 1.2;
}

.christmas-lights-customer-results em,
.christmas-lights-selected-customer em {
  display: block;
  color: var(--muted);
  font-size: 0.73rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.christmas-lights-selected-customer {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid #b7dcd2;
  border-radius: 8px;
  padding: 10px;
  background: #eff9f6;
}

.christmas-lights-selected-customer[hidden],
[data-christmas-property-wrap][hidden] {
  display: none;
}

.christmas-lights-create-customer-choice {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  border: 1px dashed #8fbbb0;
  border-radius: 8px;
  padding: 10px;
  color: var(--deep);
  background: #f0faf7;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-lights-create-customer-choice[hidden] {
  display: none;
}

.christmas-lights-create-customer-choice:hover,
.christmas-lights-create-customer-choice:focus-visible {
  border-style: solid;
  border-color: var(--lights-evergreen);
  outline: 3px solid rgba(23, 107, 85, 0.12);
  background: #e5f6f1;
}

.christmas-lights-create-customer-choice > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-lights-create-customer-choice > span svg,
.christmas-lights-create-customer-choice > svg,
.christmas-lights-existing-customer-choice svg,
.christmas-lights-new-customer-section > header svg {
  width: 17px;
  height: 17px;
}

.christmas-lights-create-customer-choice > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.christmas-lights-create-customer-choice strong,
.christmas-lights-create-customer-choice em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-lights-create-customer-choice strong {
  font-size: 0.84rem;
}

.christmas-lights-create-customer-choice em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
}

.christmas-lights-customer-dialog:has(.christmas-lights-new-customer-form:not([hidden])) {
  width: min(700px, 100%);
}

.christmas-lights-existing-customer-choice {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-self: start;
  min-height: 34px;
  border: 0;
  padding: 0;
  color: var(--lights-evergreen-dark);
  background: transparent;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.christmas-lights-new-customer-section {
  display: grid;
  gap: 11px;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.christmas-lights-new-customer-section > header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.christmas-lights-new-customer-section > header > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  color: var(--lights-evergreen-dark);
  background: #dff2ec;
}

.christmas-lights-new-customer-section > header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.christmas-lights-new-customer-section > header strong {
  color: var(--deep);
  font-size: 0.86rem;
}

.christmas-lights-new-customer-section > header em {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 750;
}

.christmas-lights-new-customer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.christmas-lights-new-customer-grid > .is-wide {
  grid-column: 1 / -1;
}

.christmas-lights-new-customer-grid .crm-client-phone-field {
  align-content: start;
  grid-column: 1 / -1;
  min-width: 0;
}

.christmas-lights-new-customer-grid .crm-phone-segments {
  min-height: 44px;
}

.christmas-lights-new-customer-notes {
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  background: #fff;
}

.christmas-lights-new-customer-notes summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--deep);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.christmas-lights-new-customer-notes summary::-webkit-details-marker {
  display: none;
}

.christmas-lights-new-customer-notes summary svg {
  width: 16px;
  height: 16px;
}

.christmas-lights-new-customer-notes textarea {
  width: calc(100% - 22px);
  margin: 0 11px 11px;
}

.christmas-lights-form-status[data-tone="error"] {
  color: #a21d35;
}

.christmas-lights-form-status[data-tone="working"] {
  color: var(--lights-evergreen-dark);
}

[data-christmas-kit-assignment].is-required > span::after {
  content: " *";
  color: var(--lights-red);
}

@media (max-width: 900px) {
  .christmas-lights-controls {
    grid-template-columns: 128px minmax(0, 1fr) auto;
  }

  .christmas-lights-stage-tabs {
    display: flex;
    gap: 6px;
    width: 100%;
    padding-bottom: 2px;
    overflow-x: auto;
  }

  .christmas-lights-stage-tabs.is-always-visible {
    display: flex;
  }

  .christmas-lights-stage-tabs a {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    flex: 0 0 auto;
    min-height: 36px;
    border: 1px solid var(--lights-line);
    border-radius: 7px;
    padding: 7px 9px;
    color: var(--slate);
    background: #fff;
    font-size: 0.74rem;
    font-weight: 900;
    text-decoration: none;
  }

  .christmas-lights-stage-tabs a.is-active {
    border-color: var(--lights-evergreen);
    color: #fff;
    background: var(--lights-evergreen-dark);
  }

  .christmas-lights-stage-tabs b {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    padding-inline: 5px;
    color: inherit;
    background: rgba(130, 149, 158, 0.16);
    font-size: 0.68rem;
  }

  .christmas-lights-stage-tabs a.is-active b {
    background: rgba(255, 255, 255, 0.2);
  }

  .christmas-lights-board-wrap {
    overflow: visible;
  }

  .christmas-lights-board {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .christmas-lights-stage {
    display: none;
  }

  .christmas-lights-stage.is-mobile-active {
    display: block;
  }

  .christmas-lights-stage-list {
    max-height: none;
  }

  .christmas-lights-stage[data-christmas-stage="needs_quote"] .christmas-lights-stage-list {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .christmas-needs-quote-groups {
    height: auto;
  }

  .christmas-origin-group.is-expanded {
    flex: 0 0 auto;
  }

  .christmas-origin-group-list {
    max-height: min(620px, 68dvh);
  }

  .christmas-lights-list-row,
  .christmas-lights-history-row {
    grid-template-columns: 40px minmax(0, 1fr) auto 18px;
  }

  .christmas-lights-list-status {
    display: none;
  }

  .christmas-lights-history-year {
    grid-column: 1;
  }

  .christmas-lights-history-row .christmas-lights-list-main {
    grid-column: 2;
  }

  .christmas-lights-history-source {
    display: none;
  }

  .christmas-lights-history-row > b {
    grid-column: 3;
  }
}

@media (max-width: 620px) {
  .christmas-lights-heading {
    align-items: center;
  }

  .christmas-lights-heading .eyebrow {
    display: none;
  }

  .christmas-lights-control-actions .button {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .christmas-lights-control-actions .button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .christmas-lights-controls {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 7px;
  }

  .christmas-lights-control-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 100%;
  }

  .christmas-lights-search {
    grid-template-columns: 18px minmax(0, 1fr);
    padding-right: 9px;
  }

  .christmas-lights-search .button {
    display: none;
  }

  .christmas-lights-tabs {
    width: 100%;
    scrollbar-width: none;
  }

  .christmas-lights-tabs::-webkit-scrollbar,
  .christmas-lights-stage-tabs::-webkit-scrollbar {
    display: none;
  }

  .christmas-lights-tabs a {
    flex: 1 0 auto;
    justify-content: center;
    min-width: 78px;
    padding-inline: 8px;
    font-size: 0.73rem;
  }

  .christmas-lights-tabs a svg {
    display: none;
  }

  .christmas-lights-list-head {
    min-height: 48px;
  }

  .christmas-lights-list-head > div {
    display: grid;
    gap: 1px;
  }

  .christmas-lights-list-head .button {
    min-width: 40px;
    width: 40px;
    padding: 0;
  }

  .christmas-lights-list-head .button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .christmas-lights-list-row,
  .christmas-lights-history-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 9px;
    padding-inline: 2px;
  }

  .christmas-lights-list-row > svg,
  .christmas-lights-history-row > svg {
    display: none;
  }

  .christmas-lights-list-icon {
    width: 34px;
    height: 34px;
  }

  .christmas-lights-sla,
  .christmas-lights-kit-location,
  .christmas-lights-history-row > b {
    grid-column: 3;
    font-size: 0.68rem;
  }

  .christmas-lights-kit-location {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .christmas-lights-history-year {
    font-size: 0.78rem;
  }

  .christmas-lights-drawer-overlay,
  .christmas-lights-dialog-overlay {
    place-items: stretch;
    padding: 0;
  }

  .christmas-lights-drawer,
  .christmas-lights-dialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .christmas-lights-dialog {
    align-content: start;
    padding: max(16px, var(--safe-top)) max(14px, var(--safe-right)) max(16px, var(--safe-bottom)) max(14px, var(--safe-left));
  }

  .christmas-lights-drawer-head {
    padding: max(14px, var(--safe-top)) 12px 13px;
  }

  .christmas-lights-drawer-actions {
    padding-inline: 12px;
  }

  .christmas-lights-form-grid,
  .christmas-lights-form-grid.is-lifecycle,
  .christmas-lights-form-grid.is-renewal {
    grid-template-columns: 1fr;
  }

  .christmas-lights-form-grid.is-lifecycle > :nth-child(3) {
    grid-column: 1;
  }

  .christmas-lights-new-customer-grid {
    grid-template-columns: 1fr;
  }

  .christmas-lights-new-customer-grid > .is-wide {
    grid-column: 1;
  }

  .christmas-lights-new-customer-grid .crm-client-phone-field {
    grid-column: 1;
  }

  .christmas-lights-customer-dialog .app-issue-head > div,
  .christmas-lights-new-customer-section > header > div {
    min-width: 0;
  }

  .christmas-lights-new-customer-section > header strong,
  .christmas-lights-new-customer-section > header em,
  .christmas-lights-new-customer-grid label > span {
    overflow-wrap: anywhere;
  }

  .christmas-lights-create-customer-choice em {
    white-space: normal;
  }

  .christmas-lights-form footer > .button {
    flex: 1 1 auto;
  }

  .christmas-lights-customer-dialog .christmas-lights-form > footer {
    position: sticky;
    bottom: calc(-1 * max(16px, var(--safe-bottom)));
    z-index: 2;
    border-top: 1px solid var(--lights-line);
    margin: 0 -2px;
    padding: 10px 2px max(16px, var(--safe-bottom));
    background: rgba(255, 255, 255, 0.98);
  }

  .christmas-lights-renewal-inventory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .christmas-lights-sheet-head .button {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }

  .christmas-lights-sheet-head .button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .christmas-lights-sheet-wrap {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .christmas-lights-sheet table,
  .christmas-lights-sheet tbody,
  .christmas-lights-sheet tr,
  .christmas-lights-sheet td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .christmas-lights-sheet table {
    table-layout: auto;
  }

  .christmas-lights-sheet thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .christmas-lights-sheet tbody {
    display: grid;
    gap: 9px;
  }

  .christmas-lights-sheet tr {
    border: 1px solid var(--lights-line);
    border-left: 4px solid var(--lights-evergreen);
    border-radius: 8px;
    padding: 10px;
    background: #fff;
  }

  .christmas-lights-sheet td {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px;
    border: 0;
    padding: 6px 2px;
  }

  .christmas-lights-sheet td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 950;
    text-transform: uppercase;
  }

  .christmas-lights-sheet td:first-child {
    display: block;
    border-bottom: 1px solid var(--lights-line);
    padding: 2px 2px 9px;
  }

  .christmas-lights-sheet td:first-child::before,
  .christmas-lights-sheet-actions::before {
    display: none;
  }

  .christmas-lights-sheet-actions {
    position: static;
    display: flex !important;
    justify-content: flex-end;
    border-top: 1px solid var(--lights-line) !important;
    padding-top: 9px !important;
  }

  .christmas-lights-sheet-empty {
    display: grid !important;
    place-items: center;
  }

  .christmas-lights-sheet-empty::before {
    display: none;
  }

  .christmas-renewal-card {
    gap: 10px;
  }

  .christmas-renewal-checkpoint {
    min-height: 50px;
  }

  .christmas-renewal-status,
  .christmas-renewal-message {
    min-height: 44px;
  }

  .christmas-renewal-message {
    width: 44px;
    height: 44px;
  }

  .christmas-renewal-card-footer {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .christmas-not-closed-list {
    gap: 8px;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .christmas-not-closed-row {
    grid-template-columns: 1fr;
    gap: 9px;
    border: 1px solid var(--lights-line);
    border-left: 4px solid #7d8b94;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
  }

  .christmas-not-closed-row > button:first-child {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .christmas-not-closed-row .christmas-origin-badge {
    grid-column: 2;
  }

  .christmas-not-closed-reason {
    grid-column: 2 / -1;
  }

  .christmas-not-closed-row > button:first-child > b {
    grid-column: 3;
    grid-row: 1;
  }

  .christmas-not-closed-row > .button {
    justify-self: end;
  }

  .christmas-sales-outcomes,
  .christmas-sales-progress-fields {
    grid-template-columns: 1fr;
  }

  .christmas-sales-outcome {
    min-height: 64px;
  }

  .christmas-sales-progress-actions {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: #fff;
  }

  .christmas-sales-progress-actions .button {
    flex: 1 1 0;
  }
}

@media (max-width: 390px) {
  .christmas-lights-controls {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .christmas-lights-tabs a {
    min-width: 72px;
    font-size: 0.68rem;
  }

  .christmas-lights-record-meta small:not(.is-service, .is-urgent) {
    display: none;
  }

  .christmas-lights-drawer-head {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .christmas-lights-avatar {
    width: 38px;
    height: 38px;
  }
}

/* Christmas Lights visual quoting */
.christmas-lights-pricing-view {
  --lights-evergreen: #176b55;
  --lights-evergreen-dark: #0d4f40;
  --lights-red: #c9344c;
  --lights-line: #d7e2e2;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.christmas-design-context {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  border-bottom: 1px solid var(--lights-line);
  padding: 2px 2px 11px;
}

.christmas-design-context > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.christmas-design-context .christmas-lights-avatar {
  width: 40px;
  height: 40px;
}

.christmas-design-context p {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

.christmas-design-context strong,
.christmas-design-context em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-context strong {
  color: var(--deep);
  font-size: 0.94rem;
}

.christmas-design-context em {
  color: var(--muted);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 750;
}

.christmas-design-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  min-height: min(66vh, 650px);
  border: 1px dashed #9bbeb4;
  border-radius: 8px;
  padding: 28px;
  color: var(--deep);
  background: #f4faf8;
  text-align: center;
}

.christmas-design-empty h2,
.christmas-design-empty p {
  margin: 0;
}

.christmas-design-empty h2 {
  font-size: 1.15rem;
}

.christmas-design-empty p,
.christmas-design-empty [role="status"] {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.christmas-design-empty-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 8px;
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-design-empty-icon > svg:first-child {
  width: 30px;
  height: 30px;
}

.christmas-design-empty-icon > svg:last-child {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 16px;
  height: 16px;
  color: #ffd66d;
}

.christmas-design-photo-button {
  min-width: 160px;
  margin-top: 5px;
  cursor: pointer;
}

.christmas-design-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(292px, 330px);
  gap: 12px;
  min-width: 0;
  align-items: start;
}

.christmas-design-editor.is-grouping {
  grid-template-columns: minmax(0, 1fr);
}

.christmas-design-editor.is-inspector-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.christmas-design-main,
.christmas-design-quote-panel {
  min-width: 0;
  border: 1px solid var(--lights-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.christmas-design-quote-panel[hidden] {
  display: none;
}

.christmas-design-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 57px;
  padding: 7px;
  border-bottom: 1px solid var(--lights-line);
  background: #f5f8f8;
  overflow: visible;
}

.christmas-design-tool-list,
.christmas-design-history-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.christmas-design-tool-list {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.christmas-design-history-actions {
  border-left: 1px solid var(--lights-line);
  padding-left: 7px;
}

.christmas-design-history-actions .icon-button {
  flex: 0 0 auto;
  width: 40px;
  min-height: 40px;
  border-color: #cad8da;
  color: var(--lights-evergreen-dark);
  background: #fff;
}

.christmas-design-history-actions .icon-button:disabled {
  opacity: 0.38;
}

.christmas-design-multi-select-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 38px auto;
  grid-column: 1 / -1;
  gap: 6px;
  align-items: center;
  width: min(560px, 100%);
  margin-inline: auto;
}

.christmas-design-multi-select-bar > span {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--lights-evergreen-dark);
}

.christmas-design-multi-select-bar > span svg {
  width: 19px;
  height: 19px;
}

.christmas-design-multi-select-bar > span strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-multi-select-bar .button,
.christmas-design-multi-select-bar .icon-button {
  min-height: 38px;
}

.christmas-design-multi-select-bar .icon-button {
  width: 38px;
  border-color: #cad8da;
  background: #fff;
}

.christmas-design-whole-palette {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  right: 7px;
  display: grid;
  gap: 8px;
  width: min(430px, calc(100vw - 28px));
  border: 1px solid #bdccce;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(8, 34, 43, 0.2);
}

.christmas-design-whole-palette > header,
.christmas-design-whole-palette > header > span,
.christmas-design-whole-palette > div {
  display: flex;
  gap: 6px;
  align-items: center;
}

.christmas-design-whole-palette > header {
  justify-content: space-between;
}

.christmas-design-whole-palette > header > span {
  min-width: 0;
  color: var(--deep);
}

.christmas-design-whole-palette > header > span svg {
  width: 18px;
  height: 18px;
  color: var(--lights-evergreen);
}

.christmas-design-whole-palette > header strong {
  font-size: 0.76rem;
}

.christmas-design-whole-palette > header small {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  color: var(--lights-evergreen-dark);
  background: #e2f1ed;
  font-size: 0.62rem;
  font-weight: 900;
}

.christmas-design-whole-palette > header .icon-button {
  width: 30px;
  min-height: 30px;
}

.christmas-design-whole-palette > div {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 2px;
}

.christmas-design-palette-choice {
  display: grid;
  grid-template-columns: 34px auto;
  gap: 7px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid #cad8da;
  border-radius: 7px;
  padding: 4px 8px 4px 4px;
  color: var(--deep);
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.christmas-design-palette-choice > span {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border-radius: 5px;
  background: #102229;
}

.christmas-design-palette-choice i {
  display: block;
  width: 7px;
  height: 18px;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 7px var(--swatch);
}

.christmas-design-palette-choice b {
  font-size: 0.68rem;
  white-space: nowrap;
}

.christmas-design-palette-choice:hover,
.christmas-design-palette-choice:focus-visible,
.christmas-design-palette-choice.is-selected {
  border-color: var(--lights-evergreen);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(23, 107, 85, 0.12);
}

.christmas-design-canvas-wrap.is-multi-selecting {
  cursor: pointer;
}

.christmas-design-canvas-wrap.is-multi-selecting :is(
  [data-design-handle-layer],
  [data-design-draft-handle-index],
  [data-design-bend-layer],
  [data-design-resize-layer],
  [data-design-object-move-layer],
  [data-design-insert-layer]
) {
  pointer-events: none;
}

.christmas-design-canvas-wrap.is-multi-selecting :is(
  .christmas-design-handle-hit,
  .christmas-design-handle,
  .christmas-design-vertex-mark,
  .christmas-design-bend-hit,
  .christmas-design-bend-handle,
  .christmas-design-segment-insert,
  .christmas-design-object-move-hit,
  .christmas-design-object-outline,
  .christmas-design-resize-hit,
  .christmas-design-resize-handle
) {
  display: none;
}

.christmas-design-capture-bar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 26px 34px auto;
  grid-column: 1 / -1;
  gap: 7px;
  align-items: center;
  min-width: 0;
  border: 1px solid #a8c9c0;
  border-radius: 7px;
  padding: 5px;
  background: #eaf5f2;
}

.christmas-design-capture-bar > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-design-capture-bar > span svg {
  width: 17px;
  height: 17px;
}

.christmas-design-capture-bar > div {
  display: grid;
  gap: 0;
  min-width: 0;
}

.christmas-design-capture-bar small,
.christmas-design-capture-bar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-capture-bar small {
  color: #5b746d;
  font-size: 0.56rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-design-capture-bar strong {
  color: var(--deep);
  font-size: 0.78rem;
}

.christmas-design-capture-bar > b {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  border-radius: 999px;
  color: var(--lights-evergreen-dark);
  background: #fff;
  font-size: 0.65rem;
}

.christmas-design-capture-bar .icon-button {
  width: 34px;
  min-height: 34px;
  border-color: #bed3ce;
  color: var(--lights-evergreen-dark);
  background: #fff;
}

.christmas-design-capture-bar .icon-button svg {
  width: 16px;
  height: 16px;
}

.christmas-design-capture-bar .button {
  min-height: 34px;
}

[data-design-group="c9"] {
  --design-accent: #d88900;
  --design-accent-dark: #925d00;
  --design-accent-soft: #fff0c8;
}

[data-design-group="minis"] {
  --design-accent: #2474c7;
  --design-accent-dark: #174f8b;
  --design-accent-soft: #dcecff;
}

[data-design-group="garland"] {
  --design-accent: #16805d;
  --design-accent-dark: #0d5940;
  --design-accent-soft: #d9f1e8;
}

[data-design-group="objects"] {
  --design-accent: #b93f51;
  --design-accent-dark: #812b39;
  --design-accent-soft: #fde2e7;
}

.christmas-design-tool {
  display: inline-grid;
  grid-template-columns: 20px auto;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 40px;
  border: 1px solid #cad8da;
  border-radius: 7px;
  padding: 7px 9px;
  color: var(--design-accent-dark, var(--deep));
  background: var(--design-accent-soft, #fff);
  font: inherit;
  font-size: 0.73rem;
  font-weight: 900;
  cursor: pointer;
}

.christmas-design-tool svg {
  width: 18px;
  height: 18px;
  color: var(--design-accent, var(--lights-evergreen));
}

.christmas-design-tool:hover,
.christmas-design-tool:focus-visible,
.christmas-design-tool.is-active {
  border-color: var(--design-accent, var(--lights-evergreen));
  outline: 0;
  color: #fff;
  background: var(--design-accent-dark, var(--lights-evergreen-dark));
}

.christmas-design-tool.is-active svg,
.christmas-design-tool:hover svg,
.christmas-design-tool:focus-visible svg {
  color: #fff;
}

.christmas-design-object-picker {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 7px;
  right: 7px;
  display: flex;
  gap: 6px;
  align-items: stretch;
  max-height: min(190px, 32dvh);
  border: 1px solid #bfd0d1;
  border-radius: 8px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 34px rgba(3, 28, 36, 0.24);
  overflow-x: auto;
}

.christmas-design-object-picker button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  flex: 0 0 auto;
  width: 118px;
  min-width: 118px;
  min-height: 56px;
  border: 1px solid #cad8da;
  border-radius: 7px;
  padding: 7px 10px;
  color: var(--deep);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-design-object-picker button:hover,
.christmas-design-object-picker button:focus-visible {
  border-color: var(--lights-evergreen);
  outline: 2px solid rgba(23, 107, 85, 0.14);
}

.christmas-design-object-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 5px;
  background: #122128;
  overflow: hidden;
}

.christmas-design-object-preview svg,
.christmas-design-object-preview img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.christmas-design-object-picker span {
  font-size: 0.7rem;
  font-weight: 900;
}

.christmas-design-object-picker button > span:last-child {
  min-width: 0;
  line-height: 1.15;
  white-space: normal;
}

.christmas-design-brush-panel {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  right: 7px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: min(460px, calc(100% - 14px));
  min-width: 0;
  border: 1px solid #bfd0d1;
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 34px rgba(3, 28, 36, 0.24);
}

.christmas-design-brush-panel > header {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-width: max-content;
  color: var(--design-accent-dark, var(--lights-evergreen-dark));
  font-size: 0.72rem;
}

.christmas-design-brush-panel > header svg {
  width: 18px;
  height: 18px;
  color: var(--design-accent, var(--lights-evergreen));
}

.christmas-design-brush-colors {
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 2px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.christmas-design-brush-colors .christmas-design-color-swatch {
  width: 32px;
  min-height: 32px;
  padding: 3px;
}

.christmas-design-brush-colors .christmas-design-color-swatch i {
  width: 7px;
  height: 19px;
}

.christmas-design-brush-ranges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.christmas-design-brush-ranges label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.christmas-design-brush-ranges label > span {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-design-brush-ranges output {
  color: var(--design-accent-dark, var(--lights-evergreen-dark));
  font-size: 0.64rem;
}

.christmas-design-brush-ranges input {
  width: 100%;
  min-width: 0;
  accent-color: var(--design-accent, var(--lights-evergreen));
}

.christmas-design-prelit-toggle {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  border: 1px solid #d6e0e1;
  border-radius: 6px;
  padding: 5px 8px;
  background: #fff;
}

.christmas-design-prelit-toggle > span {
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}

.christmas-design-prelit-toggle em {
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
  text-transform: none;
}

.christmas-design-prelit-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--design-accent, var(--lights-evergreen));
}

.christmas-design-canvas-wrap,
.quote-christmas-design-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: var(--design-aspect);
  min-height: 360px;
  background: #13242b;
  overflow: hidden;
  contain: layout paint style;
}

.christmas-design-scene,
.quote-christmas-design-canvas > img,
.quote-christmas-design-canvas > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.christmas-design-scene {
  transform-origin: center;
  will-change: transform;
}

.christmas-design-scene > img,
.christmas-design-scene > svg,
.christmas-design-photo-dim {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.christmas-design-scene > img,
.quote-christmas-design-canvas > img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.christmas-design-photo-dim {
  z-index: 1;
  background: #031017;
  pointer-events: none;
}

.christmas-design-scene > svg {
  z-index: 2;
}

.quote-christmas-design-canvas > img {
  z-index: 0;
}

.quote-christmas-design-canvas > .christmas-design-photo-dim {
  z-index: 1;
}

.quote-christmas-design-canvas > svg {
  z-index: 2;
}

.christmas-design-view-controls {
  position: absolute;
  z-index: 4;
  top: 9px;
  right: 9px;
  display: flex;
  gap: 4px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  padding: 4px;
  background: rgba(4, 24, 32, 0.82);
  box-shadow: 0 8px 22px rgba(2, 15, 22, 0.24);
  backdrop-filter: blur(8px);
}

.christmas-design-view-controls .icon-button {
  width: 36px;
  min-height: 36px;
  border: 0;
  color: #fff;
  background: transparent;
}

.christmas-design-view-controls .icon-button:hover,
.christmas-design-view-controls .icon-button:focus-visible,
.christmas-design-view-controls .icon-button.is-active {
  outline: 0;
  color: #17362e;
  background: #fff;
}

.christmas-design-view-controls .icon-button:disabled {
  opacity: 0.38;
}

.christmas-design-view-controls .christmas-design-view-mode {
  background: rgba(255, 255, 255, 0.08);
}

.christmas-design-view-controls .christmas-design-view-mode + .christmas-design-view-mode {
  margin-right: 3px;
}

.christmas-design-package-preview {
  position: absolute;
  z-index: 4;
  top: 9px;
  left: 9px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  max-width: calc(100% - 230px);
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 7px;
  padding: 4px 9px 4px 4px;
  color: #fff;
  background: rgba(4, 24, 32, 0.84);
  box-shadow: 0 8px 22px rgba(2, 15, 22, 0.24);
  backdrop-filter: blur(8px);
}

.christmas-design-package-preview b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  color: var(--lights-evergreen-dark);
  background: #fff;
  font-size: 0.72rem;
}

.christmas-design-package-preview span {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-photo-tone-popover {
  position: absolute;
  z-index: 5;
  top: 61px;
  right: 9px;
  display: grid;
  grid-template-columns: 18px minmax(110px, 1fr) 18px;
  gap: 8px;
  align-items: center;
  width: min(230px, calc(100% - 18px));
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  padding: 9px 10px;
  color: #fff;
  background: rgba(4, 24, 32, 0.9);
  box-shadow: 0 10px 28px rgba(2, 15, 22, 0.28);
  backdrop-filter: blur(8px);
}

.christmas-design-photo-tone-popover svg {
  width: 16px;
  height: 16px;
}

.christmas-design-photo-tone-popover input {
  width: 100%;
  min-width: 0;
  accent-color: #66c9b0;
}

.christmas-design-svg {
  touch-action: none;
  cursor: default;
}

.christmas-design-canvas-wrap.is-drawing .christmas-design-svg,
.christmas-design-canvas-wrap.is-panning .christmas-design-svg {
  touch-action: none;
}

.christmas-design-canvas-wrap {
  touch-action: none;
  overscroll-behavior: contain;
}

.christmas-design-canvas-wrap.is-drawing .christmas-design-svg {
  cursor: crosshair;
}

.christmas-design-canvas-wrap.is-group-selecting .christmas-design-svg,
.christmas-design-canvas-wrap.is-group-selecting .christmas-design-layer-hit {
  cursor: pointer;
}

.christmas-design-canvas-wrap.is-panning .christmas-design-svg {
  cursor: grab;
}

.christmas-design-canvas-wrap.is-panning .christmas-design-svg:active {
  cursor: grabbing;
}

.christmas-design-svg-layer {
  cursor: pointer;
  transition: opacity 150ms ease;
}

.christmas-design-svg-layer.is-direct-manipulation {
  transition: none;
  will-change: transform;
}

.christmas-design-svg-layer.is-direct-manipulation .christmas-design-layer-artwork > image,
.christmas-design-svg-layer.is-direct-manipulation .christmas-design-object-outline,
.christmas-design-svg-layer.is-direct-manipulation .christmas-design-resize-handle {
  filter: none !important;
}

.christmas-design-svg-layer.is-direct-manipulation .christmas-design-light-bloom,
.christmas-design-svg-layer.is-direct-manipulation .christmas-design-light-aura,
.christmas-design-svg-layer.is-direct-manipulation .christmas-design-mini-bloom,
.christmas-design-svg-layer.is-direct-manipulation .christmas-design-mini-halo,
.christmas-design-svg-layer.is-direct-manipulation .christmas-design-greenery-light-bloom,
.christmas-design-svg-layer.is-direct-manipulation .christmas-design-greenery-light-halo {
  display: none;
}

.christmas-design-svg-layer.is-direct-manipulation .christmas-design-mini-glow,
.christmas-design-svg-layer.is-direct-manipulation .christmas-design-greenery-light-body {
  filter: none !important;
}

.christmas-design-canvas-background {
  fill: transparent;
  pointer-events: all;
}

.christmas-design-svg-layer.is-selected {
  opacity: 1;
}

.christmas-design-selection-outline {
  fill: none;
  stroke: #67d8f5;
  stroke-width: 7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.48;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(4, 38, 50, 0.82));
}

.christmas-design-selection-outline.is-area {
  fill: rgba(103, 216, 245, 0.08);
  stroke-width: 3px;
  stroke-dasharray: 7 6;
}

.christmas-design-svg-layer.is-group-selected .christmas-design-selection-outline {
  stroke: #ffd867;
  stroke-width: 9px;
  opacity: 0.58;
  filter: drop-shadow(0 0 4px rgba(3, 24, 31, 0.9));
}

.christmas-design-group-selection-badge {
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(3, 24, 31, 0.72));
}

.christmas-design-group-selection-badge circle {
  fill: #ffd867;
  stroke: #17343b;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.christmas-design-group-selection-badge path {
  fill: none;
  stroke: #17343b;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.christmas-design-svg-layer.is-option-hidden {
  opacity: 0;
  visibility: hidden;
}

.christmas-design-svg-layer.is-scope-hidden {
  display: none;
}

.christmas-design-svg-layer.is-package-hidden {
  display: none;
}

.christmas-design-svg-layer.is-layer-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.christmas-design-light-glow {
  pointer-events: none;
  mix-blend-mode: screen;
}

.christmas-design-light-bloom {
  opacity: 0.82;
}

.christmas-design-light-aura,
.christmas-design-light-core {
  mix-blend-mode: screen;
}

.christmas-design-light-aura {
  opacity: 0.72;
}

.christmas-design-light-body {
  opacity: 0.9;
  mix-blend-mode: screen;
}

.christmas-design-greenery-light-body {
  opacity: 0.82;
  mix-blend-mode: screen;
}

.christmas-design-greenery-light-bloom {
  opacity: 0.56;
  mix-blend-mode: screen;
}

.christmas-design-greenery-light-halo {
  opacity: 0.74;
  mix-blend-mode: screen;
}

.christmas-design-mini-bloom {
  opacity: 0.45;
  mix-blend-mode: screen;
  pointer-events: none;
}

.christmas-design-mini-halo {
  opacity: 0.62;
  mix-blend-mode: screen;
  pointer-events: none;
}

.christmas-design-mini-glow {
  opacity: 0.88;
  mix-blend-mode: screen;
  pointer-events: visiblePainted;
}

.christmas-design-mini-core {
  fill: #fffef7;
  opacity: 0.98;
  mix-blend-mode: screen;
  pointer-events: none;
}

.christmas-design-layer-artwork {
  pointer-events: none;
}

.christmas-design-fast-artwork path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.christmas-design-fast-wire {
  stroke: rgba(5, 14, 18, 0.72);
}

.christmas-design-fast-garland {
  stroke: #174c36;
  opacity: 0.92;
}

.christmas-design-fast-artwork path.christmas-design-fast-bulb-bloom,
.christmas-design-fast-artwork path.christmas-design-fast-bulb-body,
.christmas-design-fast-artwork path.christmas-design-fast-bulb-core {
  stroke: none;
}

.christmas-design-fast-artwork path.christmas-design-fast-bulb-bloom,
.christmas-design-fast-artwork path.christmas-design-fast-bulb-body {
  fill: var(--fast-light-color);
  mix-blend-mode: screen;
}

.christmas-design-fast-artwork path.christmas-design-fast-bulb-bloom {
  opacity: 0.24;
}

.christmas-design-fast-artwork path.christmas-design-fast-bulb-body {
  opacity: 0.9;
}

.christmas-design-fast-artwork path.christmas-design-fast-bulb-core {
  fill: #fffdf3;
  opacity: 0.96;
  mix-blend-mode: screen;
}

.christmas-design-garland-texture {
  opacity: 0.98;
  pointer-events: none;
}

.christmas-design-layer-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
  cursor: pointer;
  touch-action: manipulation;
}

path.christmas-design-layer-hit {
  fill: none;
  pointer-events: stroke;
  vector-effect: non-scaling-stroke;
}

path.christmas-design-layer-hit.is-area {
  fill: transparent;
  pointer-events: fill;
}

.christmas-design-shrub-boundary {
  fill: rgba(102, 201, 176, 0.08);
  stroke: rgba(225, 255, 248, 0.76);
  stroke-width: 1.75px;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.christmas-design-shrub-boundary.is-drawing {
  fill: rgba(102, 201, 176, 0.14);
  stroke: #e4fff8;
  opacity: 0.96;
}

.christmas-design-area-move-hit {
  fill: transparent;
  stroke: transparent;
  cursor: grab;
  pointer-events: fill;
  touch-action: none;
}

.christmas-design-area-move-hit:active {
  cursor: grabbing;
}

.christmas-design-canvas-wrap.is-drawing .christmas-design-layer-hit {
  cursor: crosshair;
}

.christmas-design-canvas-wrap.is-drawing .christmas-design-svg-layer {
  cursor: crosshair;
}

.christmas-design-canvas-wrap.is-drawing .christmas-design-layer-hit,
.christmas-design-canvas-wrap.is-drawing .christmas-design-area-move-hit,
.christmas-design-canvas-wrap.is-drawing .christmas-design-handle-hit,
.christmas-design-canvas-wrap.is-drawing .christmas-design-segment-hit,
.christmas-design-canvas-wrap.is-drawing .christmas-design-bend-hit,
.christmas-design-canvas-wrap.is-drawing .christmas-design-object-move-hit,
.christmas-design-canvas-wrap.is-drawing .christmas-design-resize-hit {
  pointer-events: none;
}

.christmas-design-canvas-wrap.is-drawing .christmas-design-selection-outline,
.christmas-design-canvas-wrap.is-drawing .christmas-design-handle,
.christmas-design-canvas-wrap.is-drawing .christmas-design-vertex-mark,
.christmas-design-canvas-wrap.is-drawing .christmas-design-segment-hint,
.christmas-design-canvas-wrap.is-drawing .christmas-design-bend-handle,
.christmas-design-canvas-wrap.is-drawing .christmas-design-bend-mark,
.christmas-design-canvas-wrap.is-drawing .christmas-design-object-outline,
.christmas-design-canvas-wrap.is-drawing .christmas-design-object-move-handle,
.christmas-design-canvas-wrap.is-drawing .christmas-design-object-move-mark,
.christmas-design-canvas-wrap.is-drawing .christmas-design-resize-handle {
  opacity: 0;
}

.christmas-design-svg-layer.is-live-preview {
  pointer-events: none;
}

.christmas-design-net-lines {
  fill: none;
  stroke: rgba(10, 39, 30, 0.74);
  stroke-width: 1.4px;
  pointer-events: none;
}

.christmas-design-handle {
  fill: rgba(255, 255, 255, 0.9);
  stroke: var(--design-accent-dark, rgba(13, 79, 64, 0.92));
  stroke-width: 1.25px;
  filter: none;
}

.christmas-design-handle {
  pointer-events: none;
}

.christmas-design-handle-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 26px;
  cursor: grab;
  pointer-events: all;
  touch-action: none;
  vector-effect: non-scaling-stroke;
}

.christmas-design-handle-hit.is-priority-grab {
  stroke-width: 52px;
}

.christmas-design-handle-hit:active {
  cursor: grabbing;
}

.christmas-design-handle.is-remove {
  fill: #fff1f3;
  stroke: #be123c;
}

.christmas-design-handle-hit.is-remove {
  cursor: pointer;
}

.christmas-design-handle-hit.is-remove:active {
  cursor: pointer;
}

.christmas-design-segment-hit {
  fill: none;
  stroke: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: copy;
  touch-action: none;
  vector-effect: non-scaling-stroke;
}

.christmas-design-segment-hint {
  fill: none;
  stroke: var(--design-accent, var(--lights-evergreen));
  stroke-width: 1.75px;
  stroke-dasharray: 4 5;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
  transition: opacity 120ms ease;
}

.christmas-design-segment-hit:hover + .christmas-design-segment-hint {
  opacity: 0.48;
}

.christmas-design-bend-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 18px;
  cursor: move;
  pointer-events: all;
  touch-action: none;
  vector-effect: non-scaling-stroke;
}

.christmas-design-bend-handle {
  fill: rgba(255, 255, 255, 0.82);
  stroke: var(--design-accent, var(--lights-evergreen));
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(2, 19, 25, 0.42));
}

.christmas-design-bend-handle.is-curved {
  fill: var(--design-accent, var(--lights-evergreen));
  stroke: #fff;
}

.christmas-design-bend-mark {
  fill: none;
  stroke: var(--design-accent-dark, var(--lights-evergreen-dark));
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.christmas-design-bend-handle.is-curved + .christmas-design-bend-mark {
  stroke: #fff;
}

.christmas-design-object-outline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1px;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(3, 20, 18, 0.72));
}

.christmas-design-object-move-hit {
  fill: transparent;
  stroke: transparent;
  cursor: grab;
  pointer-events: all;
  touch-action: none;
}

.christmas-design-object-move-hit:active {
  cursor: grabbing;
}

.christmas-design-object-move-handle {
  fill: rgba(7, 43, 54, 0.82);
  stroke: #fff;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(2, 19, 25, 0.4));
}

.christmas-design-object-move-mark,
.christmas-design-vertex-mark {
  fill: var(--design-accent-dark, var(--lights-evergreen-dark));
  stroke: none;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.christmas-design-resize-handle {
  fill: rgba(255, 255, 255, 0.9);
  stroke: var(--design-accent-dark, var(--lights-evergreen-dark));
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.christmas-design-resize-hit {
  fill: transparent;
  stroke: transparent;
  cursor: nwse-resize;
  pointer-events: all;
  touch-action: none;
}

.christmas-design-resize-hit[data-design-resize-corner="ne"],
.christmas-design-resize-hit[data-design-resize-corner="sw"] {
  cursor: nesw-resize;
}

.christmas-design-draw-actions {
  position: absolute;
  inset: auto 10px 10px;
  display: flex;
  gap: 7px;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 20px);
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  padding: 6px;
  color: #fff;
  background: rgba(5, 28, 38, 0.9);
  box-shadow: 0 8px 25px rgba(2, 20, 28, 0.28);
}

.christmas-design-draw-actions > span {
  overflow: hidden;
  padding-inline: 5px;
  font-size: 0.75rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-draw-actions .icon-button {
  color: #fff;
  background: transparent;
}

.christmas-design-canvas-footer {
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 3px 9px;
  border-top: 1px solid var(--lights-line);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.christmas-design-canvas-footer .icon-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  color: var(--lights-evergreen-dark);
  background: #f4f8f7;
  cursor: pointer;
}

.christmas-design-photo-tone {
  display: grid;
  grid-template-columns: 18px minmax(70px, 1fr) 18px;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: #49606e;
}

.christmas-design-photo-tone svg {
  width: 16px;
  height: 16px;
}

.christmas-design-photo-tone input {
  width: 100%;
  min-width: 0;
  accent-color: var(--lights-evergreen);
}

.christmas-design-inspector-head {
  min-height: 54px !important;
}

.christmas-design-grouping-title {
  display: inline-flex !important;
  gap: 7px !important;
  align-items: center;
  min-width: 0;
}

.christmas-design-grouping-title svg {
  width: 18px;
  height: 18px;
  color: var(--lights-evergreen);
}

.christmas-design-grouping-title strong {
  font-size: 0.88rem !important;
}

.christmas-design-inspector-tabs {
  display: inline-grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px !important;
  align-items: center;
  border: 1px solid #cbd9da;
  border-radius: 7px;
  padding: 3px;
  background: #fff;
}

.christmas-design-inspector-tabs button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  padding: 5px 8px;
  color: #5c6e77;
  background: transparent;
  font: inherit;
  font-size: 0.69rem;
  font-weight: 900;
  cursor: pointer;
}

.christmas-design-inspector-tabs button > b {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: #fff;
  background: #87979d;
  font-size: 0.56rem;
}

.christmas-design-inspector-tabs button.is-active > b {
  color: var(--lights-evergreen-dark);
  background: #fff;
}

.christmas-design-inspector-tabs button.is-active {
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-design-inspector-tabs svg {
  width: 15px;
  height: 15px;
}

.christmas-design-quote-panel > header .christmas-design-inspector-tabs span {
  color: inherit;
  font: inherit;
  text-transform: none;
}

.christmas-package-present {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) 48px auto;
  color: #fff;
  background: #07171f;
}

.christmas-package-present > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  font-size: 0.78rem;
  font-weight: 900;
}

.christmas-package-present > header .icon-button,
.christmas-package-present-arrow {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.christmas-package-present > main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 12px;
  align-items: center;
  min-height: 0;
  padding: 14px;
}

.christmas-package-present > main > article {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  width: min(1180px, 100%);
  height: 100%;
  min-height: 0;
  margin: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: #102934;
  overflow: hidden;
}

.christmas-package-present-image {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  background: #06131a;
  cursor: pointer;
}

.christmas-package-present-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.christmas-package-present-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.christmas-package-present-image > img,
.christmas-package-present-image > .christmas-design-photo-dim,
.christmas-package-present-image > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.christmas-package-present-image > img {
  z-index: 0;
  object-fit: contain;
}

.christmas-package-present-image > .christmas-design-photo-dim {
  z-index: 1;
}

.christmas-package-present-image > svg {
  z-index: 2;
}

.christmas-package-present article > footer {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px 18px;
  background: #fff;
}

.christmas-package-present article > footer > span {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.christmas-package-present-offer > span > strong,
.christmas-package-present-offer > span > small,
.christmas-package-present-offer > strong > small {
  display: block;
}

.christmas-package-present-offer small {
  color: #607583;
  font-size: 0.7rem;
  font-weight: 800;
}

.christmas-package-present-offer > strong {
  text-align: right;
}

.christmas-package-present-actions {
  display: grid;
  grid-template-columns: minmax(130px, 0.45fr) minmax(180px, 1fr);
  gap: 8px;
  border-top: 1px solid #dbe5e8;
  padding: 10px 18px;
  background: #f7fafb;
}

.christmas-package-present-actions .button {
  min-height: 46px;
}

.christmas-package-present-actions .button.is-selected {
  border-color: #0d6a55;
  color: #0d6a55;
  background: #e8f8f2;
}

.christmas-package-present-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 9px max(14px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  color: #fff;
  background: #0b242f;
}

.christmas-package-present-continue span {
  font-size: 0.72rem;
  font-weight: 850;
}

.christmas-package-present-continue .button {
  min-width: 190px;
}

.christmas-package-present article > footer b {
  display: grid;
  place-items: center;
  min-width: 39px;
  height: 39px;
  border-radius: 6px;
  color: #fff;
  background: #c9344c;
  font-size: 0.75rem;
}

.christmas-package-present article > footer strong {
  color: #103e51;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 950;
}

.christmas-package-present article > footer > strong {
  color: #0d6a55;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
}

.christmas-package-present > nav {
  display: flex;
  gap: 7px;
  align-items: start;
  justify-content: center;
}

.christmas-package-present > nav button {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 900;
  cursor: pointer;
}

.christmas-package-present > nav button.is-active {
  border-color: #ffd66d;
  color: #102934;
  background: #ffd66d;
}

.christmas-design-scope-toolbar {
  position: sticky;
  z-index: 3;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  border-bottom: 1px solid var(--lights-line);
  padding: 8px;
  background: rgba(255, 255, 255, 0.97);
}

.christmas-design-scope-toolbar .button {
  min-width: 0;
  min-height: 39px;
  padding-inline: 8px;
}

.christmas-design-scope-toolbar .christmas-design-next-action {
  justify-content: center;
  width: 100%;
}

.christmas-design-scope-toolbar > .christmas-design-group-hub {
  border: 0;
  padding: 0;
  background: transparent;
}

.christmas-design-scope-toolbar > .icon-button {
  width: 39px;
  height: 39px;
  border-color: var(--lights-line);
  color: var(--lights-evergreen-dark);
  background: #fff;
}

.christmas-design-offers {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--lights-line);
  padding: 9px;
  background: #f7faf9;
}

.christmas-design-view-all {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 45px;
  border: 1px solid #b8cbc8;
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--deep);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-design-view-all > span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.christmas-design-view-all svg {
  width: 18px;
  height: 18px;
  color: var(--lights-evergreen);
}

.christmas-design-view-all strong,
.christmas-design-view-all em {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 900;
}

.christmas-design-view-all em {
  color: var(--lights-evergreen-dark);
}

.christmas-design-view-all:hover,
.christmas-design-view-all:focus-visible,
.christmas-design-view-all.is-active {
  outline: 0;
  border-color: var(--lights-evergreen);
  background: #eaf5f2;
}

.christmas-design-view-all.is-active {
  box-shadow: inset 0 0 0 1px var(--lights-evergreen);
}

.christmas-design-offers > header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.christmas-design-offers > header span {
  color: var(--deep);
  font-size: 0.74rem;
  font-weight: 900;
}

.christmas-design-offers > header small {
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 750;
}

.christmas-design-offer-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.christmas-design-offer-tab {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: 22px auto auto;
  gap: 4px 6px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  border: 1px solid #cbd9d7;
  border-radius: 7px;
  padding: 7px;
  color: var(--deep);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-design-offer-tab > b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: #fff;
  background: var(--lights-evergreen-dark);
  font-size: 0.67rem;
}

.christmas-design-offer-tab > span {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
}

.christmas-design-offer-tab strong,
.christmas-design-offer-tab small,
.christmas-design-offer-tab em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-offer-tab strong {
  font-size: 0.64rem;
  white-space: normal;
}

.christmas-design-offer-tab small {
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 750;
}

.christmas-design-offer-tab em {
  grid-column: 1 / -1;
  color: var(--lights-evergreen-dark);
  font-size: 0.69rem;
  font-style: normal;
  font-weight: 900;
}

.christmas-design-offer-tab > i {
  position: absolute;
  top: -6px;
  right: 4px;
  border-radius: 999px;
  padding: 2px 5px;
  color: #fff;
  background: var(--lights-red);
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 900;
}

.christmas-design-offer-tab:hover,
.christmas-design-offer-tab:focus-visible,
.christmas-design-offer-tab.is-active {
  outline: 0;
  border-color: var(--lights-evergreen);
  background: #eaf5f2;
}

.christmas-design-offer-tab.is-active {
  box-shadow: inset 0 0 0 1px var(--lights-evergreen);
}

.christmas-design-offer-editor {
  display: grid;
  gap: 7px;
  border-top: 1px solid #dce7e5;
  padding-top: 8px;
}

.christmas-design-offer-editor .field {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.christmas-design-offer-editor .field > span {
  font-size: 0.59rem;
}

.christmas-design-offer-editor .field input {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.christmas-design-offer-items {
  display: grid;
  gap: 4px;
  max-height: 168px;
  overflow-y: auto;
}

.christmas-design-offer-items label {
  cursor: pointer;
}

.christmas-design-offer-items input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.christmas-design-offer-items label > span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 36px;
  border: 1px solid #d7e2e1;
  border-radius: 6px;
  padding: 5px 7px;
  color: var(--deep);
  background: #fff;
}

.christmas-design-offer-items label > span > svg {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  padding: 4px;
  color: #fff;
  background: #8b9da0;
  box-sizing: content-box;
}

.christmas-design-offer-items strong,
.christmas-design-offer-items b {
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-offer-items label.is-selected > span {
  border-color: #9fc8bc;
  background: #edf8f4;
}

.christmas-design-offer-items label.is-selected > span > svg {
  background: var(--lights-evergreen);
}

.christmas-design-offer-items label.is-locked {
  cursor: default;
}

.christmas-design-offer-items label.is-locked > span {
  background: #f3f6f5;
}

.christmas-design-group-selection-bar {
  display: grid;
  grid-template-columns: 38px minmax(120px, 180px) minmax(170px, 230px) auto;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-bottom: 1px solid var(--lights-line);
  padding: 8px;
  background: #f4f8f7;
}

.christmas-design-group-target {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #cad8da;
  border-radius: 7px;
  padding: 0 8px;
  color: var(--deep);
  background: #fff;
}

.christmas-design-group-target svg {
  width: 17px;
  height: 17px;
  color: var(--lights-evergreen);
}

.christmas-design-group-target select {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 0;
  padding: 0;
  color: var(--deep);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 850;
  cursor: pointer;
}

.christmas-design-toolbar > .christmas-design-group-selection-bar {
  grid-column: 1 / -1;
  width: min(700px, 100%);
  margin-inline: auto;
  border: 0;
  padding: 0;
  background: transparent;
}

.christmas-design-group-hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-items: center;
  border-bottom: 1px solid var(--lights-line);
  padding: 8px;
  background: #f4f8f7;
}

.christmas-design-group-hub .button {
  min-width: 0;
  min-height: 38px;
  padding-inline: 8px;
}

.christmas-design-group-selection-bar.is-compact > span small {
  display: inline;
}

.christmas-design-group-selection-bar .icon-button {
  width: 38px;
  min-height: 38px;
  border-color: #cad8da;
  color: var(--deep);
  background: #fff;
}

.christmas-design-group-selection-bar > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.christmas-design-group-selection-bar strong,
.christmas-design-group-selection-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-group-selection-bar strong {
  color: var(--deep);
  font-size: 0.78rem;
}

.christmas-design-group-selection-bar small {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 750;
}

.christmas-design-layer-list.is-group-selection > .christmas-design-group-selection-bar {
  position: sticky;
  z-index: 4;
  top: 0;
}

.christmas-design-scope-list {
  display: grid;
  align-content: start;
}

.christmas-design-scope {
  border-bottom: 1px solid var(--lights-line);
  border-left: 4px solid transparent;
  background: #fff;
}

.christmas-design-scope.is-active {
  border-left-color: var(--lights-evergreen);
}

.christmas-design-scope-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, 36px);
  gap: 4px;
  align-items: center;
  padding: 5px 7px 5px 4px;
  background: #f8faf9;
}

.christmas-design-scope-summary > button:first-child {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  border: 0;
  padding: 4px;
  color: var(--deep);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-design-scope-summary > button:first-child > svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 150ms ease;
}

.christmas-design-scope.is-expanded .christmas-design-scope-summary > button:first-child > svg {
  transform: rotate(180deg);
}

.christmas-design-scope-summary span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.christmas-design-scope-summary strong,
.christmas-design-scope-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-scope-summary strong {
  font-size: 0.81rem;
}

.christmas-design-scope-summary small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 750;
}

.christmas-design-scope-summary b {
  font-size: 0.77rem;
  white-space: nowrap;
}

.christmas-design-scope-summary .icon-button {
  width: 36px;
  min-height: 36px;
}

.christmas-design-scope-summary .icon-button.is-active {
  border-color: var(--lights-evergreen);
  color: #fff;
  background: var(--lights-evergreen);
}

.christmas-design-scope.is-isolated {
  border-left-color: var(--lights-evergreen);
  background: #f1faf7;
}

.christmas-design-scope-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  border-top: 1px solid #e1eae9;
  padding: 9px;
}

.christmas-design-scope-fields .field {
  gap: 3px;
}

.christmas-design-scope-fields .field > span {
  font-size: 0.61rem;
}

.christmas-design-scope-fields .field input,
.christmas-design-scope-fields .field select {
  min-width: 0;
  min-height: 37px;
  padding: 6px 7px;
  font-size: 0.75rem;
}

.christmas-design-scope-fields .is-wide {
  grid-column: 1 / -1;
}

.christmas-design-money-input {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  border: 1px solid #cbd5df;
  border-radius: 6px;
  padding-left: 7px;
  background: #fff;
}

.christmas-design-money-input b {
  color: var(--muted);
  font-size: 0.78rem;
}

.christmas-design-money-input input {
  border: 0 !important;
}

.christmas-design-scope-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.christmas-design-scope-actions .button:first-child {
  flex: 1 1 auto;
}

.christmas-design-scope-actions .icon-button {
  flex: 0 0 auto;
  width: 38px;
  min-height: 38px;
}

.christmas-design-scope-members {
  display: flex;
  gap: 5px;
  overflow-x: auto;
}

.christmas-design-scope-members button {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  max-width: 48px;
  min-height: 32px;
  border: 1px solid #cfdbdc;
  border-radius: 6px;
  padding: 5px 7px;
  color: var(--deep);
  background: #fff;
  font: inherit;
  font-size: 0.67rem;
  font-weight: 850;
  cursor: pointer;
}

.christmas-design-scope-members svg {
  width: 14px;
  height: 14px;
}

.christmas-design-scope-members span:not(.sr-only) {
  min-width: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
}

.christmas-design-scope-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.christmas-design-scope-member-actions {
  display: flex;
  gap: 4px;
}

.christmas-design-scope-member-actions .icon-button {
  width: 32px;
  min-height: 32px;
  border-radius: 6px;
}

.christmas-design-scope-members button.is-selected {
  border-color: var(--lights-evergreen);
  color: #fff;
  background: var(--lights-evergreen-dark);
  box-shadow: 0 0 0 2px rgba(23, 107, 85, 0.12);
}

.christmas-design-scope-members button.is-hidden {
  opacity: 0.48;
}

.christmas-design-bulk-editor {
  display: grid;
  gap: 10px;
  border: 1px solid #b9d4ce;
  border-left: 4px solid var(--lights-evergreen);
  border-radius: 7px;
  padding: 10px;
  background: #f2f9f7;
}

.christmas-design-bulk-editor > header,
.christmas-design-bulk-editor > footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.christmas-design-bulk-editor > header > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.christmas-design-bulk-editor > header strong {
  color: var(--deep);
  font-size: 0.8rem;
}

.christmas-design-bulk-editor > header small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.christmas-design-bulk-editor > header .icon-button,
.christmas-design-bulk-editor > footer .icon-button {
  width: 34px;
  min-height: 34px;
}

.christmas-design-bulk-editor > footer {
  justify-content: flex-end;
}

.christmas-design-anchor-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  border-top: 1px solid #e0e9e8;
  padding-top: 7px;
}

.christmas-design-anchor-tools > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.christmas-design-anchor-tools > div {
  display: flex;
  gap: 5px;
}

.christmas-design-anchor-tools .icon-button {
  width: 36px;
  min-height: 34px;
}

.christmas-design-anchor-tools .icon-button.is-active {
  border-color: var(--lights-evergreen);
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-design-anchor-tools .icon-button:disabled {
  opacity: 0.32;
}

.christmas-design-anchor-mode-chip {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: 50%;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  padding: 6px 11px;
  color: #fff;
  background: rgba(4, 39, 48, 0.88);
  box-shadow: 0 7px 18px rgba(3, 21, 29, 0.24);
  font-size: 0.69rem;
  font-weight: 850;
  transform: translateX(-50%);
  pointer-events: none;
}

.christmas-design-anchor-mode-chip svg {
  width: 15px;
  height: 15px;
}

.christmas-design-scope-empty {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.christmas-design-quote-panel {
  position: sticky;
  top: 84px;
  max-height: calc(100dvh - 110px);
}

.christmas-design-quote-panel > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 64px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--lights-line);
  background: #f4f8f7;
}

.christmas-design-quote-panel > header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.christmas-design-quote-panel > header span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-design-quote-panel > header strong {
  color: var(--deep);
  font-size: 1.08rem;
}

.christmas-design-quote-panel > header .button {
  min-height: 42px;
}

.christmas-design-layer-list {
  display: grid;
  align-content: start;
  max-height: calc(100dvh - 176px);
  overflow-y: auto;
}

.christmas-design-layer-group {
  border-bottom: 1px solid var(--lights-line);
  background: #fff;
}

.christmas-design-layer-group-toggle {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 18px;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  border: 0;
  padding: 8px 10px;
  color: var(--deep);
  background: #f7faf9;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-design-layer-group-toggle:hover,
.christmas-design-layer-group-toggle:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--design-accent-soft, #edf7f4) 72%, #fff);
}

.christmas-design-layer-group-toggle > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: var(--design-accent-dark, var(--lights-evergreen-dark));
  background: var(--design-accent-soft, #dff0eb);
}

.christmas-design-layer-group-toggle > span svg {
  width: 17px;
  height: 17px;
}

.christmas-design-layer-group-toggle strong {
  overflow: hidden;
  font-size: 0.83rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-layer-group-toggle b {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  padding-inline: 6px;
  color: var(--design-accent-dark, var(--lights-evergreen-dark));
  background: var(--design-accent-soft, #dff0eb);
  font-size: 0.68rem;
}

.christmas-design-layer-group-toggle > svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
  transition: transform 150ms ease;
}

.christmas-design-layer-group.is-expanded > .christmas-design-layer-group-toggle > svg {
  transform: rotate(180deg);
}

.christmas-design-layer-group-items {
  border-top: 1px solid #e3ecea;
}

.christmas-design-layer-scope {
  border-bottom: 1px solid #e1eae9;
  background: #fff;
}

.christmas-design-layer-scope:last-child {
  border-bottom: 0;
}

.christmas-design-layer-scope-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 4px;
  align-items: center;
  padding: 4px 6px 4px 12px;
  background: #fbfcfc;
}

.christmas-design-layer-scope-head > button:first-child {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 5px;
  padding: 4px 6px;
  color: var(--deep);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-design-layer-scope-head > button:first-child:hover,
.christmas-design-layer-scope-head > button:first-child:focus-visible {
  outline: 0;
  background: var(--design-accent-soft, #edf7f4);
}

.christmas-design-layer-scope-head > button:first-child > svg {
  width: 17px;
  height: 17px;
  color: var(--design-accent-dark, var(--lights-evergreen-dark));
}

.christmas-design-layer-scope-head > button:first-child > span {
  display: grid;
  gap: 0;
  min-width: 0;
}

.christmas-design-layer-scope-head strong,
.christmas-design-layer-scope-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-layer-scope-head strong {
  font-size: 0.74rem;
}

.christmas-design-layer-scope-head small {
  color: var(--lights-red);
  font-size: 0.55rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-design-layer-scope-head b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  color: var(--muted);
  background: #eaf0ef;
  font-size: 0.62rem;
}

.christmas-design-layer-scope-head .icon-button {
  width: 32px;
  min-height: 32px;
  border: 0;
  background: transparent;
}

.christmas-design-layer-scope-head .icon-button svg {
  width: 15px;
  height: 15px;
  transition: transform 150ms ease;
}

.christmas-design-layer-scope.is-expanded > .christmas-design-layer-scope-head .icon-button svg {
  transform: rotate(180deg);
}

.christmas-design-layer-scope.is-selected > .christmas-design-layer-scope-head {
  box-shadow: inset 3px 0 0 var(--design-accent, var(--lights-evergreen));
  background: color-mix(in srgb, var(--design-accent-soft, #edf7f4) 54%, #fff);
}

.christmas-design-layer-scope.is-capturing > .christmas-design-layer-scope-head {
  background: #eef8f5;
}

.christmas-design-layer-scope-items {
  border-top: 1px solid #e6eeed;
  border-left: 12px solid #f2f6f5;
}

.christmas-design-layer-scope-items .christmas-design-layer:last-child {
  border-bottom: 0;
}

.christmas-design-layer {
  border-bottom: 1px solid var(--lights-line);
  background: #fff;
}

.christmas-design-layer.is-selected {
  border-left: 4px solid var(--design-accent, var(--lights-evergreen));
  background: color-mix(in srgb, var(--design-accent-soft, #f8fbfa) 42%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--design-accent, var(--lights-evergreen)) 28%, transparent);
}

.christmas-design-layer.is-group-choice {
  border-left: 4px solid transparent;
}

.christmas-design-layer.is-group-choice.is-group-selected {
  border-left-color: var(--design-accent, var(--lights-evergreen));
  background: color-mix(in srgb, var(--design-accent-soft, #eaf5f2) 68%, #fff);
}

.christmas-design-layer.is-group-choice .christmas-design-layer-select {
  grid-template-columns: 30px 26px minmax(0, 1fr) 26px;
}

.christmas-design-layer.is-group-choice .christmas-design-layer-select > svg:last-child {
  width: 24px;
  height: 24px;
  border: 1px solid #bfcfd0;
  border-radius: 6px;
  padding: 4px;
  color: var(--muted);
  background: #fff;
}

.christmas-design-layer.is-group-choice.is-group-selected .christmas-design-layer-select > svg:last-child {
  border-color: var(--design-accent, var(--lights-evergreen));
  color: #fff;
  background: var(--design-accent-dark, var(--lights-evergreen-dark));
}

.christmas-design-layer-select {
  display: grid;
  grid-template-columns: 30px 26px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 0;
  padding: 6px 9px;
  color: var(--deep);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.christmas-design-layer-color {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: flex-end;
  min-width: 26px;
}

.christmas-design-layer-color i,
.christmas-design-color-swatch i {
  display: block;
  width: 10px;
  height: 20px;
  border: 1px solid rgba(3, 25, 22, 0.24);
  border-radius: 3px;
  background: var(--swatch);
  box-shadow: 0 0 5px color-mix(in srgb, var(--swatch) 65%, transparent);
}

.christmas-design-layer-select > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: var(--design-accent-dark, var(--lights-evergreen-dark));
  background: var(--design-accent-soft, #e2f2ed);
}

.christmas-design-layer-select svg {
  width: 17px;
  height: 17px;
}

.christmas-design-layer-select .christmas-design-layer-number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--design-accent-dark, var(--lights-evergreen-dark));
  background: var(--design-accent-soft, #e2f2ed);
  font-size: 0.75rem;
  font-weight: 900;
}

.christmas-design-layer-select > b {
  color: var(--design-accent-dark, var(--lights-evergreen-dark));
  font-size: 0.78rem;
  white-space: nowrap;
}

.christmas-design-layer-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0 10px 11px;
}

.christmas-design-layer-fields .field {
  gap: 4px;
}

.christmas-design-layer-fields .field > span {
  font-size: 0.64rem;
}

.christmas-design-layer-fields .field input,
.christmas-design-layer-fields .field select {
  min-height: 39px;
  padding: 7px 8px;
  font-size: 0.78rem;
}

.christmas-design-layer-fields .field.is-wide {
  grid-column: 1;
}

.christmas-design-color-field,
.christmas-design-range,
.christmas-design-size-presets {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.christmas-design-color-field > span,
.christmas-design-range > span,
.christmas-design-size-presets > span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.christmas-design-color-field > div {
  display: grid;
  grid-template-columns: repeat(5, 36px);
  gap: 6px;
  min-width: 0;
}

.christmas-design-color-swatch {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  min-height: 36px;
  border: 1px solid #c7d4d7;
  border-radius: 7px;
  padding: 4px;
  background: #fff;
  cursor: pointer;
}

.christmas-design-color-swatch i {
  width: 9px;
  height: 22px;
  border-radius: 2px;
}

.christmas-design-color-swatch.is-selected,
.christmas-design-color-swatch:hover,
.christmas-design-color-swatch:focus-visible {
  border-color: var(--lights-evergreen);
  outline: 2px solid rgba(23, 107, 85, 0.14);
}

.christmas-design-range > span {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.christmas-design-range b {
  color: var(--muted);
  font: inherit;
}

.christmas-design-range output {
  color: var(--lights-evergreen-dark);
  font-size: 0.7rem;
}

.christmas-design-range input {
  width: 100%;
  min-width: 0;
  accent-color: var(--lights-evergreen);
}

.christmas-design-size-presets > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #c7d4d7;
  border-radius: 7px;
  padding: 3px;
  background: #fff;
}

.christmas-design-size-presets button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  border: 0;
  border-radius: 5px;
  padding: 6px 8px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.christmas-design-size-presets button b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-size-presets button.is-selected {
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-design-layer-head {
  display: flex;
  align-items: center;
  min-width: 0;
}

.christmas-design-layer-head > .christmas-design-layer-select {
  flex: 1 1 auto;
  width: auto;
}

.christmas-design-layer-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  align-items: center;
}

.christmas-design-layer-actions.is-inline {
  flex: 0 0 auto;
  gap: 3px;
  padding-right: 8px;
}

.christmas-design-layer-actions .icon-button {
  width: 40px;
  border-color: #cad8da;
  color: var(--lights-evergreen-dark);
  background: #fff;
}

.christmas-design-layer-actions.is-inline .icon-button {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  height: 30px;
  border-radius: 6px;
  padding: 5px;
}

.christmas-design-layer-actions.is-inline .icon-button svg {
  width: 16px;
  height: 16px;
}

.christmas-design-layer-actions .icon-button.danger {
  color: var(--lights-red);
  background: #fff7f8;
}

.christmas-design-layer-actions .icon-button:disabled {
  opacity: 0.32;
}

.christmas-design-layer-actions .button,
.christmas-design-layer-actions .icon-button {
  min-height: 38px;
}

.christmas-design-layer-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 180px;
  padding: 24px;
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 800;
  text-align: center;
}

.christmas-design-layer-empty svg {
  width: 27px;
  height: 27px;
  color: var(--lights-evergreen);
}

.christmas-design-group-dialog-backdrop {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 20, 28, 0.58);
  backdrop-filter: blur(3px);
}

.christmas-design-conflict {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  margin-bottom: 8px;
  border: 1px solid #d5a260;
  border-left: 4px solid #bd6f20;
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--deep);
  background: #fff8ed;
}

.christmas-design-conflict > svg {
  width: 19px;
  height: 19px;
  color: #a45a16;
}

.christmas-design-conflict > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.christmas-design-conflict strong {
  font-size: 0.76rem;
  font-weight: 900;
}

.christmas-design-conflict small {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
}

@media (max-width: 42rem) {
  .christmas-design-conflict {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .christmas-design-conflict .button {
    grid-row: 2;
  }

  .christmas-design-conflict .button.secondary {
    grid-column: 1;
  }

  .christmas-design-conflict .button.primary {
    grid-column: 2;
  }
}

.christmas-design-group-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(470px, 100%);
  max-height: min(720px, calc(100dvh - 36px));
  border: 1px solid #c6d6d5;
  border-radius: 8px;
  color: var(--deep);
  background: #fff;
  box-shadow: 0 26px 70px rgba(3, 21, 29, 0.34);
  overflow: hidden;
}

.christmas-design-group-dialog > header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--lights-line);
  padding: 11px 12px;
  background: #f4f8f7;
}

.christmas-design-group-dialog > header > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-design-group-dialog > header > span svg {
  width: 20px;
  height: 20px;
}

.christmas-design-group-dialog > header > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.christmas-design-group-dialog > header small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-design-group-dialog > header h2 {
  margin: 0;
  font-size: 1.02rem;
}

.christmas-design-group-dialog-body {
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
}

.christmas-design-group-dialog-items {
  display: flex;
  gap: 5px;
  align-items: center;
  min-height: 34px;
  overflow-x: auto;
}

.christmas-design-group-dialog-items > span,
.christmas-design-group-dialog-items > b {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 42px;
  height: 32px;
  border: 1px solid #d0dddd;
  border-radius: 6px;
  padding: 5px 7px;
  color: var(--deep);
  background: #f7faf9;
  font-size: 0.68rem;
}

.christmas-design-group-dialog-items svg {
  width: 14px;
  height: 14px;
}

.christmas-design-group-unit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid #c7d5d6;
  border-radius: 7px;
  padding: 3px;
  background: #f4f7f7;
}

.christmas-design-group-unit label {
  min-width: 0;
  cursor: pointer;
}

.christmas-design-group-unit input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.christmas-design-group-unit span {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 5px;
  padding: 6px;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 900;
}

.christmas-design-group-unit input:checked + span {
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-design-group-unit input:focus-visible + span {
  outline: 2px solid #70b9a6;
  outline-offset: 1px;
}

.christmas-design-group-price-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.christmas-design-group-method,
.christmas-design-group-warning {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  border: 1px solid #c7d8d4;
  border-radius: 7px;
  padding: 9px 11px;
  color: var(--deep);
  background: #f2f8f6;
  font-size: 0.75rem;
  font-weight: 850;
}

.christmas-design-group-method svg,
.christmas-design-group-warning svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.christmas-design-group-warning {
  border-color: #e7c98d;
  color: #744b08;
  background: #fff8e9;
}

.christmas-design-group-item-prices,
.christmas-design-scope-price-list {
  display: grid;
  gap: 6px;
}

.christmas-design-group-item-prices > label,
.christmas-design-scope-price-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 124px);
  gap: 9px;
  align-items: center;
  min-height: 44px;
  border: 1px solid #d6e1df;
  border-radius: 7px;
  padding: 6px 7px 6px 10px;
  background: #fff;
}

.christmas-design-scope-price-item {
  grid-template-columns: minmax(0, 1fr) minmax(94px, 116px) 34px;
  transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease;
}

.christmas-design-scope-price-item.is-excluded {
  border-color: #dce3e2;
  background: #f5f7f7;
}

.christmas-design-scope-price-item.is-excluded > span:not(.christmas-design-money-input) {
  opacity: 0.5;
}

.christmas-design-scope-price-item > .icon-button {
  width: 32px;
  min-height: 32px;
  border-color: #c9d8d5;
  color: var(--lights-evergreen-dark);
  background: #fff;
}

.christmas-design-scope-price-item.is-excluded > .icon-button {
  color: #71817e;
  background: #eef2f1;
}

.christmas-design-group-item-prices > label > span:first-child,
.christmas-design-scope-price-item > span:first-child {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.christmas-design-group-item-prices svg,
.christmas-design-scope-price-list svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--lights-evergreen);
}

.christmas-design-group-item-prices b,
.christmas-design-scope-price-list strong {
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-design-group-item-prices .christmas-design-money-input,
.christmas-design-scope-price-list .christmas-design-money-input {
  min-width: 0;
}

.christmas-design-group-dialog.is-flat [data-christmas-group-quantity] {
  display: none;
}

.christmas-design-group-dialog.is-flat .christmas-design-group-price-fields {
  grid-template-columns: minmax(0, 1fr);
}

.christmas-design-group-optional {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  border-top: 1px solid var(--lights-line);
  border-bottom: 1px solid var(--lights-line);
  padding-block: 9px;
}

.christmas-design-group-optional > span {
  display: grid;
  gap: 1px;
}

.christmas-design-group-optional strong {
  font-size: 0.78rem;
}

.christmas-design-group-optional small {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
}

.christmas-design-group-optional input {
  width: 20px;
  height: 20px;
  accent-color: var(--lights-evergreen);
}

.christmas-design-group-total {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border-radius: 7px;
  padding: 10px 12px;
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.christmas-design-group-total span {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-design-group-total strong {
  font-size: 1.18rem;
}

.christmas-design-group-dialog > footer {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 8px;
  border-top: 1px solid var(--lights-line);
  padding: 10px 12px;
  background: #f8faf9;
}

.christmas-design-capture-dialog {
  width: min(510px, 100%);
  max-height: min(610px, calc(100dvh - 36px));
}

.christmas-design-capture-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.christmas-design-capture-presets button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 46px;
  border: 1px solid #cbd9d7;
  border-radius: 7px;
  padding: 7px 9px;
  color: var(--deep);
  background: #fff;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.christmas-design-capture-presets button:hover,
.christmas-design-capture-presets button:focus-visible,
.christmas-design-capture-presets button.is-selected {
  outline: 0;
  border-color: var(--lights-evergreen);
  color: var(--lights-evergreen-dark);
  background: #eaf5f2;
}

.christmas-design-capture-presets svg {
  width: 18px;
  height: 18px;
}

.quote-christmas-design {
  --lights-evergreen-dark: #0d4f40;
  margin: 0 22px 20px;
  border: 1px solid #cadbd6;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.quote-christmas-offers {
  display: grid;
  gap: 10px;
  margin: 0 22px 16px;
}

.quote-christmas-offers > header {
  display: grid;
  gap: 2px;
}

.quote-christmas-offers > header span {
  color: var(--deep);
  font-size: 1rem;
  font-weight: 900;
}

.quote-christmas-offers > header small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.quote-christmas-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #c8d8d4;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.quote-christmas-offer-grid[data-public-christmas-offer-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.quote-christmas-offers.has-single .quote-christmas-offer {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  min-height: 78px;
  border-right: 0;
}

.quote-christmas-offers.has-single .quote-christmas-offer-price {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

.quote-christmas-offer {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-content: center;
  min-width: 0;
  min-height: 112px;
  border-right: 1px solid #d9e3e1;
  padding: 14px 12px;
  color: var(--deep);
  background: #fff;
  cursor: pointer;
  transition: background-color 130ms ease, box-shadow 130ms ease;
}

.quote-christmas-offer:last-child {
  border-right: 0;
}

.quote-christmas-offer > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.quote-christmas-offer-letter {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: #fff;
  background: #164c63;
  font-size: 0.86rem;
  font-weight: 950;
}

.quote-christmas-offer-copy {
  display: grid;
  gap: 2px;
  align-content: center;
  min-width: 0;
}

.quote-christmas-offer-copy strong,
.quote-christmas-offer-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-christmas-offer-copy strong {
  font-size: 0.9rem;
  white-space: nowrap;
}

.quote-christmas-offer-copy small {
  display: -webkit-box;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quote-christmas-offer-price {
  grid-column: 1 / -1;
  color: #0d4f40;
  font-size: 1.08rem;
  font-weight: 950;
}

.quote-christmas-offer > em {
  position: absolute;
  top: 7px;
  right: 7px;
  border-radius: 999px;
  padding: 3px 7px;
  color: #fff;
  background: #c9344c;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 900;
}

.quote-christmas-offer:hover,
.quote-christmas-offer:focus-within,
.quote-christmas-offer.is-selected {
  background: #edf8f4;
}

.quote-christmas-offer.is-selected {
  box-shadow: inset 0 0 0 2px #176b55;
}

.quote-christmas-customize {
  margin: 0 22px 18px;
  border: 1px solid #d5e0de;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.quote-christmas-customize > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 9px 12px;
  color: #164c63;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.quote-christmas-customize > summary::-webkit-details-marker {
  display: none;
}

.quote-christmas-customize > summary svg {
  width: 16px;
  height: 16px;
  transition: transform 130ms ease;
}

.quote-christmas-customize[open] > summary svg {
  transform: rotate(180deg);
}

.quote-christmas-customize .quote-product-table {
  border-top: 1px solid #dce5e3;
}

.quote-line-items-step .quote-christmas-design {
  margin: 0 0 16px;
}

.quote-christmas-design > header {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid #cadbd6;
  padding: 9px 12px;
  color: #fff;
  background: var(--lights-evergreen-dark);
}

.quote-christmas-design > header svg {
  width: 17px;
  height: 17px;
  color: #ffd66d;
}

.quote-christmas-design > header h3 {
  margin: 0;
  font-size: 0.92rem;
}

.quote-christmas-design-canvas {
  min-height: 220px;
}

.quote-christmas-design-fallback,
.quote-christmas-design-fallback > img,
.quote-christmas-design-fallback > svg,
.quote-christmas-design-fallback > .christmas-design-photo-dim {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.quote-christmas-design-fallback > img {
  z-index: 0;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.quote-christmas-design-fallback > .christmas-design-photo-dim {
  z-index: 1;
}

.quote-christmas-design-fallback > svg {
  z-index: 2;
}

.quote-christmas-design-canvas [hidden] {
  display: none !important;
}

.quote-public-shell.is-christmas-lights .quote-public-card {
  position: relative;
  border-top: 6px solid #0d4f40;
}

.quote-public-shell.is-christmas-lights .quote-public-header {
  border-bottom-color: #bfd4ce;
  background: #f7fbf9;
}

.quote-public-shell.is-christmas-lights .quote-public-header > img {
  width: min(230px, 38%);
  height: 82px;
  object-fit: contain;
  object-position: left center;
}

.quote-public-shell.is-christmas-lights .quote-public-header::after {
  content: "Christmas Lights";
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 9px;
  color: #fff;
  background: #0d4f40;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.quote-package-publisher {
  display: grid;
  gap: 10px;
  border: 1px solid #c8d8d4;
  border-radius: 8px;
  padding: 12px;
  background: #f7fbf9;
}

.quote-package-publisher > header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.quote-package-publisher > header > div {
  display: grid;
  gap: 2px;
}

.quote-package-publisher > header span {
  color: #0d4f40;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.quote-package-publisher > header strong {
  color: var(--deep);
  font-size: 0.92rem;
}

.quote-package-publisher > header > em {
  border-radius: 999px;
  padding: 5px 9px;
  color: #0d4f40;
  background: #e1f2ed;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.quote-package-publisher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quote-package-publish-option {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 22px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 62px;
  border: 1px solid #cbd8d6;
  border-radius: 7px;
  padding: 9px;
  color: var(--deep);
  background: #fff;
  cursor: pointer;
}

.quote-package-publish-option.is-published {
  border-color: #1d7a65;
  box-shadow: inset 0 0 0 1px #1d7a65;
  background: #eef8f5;
}

.quote-package-publish-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.quote-package-publish-tier {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #fff;
  background: #164c63;
  font-size: 0.78rem;
  font-weight: 950;
}

.quote-package-publish-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.quote-package-publish-copy strong,
.quote-package-publish-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-package-publish-copy strong {
  font-size: 0.76rem;
}

.quote-package-publish-copy small {
  color: #0d4f40;
  font-size: 0.7rem;
  font-weight: 900;
}

.quote-package-publish-option > svg {
  width: 18px;
  height: 18px;
  color: #1d7a65;
}

.quote-package-publish-option > em {
  position: absolute;
  top: -7px;
  right: 7px;
  border-radius: 999px;
  padding: 2px 6px;
  color: #fff;
  background: #c9344c;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 900;
}

.quote-package-publisher > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

@media (min-width: 73.8125rem) {
  .christmas-design-editor {
    height: var(--christmas-designer-height, auto);
    align-items: stretch;
  }

  .christmas-design-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
  }

  .christmas-design-canvas-wrap {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .christmas-design-quote-panel {
    position: static;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    max-height: none;
  }

  .christmas-design-layer-list {
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 1180px) {
  .christmas-design-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .christmas-design-toolbar {
    gap: 5px;
  }

  .christmas-design-group-selection-bar.is-compact > span small {
    display: none;
  }

  .christmas-design-group-dialog-backdrop {
    align-items: center;
    padding: 18px;
  }

  .christmas-design-group-dialog {
    width: min(470px, 100%);
    max-height: min(720px, calc(100dvh - 36px));
    border: 1px solid #c6d6d5;
    border-radius: 8px;
  }

  .christmas-design-group-dialog-body {
    gap: 10px;
    padding: 12px;
  }

  .christmas-design-group-price-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .christmas-design-tool-list,
  .christmas-design-history-actions {
    gap: 4px;
  }

  .christmas-design-tool {
    gap: 4px;
    padding-inline: 7px;
    font-size: 0.68rem;
  }

  .christmas-design-history-actions {
    padding-left: 5px;
  }

  .christmas-design-history-actions .icon-button {
    width: 36px;
  }

  .christmas-design-quote-panel {
    position: static;
    max-height: none;
  }

  .christmas-design-layer-list {
    max-height: none;
  }
}

@media (max-width: 720px) {
  .christmas-design-inspector-tabs button {
    min-height: 32px;
    padding-inline: 6px;
  }
}

@media (hover: none), (pointer: coarse) {
  .christmas-design-handle-hit {
    stroke-width: 38px;
  }

  .christmas-design-handle-hit.is-priority-grab {
    stroke-width: 68px;
  }

  .christmas-design-bend-hit {
    stroke-width: 32px;
  }

  .christmas-design-segment-hit {
    stroke-width: 34px !important;
  }

  .christmas-design-resize-hit {
    stroke: transparent;
    stroke-width: 18px;
    vector-effect: non-scaling-stroke;
  }
}

@media (max-width: 620px) {

  .christmas-design-context .button {
    min-width: 42px;
    width: 42px;
    padding: 0;
    overflow: hidden;
  }

  .christmas-design-context .button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .christmas-design-toolbar {
    min-height: 52px;
    gap: 4px;
    padding: 5px;
  }

  .christmas-design-multi-select-bar {
    grid-template-columns: minmax(0, 1fr) auto 34px auto;
    gap: 4px;
  }

  .christmas-design-multi-select-bar .button {
    min-height: 36px;
    padding-inline: 9px;
  }

  .christmas-design-multi-select-bar .icon-button {
    width: 34px;
    min-height: 36px;
  }

  .christmas-design-whole-palette {
    right: 5px;
    width: min(360px, calc(100vw - 18px));
  }

  .christmas-design-group-selection-bar {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 4px;
  }

  .christmas-design-group-selection-bar > .christmas-design-group-target {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .christmas-design-group-selection-bar > .button {
    grid-column: 3;
    grid-row: 2;
  }

  .christmas-design-group-hub .button {
    min-width: 0;
    padding-inline: 8px;
  }

  .christmas-design-group-dialog-backdrop {
    padding: 8px;
  }

  .christmas-design-group-dialog {
    width: min(470px, 100%);
    max-height: calc(100dvh - 16px);
  }

  .christmas-design-capture-bar {
    grid-template-columns: 30px minmax(0, 1fr) 22px 32px auto;
    gap: 4px;
    padding: 4px;
  }

  .christmas-design-capture-bar > span {
    width: 30px;
    height: 30px;
  }

  .christmas-design-capture-bar small {
    display: none;
  }

  .christmas-design-capture-bar .button {
    padding-inline: 10px;
  }

  .christmas-design-capture-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .christmas-design-tool-list,
  .christmas-design-history-actions {
    gap: 3px;
  }

  .christmas-design-history-actions {
    max-width: min(46vw, 184px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .christmas-design-history-actions::-webkit-scrollbar {
    display: none;
  }

  .christmas-design-history-actions .icon-button {
    width: 34px;
    min-height: 38px;
  }

  .christmas-design-tool {
    grid-template-columns: 18px;
    justify-items: center;
    min-width: 38px;
    min-height: 38px;
    padding: 6px;
  }

  .christmas-design-tool > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .christmas-design-brush-panel {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px 8px;
    width: calc(100% - 14px);
    padding: 7px;
  }

  .christmas-design-brush-panel > header {
    font-size: 0.66rem;
  }

  .christmas-design-brush-colors {
    padding-block: 1px;
  }

  .christmas-design-brush-ranges {
    grid-template-columns: repeat(3, minmax(78px, 1fr));
    grid-column: 1 / -1;
    gap: 7px;
  }

  .christmas-design-brush-ranges label > span {
    font-size: 0.58rem;
  }

  .christmas-design-brush-ranges output {
    font-size: 0.6rem;
  }

  .christmas-design-canvas-wrap,
  .quote-christmas-design-canvas {
    min-height: 250px;
  }

  .christmas-design-view-controls {
    top: 7px;
    right: 7px;
  }

  .christmas-design-view-controls .icon-button {
    width: 34px;
    min-height: 34px;
  }

  .christmas-design-package-preview {
    max-width: 38px;
    min-height: 34px;
    padding: 4px;
  }

  .christmas-design-package-preview span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .christmas-design-draw-actions {
    inset: auto 7px 7px;
  }

  .christmas-design-draw-actions > span {
    max-width: 125px;
  }

  .christmas-design-layer-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .christmas-design-layer-fields .field.is-wide {
    grid-column: 1;
  }

  .christmas-design-canvas-footer {
    grid-template-columns: auto minmax(62px, 1fr);
  }

  .christmas-design-scope-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .christmas-design-scope-fields .is-wide {
    grid-column: 1;
  }

  .quote-christmas-design {
    margin: 0 12px 15px;
  }

  .quote-christmas-offers {
    margin: 0 12px 14px;
  }

  .quote-christmas-offer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-christmas-offer {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 72px;
    border-right: 0;
    border-bottom: 1px solid #d9e3e1;
    padding: 10px;
  }

  .quote-christmas-offer:last-child {
    border-bottom: 0;
  }

  .quote-christmas-offer-letter {
    width: 34px;
    height: 34px;
  }

  .quote-christmas-offer-price {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    font-size: 0.93rem;
  }

  .quote-christmas-offer > em {
    top: 3px;
    right: 8px;
    transform: translateY(-50%);
  }

  .quote-christmas-customize {
    margin: 0 12px 15px;
  }

  .christmas-design-offers > header small {
    display: none;
  }

  .christmas-design-offer-tab {
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: 20px auto auto;
    min-height: 66px;
    padding: 6px;
  }

  .christmas-design-offer-tab > b {
    width: 20px;
    height: 20px;
  }

  .christmas-design-offer-tab small {
    display: none;
  }

  .quote-line-items-step .quote-christmas-design {
    margin-inline: 0;
  }

  .quote-public-shell.is-christmas-lights .quote-public-header::after {
    display: none;
  }

  .quote-public-shell.is-christmas-lights .quote-public-header > img {
    width: min(210px, 58%);
    height: 66px;
  }

  .quote-package-publisher > header {
    align-items: flex-start;
  }

  .quote-package-publisher-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-package-publish-option {
    min-height: 58px;
  }
}

/* Christmas design is a focused production workspace, not a normal CRM page. */
body.is-christmas-designer {
  overflow: hidden;
  overscroll-behavior: none;
  background: #e8efef;
}

body.is-christmas-designer .app-shell {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

body.is-christmas-designer .sidebar,
body.is-christmas-designer .topbar,
body.is-christmas-designer .global-network-banner,
body.is-christmas-designer .global-action-banner,
body.is-christmas-designer .mobile-tabbar {
  display: none !important;
}

body.is-christmas-designer.nav-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(5, 24, 44, 0.48);
  backdrop-filter: blur(2px);
}

body.is-christmas-designer.nav-open .sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  display: block !important;
  width: min(302px, calc(100vw - 48px));
  height: 100vh;
  height: 100dvh;
  padding-left: max(18px, calc(var(--safe-left) + 14px));
  transform: translateX(0);
}

body.is-christmas-designer.nav-open .sidebar-mobile-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: calc(-1 * max(22px, calc(var(--safe-top) + 14px))) -10px 8px;
  padding: max(10px, calc(var(--safe-top) + 8px)) 10px 10px;
  color: #fff;
  background: rgba(8, 40, 61, 0.98);
}

body.is-christmas-designer.nav-open .sidebar-mobile-head strong {
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.is-christmas-designer.nav-open .sidebar-mobile-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 0 10px;
  color: #dffefa;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 900;
}

body.is-christmas-designer.nav-open .sidebar-mobile-close svg {
  width: 16px;
  height: 16px;
}

body.is-christmas-designer .workspace {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: #e8efef;
}

body.is-christmas-designer #app {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.is-christmas-designer .christmas-lights-pricing-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.is-christmas-designer .christmas-design-context {
  position: relative;
  z-index: 20;
  min-height: calc(48px + env(safe-area-inset-top));
  gap: 8px;
  border-bottom: 1px solid #c9d8d6;
  padding: calc(5px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left));
  background: #fff;
  box-shadow: 0 3px 12px rgba(5, 35, 42, 0.08);
}

body.is-christmas-designer .christmas-design-context > div {
  grid-template-columns: 34px 34px minmax(0, 1fr);
  gap: 8px;
}

body.is-christmas-designer .christmas-design-crm-menu {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-color: #c9d8d6;
  color: var(--lights-evergreen-dark);
  background: #f5faf9;
}

body.is-christmas-designer .christmas-design-crm-menu svg {
  width: 17px;
  height: 17px;
}

body.is-christmas-designer .christmas-design-context .christmas-lights-avatar {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  font-size: 0.76rem;
}

body.is-christmas-designer .christmas-design-context p {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

body.is-christmas-designer .christmas-design-context strong {
  flex: 0 1 auto;
  font-size: 0.86rem;
}

body.is-christmas-designer .christmas-design-context em {
  flex: 1 1 auto;
  font-size: 0.69rem;
}

body.is-christmas-designer .christmas-design-context .button {
  min-height: 34px;
  padding-inline: 10px;
}

body.is-christmas-designer [data-christmas-design-workspace] {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.is-christmas-designer .christmas-design-empty {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

body.is-christmas-designer .christmas-design-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(280px, 3fr) minmax(190px, 2fr);
  gap: 5px;
  width: 100%;
  height: var(--christmas-designer-height, 100%);
  min-height: 0;
  padding: 5px;
  align-items: stretch;
  overflow: hidden;
  background: #e8efef;
}

body.is-christmas-designer .christmas-design-editor.is-grouping {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

body.is-christmas-designer .christmas-design-editor.is-inspector-collapsed {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

body.is-christmas-designer .christmas-design-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 6px;
}

body.is-christmas-designer .christmas-design-canvas-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

body.is-christmas-designer .christmas-design-toolbar {
  min-height: 50px;
  padding: 5px;
}

body.is-christmas-designer .christmas-design-canvas-footer {
  min-height: 36px;
  padding-block: 0;
}

body.is-christmas-designer .christmas-design-quote-panel {
  position: static;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border-radius: 6px;
}

body.is-christmas-designer .christmas-design-quote-panel[hidden] {
  display: none;
}

body.is-christmas-designer .christmas-design-quote-panel > header {
  min-height: 48px;
  padding: 6px 8px;
}

body.is-christmas-designer .christmas-design-layer-list {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 56.25rem) {
  body.is-christmas-designer .christmas-design-editor {
    grid-template-columns: minmax(0, 1fr) clamp(286px, 27vw, 350px);
    grid-template-rows: minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
  }

  body.is-christmas-designer .christmas-design-editor.is-grouping {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-christmas-designer .christmas-design-editor.is-inspector-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-christmas-designer .christmas-design-toolbar:has(.christmas-design-capture-bar) {
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) auto;
  }

  body.is-christmas-designer .christmas-design-capture-bar {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  body.is-christmas-designer .christmas-design-context {
    min-height: calc(44px + env(safe-area-inset-top));
    padding-block: calc(4px + env(safe-area-inset-top)) 4px;
  }

  body.is-christmas-designer .christmas-design-context > div {
    grid-template-columns: 30px 30px minmax(0, 1fr);
    gap: 6px;
  }

  body.is-christmas-designer .christmas-design-crm-menu {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
  }

  body.is-christmas-designer .christmas-design-context .christmas-lights-avatar {
    width: 30px;
    height: 30px;
  }

  body.is-christmas-designer .christmas-design-context p {
    display: grid;
    gap: 0;
  }

  body.is-christmas-designer .christmas-design-context .button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  body.is-christmas-designer .christmas-design-editor {
    grid-template-rows: minmax(260px, 3fr) minmax(185px, 2fr);
    gap: 4px;
    padding: 4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }

  body.is-christmas-designer .christmas-design-toolbar {
    min-height: 46px;
  }

  body.is-christmas-designer .christmas-design-canvas-footer {
    min-height: 32px;
  }

  body.is-christmas-designer .christmas-design-canvas-footer .icon-button {
    width: 30px;
    height: 30px;
    min-height: 30px;
  }

  body.is-christmas-designer .christmas-design-quote-panel > header {
    min-height: 42px;
    padding: 4px 6px;
  }
}
.crm-directory-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 360px);
  margin: 16px auto 4px;
}

.crm-directory-load-more span {
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(23, 59, 90, 0.08);
  font-size: 0.78rem;
}

@supports (content-visibility: auto) {
  .crm-client-table-row,
  .crm-job-card,
  .native-thread-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 86px;
  }
}

/* Quote deposits and staged payments */
.quote-payment-plan {
  overflow: hidden;
  border: 1px solid var(--surface-line-strong);
  border-radius: 8px;
  background: #fff;
}

.quote-payment-plan > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px 12px;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.quote-payment-plan > summary::-webkit-details-marker {
  display: none;
}

.quote-payment-plan > summary > span:nth-child(2) {
  display: grid;
  gap: 1px;
}

.quote-payment-plan > summary strong {
  font-size: 14px;
}

.quote-payment-plan > summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.quote-payment-plan > summary > svg {
  width: 17px;
  transition: transform 160ms ease;
}

.quote-payment-plan[open] > summary > svg {
  transform: rotate(180deg);
}

.quote-payment-plan-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.14);
}

.quote-payment-plan-icon svg {
  width: 17px;
  height: 17px;
}

.quote-payment-plan-body {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--surface-line);
  padding: 12px;
  background: #f8fafc;
}

.quote-payment-mode,
.quote-payment-type {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  justify-self: start;
  overflow: hidden;
  border: 1px solid var(--surface-line-strong);
  border-radius: 7px;
  background: #fff;
}

.quote-payment-mode label,
.quote-payment-type label {
  position: relative;
  cursor: pointer;
}

.quote-payment-mode input,
.quote-payment-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quote-payment-mode span,
.quote-payment-type span {
  display: grid;
  min-height: 36px;
  padding: 0 12px;
  place-items: center;
  border-right: 1px solid var(--surface-line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.quote-payment-mode label:last-child span,
.quote-payment-type label:last-child span {
  border-right: 0;
}

.quote-payment-mode input:checked + span,
.quote-payment-type input:checked + span {
  color: #fff;
  background: var(--navy);
}

.quote-payment-panel {
  display: grid;
  gap: 10px;
}

.quote-payment-panel[hidden],
.quote-payment-methods[hidden],
.quote-payment-date[hidden] {
  display: none !important;
}

.quote-deposit-value-field {
  width: min(100%, 300px);
}

.quote-payment-amount-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 38px;
  overflow: hidden;
  border: 1px solid var(--surface-line-strong);
  border-radius: 6px;
  background: #fff;
}

.quote-payment-amount-input > span,
.quote-payment-amount-input > em {
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.quote-payment-amount-input input {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 0;
  padding: 7px 4px;
  color: var(--navy);
  font-weight: 900;
  text-align: right;
}

.quote-payment-amount-input input:disabled {
  color: var(--navy);
  background: #eef4f7;
  opacity: 1;
}

.quote-payment-schedule-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.quote-payment-installments {
  display: grid;
  gap: 8px;
}

.quote-payment-installment {
  display: grid;
  grid-template-columns: 28px minmax(118px, 1.2fr) 96px minmax(126px, 1fr) minmax(112px, 0.85fr) 36px;
  gap: 6px;
  align-items: end;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  padding: 8px;
  background: #fff;
}

.quote-payment-number {
  align-self: center;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.16);
  font-size: 11px;
  font-weight: 900;
}

.quote-payment-installment .field {
  gap: 3px;
}

.quote-payment-installment .field > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-payment-installment input,
.quote-payment-installment select {
  min-height: 38px;
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 12px;
}

.quote-payment-installment > .icon-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
}

.quote-payment-installment > .icon-button:disabled {
  visibility: hidden;
}

.quote-payment-methods {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.quote-payment-methods .pricing-check-field {
  min-height: 36px;
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  padding: 7px 10px;
  background: #fff;
}

.quote-payment-plan-status {
  min-height: 16px;
  margin: 0;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 800;
}

.quote-payment-plan-status.is-error {
  color: #b3123d;
}

.quote-public-payment-schedule {
  justify-self: end;
  display: grid;
  width: min(100%, 620px);
  overflow: hidden;
  border: 1px solid rgba(23, 59, 90, 0.16);
  border-radius: 8px;
  background: #fff;
}

.quote-public-payment-schedule > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 13px;
  color: #fff;
  background: var(--navy);
}

.quote-public-payment-schedule > header strong {
  font-size: 14px;
}

.quote-public-payment-schedule > header span {
  font-size: 11px;
  font-weight: 800;
}

.quote-public-payment-schedule-list {
  display: grid;
}

.quote-public-payment-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  border-bottom: 1px solid rgba(23, 59, 90, 0.1);
  padding: 8px 13px;
}

.quote-public-payment-row:last-child {
  border-bottom: 0;
}

.quote-public-payment-row > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  color: var(--navy);
  background: rgba(17, 199, 189, 0.14);
  font-size: 11px;
  font-weight: 900;
}

.quote-public-payment-row > div {
  display: grid;
  gap: 1px;
}

.quote-public-payment-row strong {
  color: var(--navy);
  font-size: 13px;
}

.quote-public-payment-row small {
  color: var(--muted);
  font-size: 11px;
}

.quote-public-payment-row > em {
  color: var(--navy);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.quote-public-payment-row.is-paid {
  background: rgba(17, 199, 189, 0.08);
}

@media (max-width: 820px) {
  .quote-payment-mode {
    justify-self: stretch;
  }

  .quote-payment-mode span {
    padding: 0 7px;
    white-space: normal;
    text-align: center;
  }

  .quote-payment-schedule-head {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-payment-schedule-head .button {
    align-self: start;
  }

  .quote-payment-installment {
    grid-template-columns: 28px minmax(0, 1fr) 94px 36px;
  }

  .quote-payment-description {
    grid-column: 2;
  }

  .quote-payment-amount {
    grid-column: 3;
  }

  .quote-payment-installment > .icon-button {
    grid-column: 4;
  }

  .quote-payment-due {
    grid-column: 2 / 4;
  }

  .quote-payment-date {
    grid-column: 2 / 4;
  }
}

@media (max-width: 520px) {
  .quote-payment-plan-body {
    padding: 10px;
  }

  .quote-payment-mode {
    grid-auto-flow: row;
  }

  .quote-payment-mode span {
    border-right: 0;
    border-bottom: 1px solid var(--surface-line);
  }

  .quote-payment-mode label:last-child span {
    border-bottom: 0;
  }

  .quote-payment-installment {
    grid-template-columns: 26px minmax(0, 1fr) 34px;
  }

  .quote-payment-description,
  .quote-payment-amount,
  .quote-payment-due,
  .quote-payment-date {
    grid-column: 2;
  }

  .quote-payment-installment > .icon-button {
    grid-column: 3;
    grid-row: 1;
  }

  .quote-public-payment-row {
    grid-template-columns: 25px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 10px;
  }
}

/* Universal search */
.topbar {
  z-index: 5;
}

body.is-christmas-lights-route .topbar {
  color: #fff;
  border-bottom: 3px solid #c9344c;
  background: #0d4f40;
  box-shadow: none;
}

body.is-christmas-lights-route .topbar .eyebrow {
  color: #cfe8df;
}

body.is-christmas-lights-route #page-title {
  color: #fff;
}

body.is-christmas-lights-route .menu-button {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
}

.global-search {
  isolation: isolate;
  grid-template-columns: 20px minmax(0, 1fr) 30px;
  overflow: visible;
}

.global-search:focus-within,
.global-search.is-open {
  border-color: rgba(13, 148, 136, 0.52);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.global-search > svg {
  grid-column: 1;
}

.global-search > input {
  grid-column: 2;
  min-width: 0;
}

.global-search > input::-webkit-search-cancel-button {
  display: none;
}

.global-search-clear {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.global-search-clear:hover,
.global-search-clear:focus-visible {
  color: var(--navy);
  background: rgba(20, 58, 86, 0.08);
}

.global-search-clear[hidden],
.global-search-results[hidden],
.mobile-global-search-button[hidden] {
  display: none !important;
}

.global-search-results {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 8px);
  left: 0;
  width: min(680px, calc(100vw - 32px));
  max-height: min(70vh, 590px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(20, 58, 86, 0.16);
  border-radius: 8px;
  padding: 6px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 18px 44px rgba(7, 31, 49, 0.2);
}

.global-search-results[aria-busy="true"] {
  cursor: progress;
}

.global-search-group + .global-search-group {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(20, 58, 86, 0.1);
}

.global-search-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 3px 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.global-search-group-label small {
  min-width: 22px;
  border-radius: 999px;
  padding: 2px 6px;
  text-align: center;
  background: rgba(20, 58, 86, 0.07);
}

.global-search-result {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 7px;
  padding: 8px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.global-search-result:hover,
.global-search-result:focus-visible,
.global-search-result.is-active {
  outline: 0;
  background: #eaf9f7;
}

.global-search-result-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #0d6f68;
  background: #d9f5f1;
}

.global-search-result.is-property .global-search-result-icon {
  color: #215f91;
  background: #e2effa;
}

.global-search-result.is-job .global-search-result-icon {
  color: #216642;
  background: #e2f3e8;
}

.global-search-result.is-lead .global-search-result-icon {
  color: #8a5b08;
  background: #fff1cf;
}

.global-search-result.is-quote .global-search-result-icon {
  color: #5e557d;
  background: #eeeaf8;
}

.global-search-result.is-invoice .global-search-result-icon {
  color: #8a473c;
  background: #f9e9e5;
}

.global-search-result-icon svg {
  width: 18px;
  height: 18px;
}

.global-search-result-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.global-search-result-copy strong,
.global-search-result-copy span,
.global-search-result-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result-copy strong {
  color: var(--navy);
  font-size: 13px;
}

.global-search-result-copy span,
.global-search-result-copy small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.global-search-result-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}

.global-search-result-kind em {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.global-search-result-kind svg {
  width: 15px;
  height: 15px;
}

.global-search-state {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.global-search-state.is-error button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--navy);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.global-search-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(13, 148, 136, 0.2);
  border-top-color: #0d9488;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.mobile-global-search-button {
  display: none;
}

@media (max-width: 760px) {
  .mobile-global-search-button:not([hidden]) {
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .global-search:not(.is-mobile-open) {
    display: none !important;
  }

  .global-search.is-mobile-open {
    position: fixed;
    z-index: 1900;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-width: none;
    min-width: 0;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) 34px;
    border-color: rgba(13, 148, 136, 0.5);
    padding: 8px 8px 8px 12px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(7, 31, 49, 0.24);
  }

  .global-search.is-mobile-open > input {
    font-size: 16px;
  }

  .global-search.is-mobile-open .global-search-results {
    top: calc(100% + 6px);
    width: 100%;
    max-height: calc(100dvh - 78px - env(safe-area-inset-bottom));
    border-radius: 8px;
  }

  .global-search-result {
    min-height: 60px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 9px 8px;
  }
}

@media (max-width: 430px) {
  .global-search-result-kind em {
    display: none;
  }

  .global-search-result-copy strong {
    font-size: 14px;
  }
}

/* Customer detail: compact read view with focused editing. */
.customer-detail-page {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.is-customer-detail .global-action-banner {
  display: none;
}

.customer-detail-page .secondary-icon-button,
.customer-edit-modal .secondary-icon-button {
  color: var(--navy);
}

.customer-detail-toolbar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0 14px;
}

.customer-detail-identity {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.customer-detail-identity > div:last-child {
  min-width: 0;
}

.customer-detail-identity h2 {
  overflow: hidden;
  margin: 0;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-detail-identity span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-detail-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.customer-detail-more {
  position: relative;
}

.customer-detail-more > summary {
  list-style: none;
  cursor: pointer;
}

.customer-detail-more > summary::-webkit-details-marker {
  display: none;
}

.customer-detail-more-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 190px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(3, 21, 34, 0.16);
}

.customer-detail-more-menu button {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  color: var(--navy);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.customer-detail-more-menu button:last-child {
  border-bottom: 0;
}

.customer-detail-more-menu button:hover {
  background: var(--soft);
}

.customer-detail-more-menu button.is-danger {
  color: var(--danger);
}

.customer-detail-more-menu svg {
  width: 17px;
  height: 17px;
}

.customer-contact-summary {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}

.customer-contact-summary-head,
.customer-detail-section > header,
.customer-overview-panel > header,
.customer-edit-section-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.customer-contact-summary h3,
.customer-detail-section h3,
.customer-overview-panel h3,
.customer-edit-section h3 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.2;
}

.customer-contact-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}

.customer-contact-fact {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px 8px;
  min-width: 0;
  border-right: 1px solid var(--line);
  padding: 4px 14px;
}

.customer-contact-fact:first-child {
  padding-left: 0;
}

.customer-contact-fact:last-child {
  border-right: 0;
  padding-right: 0;
}

.customer-contact-fact > svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--teal-dark);
}

.customer-contact-fact > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.customer-contact-fact > div,
.customer-contact-fact > strong {
  display: grid;
  min-width: 0;
  gap: 2px;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.25;
}

.customer-contact-fact a {
  color: var(--navy);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.customer-contact-fact em {
  color: var(--muted);
  font-style: normal;
  font-weight: 750;
}

.customer-detail-layout {
  display: grid;
  grid-template: "work overview" auto "history overview" 1fr / minmax(0, 1fr) 310px;
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.customer-detail-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.customer-overview-rail {
  grid-area: overview;
  position: sticky;
  top: 82px;
  min-width: 0;
}

.customer-detail-section {
  display: grid;
  gap: 11px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0 16px;
}

.customer-detail-section > header > span,
.customer-secondary-history > summary span {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: var(--navy);
  background: var(--mint);
  font-size: 11px;
  font-weight: 950;
}

.customer-detail-empty {
  margin: 0;
  padding: 12px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.customer-property-list,
.customer-active-work-list,
.customer-lifecycle-list {
  display: grid;
  gap: 8px;
}

.customer-property-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.customer-property-index {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  color: var(--navy);
  background: var(--mint);
  font-size: 12px;
  font-weight: 950;
}

.customer-property-row > div {
  min-width: 0;
}

.customer-property-row strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.customer-property-row details {
  margin-top: 5px;
}

.customer-property-row summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.customer-property-row p {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.customer-active-work-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.customer-media-item {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
}

.customer-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 160ms ease;
}

.customer-media-item:hover img {
  transform: scale(1.025);
}

.customer-media-more,
.customer-history-more,
.customer-secondary-history {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.customer-media-more > summary,
.customer-history-more > summary,
.customer-secondary-history > summary {
  padding: 11px 12px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.customer-media-more .customer-media-grid,
.customer-history-more .customer-lifecycle-list {
  border-top: 1px solid var(--line);
  padding: 10px;
}

.customer-lifecycle-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.customer-lifecycle-card > header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  background: #f8fbfd;
}

.customer-lifecycle-card > header div {
  min-width: 0;
}

.customer-lifecycle-card > header strong,
.customer-lifecycle-card > header span {
  display: block;
}

.customer-lifecycle-card > header strong {
  color: var(--navy);
  font-size: 14px;
}

.customer-lifecycle-card > header span,
.customer-lifecycle-card > header time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.customer-lifecycle-card > header time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.customer-lifecycle-stages {
  display: grid;
}

.customer-lifecycle-stage {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  color: inherit;
  text-decoration: none;
}

.customer-lifecycle-stage:last-child {
  border-bottom: 0;
}

.customer-lifecycle-stage:hover {
  background: rgba(17, 199, 189, 0.06);
}

.customer-lifecycle-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  color: var(--teal-dark);
  background: var(--mint);
}

.customer-lifecycle-icon svg {
  width: 16px;
  height: 16px;
}

.customer-lifecycle-stage > div {
  min-width: 0;
}

.customer-lifecycle-stage > div > strong,
.customer-lifecycle-stage > div > span,
.customer-lifecycle-meta time {
  display: block;
}

.customer-lifecycle-stage > div > strong {
  color: var(--navy);
  font-size: 13px;
}

.customer-lifecycle-stage > div > span,
.customer-lifecycle-meta time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.customer-lifecycle-meta {
  text-align: right;
}

.customer-lifecycle-meta strong {
  color: var(--navy);
  font-size: 13px;
}

.customer-secondary-history > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.customer-secondary-history > summary::-webkit-details-marker {
  display: none;
}

.customer-secondary-history > div {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px;
}

.customer-secondary-history article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 4px 2px;
}

.customer-secondary-history article strong {
  color: var(--navy);
  font-size: 13px;
}

.customer-secondary-history article time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.customer-secondary-history article p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.customer-overview-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.customer-overview-panel > header {
  border-bottom: 1px solid var(--line);
  padding: 12px;
}

.customer-overview-money {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.customer-overview-money > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border-right: 1px solid var(--line);
  padding: 12px;
}

.customer-overview-money > div:last-child {
  border-right: 0;
}

.customer-overview-money span,
.customer-overview-block-head > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.customer-overview-money strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.1;
  text-overflow: ellipsis;
}

.customer-overview-money .has-balance strong {
  color: #a75400;
}

.customer-overview-block {
  display: grid;
  gap: 7px;
  border-bottom: 1px solid var(--line);
  padding: 12px;
}

.customer-overview-block:last-child {
  border-bottom: 0;
}

.customer-overview-block-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.customer-overview-block-head a {
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 900;
}

.customer-overview-block-head .icon-button {
  width: 30px;
  height: 30px;
}

.customer-overview-block > strong {
  color: var(--navy);
  font-size: 14px;
}

.customer-overview-block p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  white-space: pre-wrap;
}

.customer-overview-tags form,
.customer-overview-tags .crm-tag-control {
  display: grid;
  gap: 8px;
}

.customer-overview-tags .crm-tag-picker-field > span {
  display: none;
}

.customer-overview-tags [data-customer-tags-save] {
  justify-self: end;
}

.customer-edit-modal {
  width: min(780px, 100%);
  max-height: min(88dvh, 860px);
  overflow: hidden;
  padding: 0;
}

.customer-edit-modal > form {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  max-height: inherit;
}

.customer-edit-head {
  margin: 0;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.customer-edit-status {
  min-height: 0;
  margin: 0;
  padding: 0 16px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 850;
}

.customer-edit-status:not(:empty) {
  padding-top: 8px;
}

.customer-edit-modal .crm-customer-duplicate-alert {
  margin: 10px 16px 0;
}

.customer-edit-scroll {
  display: grid;
  gap: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
}

.customer-edit-section {
  display: grid;
  gap: 10px;
}

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

.customer-edit-wide {
  grid-column: 1 / -1;
}

.customer-edit-contact-grid .crm-client-phone-field {
  min-width: 0;
}

.customer-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  background: #fff;
}

@media (max-width: 1020px) {
  .customer-contact-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 0;
  }

  .customer-contact-fact:nth-child(2) {
    border-right: 0;
  }

  .customer-contact-fact:nth-child(3) {
    padding-left: 0;
  }

  .customer-detail-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 820px) {
  .customer-detail-layout {
    grid-template: "work" auto "overview" auto "history" auto / minmax(0, 1fr);
  }

  .customer-overview-rail {
    position: static;
  }

  .customer-overview-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-overview-panel > header,
  .customer-overview-money {
    grid-column: 1 / -1;
  }

  .customer-overview-block {
    border-right: 1px solid var(--line);
  }

  .customer-overview-block:nth-last-child(1) {
    border-right: 0;
  }

  .customer-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .customer-detail-page {
    gap: 10px;
  }

  .customer-detail-toolbar {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    padding-top: 2px;
  }

  .customer-detail-identity {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
  }

  .customer-detail-identity .client-avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .customer-detail-identity h2 {
    font-size: 18px;
  }

  .customer-detail-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .customer-detail-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0;
  }

  .customer-detail-actions .button span {
    display: none;
  }

  .customer-detail-more > summary {
    width: 100%;
    height: 40px;
  }

  .customer-contact-summary {
    padding: 11px;
  }

  .customer-contact-summary-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .customer-contact-fact,
  .customer-contact-fact:first-child,
  .customer-contact-fact:nth-child(3),
  .customer-contact-fact:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 9px 0;
  }

  .customer-contact-fact:last-child {
    border-bottom: 0;
  }

  .customer-overview-panel {
    display: block;
  }

  .customer-overview-block {
    border-right: 0;
  }

  .customer-active-work-list,
  .customer-edit-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-edit-wide {
    grid-column: auto;
  }

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

  .customer-lifecycle-stage {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .customer-lifecycle-meta {
    grid-column: 2;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .customer-lifecycle-card > header {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }

  .customer-edit-overlay {
    align-items: end;
    padding: 0;
  }

.customer-edit-modal {
    width: 100%;
    max-height: 92dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 10px 10px 0 0;
  }
}

/* Quote totals adjustments */
.quote-builder-summary {
  width: min(100%, 560px);
}

.quote-builder-summary > .quote-summary-row {
  min-height: 44px;
  align-items: center;
}

.quote-builder-summary > .quote-summary-adjustment {
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr) auto;
  gap: 10px;
}

.quote-summary-adjustment.is-active {
  background: #f7fbfb;
}

.quote-summary-deposit.is-confirmed {
  background: #f1faf6;
}

.quote-adjustment-actions {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}

.quote-summary-add,
.quote-summary-link {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  padding: 0 8px;
  color: var(--teal-dark);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.quote-summary-add {
  border: 1px solid rgba(7, 149, 143, 0.28);
  background: #fff;
}

.quote-summary-add:hover,
.quote-summary-link:hover {
  color: var(--navy);
  background: rgba(17, 199, 189, 0.1);
}

.quote-adjustment-editor,
.quote-deposit-empty-actions,
.quote-deposit-confirmed,
.quote-deposit-schedule-summary {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.quote-adjustment-editor[hidden],
.quote-deposit-empty-actions[hidden],
.quote-deposit-confirmed[hidden],
.quote-deposit-schedule-summary[hidden] {
  display: none !important;
}

.quote-adjustment-type {
  display: inline-grid;
  grid-template-columns: repeat(2, 34px);
  overflow: hidden;
  border: 1px solid var(--surface-line-strong);
  border-radius: 6px;
  background: #fff;
}

.quote-adjustment-type label {
  position: relative;
  cursor: pointer;
}

.quote-adjustment-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quote-adjustment-type span {
  display: grid;
  min-height: 32px;
  place-items: center;
  color: var(--muted);
  background: #fff;
  font-size: 13px;
  font-weight: 950;
}

.quote-adjustment-type label + label span {
  border-left: 1px solid var(--surface-line);
}

.quote-adjustment-type input:checked + span {
  color: #fff;
  background: var(--navy);
}

.quote-adjustment-value {
  display: grid;
  grid-template-columns: auto minmax(48px, 74px) auto;
  align-items: center;
  min-height: 34px;
  overflow: hidden;
  border: 1px solid var(--surface-line-strong);
  border-radius: 6px;
  background: #fff;
}

.quote-adjustment-value > span,
.quote-adjustment-value > em {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.quote-adjustment-value input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  padding: 4px;
  color: var(--navy);
  background: #fff;
  font-weight: 900;
  text-align: right;
}

.quote-adjustment-remove {
  width: 32px;
  min-width: 32px;
  height: 32px;
  color: #b3123d;
  background: rgba(179, 18, 61, 0.08);
}

.quote-adjustment-remove:hover {
  background: rgba(179, 18, 61, 0.14);
}

.quote-deposit-confirm-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-color: #078b50;
  color: #fff;
  background: #078b50;
}

.quote-deposit-confirm-button:hover {
  border-color: #056f40;
  background: #056f40;
}

.quote-deposit-confirmed {
  min-width: 0;
  justify-content: flex-end;
  color: #056f40;
  font-size: 12px;
  font-weight: 900;
}

.quote-deposit-confirmed-check {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #078b50;
}

.quote-deposit-confirmed-check svg {
  width: 15px;
  height: 15px;
  stroke-width: 3;
}

.quote-deposit-confirmed > [data-quote-deposit-confirmed-label] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-deposit-confirmed .icon-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-color: rgba(5, 111, 64, 0.2);
  color: #056f40;
  background: #fff;
}

.quote-deposit-schedule-summary > span {
  overflow: hidden;
  color: var(--navy);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-payment-schedule-editor {
  justify-self: end;
  width: min(100%, 720px);
  margin-top: 10px;
}

.quote-payment-schedule-editor[hidden] {
  display: none !important;
}

.quote-payment-schedule-title {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 8px 12px;
}

.quote-payment-schedule-title > span:nth-child(2) {
  display: grid;
  gap: 1px;
}

.quote-payment-schedule-title small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.quote-deposit-customer-panel {
  align-items: stretch;
  border: 1px solid rgba(7, 149, 143, 0.28);
  border-radius: 8px;
  padding: 18px;
  background: #f6fbfa;
}

.quote-deposit-customer-panel .invoice-public-pay-main {
  align-content: center;
}

.quote-deposit-customer-panel .invoice-public-pay-main small {
  max-width: 460px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.quote-deposit-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  align-content: center;
  overflow: hidden;
  border: 1px solid rgba(23, 59, 90, 0.14);
  border-radius: 8px;
  background: #fff;
}

.quote-deposit-breakdown > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px;
}

.quote-deposit-breakdown > div + div {
  border-left: 1px solid rgba(23, 59, 90, 0.1);
}

.quote-deposit-breakdown span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-deposit-breakdown strong {
  color: var(--navy);
  font-size: 17px;
  white-space: nowrap;
}

.quote-deposit-breakdown .is-due-now {
  background: rgba(17, 199, 189, 0.11);
}

.quote-deposit-breakdown > small {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(23, 59, 90, 0.1);
  padding: 7px 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.quote-public-decision-panel {
  background: #f6fbfa;
}

.quote-public-card.is-awaiting-package-selection .quote-total-box,
.quote-public-card.is-awaiting-package-selection .quote-public-payment-schedule,
.quote-public-card.is-awaiting-package-selection .quote-deposit-customer-panel,
.quote-public-card.is-awaiting-package-selection .quote-public-decision-panel {
  display: none;
}

.quote-public-card.is-awaiting-package-selection .quote-number-total span {
  font-size: 14px;
}

.quote-public-decision-actions .button.primary {
  background: #078b50;
}

@media (max-width: 720px) {
  .quote-builder-summary > .quote-summary-adjustment {
    grid-template-columns: minmax(68px, auto) minmax(0, 1fr) auto;
    gap: 7px;
  }

  .quote-adjustment-actions,
  .quote-adjustment-editor {
    flex-wrap: wrap;
  }

  .quote-summary-adjustment > strong {
    grid-column: 3;
  }

  .quote-payment-installment {
    align-items: stretch;
  }

  .quote-deposit-customer-panel {
    grid-template-columns: 1fr;
  }

  .quote-deposit-breakdown {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  .quote-builder-summary > .quote-summary-adjustment {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .quote-summary-adjustment > span:first-child {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding-top: 0;
  }

  .quote-summary-adjustment .quote-adjustment-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: flex-start;
  }

  .quote-summary-adjustment > strong {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .quote-adjustment-editor {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .quote-adjustment-value {
    grid-template-columns: auto minmax(40px, 58px) auto;
  }

  .quote-deposit-empty-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .quote-deposit-schedule-summary {
    width: 100%;
    justify-content: space-between;
  }

  .quote-deposit-confirmed {
    width: 100%;
    justify-content: flex-start;
  }

  .quote-deposit-breakdown {
    grid-template-columns: 1fr;
  }

  .quote-deposit-breakdown > div + div {
    border-top: 1px solid rgba(23, 59, 90, 0.1);
    border-left: 0;
  }

  .quote-deposit-breakdown > small {
    grid-column: 1;
  }

  .quote-public-decision-actions .button.primary {
    min-height: 62px;
    padding: 12px;
    font-size: 18px;
    white-space: normal;
  }
}
/* Christmas Lights permanent crate registry */
.christmas-crate-registry-actions,
.christmas-crate-label-actions,
.christmas-crate-action-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.christmas-crate-summary {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 8px;
  margin-bottom: 12px;
}

.christmas-crate-summary > span {
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--line, #d7e1e4);
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.christmas-crate-summary i { width: 17px; height: 17px; color: #0f766e; }
.christmas-crate-summary b { font-size: 15px; line-height: 1; color: #10354b; }
.christmas-crate-summary em { font-size: 12px; font-style: normal; color: #61717b; }
.christmas-crate-grid {
  border: 1px solid var(--line, #d7e1e4);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.christmas-crate-no-results { padding: 22px; color: #61717b; text-align: center; font-size: 13px; }

.christmas-crate-row {
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--line, #d7e1e4);
  background: #fff;
  color: #10354b;
  display: grid;
  grid-template-columns: 62px minmax(170px, 1fr) minmax(120px, .8fr) auto 20px;
  gap: 12px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.christmas-crate-row:last-child { border-bottom: 0; }
.christmas-crate-row:hover { background: #f5fbfb; }
.christmas-crate-row.is-checked_out { border-left: 4px solid #2563eb; }
.christmas-crate-row.is-return_qc { border-left: 4px solid #d97706; }
.christmas-crate-row.is-loaded { border-left: 4px solid #0f766e; }
.christmas-crate-row.is-retired { opacity: .62; }

.christmas-crate-code,
.christmas-crate-sheet-code {
  display: grid;
  place-items: center;
  background: #10354b;
  color: #fff;
  border-radius: 6px;
  font-weight: 900;
  letter-spacing: 0;
}

.christmas-crate-code { width: 52px; height: 42px; font-size: 20px; }
.christmas-crate-main { display: grid; gap: 2px; min-width: 0; }
.christmas-crate-main strong { font-size: 14px; }
.christmas-crate-main em,
.christmas-crate-row small { color: #61717b; font-size: 12px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.christmas-crate-location { display: grid; gap: 2px; min-width: 0; }
.christmas-crate-location strong { color: #10354b; font-size: 12px; }
.christmas-crate-location em { color: #61717b; font-size: 11px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.christmas-crate-empty {
  min-height: 220px;
  padding: 28px;
  border: 1px dashed #b9c9ce;
  border-radius: 6px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  text-align: center;
  color: #61717b;
}
.christmas-crate-empty > i { width: 34px; height: 34px; color: #0f766e; }
.christmas-crate-empty strong { color: #10354b; font-size: 17px; }
.christmas-crate-empty span { max-width: 370px; font-size: 13px; }

.christmas-legacy-kits { margin-top: 12px; }
.christmas-legacy-kits > summary { padding: 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.christmas-legacy-kits > summary span { flex: 1; font-weight: 800; }
.christmas-legacy-kits > summary i { width: 18px; }

.christmas-crate-setup-fields,
.christmas-crate-label-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.christmas-crate-setup-preview {
  margin: 12px 0;
  padding: 12px;
  border-radius: 6px;
  background: #e9f8f6;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.christmas-crate-label-summary { margin: 0 0 16px; color: #61717b; font-size: 13px; }

.christmas-crate-sheet-overlay { align-items: flex-end; }
.christmas-crate-sheet {
  width: min(520px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  overflow: auto;
  margin: auto;
  padding: 18px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 22px 55px rgba(5, 34, 49, .24);
}

.christmas-crate-sheet.is-inline { width: min(620px, 100%); max-height: none; box-shadow: none; border: 1px solid #d7e1e4; }
.christmas-crate-sheet-head { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; margin-bottom: 14px; }
.christmas-crate-sheet-code { width: 72px; height: 64px; font-size: 28px; }
.christmas-crate-sheet-head p { margin: 0 0 2px; color: #61717b; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.christmas-crate-sheet-head h2 { margin: 0; color: #10354b; font-size: 22px; }
.christmas-crate-assignment { padding: 12px; border-radius: 6px; background: #e9f8f6; display: flex; gap: 10px; align-items: center; }
.christmas-crate-assignment > i { color: #0f766e; }
.christmas-crate-assignment > span { display: grid; gap: 2px; }
.christmas-crate-assignment em { color: #61717b; font-size: 12px; font-style: normal; }
.christmas-crate-last-move { margin-top: 10px; padding: 10px 12px; border: 1px solid #d7e1e4; border-radius: 6px; display: flex; align-items: center; gap: 9px; }
.christmas-crate-last-move > i { width: 19px; height: 19px; color: #0f766e; }
.christmas-crate-last-move > span { display: grid; grid-template-columns: auto 1fr; gap: 1px 7px; align-items: baseline; }
.christmas-crate-last-move small { grid-column: 1 / -1; color: #61717b; }
.christmas-crate-last-move em { color: #61717b; font-size: 11px; font-style: normal; }
.christmas-crate-sheet form { display: grid; gap: 10px; margin-top: 12px; }
.christmas-crate-sheet form > label { display: grid; gap: 5px; }
.christmas-crate-sheet form label > span { color: #53656f; font-size: 12px; font-weight: 800; }
.christmas-crate-sheet input,
.christmas-crate-sheet select,
.christmas-crate-manual-dialog input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #cbd7db; border-radius: 6px; background: #fff; }
.christmas-crate-action-list .button { flex: 1 1 180px; min-height: 48px; }
.christmas-crate-locked { padding: 10px; border-radius: 6px; background: #fff3cd; color: #7a5200; display: flex; gap: 8px; }
.christmas-crate-manual-link { margin: 12px auto 0; border: 0; background: transparent; color: #0f766e; text-decoration: underline; cursor: pointer; display: block; }
.christmas-crate-scan-body { display: grid; justify-items: center; gap: 12px; padding-top: 18px; }
.christmas-crate-scan-back { justify-self: start; display: inline-flex; gap: 7px; align-items: center; color: #10354b; font-weight: 800; text-decoration: none; }
.christmas-crate-scan-loading,
.christmas-crate-scan-error { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; }
.christmas-crate-scan-error > i { width: 40px; height: 40px; color: #0f766e; }

@media (max-width: 760px) {
  .christmas-crate-registry .christmas-lights-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }
  .christmas-crate-registry .christmas-lights-list-head > div:first-child {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }
  .christmas-crate-summary { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .christmas-crate-summary > span { flex: 0 0 auto; }
  .christmas-crate-row { grid-template-columns: 54px minmax(0, 1fr) 18px; gap: 8px; }
  .christmas-crate-location,
  .christmas-crate-row > small { display: none; }
  .christmas-crate-registry-actions { width: auto; flex-wrap: nowrap; }
  .christmas-crate-registry-actions .button { flex: 0 0 auto; width: auto; min-width: 0; padding-inline: 12px; }
  .christmas-crate-registry-actions .button span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .christmas-crate-setup-fields,
  .christmas-crate-label-spec { grid-template-columns: 1fr; }
  .christmas-crate-sheet { width: 100%; max-height: calc(100dvh - 8px); border-radius: 8px 8px 0 0; padding: 14px; }
  .christmas-crate-sheet.is-inline { border-radius: 6px; }
  .christmas-crate-sheet-head { grid-template-columns: 62px 1fr auto; }
  .christmas-crate-sheet-code { width: 62px; height: 58px; font-size: 25px; }
  .christmas-crate-action-list { display: grid; grid-template-columns: 1fr; }
  .christmas-crate-action-list .button { width: 100%; }
}

@media (max-width: 620px) {
  .christmas-lights-dialog.christmas-crate-setup-dialog {
    align-self: start;
    width: calc(100% - 20px);
    height: auto !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 10px;
    border: 1px solid rgba(13, 70, 94, 0.18);
    border-radius: 8px;
  }

  .christmas-lights-dialog-overlay:has(.christmas-crate-setup-dialog) {
    place-items: start center;
  }
}

/* Keep the scheduler refresh above legacy schedule declarations in the cascade. */
.schedule-view .schedule-toolbar {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
  overflow: hidden;
  border: 1px solid #cad6de;
  border-radius: 6px;
}

.schedule-view .schedule-range {
  min-width: 52px;
  min-height: 38px;
  border: 0;
  border-right: 1px solid #d7e1e7;
  border-radius: 0;
  padding: 0 9px;
  background: #fff;
  font-size: 12px;
}

.schedule-view .schedule-range:last-child {
  border-right: 0;
}

.schedule-view .schedule-range svg {
  display: none;
}

.schedule-view .schedule-range.active,
.schedule-view .schedule-range:hover {
  border-color: #d7e1e7;
  color: #075e59;
  background: #e9f8f6;
}

.schedule-view .schedule-resource-board,
.schedule-view .schedule-timegrid,
.schedule-view .schedule-month-calendar {
  border-color: #d5dee4;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(5, 24, 44, .03);
}

.schedule-view .schedule-month-calendar {
  gap: 1px;
  background: #cbd7de;
}

.schedule-view .schedule-resource-board,
.schedule-view .schedule-timegrid {
  max-height: calc(100dvh - 205px);
}

.schedule-view .schedule-resource-corner,
.schedule-view .schedule-resource-hours,
.schedule-view .schedule-timegrid-corner,
.schedule-view .schedule-timegrid-head,
.schedule-view .schedule-month-weekday {
  color: #123b56;
  background: #f7fafb;
}

.schedule-view .schedule-resource-corner span,
.schedule-view .schedule-resource-hours span,
.schedule-view .schedule-timegrid-head span {
  color: #667b89;
}

.schedule-view .schedule-timegrid-head.is-selected,
.schedule-view .schedule-timegrid-head.is-today {
  color: #075e59;
  background: #e9f8f6;
}

.schedule-view .schedule-time-job.is-internal-work,
.schedule-view .schedule-resource-job.is-internal-work,
.schedule-view .month-job-pill.is-internal-work {
  border-color: rgba(8, 134, 77, .25);
  border-left-color: #07864d;
  color: #123b56;
  background: #eaf8ef;
  box-shadow: none;
}

.schedule-view .schedule-time-job,
.schedule-view .schedule-resource-job {
  container-type: inline-size;
}

.schedule-view .schedule-time-job strong,
.schedule-view .schedule-resource-job strong,
.schedule-view .month-job-pill strong {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.schedule-view .schedule-time-job strong,
.schedule-view .schedule-resource-job strong {
  line-height: 1.12;
}

.schedule-view .schedule-card-label-full {
  display: contents;
}

.schedule-view .schedule-card-label-compact {
  display: none;
}

.schedule-view .schedule-time-job.is-short {
  gap: 1px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.schedule-view .schedule-time-job.is-short strong {
  -webkit-line-clamp: 1;
}

.schedule-view .schedule-time-job.is-short .schedule-assigned-crew,
.schedule-view .schedule-resource-job .schedule-assigned-crew {
  display: none;
}

.schedule-view .schedule-time-job .schedule-card-title,
.schedule-view .schedule-resource-job .schedule-card-title {
  display: block;
  overflow: hidden;
  color: #496674;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-view .schedule-time-job.is-short .schedule-card-title {
  display: block;
  font-size: 9px;
  line-height: 1.05;
}

.schedule-view .schedule-month-cell {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

@container (max-width: 104px) {
  .schedule-view .schedule-time-job strong,
  .schedule-view .schedule-resource-job strong {
    display: block;
    font-size: clamp(9px, 15cqi, 11px);
    text-overflow: clip;
    white-space: nowrap;
    -webkit-line-clamp: unset;
  }

  .schedule-view .schedule-card-label-full {
    display: none;
  }

  .schedule-view .schedule-card-label-compact {
    display: inline;
  }

  .schedule-view .schedule-time-job small,
  .schedule-view .schedule-resource-job small,
  .schedule-view .schedule-time-job .schedule-assigned-crew,
  .schedule-view .schedule-resource-job .schedule-assigned-crew,
  .schedule-view .schedule-resource-job-top > span {
    display: none;
  }

  .schedule-view .schedule-time-job span,
  .schedule-view .schedule-resource-job time {
    font-size: clamp(8px, 13cqi, 9px);
    text-overflow: clip;
    white-space: nowrap;
  }
}

.schedule-view .schedule-dispatch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr);
  gap: 8px;
  align-items: start;
}

.schedule-view .schedule-dispatch-layout.has-unscheduled {
  grid-template-columns: minmax(0, 1fr) 270px minmax(300px, .46fr);
}

.schedule-view .schedule-dispatch-calendar {
  grid-column: 1;
  grid-row: 1;
  order: 0;
}

.schedule-view .schedule-dispatch-map {
  position: sticky;
  top: 8px;
  grid-column: -2 / -1;
  grid-row: 1;
  order: 0;
}

@media (max-width: 1240px) {
  .schedule-view .schedule-dispatch-layout.has-unscheduled {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .5fr);
  }

  .schedule-view .schedule-dispatch-layout.has-unscheduled .schedule-unscheduled-drawer {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 940px) {
  .schedule-view .schedule-dispatch-layout,
  .schedule-view .schedule-dispatch-layout.has-unscheduled {
    grid-template-columns: 1fr;
  }

  .schedule-view .schedule-dispatch-calendar,
  .schedule-view .schedule-dispatch-map,
  .schedule-view .schedule-unscheduled-drawer,
  .schedule-view .schedule-dispatch-layout.has-unscheduled .schedule-unscheduled-drawer {
    position: static;
    grid-column: 1;
  }

  .schedule-view .schedule-dispatch-calendar {
    grid-row: 1;
  }

  .schedule-view .schedule-dispatch-map {
    grid-row: 2;
  }

  .schedule-view .schedule-unscheduled-drawer,
  .schedule-view .schedule-dispatch-layout.has-unscheduled .schedule-unscheduled-drawer {
    grid-row: 3;
  }
}

@media (max-width: 760px) {
  .schedule-view .schedule-toolbar {
    flex: 1 0 auto;
  }

  .schedule-view .schedule-range {
    min-width: 58px;
  }

  .schedule-view .schedule-resource-board,
  .schedule-view .schedule-timegrid {
    display: none;
  }

  .schedule-view .schedule-mobile-summary {
    display: grid;
  }
}

/* Final scheduler interaction polish. */
.schedule-load-strip[hidden] {
  display: none;
}

.schedule-view .schedule-month-cell[data-schedule-cell-date] {
  cursor: pointer;
}

.schedule-view .schedule-month-cell[data-schedule-cell-date]:focus-visible {
  outline: 2px solid #11c7bd;
  outline-offset: -2px;
}

/* Jobber-style schedule density: every month item stays visible and finished work recedes. */
.schedule-view .schedule-month-calendar {
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  align-items: stretch;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

.schedule-view .schedule-month-cell {
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.schedule-view .schedule-month-jobs {
  align-content: start;
  min-height: 0;
  overflow: visible;
}

.schedule-view .month-job-pill {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 5px 29px 5px 7px;
  overflow: hidden;
}

.schedule-view .month-job-pill .schedule-card-time {
  overflow: visible;
  color: #245367;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.schedule-view .month-job-pill strong {
  display: block;
  overflow: hidden;
  overflow-wrap: normal;
  color: inherit;
  font-size: 11px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  -webkit-line-clamp: unset;
}

.schedule-view .month-job-pill .schedule-card-title {
  grid-column: 1 / -1;
  display: block;
  overflow: hidden;
  color: #58717f;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-view .schedule-time-job strong,
.schedule-view .schedule-resource-job strong {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.schedule-view .schedule-time-job.is-narrow,
.schedule-view .schedule-resource-job.is-narrow {
  gap: 2px;
  padding: 5px 6px;
}

.schedule-view .schedule-time-job.is-narrow .schedule-card-label-full,
.schedule-view .schedule-resource-job.is-narrow .schedule-card-label-full {
  display: none;
}

.schedule-view .schedule-time-job.is-narrow .schedule-card-label-compact,
.schedule-view .schedule-resource-job.is-narrow .schedule-card-label-compact {
  display: inline;
}

.schedule-view .schedule-time-job.is-narrow strong,
.schedule-view .schedule-resource-job.is-narrow strong {
  display: block;
  overflow: hidden;
  max-width: 100%;
  font-size: 10px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

.schedule-view .schedule-time-job.is-narrow .schedule-card-time,
.schedule-view .schedule-resource-job.is-narrow .schedule-card-time {
  display: block;
  overflow: hidden;
  max-width: 100%;
  font-size: 9px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-view .schedule-time-job.is-narrow .schedule-assigned-crew,
.schedule-view .schedule-resource-job.is-narrow .schedule-assigned-crew {
  display: none;
}

.schedule-view .schedule-time-job.is-narrow .schedule-card-title,
.schedule-view .schedule-resource-job.is-narrow .schedule-card-title {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: #526c79;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-view .schedule-completion-mark {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 4;
  display: grid;
  width: 22px;
  height: 22px;
  overflow: visible;
  place-items: center;
  border: 2px solid #07864d;
  border-radius: 50%;
  color: #07864d;
  background: #fff;
  box-shadow: 0 1px 2px rgba(5, 56, 38, .14);
}

.schedule-view .schedule-completion-mark svg {
  width: 15px;
  height: 15px;
  stroke-width: 3.5;
}

.schedule-view .schedule-time-job.is-complete,
.schedule-view .schedule-resource-job.is-complete,
.schedule-view .month-job-pill.is-complete,
.schedule-view .schedule-time-job.is-completed-work,
.schedule-view .schedule-resource-job.is-completed-work,
.schedule-view .month-job-pill.is-completed-work {
  border-color: #c8d0d5;
  border-left-color: #8e9ba4;
  color: #5c6972;
  background: #edf0f2;
  box-shadow: none;
}

.schedule-view .schedule-time-job.is-complete,
.schedule-view .schedule-resource-job.is-complete {
  padding-right: 34px;
}

.schedule-view .schedule-time-job.is-complete span,
.schedule-view .schedule-resource-job.is-complete time,
.schedule-view .month-job-pill.is-complete .schedule-card-time {
  color: #697984;
}

.schedule-view .schedule-time-job.is-narrow.is-complete,
.schedule-view .schedule-resource-job.is-narrow.is-complete {
  padding-right: 6px;
}

.schedule-view .schedule-time-job.is-narrow .schedule-completion-mark,
.schedule-view .schedule-resource-job.is-narrow .schedule-completion-mark {
  top: auto;
  right: 3px;
  bottom: 3px;
  width: 17px;
  height: 17px;
  border-width: 1.5px;
}

.schedule-view .schedule-time-job.is-narrow .schedule-completion-mark svg,
.schedule-view .schedule-resource-job.is-narrow .schedule-completion-mark svg {
  width: 12px;
  height: 12px;
}

.schedule-view .schedule-time-job.is-narrow.is-complete .schedule-card-time,
.schedule-view .schedule-resource-job.is-narrow.is-complete .schedule-card-time {
  padding-right: 0;
}

.schedule-create-card {
  width: min(480px, 100%);
  gap: 16px;
  border-color: #d5e0e5;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}

.schedule-create-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 14px 16px;
  border-bottom: 1px solid #dce5e9;
}

.schedule-create-head > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.schedule-create-head span {
  color: #667b89;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.schedule-create-head strong {
  overflow: hidden;
  color: #123b56;
  font-size: 20px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-create-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  color: #075e59;
  background: #e9f8f6;
}

.schedule-create-icon svg {
  width: 21px;
  height: 21px;
}

.schedule-create-card .schedule-create-close {
  position: static;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: inherit;
}

.schedule-create-timing {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(2, minmax(100px, .8fr));
  gap: 9px;
  padding: 0 16px;
}

.schedule-create-timing label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.schedule-create-timing span {
  color: #607481;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.schedule-create-timing input {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid #cad7dd;
  border-radius: 6px;
  padding: 0 10px;
  color: #123b56;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.schedule-create-timing input:focus {
  border-color: #11a69e;
  outline: 2px solid rgba(17, 166, 158, .12);
}

.schedule-create-options {
  display: grid;
  gap: 7px;
  padding: 0 16px 16px;
}

.schedule-create-option {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid #d5e0e5;
  border-radius: 7px;
  padding: 9px 11px;
  color: #123b56;
  background: #fff;
  text-decoration: none;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

.schedule-create-option:hover,
.schedule-create-option:focus-visible {
  border-color: #0fa99f;
  background: #f2fbfa;
  outline: 0;
  transform: translateY(-1px);
}

.schedule-create-option > svg:first-child {
  width: 20px;
  height: 20px;
  justify-self: center;
  color: #0a7770;
}

.schedule-create-option > svg:last-child {
  width: 17px;
  height: 17px;
  color: #81939e;
}

.schedule-create-option > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.schedule-create-option strong {
  font-size: 14px;
}

.schedule-create-option small {
  overflow: hidden;
  color: #687c89;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-create-option.is-primary {
  border-color: rgba(7, 94, 89, .28);
}

.schedule-reschedule-card {
  gap: 16px;
}

.schedule-reschedule-help {
  margin: -4px 16px 0;
  color: #667b89;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.schedule-reschedule-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}

.schedule-reschedule-actions .button {
  min-width: 116px;
}

.schedule-notify-card {
  gap: 14px;
}

.schedule-notify-head {
  grid-template-columns: 42px minmax(0, 1fr);
}

.schedule-notify-summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 16px;
  border: 1px solid #d7e3e7;
  border-radius: 7px;
  padding: 10px 12px;
  color: #123b56;
  background: #f7fafb;
}

.schedule-notify-summary > svg {
  width: 20px;
  height: 20px;
  justify-self: center;
  color: #087c74;
}

.schedule-notify-summary span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.schedule-notify-summary strong {
  font-size: 14px;
}

.schedule-notify-summary small {
  color: #607481;
  font-size: 12px;
  font-weight: 800;
}

.schedule-notify-options {
  display: grid;
  gap: 7px;
  padding: 0 16px;
}

.schedule-notify-options > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  border: 1px solid #d5e0e5;
  border-radius: 7px;
  padding: 9px 11px;
  color: #123b56;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

.schedule-notify-options > button:hover,
.schedule-notify-options > button:focus-visible {
  border-color: #0fa99f;
  outline: 0;
  background: #f2fbfa;
  transform: translateY(-1px);
}

.schedule-notify-options > button:disabled {
  color: #8798a3;
  background: #f4f7f8;
  cursor: not-allowed;
  transform: none;
}

.schedule-notify-options > button[aria-busy="true"] {
  border-color: #0fa99f;
  background: #eaf9f7;
}

.schedule-notify-options > button > svg:first-child {
  width: 20px;
  height: 20px;
  justify-self: center;
  color: #087c74;
}

.schedule-notify-options > button > svg:last-child {
  width: 17px;
  height: 17px;
  color: #81939e;
}

.schedule-notify-options > button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.schedule-notify-options strong {
  font-size: 14px;
}

.schedule-notify-options small {
  overflow: hidden;
  color: #687c89;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-notify-error {
  margin: 0 16px;
  border-left: 3px solid #cf244d;
  padding: 8px 10px;
  color: #8c1835;
  background: #fff1f4;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.schedule-notify-skip {
  margin: 0 16px 16px;
}

.schedule-view [data-schedule-can-drag="0"][draggable="true"] {
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .schedule-create-sheet {
    align-items: end;
    padding: 8px;
  }

  .schedule-create-card {
    width: 100%;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
  }

  .schedule-create-timing {
    grid-template-columns: 1fr 1fr;
  }

  .schedule-create-timing label:first-child {
    grid-column: 1 / -1;
  }
}

/* Jobber-style quick create stays on top of the schedule and saves in place. */
.schedule-quick-create-sheet {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: transparent;
}

.schedule-quick-create-sheet [hidden] {
  display: none !important;
}

.schedule-create-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(7, 27, 40, .42);
  cursor: default;
}

.schedule-quick-create-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(430px, 100vw);
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  border-left: 1px solid #cbd8de;
  border-radius: 0;
  background: #fff;
  box-shadow: -18px 0 48px rgba(7, 35, 52, .2);
  overflow: visible;
  animation: schedule-create-slide-in .18s ease-out;
}

@keyframes schedule-create-slide-in {
  from { transform: translateX(18px); opacity: .65; }
  to { transform: translateX(0); opacity: 1; }
}

.schedule-quick-create-head {
  flex: 0 0 auto;
  grid-template-columns: 30px minmax(0, 1fr) 36px;
  min-height: 54px;
  padding: 8px 12px;
  border-bottom: 1px solid #dbe4e8;
}

.schedule-quick-create-head > strong {
  font-size: 16px;
}

.schedule-quick-create-card .schedule-create-close {
  border-color: #cbd8de;
  color: #123b56;
  background: #fff;
}

.schedule-quick-create-card .schedule-create-close:hover,
.schedule-quick-create-card .schedule-create-close:focus-visible {
  color: #075e59;
  background: #eef8f6;
}

.schedule-create-grip {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #607581;
}

.schedule-create-grip svg {
  width: 16px;
  height: 16px;
}

.schedule-create-kind-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 12px 14px 0;
  border: 1px solid #cbd8de;
  border-radius: 7px;
  overflow: hidden;
}

.schedule-create-kind-tabs button {
  min-width: 0;
  min-height: 40px;
  border: 0;
  border-right: 1px solid #dbe4e8;
  padding: 0 8px;
  color: #415968;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.schedule-create-kind-tabs button:last-child {
  border-right: 0;
}

.schedule-create-kind-tabs button:hover,
.schedule-create-kind-tabs button:focus-visible {
  background: #f2f8f7;
  outline: 0;
}

.schedule-create-kind-tabs button.is-active {
  color: #176b20;
  background: #f4fff4;
  box-shadow: inset 0 0 0 1px #3d922f;
}

.schedule-create-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.schedule-create-customer {
  position: relative;
}

.schedule-create-search-field,
.schedule-create-title-field {
  position: relative;
  display: block;
}

.schedule-create-service-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border: 1px solid #d6e1e5;
  border-radius: 7px;
  padding: 5px 7px 5px 12px;
  background: #f7fafb;
}

.schedule-create-service-field > span {
  color: #607481;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.schedule-create-service-field select,
.schedule-create-promise-row select {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid #cbd8de;
  border-radius: 6px;
  padding: 0 9px;
  color: #153b53;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.schedule-create-search-field > svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 18px;
  height: 18px;
  color: #6a7f8b;
  transform: translateY(-50%);
  pointer-events: none;
}

.schedule-create-search-field input,
.schedule-create-title-field input,
.schedule-create-instructions textarea,
.schedule-create-property-select select,
.schedule-create-line-item input,
.schedule-create-arrival-window input {
  width: 100%;
  border: 1px solid #cbd8de;
  border-radius: 7px;
  color: #153b53;
  background: #fff;
  font: inherit;
}

.schedule-create-search-field input,
.schedule-create-title-field input {
  height: 50px;
  padding: 0 13px;
  font-size: 14px;
}

.schedule-create-search-field input {
  padding-left: 40px;
}

.schedule-create-search-field input:focus,
.schedule-create-title-field input:focus,
.schedule-create-instructions textarea:focus,
.schedule-create-property-select select:focus,
.schedule-create-line-item input:focus,
.schedule-create-arrival-window input:focus {
  border-color: #168f86;
  outline: 3px solid rgba(22, 143, 134, .11);
}

.schedule-create-client-results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 310px;
  border: 1px solid #cbd8de;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(15, 50, 69, .16);
  overflow-y: auto;
}

.schedule-create-client-results > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid #e2e9ec;
  padding: 8px 11px;
  color: #153b53;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.schedule-create-client-results > button:last-child {
  border-bottom: 0;
}

.schedule-create-client-results > button:hover,
.schedule-create-client-results > button:focus-visible {
  outline: 0;
  background: #eef9f7;
}

.schedule-create-client-results > button > span:nth-child(2),
.schedule-create-selected-client-main > span:nth-child(2),
.schedule-create-team-list label > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.schedule-create-client-results strong,
.schedule-create-selected-client strong,
.schedule-create-team-list strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-create-client-results small,
.schedule-create-selected-client small,
.schedule-create-team-list small {
  overflow: hidden;
  color: #667b88;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-create-client-results svg {
  width: 16px;
  height: 16px;
  color: #7f9099;
}

.schedule-create-client-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  color: #0d5d58;
  background: #dff4f1;
  font-size: 11px;
  font-weight: 950;
}

.schedule-create-search-status {
  margin: 0;
  padding: 13px;
  color: #667b88;
  font-size: 12px;
  font-weight: 750;
}

.schedule-create-search-status.is-error {
  color: #a6203e;
}

.schedule-create-selected-client {
  margin-top: 8px;
  border: 1px solid #bcd6d2;
  border-radius: 7px;
  background: #f1faf8;
}

.schedule-create-selected-client-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px 9px;
}

.schedule-create-selected-client-main .icon-button {
  width: 32px;
  height: 32px;
}

.schedule-create-selected-address {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  border-top: 1px solid #d2e5e2;
  padding: 8px 10px;
  color: #516b78;
  font-size: 11px;
  font-weight: 750;
}

.schedule-create-selected-address svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.schedule-create-property-select {
  display: grid;
  gap: 5px;
  border-top: 1px solid #d2e5e2;
  padding: 8px 10px 10px;
}

.schedule-create-property-select > span,
.schedule-create-instructions > span,
.schedule-create-line-item label > span,
.schedule-create-arrival-window label > span {
  color: #617581;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.schedule-create-property-select select {
  height: 38px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 750;
}

.schedule-create-additions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.schedule-create-additions > button,
.schedule-create-more-toggle,
.schedule-create-more-options {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid #cbd8de;
  border-radius: 7px;
  padding: 0 10px;
  color: #27485c;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.schedule-create-additions > button:hover,
.schedule-create-additions > button:focus-visible,
.schedule-create-more-toggle:hover,
.schedule-create-more-toggle:focus-visible,
.schedule-create-more-options:hover,
.schedule-create-more-options:focus-visible {
  border-color: #168f86;
  outline: 0;
  background: #eef9f7;
}

.schedule-create-additions svg,
.schedule-create-more-toggle svg {
  width: 15px;
  height: 15px;
}

.schedule-create-additions em {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: #0c6d66;
  font-size: 10px;
  font-style: normal;
}

.schedule-create-instructions {
  display: grid;
  gap: 5px;
}

.schedule-create-instructions textarea {
  min-height: 88px;
  padding: 10px 11px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.4;
}

.schedule-create-line-items,
.schedule-create-assignment,
.schedule-create-more {
  display: grid;
  gap: 8px;
  border: 1px solid #d8e2e6;
  border-radius: 7px;
  padding: 9px;
  background: #f7fafb;
}

.schedule-create-line-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 86px 32px;
  align-items: end;
  gap: 7px;
  border-bottom: 1px solid #dce5e8;
  padding-bottom: 8px;
}

.schedule-create-line-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.schedule-create-line-item label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.schedule-create-line-item input,
.schedule-create-arrival-window input {
  min-width: 0;
  height: 38px;
  padding: 0 8px;
  font-size: 12px;
}

.schedule-create-money-input {
  position: relative;
  display: block;
}

.schedule-create-money-input > i {
  position: absolute;
  top: 50%;
  left: 8px;
  color: #607581;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  transform: translateY(-50%);
}

.schedule-create-money-input input {
  padding-left: 18px;
}

.schedule-create-line-item > .icon-button {
  width: 32px;
  height: 38px;
  color: #b62042;
  background: #fff2f5;
}

.schedule-create-team-list {
  display: grid;
  gap: 2px;
}

.schedule-create-team-list label {
  display: grid;
  grid-template-columns: 20px 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 50px;
  border-radius: 6px;
  padding: 6px 7px;
  cursor: pointer;
}

.schedule-create-team-list label:hover {
  background: #edf6f5;
}

.schedule-create-team-list input {
  width: 17px;
  height: 17px;
  accent-color: #0d756d;
}

.schedule-create-panel-loading {
  color: #667b88;
  font-size: 12px;
  font-weight: 750;
}

.schedule-quick-create-timing {
  grid-template-columns: minmax(126px, 1.15fr) repeat(2, minmax(88px, 1fr));
  gap: 7px;
  padding: 0;
}

.schedule-quick-create-timing input {
  height: 50px;
  font-size: 12px;
}

.schedule-create-customer-promise {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: -3px 0 0;
  border-left: 3px solid #0b8178;
  border-radius: 4px;
  padding: 7px 9px;
  color: #496370;
  background: #f0f9f7;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.schedule-create-customer-promise svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: #0b8178;
}

.schedule-create-customer-promise strong {
  color: #153b53;
}

.schedule-quick-create-card.is-unscheduled .schedule-quick-create-timing {
  opacity: .48;
}

.schedule-create-more-toggle {
  align-self: flex-start;
}

.schedule-create-more-toggle.is-open svg {
  transform: rotate(180deg);
}

.schedule-create-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  border-bottom: 1px solid #dce5e8;
  padding: 3px 2px 9px;
  cursor: pointer;
}

.schedule-create-promise-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 2px;
}

.schedule-create-promise-row > span {
  display: grid;
  gap: 2px;
}

.schedule-create-promise-row strong {
  color: #153b53;
  font-size: 12px;
}

.schedule-create-promise-row small {
  color: #667b88;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.schedule-create-switch-row:last-child {
  border-bottom: 0;
  padding-bottom: 3px;
}

.schedule-create-switch-row > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.schedule-create-switch-row strong {
  color: #153b53;
  font-size: 12px;
}

.schedule-create-switch-row small {
  color: #667b88;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.schedule-create-switch-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: #0d756d;
}

.schedule-create-arrival-window {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.schedule-create-arrival-window label {
  display: grid;
  gap: 4px;
}

.schedule-create-error {
  margin: 0;
  border-left: 3px solid #cc2449;
  border-radius: 4px;
  padding: 9px 10px;
  color: #8f1934;
  background: #fff0f3;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.schedule-create-footer {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(154px, 1fr);
  gap: 9px;
  border-top: 1px solid #dbe4e8;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  background: #fff;
}

.schedule-create-more-options,
.schedule-create-save,
.schedule-create-save-menu-toggle {
  min-height: 42px;
}

.schedule-create-save-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
}

.schedule-create-save,
.schedule-create-save-menu-toggle {
  border: 0;
  color: #fff;
  background: #378f22;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.schedule-create-save {
  border-radius: 7px 0 0 7px;
}

.schedule-create-save-menu-toggle {
  border-left: 1px solid rgba(255, 255, 255, .45);
  border-radius: 0 7px 7px 0;
}

.schedule-create-save:hover,
.schedule-create-save:focus-visible,
.schedule-create-save-menu-toggle:hover,
.schedule-create-save-menu-toggle:focus-visible {
  outline: 0;
  background: #2e7b1c;
}

.schedule-create-save:disabled,
.schedule-create-save-menu-toggle:disabled {
  opacity: .65;
  cursor: wait;
}

.schedule-create-save-menu-toggle svg {
  width: 17px;
  height: 17px;
}

.schedule-create-save-menu {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: calc(100% + 6px);
  width: 210px;
  border: 1px solid #cbd8de;
  border-radius: 7px;
  padding: 5px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(10, 42, 60, .18);
}

.schedule-create-save-menu button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 5px;
  padding: 0 10px;
  color: #153b53;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.schedule-create-save-menu button:hover,
.schedule-create-save-menu button:focus-visible {
  outline: 0;
  background: #eef8f6;
}

@media (max-width: 560px) {
  .schedule-quick-create-sheet {
    align-items: stretch;
    padding: 0;
  }

  .schedule-quick-create-card {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-left: 0;
    overflow: visible;
  }

  .schedule-create-kind-tabs {
    margin-top: 8px;
  }

  .schedule-create-scroll {
    padding: 10px 12px 18px;
  }

  .schedule-quick-create-timing {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .schedule-quick-create-timing label:first-child {
    grid-column: auto;
  }

  .schedule-create-line-item {
    grid-template-columns: minmax(0, 1fr) 58px 32px;
  }

  .schedule-create-line-item label:nth-child(3) {
    grid-column: 1 / 3;
  }

  .schedule-create-line-item > .icon-button {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Final sales workspace overrides live after legacy CRM card rules. */
.quote-followup-ledger .quote-followup-list {
  display: block;
  gap: 0;
}

.quote-followup-ledger .quote-followup-card {
  grid-template-columns: 92px minmax(190px, 1.25fr) minmax(150px, 0.8fr) minmax(145px, 0.75fr) minmax(190px, auto);
  gap: 10px;
  border: 0;
  border-left: 4px solid var(--open);
  border-radius: 0;
  padding: 10px 12px 10px 8px;
  box-shadow: none;
}

.quote-followup-ledger .quote-followup-card + .quote-followup-card {
  border-top: 1px solid var(--line);
}

.quote-followup-ledger .quote-followup-actions {
  flex-wrap: nowrap;
  gap: 4px;
}

@media (max-width: 1080px) {
  .quote-followup-ledger .quote-followup-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 12px;
  }
}

@media (max-width: 720px) {
  .quote-followup-ledger .quote-followup-card {
    grid-template-columns: 1fr;
  }
}

/* Keep the top-right create menu entirely inside phone and tablet viewports. */
.create-menu-item {
  grid-template-columns: 38px minmax(0, 1fr) auto 10px;
}

@media (max-width: 760px) {
  .topbar {
    z-index: 12;
  }

  body.is-login .topbar {
    display: block;
    min-height: 58px;
  }

  body.is-login .topbar > div:not(.topbar-actions) {
    width: 100%;
  }

  body.is-login .topbar-actions {
    display: none !important;
  }

  .create-menu-wrap {
    position: relative;
  }

  .create-menu {
    right: 0;
    left: auto;
    width: min(340px, calc(100vw - max(16px, var(--safe-left)) - max(16px, var(--safe-right))));
    max-width: calc(100vw - max(16px, var(--safe-left)) - max(16px, var(--safe-right)));
    max-height: calc(100dvh - max(80px, calc(var(--safe-top) + 70px)) - max(8px, var(--safe-bottom)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .create-menu-heading {
    position: sticky;
    top: -8px;
    z-index: 1;
    background: #fff;
  }

  .create-menu-item {
    grid-template-columns: 34px minmax(0, 1fr) auto 10px;
    min-width: 0;
  }

  .create-menu-item em {
    white-space: nowrap;
  }
}

@media (max-width: 940px) and (max-height: 500px) {
  .topbar {
    z-index: 12;
  }

  .create-menu {
    max-height: calc(100dvh - max(72px, calc(var(--safe-top) + 64px)) - max(8px, var(--safe-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Owner-reviewed Jobber quote migration. */
.jobber-previous-quote-dialog {
  display: grid;
  gap: 14px;
  width: min(760px, 100%);
  max-height: min(780px, calc(100dvh - 32px));
  overflow: hidden;
  border-radius: 8px;
}

.jobber-previous-quote-dialog .app-issue-head {
  margin: 0;
}

.jobber-previous-quote-dialog .eyebrow {
  margin: 0 0 3px;
  color: var(--teal-dark, #087b76);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jobber-previous-quote-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.jobber-previous-quote-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 12px;
  background: #f7fafb;
}

.jobber-previous-quote-summary span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.jobber-previous-quote-summary strong {
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
}

.jobber-previous-quote-guard,
.jobber-previous-quote-warning,
.jobber-previous-quote-status {
  margin: 0;
  color: var(--slate);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.jobber-previous-quote-guard {
  border-left: 4px solid var(--teal);
  padding: 9px 11px;
  background: #effaf8;
}

.jobber-previous-quote-warning {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8f2f3f;
}

.jobber-previous-quote-warning svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.jobber-previous-quote-results {
  min-height: 100px;
  max-height: 430px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0;
  background: #fff;
  list-style: none;
  overscroll-behavior: contain;
}

.jobber-previous-quote-results li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  padding: 8px 11px;
}

.jobber-previous-quote-results li:last-child {
  border-bottom: 0;
}

.jobber-previous-quote-results li > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #087a58;
  background: #e7f8f2;
}

.jobber-previous-quote-results li.is-danger > span {
  color: #b4233c;
  background: #fff0f2;
}

.jobber-previous-quote-results li.is-muted > span {
  color: var(--muted);
  background: #eef2f4;
}

.jobber-previous-quote-results svg {
  width: 16px;
  height: 16px;
}

.jobber-previous-quote-results li > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.jobber-previous-quote-results strong,
.jobber-previous-quote-results em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jobber-previous-quote-results strong {
  color: var(--navy);
  font-size: 13px;
}

.jobber-previous-quote-results em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.jobber-previous-quote-dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.jobber-previous-quote-dialog.is-loading {
  min-height: 210px;
  place-items: center;
}

.jobber-previous-quote-loading {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--navy);
  text-align: center;
}

.jobber-previous-quote-loading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.jobber-previous-quote-loading .loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(7, 149, 143, .18);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: knhq-spin .8s linear infinite;
}

@media (max-width: 620px) {
  .jobber-previous-quote-dialog {
    width: 100%;
    max-height: calc(100dvh - max(16px, var(--safe-top)) - max(16px, var(--safe-bottom)));
    padding: 14px;
  }

  .jobber-previous-quote-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jobber-previous-quote-summary > div {
    padding: 9px 8px;
  }

  .jobber-previous-quote-summary strong {
    font-size: 20px;
  }

  .jobber-previous-quote-results {
    max-height: none;
  }

  .jobber-previous-quote-dialog > footer .button {
    flex: 1 1 0;
  }

  .manager-home-head,
  .manager-dispatch-head {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .manager-home-head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .manager-home-head-actions .button {
    min-width: 0;
    width: 100%;
  }

  .manager-dispatch-grid {
    grid-template-columns: 1fr;
  }
}

/* Christmas Lights material handoff */
.christmas-material-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  color: var(--deep);
  background: #f8fbfa;
}

.christmas-material-summary,
.christmas-material-actions,
.christmas-material-summary > span,
.christmas-material-actions > span {
  display: flex;
  align-items: center;
}

.christmas-material-summary,
.christmas-material-actions {
  justify-content: space-between;
  gap: 8px;
}

.christmas-material-summary > span {
  gap: 7px;
  min-width: 0;
}

.christmas-material-summary svg {
  width: 18px;
  height: 18px;
  color: var(--lights-evergreen);
}

.christmas-material-summary strong {
  overflow: hidden;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.christmas-material-summary em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .68rem;
  font-style: normal;
  font-weight: 850;
}

.christmas-material-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 8px;
}

.christmas-material-settings label,
.christmas-material-item > label,
.christmas-material-notes,
.job-material-change-fields .field,
.job-material-sales-review .field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.christmas-material-settings label > span:first-child,
.christmas-material-notes > span,
.job-material-change-fields .field > span,
.job-material-sales-review .field > span {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-material-settings select,
.christmas-material-settings input,
.christmas-material-item input,
.christmas-material-item select,
.christmas-material-notes textarea,
.job-material-row input,
.job-material-change input,
.job-material-change select,
.job-material-change textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #cbd9da;
  border-radius: 6px;
  color: var(--deep);
  background: #fff;
  font: inherit;
}

.christmas-material-settings select,
.christmas-material-settings input,
.christmas-material-item input,
.christmas-material-item select,
.job-material-row input,
.job-material-change input,
.job-material-change select {
  min-height: 34px;
  padding: 6px 7px;
}

.christmas-material-percent {
  position: relative;
}

.christmas-material-percent b {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: .7rem;
}

.christmas-material-percent input {
  padding-right: 24px;
}

.christmas-material-table {
  display: grid;
  overflow: hidden;
  border: 1px solid #d4dfdf;
  border-radius: 7px;
  background: #fff;
}

.christmas-material-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 32px;
  gap: 6px;
  align-items: end;
}

.christmas-material-item {
  padding: 7px;
  border-top: 1px solid #e3ebeb;
}

.christmas-material-item:first-of-type {
  border-top: 0;
}

.christmas-material-item-name {
  display: grid;
  grid-column: 1 / 3;
  grid-row: 1;
  gap: 4px;
  min-width: 0;
}

.christmas-material-item-name input:first-child {
  font-weight: 850;
}

.christmas-material-item-name input:last-of-type {
  min-height: 28px;
  color: var(--muted);
  font-size: .68rem;
}

.christmas-material-item > label > span:first-child {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-material-item > .christmas-material-quantity {
  grid-column: 1;
  grid-row: 2;
}

.christmas-material-quantity > span:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 3px;
}

.christmas-material-item > .christmas-material-extra {
  grid-column: 2;
  grid-row: 2;
}

.christmas-material-item .icon-button {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  color: #b22545;
}

.christmas-material-empty {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 12px;
  color: var(--muted);
  text-align: center;
  font-size: .75rem;
  font-weight: 750;
}

.christmas-material-empty svg {
  width: 19px;
  height: 19px;
}

.christmas-material-notes textarea {
  min-height: 64px;
  resize: vertical;
  padding: 8px;
}

.christmas-material-actions {
  flex-wrap: wrap;
}

.christmas-material-actions > span {
  display: grid;
  margin-right: auto;
}

.christmas-material-actions small,
.christmas-material-actions strong {
  line-height: 1.1;
}

.christmas-material-actions small {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.christmas-material-actions strong {
  font-size: 1rem;
}

.christmas-material-help {
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.4;
}

.christmas-material-job-head {
  border-top: 4px solid #13836e;
}

.job-material-plan > .section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.job-material-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}

.job-material-summary > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px;
  border-left: 1px solid var(--border);
}

.job-material-summary > span:first-child {
  border-left: 0;
}

.job-material-summary small {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.job-material-summary strong {
  color: var(--deep);
  font-size: 1.1rem;
}

.job-material-summary .is-warn {
  background: #fff5dc;
}

.job-material-summary .is-warn strong {
  color: #8c5a00;
}

.job-material-summary .is-good strong {
  color: #087461;
}

.job-material-table {
  display: grid;
  min-width: 640px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}

.job-material-plan .section-body > .job-material-table {
  overflow: hidden;
}

.job-material-table-head,
.job-material-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) repeat(5, minmax(76px, .48fr));
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
}

.job-material-table-head {
  color: var(--muted);
  background: #edf5f3;
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.job-material-row {
  border-top: 1px solid var(--border);
}

.job-material-row > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.job-material-row > span:first-child strong,
.job-material-row > span:first-child small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-material-row > span:first-child strong {
  font-size: .82rem;
}

.job-material-row > span:first-child small {
  color: var(--muted);
  font-size: .68rem;
}

.job-material-metric {
  display: grid;
  min-width: 0;
}

.job-material-metric > small {
  display: none;
}

.job-material-metric > b {
  font-size: .8rem;
  text-align: center;
}

.job-material-row input {
  text-align: center;
}

.job-material-plan .section-body {
  overflow-x: auto;
}

.job-material-phase-actions {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.job-material-phase-actions .actions,
.job-material-sales-review .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.job-material-change-request {
  min-width: 0;
  border: 1px solid #d4dfdf;
  border-left: 4px solid #1477a8;
  border-radius: 7px;
  background: #f8fbfd;
}

.job-material-change-request > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
}

.job-material-change-request > summary > span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.job-material-change-request > summary svg {
  width: 18px;
  height: 18px;
  color: #1477a8;
}

.job-material-change-request > summary em {
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}

.job-material-change-request[open] {
  padding-bottom: 12px;
}

.job-material-change-request[open] > :not(summary) {
  margin-inline: 12px;
}

.job-material-change-request > p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: .72rem;
}

.job-material-change-fields,
.job-material-sales-review {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(90px, .5fr) minmax(100px, .6fr);
  gap: 9px;
  margin-bottom: 10px;
}

.job-material-change-fields .is-wide,
.job-material-sales-review .is-wide,
.job-material-sales-review .actions {
  grid-column: 1 / -1;
}

.job-material-change textarea {
  min-height: 72px;
  padding: 8px;
  resize: vertical;
}

.job-material-change-list {
  display: grid;
  gap: 9px;
}

.job-material-change-list > h3 {
  margin: 0;
  font-size: .92rem;
}

.job-material-change {
  display: grid;
  gap: 9px;
  border: 1px solid var(--border);
  border-left: 4px solid #ca8a04;
  border-radius: 7px;
  padding: 11px;
  background: #fff;
}

.job-material-change.is-authorized {
  border-left-color: #078268;
}

.job-material-change.is-declined {
  border-left-color: #b22545;
}

.job-material-change > header,
.job-material-change-line {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.job-material-change > header > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.job-material-change > header small {
  color: var(--muted);
}

.job-material-change > header > b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 8px;
  color: #7a5200;
  background: #fff2c7;
  font-size: .67rem;
}

.job-material-change-line {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: .78rem;
}

.job-material-change-line label {
  display: grid;
  grid-template-columns: auto 88px;
  gap: 3px;
  align-items: center;
  font-weight: 850;
}

.job-material-sales-review {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.job-material-sales-review .toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: end;
  min-height: 36px;
}

.job-material-sales-review .toggle-row input {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
}

.job-material-sales-review .toggle-row span {
  font-size: .75rem;
  font-weight: 800;
}

@media (max-width: 720px) {
  .christmas-material-panel {
    padding: 8px;
  }

  .christmas-material-settings {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  .christmas-material-item {
    grid-template-columns: minmax(0, 1fr) 70px 32px;
  }

  .christmas-material-item-name {
    grid-column: 1 / 3;
  }

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

  .job-material-summary > span:nth-child(3) {
    border-left: 0;
  }

  .job-material-summary > span:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .job-material-plan > .section-body {
    overflow-x: hidden;
  }

  .job-material-table {
    min-width: 0;
    gap: 8px;
    border: 0;
    background: transparent;
  }

  .job-material-table-head {
    display: none;
  }

  .job-material-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 10px;
    background: #fff;
  }

  .job-material-row > span:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--border);
    padding-bottom: 7px;
  }

  .job-material-metric {
    gap: 4px;
  }

  .job-material-metric > small {
    display: block;
    color: var(--muted);
    font-size: .6rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .job-material-metric > b {
    min-height: 34px;
    border: 1px solid #d8e3e2;
    border-radius: 6px;
    padding: 8px;
    background: #f5f8f8;
    text-align: left;
  }

  .job-material-change-fields,
  .job-material-sales-review {
    grid-template-columns: 1fr;
  }

  .job-material-change-fields .is-wide,
  .job-material-sales-review .is-wide,
  .job-material-sales-review .actions {
    grid-column: auto;
  }

  .job-material-phase-actions .actions,
  .job-material-sales-review .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-material-phase-actions .button,
  .job-material-sales-review .button {
    width: 100%;
    min-width: 0;
  }

  .job-material-sales-review [data-action="job-material-change-authorize"] {
    grid-column: 1 / -1;
  }
}