:root {
  --navy: #173b5a;
  --deep: #08283d;
  --blue: #12a8d8;
  --teal: #11c7bd;
  --ink: #111827;
  --muted: #5b6675;
  --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);
}

* {
  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;
}

.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 {
  flex: 1 1 360px;
  max-width: 520px;
  min-width: 240px;
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr) auto;
  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[data-search-lanes="1"] {
  grid-template-columns: 20px minmax(0, 1fr) auto;
}

.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 select {
  min-height: 30px;
  max-width: 92px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  padding: 4px 24px 4px 8px;
  color: #06343d;
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.global-search[data-search-lanes="1"] select {
  display: none;
}

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

.global-search button {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  padding: 5px 9px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.92);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.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;
}

#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-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
}

.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;
}

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

.time-payroll-entry.is-voided {
  border-style: dashed;
  background: #f7f9fb;
}

.time-payroll-entry-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.time-payroll-entry-main strong {
  display: block;
  color: var(--navy);
}

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

.time-payroll-duration {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  color: #06343d;
  background: rgba(17, 199, 189, 0.16);
  font-size: 13px;
  font-weight: 900;
}

.time-payroll-badges,
.time-payroll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.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;
}

.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);
}

.field-home-leaflet-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-leaflet-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-leaflet-pin span::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}

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

.field-home-leaflet-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-layout,
  .inventory-hero,
  .inventory-next-move,
  .inventory-action-panel,
  .inventory-add-form,
  .inventory-card {
    min-width: 0;
  }

  .inventory-layout {
    display: grid;
    gap: 14px;
  }

  .inventory-hero,
  .inventory-next-move,
  .inventory-action-panel,
  .inventory-add-form,
  .inventory-readonly-note,
  .inventory-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
  }

  .inventory-hero {
    display: grid;
    grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    border-color: rgba(17, 199, 189, 0.22);
    background: #f9fffe;
  }

  .inventory-next-move {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-color: rgba(17, 199, 189, 0.22);
    background: #f8fffe;
  }

  .inventory-next-move.is-needs-work {
    border-color: rgba(245, 158, 11, 0.36);
    background: #fff7e8;
  }

  .inventory-next-move.is-ready {
    border-color: rgba(12, 147, 71, 0.22);
    background: #f6fff8;
  }

  .inventory-next-move span,
  .inventory-next-move em {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .inventory-next-move strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.2;
  }

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

  .inventory-next-move-action {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: flex-end;
    min-width: 170px;
  }

  .inventory-hero.needs-work,
  .inventory-action-panel {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fffaf0;
  }

  .inventory-hero h3,
  .inventory-action-panel h3 {
    margin: 3px 0 0;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.15;
  }

  .inventory-hero p,
  .inventory-action-panel p,
  .inventory-card-head em,
  .inventory-card-foot span,
  .inventory-readonly-note span {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
  }

  .inventory-stat-grid,
  .inventory-grid,
  .inventory-alert-list,
  .inventory-input-grid,
  .inventory-meta-grid {
    display: grid;
    gap: 10px;
  }

  .inventory-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .inventory-stat-grid article {
    border: 1px solid rgba(9, 69, 103, 0.1);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.78);
  }

  .inventory-stat-grid article.ready {
    border-color: rgba(12, 147, 71, 0.18);
    background: #f7fff9;
  }

  .inventory-stat-grid article.build {
    border-color: rgba(17, 199, 189, 0.22);
    background: #f4fffd;
  }

  .inventory-stat-grid article.needs-work {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fff8eb;
  }

  .inventory-stat-grid span,
  .inventory-card-head span,
  .inventory-add-form .eyebrow,
  .inventory-card label span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .inventory-stat-grid strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 20px;
    line-height: 1;
  }

  .inventory-action-panel {
    display: grid;
    grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

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

  .inventory-alert {
    display: grid;
    gap: 4px;
    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);
  }

  .inventory-alert.needs-work {
    border-color: rgba(245, 158, 11, 0.34);
    background: #fff8eb;
  }

  .inventory-alert strong,
  .inventory-add-form strong,
  .inventory-card-head strong {
    color: var(--navy);
    font-size: 14px;
    line-height: 1.2;
  }

  .inventory-alert span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 760;
  }

  .inventory-add-form {
    display: grid;
    grid-template-columns: minmax(150px, 0.7fr) repeat(4, minmax(92px, 1fr)) 90px;
    gap: 9px;
    align-items: end;
  }

  .inventory-add-form > div {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .inventory-add-form input,
  .inventory-card input,
  .inventory-card textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--ink);
    font: inherit;
    background: #fff;
  }

  .inventory-card input:disabled,
  .inventory-card textarea:disabled {
    color: var(--muted);
    background: #f8fafc;
  }

  .inventory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .inventory-card {
    display: grid;
    gap: 11px;
    border-top-width: 4px;
    border-top-color: var(--teal);
  }

  .inventory-card.ready {
    border-top-color: var(--green);
  }

  .inventory-card.needs-work {
    border-color: rgba(245, 158, 11, 0.34);
    border-top-color: #f59e0b;
    background: #fffaf0;
  }

  .inventory-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 10px;
    align-items: start;
  }

  .inventory-card-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .inventory-card-head svg {
    width: 20px;
    height: 20px;
    color: var(--teal);
  }

  .inventory-card.ready .inventory-card-head svg {
    color: var(--green);
  }

  .inventory-card.needs-work .inventory-card-head svg {
    color: #f59e0b;
  }

  .inventory-input-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inventory-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inventory-card label,
  .inventory-notes-field {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .inventory-card-foot {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }

  .inventory-card-foot .button {
    flex: 0 0 auto;
  }

  .inventory-readonly-note {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }

  .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;
}

