/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("/assets/ibm-plex-sans-latin-ext-807f372c.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("/assets/ibm-plex-sans-latin-bf0c3289.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --app-topbar-height: 4.5rem;
  --canvas: #f5f7fa;
  --surface: #fff;
  --text: #182230;
  --muted: #667085;
  --border: #e4e7ec;
  --accent: #175cd3;
  --table-cell-padding-inline: 1rem;
  --table-cell-padding: 0.5625rem var(--table-cell-padding-inline);
  --table-currency-column-width: 7rem;
  --table-currency-cell-padding: 0.25rem;
  --table-count-column-width: 6rem;
  --table-section-spacing: 0.5rem;
  --numeric-font-size: 0.875rem;
  --currency-font-size: 1rem;
  --currency-font-weight: 500;
  --numeric-color: var(--text);
  --numeric-font-variant: tabular-nums;
  color: var(--text);
  background: var(--canvas);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.875rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--canvas);
  font-size: inherit;
  line-height: 1.45;
}

h1,
h2 {
  color: var(--text);
  line-height: 1.3;
}

h1 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 600;
}

h2 {
  font-size: 1.125rem;
  font-weight: 600;
}

button {
  font: inherit;
}

input,
select {
  min-height: 2.5rem;
  padding: 0.5rem 0.625rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font: inherit;
}