.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-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-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-provider-grid,
  .email-system-setting-row,
  .email-system-toggle-grid,
  .email-system-postmaster-layout,
  .email-system-add-domain-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .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;
  }
}

.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: #fff;
  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: #fff;
  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;
}

.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;
  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-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 .leaflet-interactive {
  cursor: pointer;
}

.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 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(3, 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-customers-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-customers-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-customers-next.is-watch,
.crm-customers-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-customers-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-customers-next span,
.crm-customers-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-customers-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-customers-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-customers-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-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-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;
}

.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;
}

.client-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  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 .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);
  overflow-wrap: anywhere;
}

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

.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-tag-list {
  margin-bottom: 4px;
}

.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;
}

.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-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%;
}

.invoice-collection-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;
}

.invoice-collection-handoff.is-needs-work {
  border-left-color: var(--danger);
  background: rgba(255, 241, 242, 0.78);
}

.invoice-collection-handoff.is-watch {
  border-left-color: #f59e0b;
  background: rgba(255, 251, 235, 0.84);
}

.invoice-collection-handoff.is-ready {
  border-left-color: var(--success);
  background: rgba(17, 199, 189, 0.07);
}

.invoice-collection-handoff-head {
  display: grid;
  gap: 3px;
}

.invoice-collection-handoff-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoice-collection-handoff-head strong {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.15;
}

.invoice-collection-handoff-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.35;
}

.invoice-collection-handoff-steps {
  display: grid;
  gap: 7px;
}

.invoice-collection-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);
}

.invoice-collection-handoff-step.is-done {
  border-color: rgba(17, 199, 189, 0.24);
  background: rgba(17, 199, 189, 0.08);
}

.invoice-collection-handoff-step svg {
  width: 17px;
  height: 17px;
  color: #f59e0b;
}

.invoice-collection-handoff-step.is-done svg {
  color: var(--success);
}

.invoice-collection-handoff-step span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}

.invoice-collection-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;
}

.invoice-collection-handoff-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.invoice-collection-handoff-action .button {
  flex: 1 1 150px;
}

.quote-public-shell {
  display: grid;
  gap: 14px;
  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: 28px;
  min-height: 1180px;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  padding: 46px 58px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(5, 24, 44, 0.14);
}

.quote-public-header {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.quote-public-header img {
  width: 100%;
  max-height: 118px;
  object-fit: contain;
}

.quote-public-header h2 {
  margin: 0 0 3px;
  color: #000;
  font-size: 36px;
  line-height: 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;
}

.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: #4a9dca;
  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: #4a9dca;
}

.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;
  border-bottom: 3px solid #aaa;
}

.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: #4a9dca;
  font-size: 19px;
  font-weight: 800;
}

.quote-product-row {
  align-items: start;
  min-height: 72px;
  border-bottom: 1px solid #aaa;
  color: #000;
  font-size: 18px;
}

.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%, 360px);
  margin-top: -10px;
}

.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: 1px solid #aaa;
  border-bottom: 0;
  padding: 0 10px;
  color: #000;
  font-size: 18px;
}

.quote-total-box > div:last-child strong {
  border-bottom: 1px solid #aaa;
  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 {
  display: grid;
  gap: 18px;
  color: #000;
  font-size: 18px;
}

.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);
}

.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-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 44px;
  gap: 8px;
  align-items: center;
  min-width: 910px;
}

.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-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 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-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-form {
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(120px, 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: 46px;
  height: 46px;
  border-width: 4px;
  box-shadow: 0 0 0 5px rgba(17, 199, 189, 0.28), 0 14px 28px rgba(5, 24, 44, 0.38);
}

.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;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  max-width: 360px;
  border-radius: 8px;
  padding: 14px 16px;
  color: #fff;
  background: var(--deep);
  box-shadow: var(--shadow);
  font-weight: 800;
}

.app-update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100vw - 32px));
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(20, 58, 86, 0.14);
  border-radius: 10px;
  color: #fff;
  background: var(--deep);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

.app-update-banner span {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.app-update-banner button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: var(--deep);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

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

  .app-update-banner {
    bottom: calc(68px + var(--safe-bottom));
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 6;
    background: rgba(5, 24, 44, 0.42);
    backdrop-filter: blur(2px);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 7;
    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: calc(-1 * max(14px, calc(var(--safe-top) + 10px))) -10px 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: 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;
  }

  .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-next-action-banner,
  .crm-jobs-next,
  .crm-leads-next,
  .crm-customers-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-handoff,
  .invoice-payment-summary,
  .invoice-payment-link,
  .invoice-payment-form,
  .invoice-payment-row,
  .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-hero,
    .inventory-next-move,
    .inventory-stat-grid,
    .inventory-action-panel,
    .inventory-alert-list,
    .inventory-add-form,
    .inventory-grid,
    .inventory-input-grid,
    .inventory-meta-grid,
    .jobber-sync-next,
    .sync-hero,
    .sync-next-move,
    .sync-health-grid,
    .sync-center-grid,
    .sync-stat-grid,
    .sync-automation-card,
    .sync-rules-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;
  }

  .inventory-next-move-action {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    min-width: 0;
  }

  .inventory-next-move-action .button {
    width: 100%;
  }

  .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%;
  }

  .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-customers-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-customers-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-customers-next-action,
  .crm-documents-next-action {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .crm-jobs-next-action .button,
  .crm-leads-next-action .button,
  .crm-customers-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,
  .invoice-collection-handoff-step,
  .quote-sales-handoff-step {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .lead-intake-handoff-step small,
  .invoice-collection-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-line-editor {
    overflow-x: visible;
  }

  .quote-line-head {
    display: none;
  }

  .quote-line-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.45fr) 42px;
    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-row [data-action="remove-quote-line"] {
    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 select {
    max-width: 84px;
    padding-right: 18px;
  }

  .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 {
    padding: 14px;
  }

  .quote-public-header h2 {
    font-size: 25px;
  }

  .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 {
    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-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 button {
  color: #06343d;
  background: #c9f7f3;
}

.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-customers-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 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: flex;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(20, 58, 86, 0.1);
  border-radius: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.78);
}

.message-recording audio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.message-recording-play {
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  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 {
  flex: 1 1 auto;
  min-width: 150px;
  height: 28px;
  accent-color: #0a8279;
}

.message-recording-range:disabled {
  opacity: 0.45;
}

.message-recording-time {
  flex: 0 0 76px;
  color: #425866;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.message-recording-tools {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
}

.message-recording a {
  min-width: 0;
  color: #0a8279;
  font-size: 11px;
  font-weight: 820;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-recording-speed {
  flex: 0 0 60px;
  min-height: 30px;
  border: 1px solid rgba(20, 58, 86, 0.16);
  border-radius: 7px;
  padding: 3px 6px;
  color: #143a56;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.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) {
  .native-incoming-call {
    inset: auto 10px calc(10px + var(--safe-bottom)) 10px;
    width: auto;
  }

  .native-incoming-call-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .native-incoming-call-status {
    grid-column: 1 / -1;
    padding-left: 50px;
  }

  .native-incoming-call-actions {
    grid-row: auto;
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .native-incoming-call-actions .button {
    flex: 1 1 0;
    min-width: 0;
  }

  .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) {
  .app-update-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
  }

  .app-update-banner button {
    width: 100%;
  }

  .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-standalone-dialer {
  position: fixed;
  inset: auto 20px 20px auto;
  z-index: 1200;
  width: min(360px, calc(100vw - 24px));
  display: none;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.native-message-console.has-native-dialer-open .native-standalone-dialer {
  display: block;
}

body.has-global-native-dialer-open [data-global-native-dialer] .native-standalone-dialer {
  display: block;
}

[data-global-native-dialer] .native-incoming-call {
  position: fixed;
  inset: auto 20px 20px auto;
  z-index: 1210;
}

.native-incoming-call {
  position: absolute;
  inset: auto 18px 18px auto;
  z-index: 18;
  width: min(390px, calc(100% - 36px));
}

.native-incoming-call[hidden] {
  display: none;
}

.native-incoming-call-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(12, 44, 62, 0.14);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(11, 33, 47, 0.2);
}

.native-incoming-call-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.native-incoming-call-main > span {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #063c35;
  background: #dff8ef;
}

.native-incoming-call-main svg {
  width: 18px;
  height: 18px;
}

.native-incoming-call-main strong,
.native-incoming-call-main small {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-incoming-call-main strong {
  color: #142b3a;
  font-size: 15px;
  font-weight: 920;
}

.native-incoming-call-main small,
.native-incoming-call-status {
  color: #657686;
  font-size: 11.5px;
  font-weight: 780;
}

.native-incoming-call-status {
  grid-column: 1 / 2;
  padding-left: 50px;
}

.native-incoming-call-actions {
  grid-row: 1 / span 2;
  grid-column: 2 / 3;
  display: flex;
  gap: 6px;
  align-items: center;
}

.native-incoming-call-actions .button {
  min-height: 36px;
  padding-inline: 10px;
}

.native-incoming-call-actions .button.is-active {
  color: #0f5132;
  border-color: rgba(25, 185, 129, 0.42);
  background: #e8f8f0;
}

.native-standalone-dialer-card {
  width: 100%;
  display: grid;
  gap: 12px;
  border: 1px solid #d7e2ea;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  pointer-events: auto;
  box-shadow: 0 24px 60px rgba(11, 33, 47, 0.22);
}

.native-standalone-dialer-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.native-standalone-dialer-card header > div {
  min-width: 0;
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

.native-standalone-dialer-card header span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #0a6d56;
  background: #e6f8f1;
}

.native-standalone-dialer-card header strong {
  color: #172b3a;
  font-size: 17px;
  font-weight: 920;
}

.native-standalone-dialer-card header .button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
}

.native-standalone-dialer-card header .button span {
  display: none;
}

.native-dialer-number {
  display: grid;
  gap: 5px;
  margin: 0;
}

.native-dialer-number span {
  color: #647585;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.native-dialer-number input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d8e2e9;
  border-radius: 10px;
  padding: 0 12px;
  color: #102633;
  background: #fbfdff;
  font-size: 20px;
  font-weight: 820;
  letter-spacing: 0;
}

.native-dialer-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: #687888;
  font-size: 11px;
  font-weight: 760;
}

.native-dialer-meta span,
.native-dialer-meta em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-dialer-meta em {
  font-style: normal;
}

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

.native-dialer-key {
  min-height: 48px;
  border: 1px solid #dbe4ea;
  border-radius: 10px;
  color: #172b3a;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.native-dialer-key strong {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0;
}

.native-dialer-key svg {
  width: 18px;
  height: 18px;
}

.native-dialer-key:hover:not(:disabled) {
  border-color: rgba(25, 185, 129, 0.44);
  background: #eefaf7;
}

.native-dialer-key:disabled {
  color: #9aa7b2;
  cursor: not-allowed;
  background: #f5f7f9;
}

.native-dialer-key.is-plus {
  grid-column: 2;
}

.native-dialer-key.is-tool {
  color: #536575;
}

.native-dialer-call {
  min-height: 46px;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
}

.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-dialer-live-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.native-dialer-live-controls[hidden] {
  display: none;
}

.native-dialer-live-controls .button {
  justify-content: center;
  min-height: 38px;
}

.native-call-dialer .button.is-active,
.native-dialer-live-controls .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-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.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-message-thread-panel {
  display: flex;
  flex-direction: column;
  background: #f7f9fb;
}

.native-thread-head {
  min-height: 66px;
  border-bottom: 1px solid #dbe4ea;
  padding: 10px 14px;
  background: #fff;
}

.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-bubble-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding: 18px 22px;
}

.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,
.native-test-bubble .message-recording-tools {
  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-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.native-test-bubble .message-recording {
  display: flex;
  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-color: rgba(217, 119, 6, 0.28);
  background: #fffdf2;
}

.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 {
  grid-template-columns: minmax(0, 1fr);
}

.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-stack {
  display: grid;
  gap: 5px;
  justify-items: start;
}

.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 span {
  display: none;
}

.native-compose-channel-button {
  width: 34px;
  padding: 0;
}

.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-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: rgba(217, 119, 6, 0.34);
  background: #fffdf2;
}

.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-customer-composer button[disabled] {
  opacity: 0.58;
}

.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-message-console {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .native-incoming-call {
    inset: auto 10px calc(10px + var(--safe-bottom)) 10px;
    width: auto;
  }

  .native-incoming-call-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .native-incoming-call-status {
    grid-column: 1 / -1;
    padding-left: 50px;
  }

  .native-incoming-call-actions {
    grid-row: auto;
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .native-incoming-call-actions .button {
    flex: 1 1 0;
    min-width: 0;
  }

  .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-thread-list {
    max-height: min(250px, 34dvh);
  }

  .native-thread-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  .native-thread-badges {
    flex-wrap: wrap;
  }

  .native-message-bubble-list {
    min-height: 45dvh;
    padding: 12px;
  }

  .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;
  }

  .message-recording-range {
    min-width: 112px;
  }

  .message-recording-time {
    flex-basis: 66px;
    font-size: 10px;
  }

  .message-recording-tools {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
  }

  .native-message-composer {
    position: sticky;
    bottom: 0;
    grid-template-columns: 82px minmax(0, 1fr) 44px;
    padding: 8px 10px calc(8px + var(--safe-bottom));
  }

  .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-standalone-dialer {
    position: fixed;
    inset: auto 10px calc(10px + var(--safe-bottom)) 10px;
    width: auto;
    padding: 0;
  }

  .native-standalone-dialer-card {
    border-radius: 14px 14px 10px 10px;
    padding: 12px;
  }

  .native-dialer-number input {
    min-height: 44px;
    font-size: 18px;
  }

  .native-dialer-key {
    min-height: 46px;
  }

  .native-compose-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .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-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) {
    display: none;
  }

  .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;
}

.toast {
  border-radius: var(--radius);
}

.toast.is-error {
  border-color: rgba(185, 28, 28, 0.35);
  color: #7f1d1d;
  background: #fff1f2;
}

.toast.is-success {
  border-color: rgba(17, 199, 189, 0.34);
  color: #075e59;
  background: #ecfffb;
}

.toast.is-warning {
  border-color: rgba(240, 180, 41, 0.42);
  color: #78350f;
  background: #fff7ed;
}

@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;
  }

  .toast {
    right: max(10px, var(--safe-right));
    bottom: calc(78px + var(--safe-bottom));
    left: max(10px, var(--safe-left));
    max-width: none;
  }
}