.app-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; min-height: var(--app-topbar-height); padding: 0.75rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.app-brand { display: flex; width: 14rem; min-width: 14rem; align-items: center; color: var(--text); font-size: 1.125rem; font-weight: 700; text-decoration: none; }
.app-brand img { display: block; max-width: 12rem; max-height: 2.5rem; object-fit: contain; object-position: left center; }
.global-search { position: relative; z-index: 21; display: flex; flex: 1; min-width: 0; max-width: 54rem; margin-left: 1rem; }
.global-search.with-integrations-sidebar { margin-left: 15rem; }
.global-search-form { display: flex; width: 100%; gap: 0.5rem; }
.global-search-form input[type="search"] { flex: 1; min-width: 0; }
.global-search-results { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; max-height: min(70vh, 34rem); overflow-y: auto; padding: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 12px 28px rgb(16 24 40 / 18%); }
.global-search-results[hidden] { display: none; }
.global-search-suggestion-section + .global-search-suggestion-section { margin-top: 0.5rem; border-top: 1px solid var(--border); }
.global-search-suggestion-section h2 { margin: 0; padding: 0.5rem 0.625rem 0.25rem; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.global-search-suggestion-list { margin: 0; padding: 0; list-style: none; }
.global-search-suggestion-list a { display: grid; gap: 0.125rem; padding: 0.5rem 0.625rem; color: var(--text); border-radius: 0.375rem; text-decoration: none; }
.global-search-suggestion-list a:hover, .global-search-suggestion-list a:focus-visible { background: #eff8ff; outline: none; }
.global-search-suggestion-description, .global-search-empty { color: var(--muted); font-size: 0.8125rem; }
.global-search-empty { margin: 0; padding: 0.875rem; }
.global-search-all { display: block; margin-top: 0.5rem; padding: 0.75rem 0.625rem 0.5rem; border-top: 1px solid var(--border); color: var(--accent); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-sidebar { position: fixed; inset: 4.5rem auto 0 0; z-index: 5; display: flex; width: 16rem; flex-direction: column; padding: 1.5rem 1rem; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); }
.sidebar-section { display: grid; gap: 0.25rem; }
.primary-nav { gap: 0.375rem; }
.primary-nav .sidebar-link { padding-block: 0.625rem; font-size: 0.9375rem; font-weight: 600; }
.sidebar-bottom { margin-top: auto; padding-top: 1rem; }
.sidebar-link { display: block; padding: 0.5rem 0.625rem; color: var(--muted); border-radius: 0.375rem; font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.sidebar-link:hover, .sidebar-link.active { color: var(--accent); background: #eff8ff; }
.integrations-sidebar { position: fixed; inset: 4.5rem auto 0 16rem; z-index: 4; width: 14rem; padding: 1.5rem 1rem; overflow-y: auto; background: var(--canvas); border-right: 1px solid var(--border); }
.integrations-sidebar-title { display: block; margin-bottom: 1.75rem; padding: 0 0.625rem; color: var(--text); font-size: 1rem; font-weight: 600; text-decoration: none; }
.integrations-list { display: grid; gap: 1.5rem; }
.integrations-group h2 { margin: 0 0 0.4rem; padding: 0 0.625rem; color: var(--text); font-size: 0.9375rem; font-weight: 700; }
.integrations-link { display: block; padding: 0.4rem 0.625rem; color: var(--muted); border-radius: 0.375rem; font-size: 0.85rem; font-weight: 500; text-decoration: none; }
.integrations-link:hover, .integrations-link.active { color: var(--accent); background: #eff8ff; font-weight: 600; }
.profile-menu { position: relative; z-index: 22; flex: none; margin-left: auto; }
.profile-menu summary { cursor: pointer; list-style: none; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu-panel { position: absolute; top: 3rem; right: 0; width: 17rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 12px 24px rgb(16 24 40 / 15%); }
.profile-menu-panel strong, .profile-menu-panel span, .profile-menu-panel a { display: block; }
.profile-menu-panel span { margin-top: 0.25rem; color: var(--muted); }
.profile-menu-panel a { margin-top: 0.75rem; color: var(--accent); font-weight: 500; }
.profile-avatar { display: grid !important; width: 2.5rem; height: 2.5rem; flex: none; place-items: center; color: #fff !important; background: var(--accent); border-radius: 50%; font-weight: 600; }
.menu-sign-out { display: block; width: 100%; margin-top: 0.75rem; padding: 0.625rem; color: var(--text); background: transparent; border: 0; border-radius: 0.375rem; font: inherit; font-weight: 500; text-align: left; }
.menu-sign-out:hover { color: var(--accent); background: #eff8ff; }
.container.integrations-content { width: min(calc(100% - 34rem), 90rem); margin: 0 2rem 0 32rem; padding-block: 3rem; }
.profile-page { max-width: 48rem; padding-block: 3rem; }
.page-intro, .profile-email { color: var(--muted); }
.profile-form { display: grid; gap: 0.75rem; max-width: 28rem; }
.brand-settings { max-width: 42rem; }
.brand-settings h2 { margin-top: 0; }
.brand-logo-preview { display: flex; min-height: 5rem; align-items: center; margin: 1rem 0; padding: 1rem; background: var(--canvas); border: 1px solid var(--border); border-radius: 0.375rem; }
.brand-logo-preview img { max-width: 18rem; max-height: 4rem; object-fit: contain; }
.settings-form { display: grid; gap: 0.75rem; max-width: 32rem; margin-top: 1rem; }
.settings-form input[type="file"] { min-height: auto; }
.settings-errors { color: #b42318; background: #fef3f2; border-color: #fecdca; }
.settings-errors p { margin: 0; }
.settings-errors ul { margin-bottom: 0; }

.app-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--canvas);
  border-radius: 0.375rem;
}

.nav-link {
  padding: 0.5rem 0.75rem;
  color: var(--muted);
  border-radius: 0.375rem;
  font-weight: 500;
  text-decoration: none;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent);
  background: var(--surface);
}

.signed-in-as {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.secondary-button {
  padding: 0.625rem 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  cursor: pointer;
}

.secondary-button:hover {
  background: var(--canvas);
}

.lead-form {
  display: grid;
  max-width: 52rem;
  gap: 1.25rem;
}

.lead-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.lead-form .form-grid > div,
.lead-existing-customer > div {
  display: grid;
  gap: 0.375rem;
}

.lead-form input,
.lead-form select {
  width: 100%;
}

.lead-existing-customer {
  align-self: end;
}

.lead-existing-customer summary {
  margin-bottom: 0.5rem;
  color: var(--accent);
  cursor: pointer;
}

.lead-customer-matches {
  padding: 1rem;
  background: #eff8ff;
  border: 1px solid #b2ddff;
  border-radius: 0.5rem;
}

.lead-customer-matches h2,
.lead-customer-matches p {
  margin: 0;
}

.lead-customer-matches ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.text-button {
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 40rem) {
  .lead-form .form-grid {
    grid-template-columns: 1fr;
  }
}

.primary-button,
.danger-button {
  padding: 0.625rem 1rem;
  color: #fff;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

.primary-button {
  background: var(--accent);
}

.danger-button {
  background: #b42318;
}

.notice {
  padding: 0.75rem 1rem;
  color: #067647;
  background: #ecfdf3;
  border: 1px solid #abefc6;
  border-radius: 0.5rem;
}

.container {
  width: min(calc(100% - 20rem), 90rem);
  margin: 0 2rem 0 18rem;
  padding: 2.5rem 0;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.leads-page-heading {
  margin-bottom: 0.25rem;
}

.page-subnav { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.page-subnav-link { padding: 0.625rem 0.125rem; color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; }
.page-subnav-link:hover, .page-subnav-link.active { color: var(--accent); border-bottom-color: var(--accent); }

.page-heading h1 {
  margin: 0;
  font-size: 1.5rem;
}

.page-heading p {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

.month-navigation {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.leads-page-context {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.leads-page-heading .leads-count {
  margin: 1.4rem 0 0 calc(1rem + 1px + 0.25rem);
  color: var(--text);
}

.month-navigation-form {
  margin: 0;
}

.month-navigation-select {
  min-height: 2rem;
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font: inherit;
  font-weight: 600;
}

.month-navigation-month {
  min-width: 8rem;
}

.month-navigation-year {
  min-width: 5.25rem;
}

.month-navigation-arrow {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}

.month-navigation-arrow:hover {
  background: var(--surface);
}

.customer-count {
  flex: none;
  padding: 0.375rem 0.75rem;
  background: #eff8ff;
  border-radius: 999px;
  font-weight: 600;
}

.numeric-typography,
.numeric-value,
.numeric-label,
.numeric,
.numeric-summary,
.numeric-input,
input[type="date"] {
  color: var(--numeric-color);
  font-size: var(--numeric-font-size);
  font-variant-numeric: var(--numeric-font-variant);
}

.numeric-value,
.numeric-label,
.numeric,
.numeric-summary {
  text-align: right;
}

.numeric-value { display: inline-block; }
.numeric-summary { display: inline-block; }
.numeric-input { text-align: right; }
.customer-count.numeric-summary { color: var(--numeric-color); }
.muted.numeric-summary { color: var(--numeric-color); }

.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  color: var(--muted);
}

.pagination > :last-child {
  justify-self: end;
}

.table-frame {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgb(16 24 40 / 5%);
}

.table-detail-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.table-detail-layout:not(.is-open) {
  grid-template-columns: minmax(0, 1fr);
}

.table-detail-results {
  min-width: 0;
}

.table-detail-panel {
  position: fixed;
  inset: var(--app-topbar-height) 0 0 auto;
  z-index: 15;
  width: clamp(26rem, 40vw, 46rem);
  overflow-y: auto;
  padding: 1.5rem 1rem 1.5rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}

.container.has-table-detail {
  --table-detail-panel-width: clamp(26rem, 40vw, 46rem);
  width: auto;
  max-width: none;
  margin-right: calc(var(--table-detail-panel-width) + 2rem);
}

.table-detail-layout.is-open {
  display: block;
}

.table-detail-panel-header {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.table-detail-panel-toolbar,
.table-detail-navigation,
.table-detail-panel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.table-detail-panel-toolbar {
  justify-content: space-between;
}

.table-detail-navigation-link,
.table-detail-close {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.625rem;
  color: var(--muted);
  border-radius: 0.375rem;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
}

.table-detail-navigation-link:hover,
.table-detail-close:hover {
  color: var(--accent);
  background: var(--canvas);
}

.table-detail-navigation-link.is-disabled {
  opacity: 0.45;
}

.table-detail-panel-actions .secondary-button {
  text-decoration: none;
}

.table-detail-panel h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 600;
}

.table-detail-panel-content .detail-list {
  grid-template-columns: 1fr;
  gap: 1rem;
}

.table-detail-panel-content .detail-list dt {
  color: #475467;
  font-size: 0.875rem;
  font-variant-numeric: normal;
  font-weight: 600;
  text-align: left;
}

.table-detail-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.table-detail-section h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.table-detail-section p {
  margin: 0.375rem 0 0;
}

.table-detail-related-list {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.table-detail-related-list li > * {
  display: block;
}

.table-detail-related-list span {
  margin-top: 0.2rem;
  color: var(--muted);
}

.lead-date-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

input[type="date"] {
  font-weight: 400;
  min-width: 0;
  width: 8.75rem;
  padding: 0.375rem 0.5rem;
}

.lead-date-form--table input.lead-date-input {
  width: 6.5rem;
  min-height: 0;
  padding: 0 0 0 0.25rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lead-date-form--table input.lead-date-input::-webkit-calendar-picker-indicator {
  display: none;
}

.lead-date-form--table input.lead-date-input:focus {
  margin-block: -0.125rem;
  padding-block: 0.125rem;
  background: #f2f4f7;
  border-radius: 0.375rem;
  outline: none;
  box-shadow: 0 0 0 1px #d0d5dd;
}

.lead-date-form--table {
  align-items: center;
}

.lead-edit-page {
  max-width: 58rem;
  padding-block: 2rem 3rem;
}

.lead-edit-back {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}

.lead-edit-back:hover {
  color: var(--accent);
}

.lead-edit-header p {
  margin: 0 0 0.25rem;
}

.lead-edit-header h1 {
  margin-bottom: 1.25rem;
}

.lead-edit-card h2 {
  margin-top: 0;
}

.lead-financial-summary .detail-list {
  grid-template-columns: minmax(0, 1fr);
}

.lead-edit-page .form-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 36rem;
}

.table-detail-updated {
  margin: 1.25rem 0;
}

.table-detail-record-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.table-detail-record-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.table-detail-results .customers-table tbody tr.is-selected > td {
  background: #eff8ff;
}

.table-detail-results .customers-table tbody tr.is-selected > td:first-child {
  box-shadow: inset 3px 0 var(--accent);
}

.table-detail-layout.is-expanded {
  display: block;
}

.table-detail-layout.is-expanded .table-detail-results {
  display: none;
}

.table-detail-panel.is-expanded {
  inset: 0;
  z-index: 30;
  width: 100vw;
  height: 100vh;
  padding: clamp(1.25rem, 4vw, 4rem);
  overflow-y: auto;
  border: 0;
  border-radius: 0;
}

.table-detail-panel.is-expanded .table-detail-panel-header,
.table-detail-panel.is-expanded .table-detail-panel-content {
  width: min(100%, 76rem);
  margin-right: auto;
  margin-left: auto;
}

.table-detail-panel.is-expanded .table-detail-panel-content .detail-list {
  grid-template-columns: minmax(0, 1fr);
}

.customers-table {
  width: 100%;
  min-width: 58rem;
  border-collapse: collapse;
  text-align: left;
}

.customers-table th,
.customers-table td {
  padding: var(--table-cell-padding);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.customers-table .numeric {
  text-align: right;
}

/* Leave room for eight-figure amounts within the compact currency columns. */
.customers-table .currency-column,
.leads-table .lead-financial-column {
  width: var(--table-currency-column-width);
  min-width: var(--table-currency-column-width);
  max-width: var(--table-currency-column-width);
  padding-inline: var(--table-currency-cell-padding);
}

.leads-table .lead-financial-column {
  white-space: nowrap;
}

.customers-table .month-column {
  width: auto;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Match month row typography without adding a visible header or row height. */
.month-column-sizer {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-size: 1rem;
  font-weight: 600;
}

.customers-table .roas-column {
  width: 6rem;
  min-width: 6rem;
  max-width: 6rem;
}

.customers-table.month-overview-table {
  width: max-content;
  min-width: 0;
  max-width: none;
}

.monthly-overview-frame {
  width: fit-content;
  max-width: 100%;
}

.month-overview-table .monthly-section-group {
  border-bottom: 0;
  text-align: center;
}

.customers-table .table-section-start {
  border-left: 1px solid var(--border);
}

.customers-table .lead-count-column {
  width: var(--table-count-column-width);
  min-width: var(--table-count-column-width);
  max-width: var(--table-count-column-width);
}

.customers-table .lead-count-column.table-section-start {
  width: calc(var(--table-count-column-width) - var(--table-section-spacing));
  min-width: calc(var(--table-count-column-width) - var(--table-section-spacing));
  max-width: calc(var(--table-count-column-width) - var(--table-section-spacing));
  padding-left: calc(var(--table-cell-padding-inline) - var(--table-section-spacing));
}

.customers-table .currency-column.table-section-end,
.leads-table .lead-financial-column.table-section-end {
  width: calc(var(--table-currency-column-width) + var(--table-section-spacing));
  min-width: calc(var(--table-currency-column-width) + var(--table-section-spacing));
  max-width: calc(var(--table-currency-column-width) + var(--table-section-spacing));
  padding-right: calc(var(--table-currency-cell-padding) + var(--table-section-spacing));
}

.customers-table .currency-column.table-last-column {
  width: calc(var(--table-currency-column-width) + var(--table-section-spacing) + var(--table-cell-padding-inline) - var(--table-currency-cell-padding));
  min-width: calc(var(--table-currency-column-width) + var(--table-section-spacing) + var(--table-cell-padding-inline) - var(--table-currency-cell-padding));
  max-width: calc(var(--table-currency-column-width) + var(--table-section-spacing) + var(--table-cell-padding-inline) - var(--table-currency-cell-padding));
  padding-right: var(--table-cell-padding-inline);
}

.customers-table td.currency-column {
  white-space: nowrap;
}

.customers-table .amount-input-column {
  width: 9.6rem;
  min-width: 9.6rem;
  max-width: 9.6rem;
}

.monthly-amount-form {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem;
}

.monthly-amount-input {
  width: 100%;
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.customers-table thead th {
  color: var(--muted);
  background: var(--canvas);
  font-size: 0.875rem;
  font-weight: 600;
}

.leads-table thead th,
.month-overview-table thead th {
  vertical-align: bottom;
}

.customers-table thead .table-header-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.customers-table thead th.numeric .table-header-stack {
  align-items: flex-end;
}

.leads-table thead .table-header-label,
.month-overview-table thead .table-header-label {
  color: var(--text);
  line-height: 1.25rem;
}

.customers-table thead .table-header-sync-slot {
  display: inline-flex;
  min-height: 1rem;
  align-items: center;
  justify-content: flex-end;
}

.sync-age-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1rem;
  font-size: 0.75rem;
  font-weight: 400;
}

.sync-age-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
}

.sync-age-indicator--fresh .sync-age-dot { background: #12b76a; }
.sync-age-indicator--aging .sync-age-dot { background: #f79009; }
.sync-age-indicator--stale .sync-age-dot { background: #f04438; }
.sync-age-value { color: var(--muted); }

.customers-table th.numeric,
.customers-table td.numeric {
  color: var(--numeric-color);
  font-size: var(--numeric-font-size);
  font-variant-numeric: var(--numeric-font-variant);
  text-align: right;
}

.customers-table tbody th {
  color: var(--text);
  font-weight: 600;
}

.customers-table tbody td {
  color: var(--muted);
}

.customers-table tbody tr:last-child th,
.customers-table tbody tr:last-child td {
  border-bottom: 0;
}

.customers-table tfoot th,
.customers-table tfoot td {
  border-top: 2px solid var(--border);
  color: var(--text);
  font-weight: 700;
}

.lead-source-picker { display: inline-block; }
.lead-source-trigger { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 0; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.lead-source-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0.25rem; }
.lead-source-tag { display: inline-block; max-width: 100%; padding: 0.2rem 0.55rem; border-radius: 0.375rem; color: var(--lead-source-text); background: var(--lead-source-bg); font-weight: 600; white-space: nowrap; }
.lead-source-menu { position: fixed; z-index: 20; width: max-content; max-width: calc(100vw - 1rem); max-height: min(22rem, calc(100vh - 1rem)); overflow-y: auto; padding: 0.3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 12px 24px rgb(16 24 40 / 15%); }
.lead-source-menu[hidden] { display: none; }
.lead-source-menu .lead-source-tag { white-space: normal; overflow-wrap: anywhere; }
.lead-source-menu form { display: grid; gap: 0.1rem; }
.lead-source-option { width: 100%; padding: 0.25rem 0.35rem; background: transparent; border: 0; border-radius: 0.25rem; cursor: pointer; text-align: left; }
.lead-source-option:hover, .lead-source-option:focus-visible { background: #f2f4f7; }
.lead-source-option[aria-pressed="true"] { background: #f9fafb; }
.lead-source-color-purple { --lead-source-bg: #f4ebff; --lead-source-text: #6941c6; }
.lead-source-color-blue { --lead-source-bg: #dbeafe; --lead-source-text: #1d4ed8; }
.lead-source-color-teal { --lead-source-bg: #ccfbf1; --lead-source-text: #0f766e; }
.lead-source-color-orange { --lead-source-bg: #ffedd5; --lead-source-text: #9a3412; }
.lead-source-color-pink { --lead-source-bg: #fce7f3; --lead-source-text: #9d174d; }
.lead-source-color-yellow { --lead-source-bg: #fef9c3; --lead-source-text: #854d0e; }
.lead-source-color-green { --lead-source-bg: #dcfce7; --lead-source-text: #166534; }
.lead-source-color-cyan { --lead-source-bg: #cffafe; --lead-source-text: #155e75; }
.lead-source-color-red { --lead-source-bg: #fee2e2; --lead-source-text: #991b1b; }
.lead-source-color-indigo { --lead-source-bg: #e0e7ff; --lead-source-text: #3730a3; }
.lead-source-color-slate { --lead-source-bg: #e2e8f0; --lead-source-text: #334155; }
.lead-source-color-neutral { --lead-source-bg: #f2f4f7; --lead-source-text: #344054; }

.lead-status-picker { display: inline-block; }
.lead-status-trigger { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 0; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.lead-status-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0.25rem; }
.lead-status-tag { display: inline-block; max-width: 100%; padding: 0.2rem 0.55rem; border-radius: 0.375rem; color: var(--lead-status-text); background: var(--lead-status-bg); font-weight: 600; white-space: nowrap; }
.leads-table .lead-source-tag,
.leads-table .lead-status-tag { padding-block: 0; }
.lead-status-menu { position: fixed; z-index: 20; width: max-content; max-width: calc(100vw - 1rem); max-height: min(22rem, calc(100vh - 1rem)); overflow-y: auto; padding: 0.3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 12px 24px rgb(16 24 40 / 15%); }
.lead-status-menu[hidden] { display: none; }
.lead-status-menu form { display: grid; gap: 0.1rem; }
.lead-status-option { width: 100%; padding: 0.25rem 0.35rem; background: transparent; border: 0; border-radius: 0.25rem; cursor: pointer; text-align: left; }
.lead-status-option:hover, .lead-status-option:focus-visible { background: #f2f4f7; }
.lead-status-option[aria-pressed="true"] { background: #f9fafb; }
.lead-status-color-blue { --lead-status-bg: #dbeafe; --lead-status-text: #1d4ed8; }
.lead-status-color-orange { --lead-status-bg: #ffedd5; --lead-status-text: #9a3412; }
.lead-status-color-purple { --lead-status-bg: #f4ebff; --lead-status-text: #6941c6; }
.lead-status-color-green { --lead-status-bg: #dcfce7; --lead-status-text: #166534; }
.lead-status-color-red { --lead-status-bg: #fee2e2; --lead-status-text: #991b1b; }
.lead-status-error { display: block; margin-top: 0.25rem; color: #b42318; }

.lead-offer-field { margin: 0; display: flex; gap: .6rem; align-items: end; }
.lead-offer-field__amount { display: grid; gap: .125rem; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.lead-offer-field__amount input { width: 8rem; border: 0; border-radius: 0; background: transparent; }
.lead-offer-field__amount input { text-align: left; }
.table-detail-panel-content .lead-offer-field__amount input { padding-inline: 0; }
.lead-offer-field__amount input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table-detail-results .lead-offer-field__amount { gap: .0625rem; }
.table-detail-results .lead-offer-field__amount { flex: 1; min-width: 0; }
.table-detail-results .lead-offer-field__amount input { width: 100%; min-width: 0; min-height: 2rem; padding-block: .25rem; padding-right: 0; text-align: right; }
.table-detail-results .lead-offer-field { width: 100%; align-items: center; justify-content: flex-end; }
.lead-offer-editor h2 { margin-top: 0; font-size: 1.125rem; }
.lead-offer-error { display: block; color: #b42318; font-size: 0.875rem; }

.lead-source-error {
  display: block;
  margin-top: 0.25rem;
  color: #b42318;
}

.customer-link,
.back-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.customer-link:hover,
.back-link:hover {
  text-decoration: underline;
}

.back-link {
  display: inline-flex;
  margin-bottom: 1rem;
}

.detail-card {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgb(16 24 40 / 5%);
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
}

.detail-list div {
  min-width: 0;
}

.detail-list dt {
  margin-bottom: 0.375rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.detail-list dt.numeric-label {
  color: var(--numeric-color);
  font-size: var(--numeric-font-size);
  font-variant-numeric: var(--numeric-font-variant);
  text-align: right;
}

.detail-list dt.lead-amount-label {
  text-align: right;
}

.detail-list dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.detail-list dd.numeric {
  color: var(--numeric-color);
  font-size: var(--numeric-font-size);
  font-variant-numeric: var(--numeric-font-variant);
  text-align: right;
}

.numeric.currency-column:not(th),
.numeric.lead-count-column:not(th),
.numeric.lead-financial-column:not(th),
.lead-financial-summary dd.numeric,
.table-detail-panel-content dd.numeric,
.numeric-input,
.monthly-amount-input {
  font-size: var(--currency-font-size);
  font-weight: var(--currency-font-weight);
}

.table-detail-panel-content .detail-list dt.lead-amount-label,
.table-detail-panel-content .detail-list dt.numeric-label,
.table-detail-panel-content .detail-list dd.numeric,
.lead-financial-summary .detail-list dt.lead-amount-label,
.lead-financial-summary .detail-list dt.numeric-label,
.lead-financial-summary .detail-list dd.numeric {
  text-align: left;
}

.status {
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.status-active {
  color: #067647;
  background: #ecfdf3;
}

.status-inactive {
  color: #b54708;
  background: #fffaeb;
}

.status-deleted {
  color: #b42318;
  background: #fef3f2;
}

.status-offer {
  color: #6941c6;
  background: #f4f3ff;
}

.status-primary {
  color: var(--accent);
  background: #eff8ff;
}

.inline-form,
.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.inline-form label {
  color: #475467;
  font-size: 0.875rem;
  font-weight: 600;
}

.contact-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.contact-list li,
.source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.contact-list li:last-child,
.source-card:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.contact-list p,
.source-card p,
.muted,
.detail-card > p {
  margin: 0.375rem 0 0;
  color: var(--muted);
}

.candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.danger-zone {
  border-color: #fecdca;
}

.empty-state {
  padding: 4rem 1.5rem;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
}

.empty-state h2 {
  margin: 0;
  font-size: 1.125rem;
}

.empty-state p {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

@media (max-width: 64rem) {
  .app-topbar { position: sticky; gap: 0.75rem; padding-inline: 1rem; }
  .app-brand { width: auto; min-width: 5rem; max-width: 8rem; }
  .app-brand img { max-width: 7rem; max-height: 2rem; }
  .global-search, .global-search.with-integrations-sidebar { margin-left: 0; }
  .global-search-form .secondary-button { display: none; }
  .app-sidebar { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar-bottom { margin-top: 1rem; padding-top: 0; }
  .sidebar-section { grid-template-columns: repeat(3, 1fr); }
  .sidebar-link { text-align: center; }
  .integrations-sidebar { position: static; width: auto; padding: 1rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .integrations-sidebar-title { margin-bottom: 0.75rem; }
  .integrations-list { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; }
  .container.integrations-content { width: calc(100% - 2rem); margin: 0 auto; padding: 1.5rem 0; }
  .profile-menu { margin-left: 0; }
  .container.has-table-detail { width: calc(100% - 2rem); margin: 0 auto; padding-top: 1.5rem; }
  .table-detail-panel { width: min(100vw, 34rem); }

  .container {
    width: calc(100% - 2rem);
    margin: 0 auto;
    padding-top: 1.5rem;
  }

  .detail-list {
    grid-template-columns: 1fr;
  }
}