@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-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: 42px;
  height: 42px;
  border-radius: 8px;
}

.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-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 {
  align-items: end;
  margin-bottom: 14px;
  border: 1px solid rgba(20, 58, 86, 0.12);
  background: #f7fcfd;
}

.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-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-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;
}

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(230px, 1fr));
  gap: 12px;
  align-items: start;
  min-width: 1060px;
}

.pipeline-board-attention {
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  min-width: 720px;
}

.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-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-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: 12px;
  display: grid;
  gap: 8px;
  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-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-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-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(760px, 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: auto 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-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(2, minmax(0, 1fr));
  gap: 10px;
}

.pipeline-opportunity-detail strong {
  overflow-wrap: anywhere;
}

.pipeline-opportunity-checklist,
.pipeline-opportunity-notes {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.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;
}

/* 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 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .pipeline-board-wrap {
    overflow: visible;
  }

  .pipeline-board,
  .pipeline-board-attention {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

@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 {
    grid-template-columns: 1fr;
  }

  .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-card-actions .button.compact,
  .pipeline-card-actions .button {
    flex: 1 1 46%;
  }

  .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: 44px 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-client-grid,
  .pipeline-client-stats {
    grid-template-columns: 1fr;
  }

  .pipeline-client-actions .button {
    flex: 1 1 100%;
  }
}

@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;
  }
}

/* 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) {
  .quote-line-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.45fr) 42px;
    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-row [data-action="remove-quote-line"] {
    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) 42px;
    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;
  }
	}