:root {
  color-scheme: light;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #f3f6fb;
  --surface: #ffffff;
  --navy: #111827;
  --blue: #0d6efd;
  --teal: #0ea5a4;
  --green: #2f9e44;
  --amber: #f59e0b;
  --red: #dc3545;
  --sidebar: #172033;
  --sidebar-soft: #202b43;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
  --radius: 0.625rem;
}

/* Meta Ads monthly client report */
.meta-report-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  margin-bottom: 18px;
  color: #fff;
  background: linear-gradient(125deg, #073447 0%, #075e63 58%, #0c9489 100%);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(4, 55, 68, 0.18);
}

.meta-report-hero h2 {
  margin: 10px 0 6px;
  font-size: clamp(24px, 2vw, 34px);
}

.meta-report-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.meta-report-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  color: #aaf5e9;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meta-report-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.meta-report-hero .ghost-button {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

.meta-report-hero .primary-button {
  color: #06424b;
  background: #c9fff2;
  border-color: #c9fff2;
}

.meta-report-toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  align-items: end;
  margin-bottom: 18px;
}

.meta-report-toolbar .meta-report-period-note {
  grid-column: 1 / -1;
}

.meta-client-filter-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.meta-client-filter-control label {
  min-width: 0;
}

.meta-client-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 13px;
  color: #b42318;
  background: #fff5f4;
  border: 1px solid #f1c6c2;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.meta-client-delete-button:hover {
  color: #fff;
  background: #c9382d;
  border-color: #c9382d;
}

.meta-client-delete-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.lead-ad-preview {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  color: #214755;
  background: #f2f9f8;
  border: 1px solid #d3eae6;
  border-radius: 13px;
}

.lead-ad-preview img,
.ad-preview-placeholder {
  width: 170px;
  height: 112px;
  object-fit: cover;
  background: #e5eff1;
  border-radius: 9px;
}

.ad-preview-placeholder { display: grid; place-items: center; color: #87a0a8; font-size: 28px; }
.lead-ad-preview h3 { margin: 8px 0 4px; font-size: 15px; }
.lead-ad-preview p { display: -webkit-box; margin: 0 0 6px; overflow: hidden; color: #58717a; font-size: 12px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.lead-ad-preview small { color: #7a9098; }

.meta-report-period-note {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 42px;
  color: var(--muted);
  font-size: 12px;
}

.meta-sync-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: -8px 0 18px;
  color: #536d77;
  background: #f3f7f8;
  border: 1px solid #dce8eb;
  border-radius: 12px;
  font-size: 12px;
}

.meta-sync-status.is-connected {
  color: #087269;
  background: #eaf9f6;
  border-color: #bde9df;
}

.meta-sync-status.is-error {
  color: #a13a35;
  background: #fff2f1;
  border-color: #f3c5c1;
}

.meta-security-note {
  display: flex;
  gap: 13px;
  padding: 15px;
  color: #245762;
  background: #eef9f7;
  border: 1px solid #cfeae5;
  border-radius: 12px;
}

.meta-security-note i {
  color: #078a81;
  font-size: 22px;
}

.meta-security-note p {
  margin: 4px 0 0;
  color: #648087;
  font-size: 12px;
}

.meta-connection-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.meta-report-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(135px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.meta-report-kpis article {
  position: relative;
  min-height: 126px;
  padding: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce9eb;
  border-radius: 15px;
  box-shadow: 0 10px 24px rgba(28, 72, 84, 0.07);
}

.meta-report-kpis i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  color: #078a81;
  background: #e4f7f4;
  border-radius: 10px;
}

.meta-report-kpis span,
.meta-report-kpis small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.meta-report-kpis span {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.meta-report-kpis strong {
  display: block;
  margin: 5px 0;
  color: #113548;
  font-size: 20px;
}

.meta-funnel-panel {
  margin-bottom: 18px;
}

.meta-funnel {
  display: grid;
  grid-template-columns: repeat(11, auto);
  align-items: center;
  gap: 10px;
  padding: 8px 20px 24px;
}

.meta-funnel > i {
  color: #9fb5bc;
}

.meta-funnel-step {
  min-width: 130px;
  padding: 16px;
  text-align: center;
  background: linear-gradient(180deg, #f4fbfa, #fff);
  border: 1px solid #d9ebe9;
  border-radius: 13px;
}

.meta-funnel-step span,
.meta-funnel-step small,
.meta-funnel-step strong {
  display: block;
}

.meta-funnel-step span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.meta-funnel-step strong {
  margin: 6px 0;
  color: #0d5260;
  font-size: 22px;
}

.meta-funnel-step small {
  color: #849aa2;
  font-size: 9px;
}

.meta-report-table {
  min-width: 1120px;
}

.meta-report-table td:first-child {
  min-width: 220px;
}

.meta-report-table td small {
  color: var(--muted);
}

.meta-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  margin-left: 8px;
  color: #087269;
  background: #e6f8f4;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.meta-source-badge.is-manual {
  color: #657983;
  background: #edf2f4;
}

.meta-report-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1500px) {
  .meta-report-kpis {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }

  .meta-funnel {
    overflow-x: auto;
  }
}

@media (max-width: 850px) {
  .meta-report-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .meta-report-actions {
    justify-content: flex-start;
  }

  .meta-report-toolbar,
  .meta-report-kpis,
  .meta-report-form .form-grid {
    grid-template-columns: 1fr;
  }

  .meta-client-filter-control {
    grid-template-columns: 1fr;
  }

  .meta-client-delete-button {
    width: 100%;
  }

  .lead-ad-preview { grid-template-columns: 1fr; }
  .lead-ad-preview img, .ad-preview-placeholder { width: 100%; height: 180px; }

  .meta-connection-form .form-grid {
    grid-template-columns: 1fr;
  }

  .meta-report-period-note {
    justify-content: flex-start;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at 12% 12%, rgba(42, 116, 255, 0.16), transparent 32%),
    radial-gradient(circle at 88% 88%, rgba(16, 185, 129, 0.11), transparent 28%),
    #eef4f8;
  overflow: hidden;
}

.login-shell {
  position: relative;
  width: min(1180px, 100%);
  min-height: min(760px, calc(100vh - 64px));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(15, 41, 62, 0.16), 0 8px 24px rgba(15, 41, 62, 0.08);
}

.login-showcase {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  overflow: hidden;
  padding: 52px;
  background:
    linear-gradient(145deg, rgba(6, 30, 48, 0.98), rgba(8, 62, 74, 0.96)),
    #071f31;
  color: #fff;
}

.login-showcase::before,
.login-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

.login-showcase::before {
  width: 420px;
  height: 420px;
  right: -210px;
  top: -170px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  box-shadow: 0 0 0 70px rgba(125, 211, 252, 0.035), 0 0 0 140px rgba(125, 211, 252, 0.025);
}

.login-showcase::after {
  width: 280px;
  height: 280px;
  left: -150px;
  bottom: -150px;
  background: rgba(16, 185, 129, 0.12);
  filter: blur(4px);
}

.login-showcase-glow {
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  right: 8%;
  bottom: 13%;
  border-radius: 50%;
  background: rgba(14, 165, 164, 0.12);
  filter: blur(45px);
}

.login-premium-brand,
.login-mobile-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.login-premium-brand > span:last-child,
.login-mobile-brand > span:last-child {
  display: grid;
  gap: 2px;
}

.login-premium-brand strong,
.login-mobile-brand strong {
  font-size: 21px;
  letter-spacing: -0.03em;
}

.login-premium-brand small,
.login-mobile-brand small {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  opacity: 0.65;
}

.login-logo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: linear-gradient(145deg, #1d87ff, #0ea5a4);
  color: #fff;
  box-shadow: 0 12px 30px rgba(13, 110, 253, 0.26);
  font-size: 21px;
}

.login-showcase-copy {
  max-width: 570px;
}

.login-kicker,
.login-secure-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-kicker {
  border: 1px solid rgba(125, 211, 252, 0.22);
  padding: 8px 12px;
  background: rgba(125, 211, 252, 0.08);
  color: #9ee7e5;
}

.login-showcase-copy h1 {
  margin: 22px 0 18px;
  max-width: 560px;
  color: #fff;
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.login-showcase-copy h1 em {
  color: #5eead4;
  font-family: inherit;
  font-style: italic;
  font-weight: 500;
}

.login-showcase-copy p {
  max-width: 530px;
  margin: 0;
  color: #b9cad4;
  font-size: 16px;
  line-height: 1.75;
}

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

.login-feature-grid article {
  min-width: 0;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 17px;
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(12px);
}

.login-feature-grid article > i {
  color: #5eead4;
  font-size: 20px;
}

.login-feature-grid span,
.login-feature-grid strong,
.login-feature-grid small {
  display: block;
}

.login-feature-grid strong {
  margin-bottom: 5px;
  color: #f8fafc;
  font-size: 13px;
}

.login-feature-grid small {
  color: #91a7b4;
  font-size: 11px;
  line-height: 1.5;
}

.login-proof {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-proof-avatars {
  display: flex;
  padding-left: 8px;
}

.login-proof-avatars span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-left: -8px;
  border: 2px solid #0a3544;
  border-radius: 50%;
  background: #e2f4f4;
  color: #0f5960;
  font-size: 9px;
  font-weight: 600;
}

.login-proof p,
.login-proof strong,
.login-proof small {
  display: block;
  margin: 0;
}

.login-proof strong {
  color: #e9f3f6;
  font-size: 12px;
}

.login-proof small {
  margin-top: 3px;
  color: #7895a3;
  font-size: 10px;
}

.login-panel {
  display: grid;
  place-items: center;
  padding: 48px clamp(34px, 5vw, 70px);
  background: #fff;
}

.login-card {
  width: min(430px, 100%);
  display: grid;
  gap: 19px;
}

.login-mobile-brand {
  display: none;
  margin-bottom: 8px;
  color: #0a3144;
}

.login-heading {
  margin-bottom: 7px;
}

.login-secure-label {
  padding: 7px 10px;
  background: #e8f8f4;
  color: #087b68;
}

.login-heading h2 {
  margin: 17px 0 8px;
  color: #102a3b;
  font-size: 31px;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.login-heading p {
  margin: 0;
  color: #71818c;
  font-size: 14px;
  line-height: 1.65;
}

.login-field {
  display: grid;
  gap: 8px;
}

.login-field > span:first-child {
  color: #415867;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.login-input-wrap {
  min-height: 51px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #dbe4e9;
  border-radius: 12px;
  padding: 0 14px;
  background: #fbfcfd;
  color: #8ca0ac;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.login-input-wrap:focus-within {
  border-color: #1f8d9a;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(31, 141, 154, 0.1);
}

.login-input-wrap input {
  min-width: 0;
  height: 48px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: #163344;
}

.login-input-wrap input::placeholder {
  color: #a2b0b9;
}

.login-captcha-wrap {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 10px;
}

.login-hint {
  min-height: 0;
  margin: -6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.login-hint:empty {
  display: none;
}

.login-hint.login-error {
  color: #b42318;
  font-weight: 600;
}

.login-hint.login-success {
  color: #047857;
  font-weight: 600;
}

.login-card.is-loading input,
.login-card.is-loading button {
  cursor: wait;
}

.captcha-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dbe4e9;
  border-radius: 12px;
  background: #f1f7f7;
}

.captcha-row strong {
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: #0c5561;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.login-refresh-button {
  width: 42px;
  height: 51px;
  border: 0;
  border-left: 1px solid #dbe4e9;
  background: transparent;
  color: #0e7180;
}

.login-refresh-button:hover {
  background: #e2f2f1;
}

.login-submit-button {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #0b6573, #0f8f88);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 14px 28px rgba(10, 111, 115, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.login-submit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(10, 111, 115, 0.28);
}

.login-submit-button > i {
  transition: transform 0.18s ease;
}

.login-submit-button:hover > i {
  transform: translateX(3px);
}

.login-trust {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: #8a9aa4;
  font-size: 10px;
}

.login-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.login-trust i {
  color: #26968d;
}

.app-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.app-shell.sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .sidebar {
  display: none;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  overflow-y: auto;
  background: var(--sidebar);
  color: #fff;
  padding: 0 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 10px 0 30px rgba(15, 23, 42, 0.1);
}

.sidebar-head {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #111827;
}

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

.sidebar-brand {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  text-align: left;
}

.sidebar-brand:hover .brand-mark,
.sidebar-brand:focus-visible .brand-mark {
  background: #2f83ff;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.sidebar-brand strong {
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}

.user-avatar,
.sidebar-avatar,
.profile-avatar-large,
.avatar-option {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #e8f3ff;
  color: var(--blue);
}

.user-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 18px;
}

.sidebar-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  font-size: 24px;
}

.user-avatar img,
.sidebar-avatar img,
.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand strong,
.brand span {
  display: block;
}

.brand span,
.sidebar-profile small,
.sidebar-panel small {
  color: #c2c7d0;
}

.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: var(--sidebar-soft);
  color: #fff;
  text-align: left;
}

.sidebar-profile span {
  min-width: 0;
}

.sidebar-profile strong,
.sidebar-profile small {
  display: block;
}

.sidebar-profile strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: #263553;
}

.sidebar-section {
  display: grid;
  gap: 8px;
}

.sidebar-title {
  color: #7f8ea8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.nav-tabs {
  display: grid;
  gap: 6px;
  border-bottom: 0;
}

.nav-tab {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #cbd5e1;
  background: transparent;
  padding: 0 12px;
  text-align: left;
  font-weight: 600;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.nav-tab span {
  min-width: 0;
}

.nav-badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 7px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.nav-tab i,
.sidebar-logout i,
.sidebar-open-button i,
.sidebar-toggle i {
  font-size: 1rem;
  line-height: 1;
}

.nav-tab.active,
.nav-tab:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: var(--blue);
  color: #fff;
}

.settings-dropdown {
  display: grid;
  gap: 4px;
}

.settings-dropdown-toggle {
  width: 100%;
}

.settings-chevron {
  margin-left: auto;
  transition: transform 0.16s ease;
}

.settings-dropdown.open .settings-chevron {
  transform: rotate(180deg);
}

.settings-submenu {
  display: none;
  gap: 4px;
  padding: 4px 0 4px 24px;
}

.settings-dropdown.open .settings-submenu {
  display: grid;
}

.settings-submenu-item {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: #cbd5e1;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}

.settings-submenu-item.active,
.settings-submenu-item:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: var(--sidebar-soft);
  color: #fff;
}

.settings-tab {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 10px;
  background: transparent;
  color: #c2c7d0;
  text-align: left;
  font-weight: 600;
}

.settings-tab.active,
.settings-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sidebar-logout:hover {
  background: var(--blue);
  color: #fff;
}

.sidebar-toggle,
.sidebar-open-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 12px;
  font-weight: 600;
}

.sidebar-toggle {
  flex: 0 0 auto;
  width: 38px;
  padding: 0;
  background: var(--sidebar-soft);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f8f9fa;
}

.sidebar-toggle:hover {
  background: var(--blue);
  color: #fff;
}

.sidebar-open-button {
  display: none;
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}

.app-shell.sidebar-collapsed .sidebar-open-button {
  display: inline-flex;
  align-items: center;
}

.sidebar-panel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px;
  display: grid;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-logout {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0 14px;
  background: var(--sidebar-soft);
  color: #f8f9fa;
  font-weight: 600;
}

.panel-label,
.eyebrow,
label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sidebar-panel .panel-label {
  color: #9fb0c8;
}

.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.progress-track span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--teal);
}

.main {
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 0 24px 32px;
}

.topbar {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  align-items: center;
  min-height: 64px;
  margin: 0 -24px 22px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  position: sticky;
  top: 0;
  z-index: 20;
}

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

h1 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
}

h2 {
  font-size: 18px;
  font-weight: 600;
}

h3 {
  font-size: 15px;
  font-weight: 600;
}

.topbar-actions,
.modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.topbar-notification {
  position: relative;
  margin-left: auto;
}

.notification-button {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.notification-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: min(380px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

.notification-menu-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.notification-menu-head small {
  color: var(--muted);
}

.notification-list {
  display: grid;
  max-height: 360px;
  overflow: auto;
}

.notification-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 2px 10px;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  padding: 11px 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.notification-item:hover {
  background: #fff7ed;
}

.notification-item > span {
  grid-row: 1 / 4;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #0d6efd;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.notification-item strong,
.notification-item small,
.notification-item p {
  min-width: 0;
}

.notification-item small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-item p {
  margin: 0;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-empty {
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.primary-button,
.ghost-button,
.danger-button,
.icon-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 14px;
  font-weight: 600;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.primary-button {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 14px rgba(13, 110, 253, 0.18);
}

.primary-button:hover {
  background: #0b5ed7;
  color: #fff;
}

.login-submit-button {
  gap: 8px;
}

.login-submit-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin 0.8s linear infinite;
}

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

.ghost-button {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}

.ghost-button:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.danger-button {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.icon-button {
  width: 40px;
  padding: 0;
  background: #fff;
  border-color: var(--line);
}

.view {
  display: none;
}

.view.active {
  display: grid;
  gap: 16px;
}

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

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

.info-timebar div {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.info-timebar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.info-timebar strong {
  font-size: 18px;
}

.target-summary-panel {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
}

.target-summary-panel strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
}

.target-summary-progress {
  display: grid;
  gap: 8px;
}

.target-summary-panel .progress-track {
  background: #e9ecef;
}

.target-summary-panel small {
  color: var(--muted);
  font-weight: 600;
}

.metric,
.panel,
.pipeline-column,
.lead-card,
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.metric {
  position: relative;
  padding: 18px;
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--blue);
}

.metric span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.metric strong {
  font-size: 28px;
  font-weight: 600;
}

.content-grid,
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
  gap: 16px;
}

.settings-grid,
.settings-layout {
  align-items: start;
}

.settings-layout {
  display: grid;
  gap: 16px;
}

.settings-panel {
  display: none;
}

.settings-panel.active {
  display: block;
}

.settings-menu-panel {
  display: none;
}

.settings-tabbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.settings-tabbar .settings-tab {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  font-weight: 600;
}

.settings-tabbar .settings-tab.active,
.settings-tabbar .settings-tab:hover {
  border-color: var(--blue);
  background: #e8f3ff;
  color: var(--blue);
}

.wa-settings-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--line);
}

.wa-settings-tab {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}

.wa-settings-tab.active,
.wa-settings-tab:hover {
  border-color: var(--blue);
  background: #e8f3ff;
  color: var(--blue);
}

.wa-settings-panel {
  display: none;
  padding-top: 16px;
}

.wa-settings-panel.active {
  display: block;
}

.wa-settings-panel .section-heading {
  padding-top: 0;
}

.panel {
  padding: 0;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover td {
  background: #eef6ff;
}

.lead-row-unread td {
  background: #fff7ed;
}

.lead-row-unread:hover td {
  background: #ffedd5 !important;
}

.lead-unread-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 8px;
  border-radius: 999px;
  padding: 0 8px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

.clickable-row:focus {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.compact-button {
  min-height: 34px;
  margin-bottom: 8px;
}

.compact-heading {
  padding-top: 0;
}

.lead-detail-panel {
  overflow: hidden;
}

.lead-detail-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.25fr);
  gap: 18px;
  padding: 0 18px 18px;
  align-items: start;
}

.lead-detail-summary,
.lead-detail-workstream,
.lead-detail-timeline {
  display: grid;
  gap: 14px;
  align-content: start;
}

.lead-detail-summary {
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 118px);
  overflow: auto;
  padding-right: 2px;
}

.lead-detail-workstream {
  min-height: 0;
  grid-template-rows: auto minmax(240px, 38vh) minmax(340px, calc(56vh - 160px));
}

.lead-detail-timeline,
.lead-comments-panel {
  min-height: 0;
  overflow: hidden;
}

.lead-detail-timeline {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.lead-detail-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.lead-detail-hero h3 {
  margin: 10px 0 6px;
  font-size: 24px;
}

.lead-detail-hero p {
  margin: 0;
  color: var(--muted);
}

.lead-detail-hero > strong {
  white-space: nowrap;
  font-size: 18px;
}

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

.lead-detail-grid div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.lead-detail-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.lead-detail-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

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

.lead-address-card.is-empty {
  background: #fbfcfe;
}

.lead-address-card > div:first-child {
  display: grid;
  gap: 4px;
}

.lead-address-card span,
.lead-address-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.lead-address-card strong,
.lead-address-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lead-address-grid .muted-value {
  color: var(--muted);
  font-weight: 600;
}

.lead-address-card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

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

.lead-address-grid small {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 6px;
  background: #f8fafc;
}

.detail-history-list {
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.detail-history-item {
  background: #fff;
}

.detail-history-item p,
.detail-history-item small {
  overflow-wrap: anywhere;
}

.lead-comments-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.lead-comment-list {
  display: grid;
  gap: 12px;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-right: 4px;
}

.lead-comment-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.lead-comment-item.own-comment {
  grid-template-columns: minmax(0, 1fr) 42px;
}

.lead-comment-item.own-comment .lead-comment-avatar {
  grid-column: 2;
  grid-row: 1;
}

.lead-comment-item.own-comment .lead-comment-bubble {
  grid-column: 1;
  grid-row: 1;
  background: #eef8ff;
}

.comment-avatar {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

.lead-comment-bubble {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid #dbe4ec;
  border-radius: 8px;
  background: #f8fafc;
}

.lead-comment-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.lead-comment-head small {
  color: var(--muted);
}

.lead-comment-bubble p {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lead-reply-quote,
.lead-reply-preview {
  display: grid;
  gap: 3px;
  border: 0;
  border-left: 3px solid #0ea5a4;
  border-radius: 6px;
  padding: 8px 10px;
  background: #f0fdfa;
  color: var(--ink);
  text-align: left;
}

.lead-reply-quote span,
.lead-reply-preview p {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-reply-preview {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.lead-reply-preview p {
  margin: 2px 0 0;
}

.lead-comment-footer {
  display: flex;
  justify-content: flex-end;
}

.lead-comment-reply-button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 0;
  padding: 2px 0;
  background: transparent;
  color: #0d6efd;
  font-size: 12px;
  font-weight: 600;
}

.lead-mention {
  border-radius: 999px;
  padding: 1px 6px;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
}

.lead-comment-form {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lead-comment-tools {
  display: flex;
  gap: 10px;
  align-items: center;
}

.lead-comment-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.lead-comment-input-wrap {
  position: relative;
  display: grid;
}

.lead-mention-suggestions {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 8;
  display: grid;
  width: min(360px, 100%);
  max-height: 260px;
  overflow: auto;
  border: 1px solid #dbe4ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
}

.lead-mention-suggestions button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  padding: 9px 10px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.lead-mention-suggestions button:last-child {
  border-bottom: 0;
}

.lead-mention-suggestions button:hover,
.lead-mention-suggestions button.active {
  background: #f0f9ff;
}

.lead-mention-suggestions span {
  display: grid;
  min-width: 0;
}

.lead-mention-suggestions small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-avatar {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.lead-sticker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lead-sticker-button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid #dbe4ec;
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}

.lead-sticker-button:hover {
  border-color: #9bd5ff;
  background: #f0f9ff;
}

.lead-comment-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.lead-comment-actions small {
  color: var(--muted);
}

.profile-panel {
  overflow: hidden;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
  gap: 18px;
  padding: 0 18px 18px;
}

.profile-avatar-card,
.profile-avatar-tools,
.profile-form {
  display: grid;
  gap: 14px;
  align-content: start;
}

.profile-avatar-card {
  justify-items: center;
  text-align: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.profile-avatar-card small,
.profile-actions small,
.form-label-text {
  color: var(--muted);
  font-weight: 600;
}

.profile-avatar-large {
  width: 112px;
  height: 112px;
  font-size: 58px;
}

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

.profile-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  grid-column: 1 / -1;
}

.profile-avatar-tools {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.avatar-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.avatar-option {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  font-size: 22px;
}

.avatar-option.active,
.avatar-option:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.user-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.wide-panel {
  min-width: 0;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}

.section-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.page-size-control {
  display: inline-grid;
  grid-template-columns: auto minmax(78px, auto);
  gap: 8px;
  align-items: center;
  margin: 0;
}

.page-size-control span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.page-size-control select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

.section-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

.panel > :not(.section-heading):not(.table-wrap) {
  margin: 16px;
}

.sdr-list,
.source-list,
.activity-list,
.editable-list,
.kpi-grid {
  display: grid;
  gap: 10px;
}

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

.sdr-row,
.source-row,
.activity-row,
.editable-row,
.kpi-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.sdr-row-top,
.source-row-top,
.editable-row,
.kpi-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.editable-row small,
.kpi-card small,
.kpi-line span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.kpi-line {
  display: grid;
  gap: 8px;
}

.kpi-line strong {
  font-size: 26px;
}

.user-settings-row {
  align-items: stretch;
}

.user-settings-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.account-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.account-editor input {
  max-width: none;
}

.password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.bar-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e9ecef;
}

.bar-track span {
  display: block;
  height: 100%;
  background: var(--teal);
}

.meeting-bar span {
  background: var(--amber);
}

.timeline-card small,
.lead-card small,
td small {
  color: var(--muted);
}

.timeline-panel {
  overflow: hidden;
}

.timeline-list {
  position: relative;
  gap: 0;
  padding: 4px 0;
}

.timeline-list::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 36px;
  width: 2px;
  background: #dbeafe;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0;
  padding: 10px 0;
}

.timeline-item-unread .timeline-card {
  border-color: #fdba74;
  background: #fff7ed;
}

.feed-unread-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 6px;
  border-radius: 999px;
  padding: 0 7px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.timeline-marker {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  z-index: 1;
}

.timeline-marker span {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 0 2px #bfdbfe;
}

.timeline-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

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

.timeline-head strong,
.timeline-head span {
  display: block;
}

.timeline-head span,
.timeline-head time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.timeline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timeline-followup {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
}

.timeline-followup strong {
  color: var(--ink);
  font-size: 13px;
}

.timeline-followup p {
  margin: 0;
}

.timeline-link {
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  background: #eef6ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}

.timeline-link:hover {
  background: #dbeafe;
  color: #0b5ed7;
}

.followup-assistant-panel {
  display: grid;
  gap: 12px;
}

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

.followup-assistant-compact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.followup-assistant-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.followup-assistant-summary span,
.followup-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  background: #eff6ff;
  color: #075985;
  font-size: 12px;
  font-weight: 600;
}

.followup-compact-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.followup-compact-action p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.reminder-news-ticker {
  padding: 0 18px 14px;
}

.reminder-ticker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px;
  background: #eff6ff;
}

.reminder-ticker.is-compact {
  max-width: min(760px, 100%);
  border: 0;
  padding: 0;
  background: transparent;
}

.reminder-ticker-track {
  min-width: 0;
  overflow: hidden;
}

.reminder-ticker-track span {
  display: block;
  color: #075985;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.reminder-ticker-track strong,
.reminder-ticker-track p {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reminder-ticker-track p {
  color: var(--muted);
  font-size: 13px;
}

.reminder-ticker-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.reminder-ticker-empty {
  margin: 0;
  color: var(--muted);
}

.reminder-page-panel {
  overflow: hidden;
}

.reminder-filter-tabs {
  display: flex;
  gap: 8px;
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.reminder-page-panel .followup-assistant-list {
  padding: 18px;
}

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

.followup-reminder-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.followup-reminder-card small,
.followup-reminder-card p,
.followup-guide-card small,
.followup-guide-card p,
.followup-modal-guide-card p,
.followup-modal-guide-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.followup-reminder-card strong,
.followup-guide-card h3 {
  margin: 2px 0;
  color: var(--ink);
}

.followup-reminder-action {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.followup-reminder-action span,
.followup-guide-card span,
.followup-modal-guide-card span {
  color: #075985;
  font-size: 12px;
  font-weight: 600;
}

.followup-guide-card,
.followup-modal-guide-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.followup-guide-meta {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}

.followup-guide-meta strong {
  color: #075985;
}

.tone-urgent {
  border-color: #fecaca;
  background: #fff7f7;
}

.tone-warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.tone-active {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.tone-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.tone-neutral {
  border-color: var(--line);
  background: #f8fafc;
}

.timeline-pagination {
  margin: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.inbox-layout {
  display: grid;
  gap: 16px;
}

.wa-browser-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 12px;
  padding: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.wa-page-tabs {
  display: flex;
  gap: 8px;
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.wa-page-tab {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.wa-page-tab.active,
.wa-page-tab:hover {
  border-color: #0d8bd8;
  background: #eef8ff;
  color: #075985;
}

.wa-followup-panel {
  display: none;
}

.wa-followup-panel.active {
  display: block;
}

.wa-funnel-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.wa-funnel-hero h2 {
  margin: 0 0 8px;
  color: var(--ink);
}

.wa-funnel-hero p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}

.wa-funnel-summary {
  min-width: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 14px;
  background: #eff6ff;
  color: #075985;
  text-align: center;
}

.wa-funnel-summary strong {
  font-size: 34px;
  line-height: 1;
}

.wa-funnel-summary span {
  color: #0369a1;
  font-size: 12px;
  font-weight: 600;
}

.wa-funnel-infographic {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  background: #eef9f6;
}

.wa-funnel-mini-map {
  position: sticky;
  top: 18px;
  align-self: start;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 14px;
  border: 1px solid #d7e2e3;
  border-radius: 8px;
  background: #fff;
  list-style: none;
}

.wa-funnel-mini-map li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

.wa-funnel-mini-map span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11px;
  font-weight: 600;
}

.wa-funnel-flow {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.wa-funnel-phase {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.wa-funnel-phase-label {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 116px;
  padding: 16px;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
}

.wa-funnel-phase-label strong {
  font-size: 18px;
}

.wa-funnel-phase-label span {
  color: #ccfbf1;
  font-size: 12px;
  line-height: 1.45;
}

.wa-funnel-phase-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.wa-funnel-phase-steps::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 26px;
  height: 3px;
  background: #bae6fd;
}

.wa-funnel-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d7e2e3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08);
}

.wa-funnel-node {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 4px solid #bae6fd;
  border-radius: 999px;
  background: #0d8bd8;
  color: #fff;
  font-weight: 600;
}

.wa-funnel-node:hover,
.wa-funnel-node:focus {
  border-color: #0d8bd8;
  background: #075985;
}

.wa-funnel-node span {
  line-height: 1;
}

.wa-funnel-content {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.wa-funnel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.wa-funnel-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.wa-funnel-head h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 15px;
}

.wa-funnel-head strong {
  color: #047857;
  font-size: 12px;
  white-space: nowrap;
}

.wa-funnel-content p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.wa-funnel-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.wa-funnel-tags small {
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: 5px 8px;
  background: #f0fdf4;
  color: #047857;
  font-size: 11px;
  font-weight: 600;
}

.wa-search-box {
  position: relative;
}

.wa-search-box i {
  position: absolute;
  left: 14px;
  top: 50%;
  color: var(--muted);
  transform: translateY(-50%);
  z-index: 1;
}

.wa-search-box input {
  width: 100%;
  padding-left: 42px;
}

.wa-language-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #b8c3cf;
  border-radius: 4px;
  padding: 0 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}

.wa-language-button select {
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 600;
  outline: 0;
  appearance: none;
}

.wa-copy-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  min-height: 680px;
  background: #eef9f6;
}

.wa-category-sidebar {
  position: sticky;
  top: 82px;
  z-index: 4;
  display: grid;
  gap: 8px;
  align-content: start;
  align-self: start;
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding: 20px;
  background: #fff;
  border-right: 1px solid var(--line);
}

.wa-template-workspace {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  padding: 28px;
}

.whatsapp-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.template-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  padding: 32px;
  overflow-x: hidden;
}

.template-form .modal-heading,
.template-form .full-span,
.template-form small,
.template-form .modal-actions {
  grid-column: 1 / -1;
}

.template-form .modal-heading {
  margin: 0;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

.template-form label {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.template-form label span {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.template-form input,
.template-form select,
.template-form textarea {
  width: 100%;
  min-width: 0;
}

.template-form textarea {
  min-height: 190px;
  max-height: 32vh;
  resize: vertical;
}

.template-form small {
  color: var(--muted);
  line-height: 1.5;
}

.template-form .modal-actions {
  margin: 6px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  background: #fff;
}

.whatsapp-template-list {
  display: grid;
  gap: 16px;
}

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

.wa-category-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 0;
  padding: 9px 0;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}

.wa-category-option.active,
.wa-category-option:hover {
  color: #0676bd;
}

.wa-category-option span {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.wa-category-option i {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
}

.wa-category-option.active i {
  border: 8px solid #0d8bd8;
}

.wa-category-option strong {
  color: var(--muted);
  font-size: 13px;
}

.wa-sdr-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wa-sdr-tips span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.wa-results-count {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.wa-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px 20px;
  align-items: stretch;
}

.whatsapp-template-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  align-items: start;
  padding: 0;
  border: 1px solid #d7e2e3;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12);
}

.whatsapp-template-card.active {
  border-color: #86b7fe;
  background: #f8fbff;
}

.wa-template-meta {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.wa-template-meta strong,
.wa-template-meta span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-template-meta strong {
  color: var(--ink);
  font-size: 14px;
}

.wa-template-meta span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.wa-template-info {
  width: 32px;
  height: 32px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
}

.wa-template-tooltip {
  grid-column: 1 / -1;
  width: 100%;
  display: none;
  gap: 6px;
  margin-top: 2px;
  padding: 10px 11px;
  border: 1px solid #d7e2e3;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: none;
}

.wa-template-tooltip b,
.wa-template-tooltip p,
.wa-template-tooltip small {
  margin: 0;
}

.wa-template-tooltip p {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wa-template-tooltip small {
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

.wa-template-info:hover + .wa-template-tooltip,
.wa-template-info:focus + .wa-template-tooltip,
.wa-template-meta:focus-within .wa-template-tooltip {
  display: grid;
}

.whatsapp-template-pick {
  display: grid;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.wa-chat-preview {
  display: grid;
  min-height: 300px;
  background: #e7dfd5;
}

.wa-chat-screen {
  min-height: 300px;
  overflow: hidden;
  padding: 32px 24px;
  background:
    radial-gradient(circle at 10px 10px, rgba(0, 0, 0, 0.035) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    #e5ddd5;
}

.wa-chat-bubble {
  position: relative;
  width: min(100%, 340px);
  margin: 0 auto;
  padding: 13px 13px 26px;
  border-radius: 7px;
  background: #fff;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.12);
}

.wa-chat-bubble p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wa-chat-bubble-full {
  width: min(100%, 620px);
}

.wa-chat-bubble-full p {
  display: block;
  overflow: visible;
  white-space: pre-wrap;
}

.wa-chat-bubble time {
  position: absolute;
  right: 11px;
  bottom: 7px;
  color: #9ca3af;
  font-size: 11px;
}

.wa-placeholder {
  color: #2f7d18;
}

.wa-template-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.92);
}

.wa-template-tags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wa-template-tags small {
  min-width: 0;
  max-width: 150px;
  border-radius: 999px;
  padding: 4px 7px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-preview-form {
  display: grid;
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.wa-preview-modal-body {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  min-height: 0;
  max-height: min(70vh, 720px);
  overflow: hidden;
}

.wa-preview-message {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.wa-chat-preview-full,
.wa-chat-preview-full .wa-chat-screen {
  min-height: 100%;
}

.wa-chat-preview-full .wa-chat-screen {
  overflow: visible;
}

.wa-preview-send-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: #f8fafc;
  overflow: auto;
}

.wa-preview-send-panel label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 600;
}

.wa-preview-send-panel input,
.wa-preview-send-panel select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.wa-preview-send-panel select:not([size]) {
  height: 44px;
  min-height: 44px;
}

#waPreviewLeadSelect {
  min-height: 190px;
  max-height: 220px;
}

.wa-preview-send-panel option {
  padding: 8px;
}

.toolbar,
.date-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(5, minmax(140px, 180px));
  gap: 12px;
}

.leads-toolbar {
  grid-template-columns: minmax(260px, 1.6fr) repeat(6, minmax(140px, 1fr));
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.leads-toolbar label {
  min-width: 0;
}

.leads-toolbar .search-box {
  min-width: 260px;
}

.pipeline-toolbar {
  grid-template-columns: minmax(180px, 240px) minmax(160px, 200px) repeat(2, minmax(150px, 180px)) auto auto;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.date-toolbar {
  grid-template-columns: minmax(180px, 220px) repeat(2, minmax(160px, 190px)) auto;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

label {
  display: grid;
  gap: 6px;
}

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

input:focus,
select:focus,
textarea:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

textarea {
  resize: vertical;
}

.table-panel {
  padding: 0;
  overflow: hidden;
}

.table-panel .section-heading {
  padding: 14px 16px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  margin-bottom: 0 !important;
  min-width: 980px;
  --bs-table-striped-bg: #f8fbff;
  --bs-table-hover-bg: #eef6ff;
}

.master-table {
  min-width: 560px;
}

.target-table {
  min-width: 820px;
}

.master-table th:first-child,
.master-table td:first-child {
  width: 72px;
}

.master-table th:nth-child(2),
.master-table td:nth-child(2) {
  width: 130px;
}

.master-table th:last-child,
.master-table td:last-child {
  width: 220px;
}

th,
td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

th {
  color: #495057;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
  background: #f8fafc !important;
}

.table > :not(caption) > * > * {
  border-bottom-color: #e9edf3;
}

.table tbody tr:nth-child(even) > * {
  background-color: #fcfdff;
}

.table tbody tr:hover > * {
  background-color: #eef6ff !important;
}

.table th:first-child,
.table td:first-child {
  width: 42px;
  text-align: center;
}

.lead-select-input,
#selectAllLeadsInput {
  width: 16px;
  height: 16px;
}

.status-pill {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: #e8f3ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}

.status-warning {
  background: #fff4e6;
  color: #b45309;
}

.status-success {
  background: #e8fdf0;
  color: #047857;
}

.matrix-table th:nth-child(n + 4),
.matrix-table td:nth-child(n + 4) {
  text-align: right;
}

.matrix-table th:last-child,
.matrix-table td:last-child {
  text-align: left;
}

.kpi-review-editor {
  max-height: 58vh;
  overflow: auto;
}

.kpi-review-editor textarea {
  min-width: 260px;
  width: 100%;
  resize: vertical;
}

.kpi-export-wizard {
  display: grid;
  gap: 16px;
}

.kpi-person-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.kpi-person-card > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.kpi-person-card span,
.kpi-person-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.kpi-person-card strong {
  display: block;
  margin: 6px 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

#kpiExportDialog {
  width: min(1160px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.kpi-export-form {
  display: grid;
  max-height: calc(100vh - 48px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.kpi-export-body {
  display: grid;
  gap: 18px;
  overflow-y: auto;
  padding: 18px 22px 22px;
}

.kpi-export-form .form-grid {
  padding: 0;
}

.kpi-export-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.kpi-export-form label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.kpi-export-form input,
.kpi-export-form select,
.kpi-export-form textarea {
  width: 100%;
}

.kpi-export-form textarea {
  min-height: 118px;
  resize: vertical;
}

.kpi-export-form #kpiExportNotesInput {
  min-height: 96px;
}

.kpi-export-form .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

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

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.table-count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.small-button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  min-height: 32px;
  padding: 0 10px;
  font-weight: 600;
  color: var(--ink);
}

.small-button:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

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

.action-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  font-size: 15px;
}

.action-button-primary {
  border-color: #b9d7ff;
  background: #eef6ff;
  color: #0d6efd;
}

.action-button-primary:hover {
  border-color: #86b7fe;
  background: #dbeafe;
  color: #0b5ed7;
}

.action-button-info {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.action-button-info:hover {
  border-color: #6ee7b7;
  background: #d1fae5;
  color: #065f46;
}

.action-button-secondary {
  border-color: #d8dee8;
  background: #f8fafc;
  color: #475569;
}

.action-button-secondary:hover {
  border-color: #cbd5e1;
  background: #eef2f7;
  color: #334155;
}

.action-button-danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.action-button-danger:hover {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #b91c1c;
}

.pipeline-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(330px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.pipeline-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
  margin: 0 0 10px;
}

.pipeline-scroll-top > div {
  height: 1px;
}

.pipeline-column {
  min-height: 560px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pipeline-column header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.pipeline-column header small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.pipeline-dropzone {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 480px;
  padding: 14px;
}

.lead-card {
  padding: 14px;
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.lead-card[draggable="true"] {
  cursor: pointer;
}

.lead-card:hover,
.lead-card:focus {
  border-color: #b9d7ff;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.12);
  outline: 0;
  transform: translateY(-1px);
}

.lead-card h3 {
  margin-bottom: 4px;
}

.pipeline-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pipeline-card-heading > div {
  min-width: 0;
}

.pipeline-card-heading h3,
.pipeline-card-heading small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-drag-handle {
  flex: 0 0 auto;
  color: #a3b4bb;
  cursor: grab;
}

.pipeline-contact {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  margin-top: 11px;
  color: #08775f;
  background: #eaf8f3;
  border: 1px solid #d2eee4;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
}

.pipeline-contact span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-contact.is-empty {
  color: #87969c;
  background: #f4f7f8;
  border-color: #e3eaed;
  font-weight: 600;
}

.pipeline-card-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.pipeline-quality,
.pipeline-completeness {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pipeline-quality.is-hot {
  color: #b42318;
  background: #ffebe9;
}

.pipeline-quality.is-warm {
  color: #9a6500;
  background: #fff5cf;
}

.pipeline-quality.is-cold {
  color: #35669b;
  background: #eaf3ff;
}

.pipeline-completeness {
  color: #5e747d;
  background: #eef3f5;
}

.pipeline-property-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.pipeline-property-summary > div {
  min-width: 0;
  padding: 9px 10px;
  background: #f7fafb;
  border: 1px solid #e6eef0;
  border-radius: 9px;
}

.pipeline-property-summary .full-row {
  grid-column: 1 / -1;
}

.pipeline-property-summary span,
.pipeline-property-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-property-summary span {
  margin-bottom: 4px;
  color: #82959d;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.pipeline-property-summary span i {
  margin-right: 3px;
}

.pipeline-property-summary strong {
  color: #254654;
  font-size: 11px;
}

.pipeline-followup-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin-top: 10px;
  color: #176a73;
  background: #edf8f8;
  border: 1px solid #d2eaea;
  border-radius: 10px;
}

.pipeline-followup-status > i {
  font-size: 18px;
}

.pipeline-followup-status span,
.pipeline-followup-status strong,
.pipeline-followup-status small {
  display: block;
}

.pipeline-followup-status span,
.pipeline-followup-status small {
  color: #71868e;
  font-size: 9px;
}

.pipeline-followup-status strong {
  margin: 2px 0;
  font-size: 11px;
}

.pipeline-followup-status.is-urgent {
  color: #b42318;
  background: #fff1f0;
  border-color: #f5cbc7;
}

.pipeline-followup-status.is-today {
  color: #9a6500;
  background: #fff8df;
  border-color: #f1dda1;
}

.pipeline-last-note {
  padding: 9px 10px;
  margin-top: 9px;
  background: #fbfcfd;
  border-left: 3px solid #86c7c1;
  border-radius: 0 8px 8px 0;
}

.pipeline-last-note span {
  color: #81949c;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.pipeline-last-note p {
  display: -webkit-box;
  margin: 3px 0 0;
  overflow: hidden;
  color: #405f6b;
  font-size: 10px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pipeline-last-note.is-empty {
  border-left-color: #d7e0e3;
}

.pipeline-card-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding-top: 11px;
  margin-top: 11px;
  border-top: 1px solid #e8eff1;
}

.pipeline-card-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 6px;
  color: #176a73;
  background: #f1f8f8;
  border: 1px solid #d8e9e9;
  border-radius: 9px;
  cursor: pointer;
  transition: 0.16s ease;
}

.pipeline-card-actions button span {
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.pipeline-card-actions button:hover,
.pipeline-card-actions button:focus-visible {
  color: #fff;
  background: #0e8f87;
  border-color: #0e8f87;
  outline: none;
  transform: translateY(-1px);
}

.pipeline-card-actions button:last-child {
  color: #128c62;
  background: #ecfaf4;
  border-color: #ccebdd;
}

.pipeline-card-actions button:last-child:hover,
.pipeline-card-actions button:last-child:focus-visible {
  color: #fff;
  background: #159b6d;
  border-color: #159b6d;
}

.lead-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.lead-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #eef5ef;
  color: #1f6f43;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
}

.sdr-avatar-label strong {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 14px;
}

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

dialog .inline-form,
dialog .template-form,
dialog .user-form {
  margin-bottom: 0;
}

dialog .template-form,
dialog .user-form {
  width: min(760px, calc(100vw - 36px));
}

dialog .user-form .modal-actions button,
dialog .template-form .modal-actions button {
  grid-column: auto;
}

.target-mini {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin: 0;
}

.target-mini legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.target-editor {
  display: grid;
  gap: 10px;
}

.target-editor {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  width: 100%;
}

.target-period-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f9fa;
}

.target-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  background: #f8f9fa;
}

.target-modal-grid {
  grid-template-columns: 1fr;
}

.target-modal-grid .target-mini {
  margin: 0;
}

.monthly-target {
  background: #eef8f6;
  border-color: #b7e4dc;
}

.selected-row {
  background: #eef6ff;
}

.target-month-modal-field {
  max-width: 260px;
}

.target-month-editor {
  max-height: 62vh;
  overflow: auto;
}

.target-month-editor input {
  min-width: 92px;
}

.user-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.user-form button {
  grid-column: 1 / -1;
}

.inline-form.two-columns {
  grid-template-columns: 1fr 100px auto;
}

.editable-row input {
  max-width: 140px;
}

.danger-panel {
  grid-column: 1 / -1;
}

dialog {
  width: min(760px, calc(100vw - 32px));
  border: 0;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

#waTemplateModal {
  width: min(820px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

#waTemplateModal .template-form {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px 24px 32px 32px;
}

#waTemplateModal .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-bottom: 2px;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.04);
}

#waTemplateModal .template-helper {
  display: block;
  padding: 12px 14px;
  border: 1px solid #dbe4ec;
  border-radius: 6px;
  background: #f8fafc;
}

.wide-dialog {
  width: min(1180px, calc(100vw - 28px));
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.48);
}

.lead-form {
  padding: 0;
}

.import-preview-body {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.import-preview-wrap {
  max-height: min(62vh, 640px);
  overflow: auto;
}

.import-preview-table {
  min-width: 980px;
}

.import-preview-table th,
.import-preview-table td {
  white-space: nowrap;
}

.modal-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.input-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.input-action-row .ghost-button {
  min-height: 42px;
  white-space: nowrap;
}

.detect-status {
  display: block;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.full-span {
  grid-column: 1 / -1;
}

.lead-extra-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.lead-extra-details summary {
  cursor: pointer;
  padding: 12px 14px;
  color: var(--ink);
  font-weight: 600;
}

.lead-extra-details summary::marker {
  color: var(--primary);
}

.nested-form-grid {
  padding: 0 14px 14px;
}

.modal-actions {
  justify-content: flex-end;
  margin-top: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: #f8f9fa;
}

.history-panel {
  display: grid;
  gap: 10px;
  margin: 0 18px 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.history-list {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
}

.history-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f8f9fa;
}

.history-item-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.history-item small {
  color: var(--muted);
}

.empty-state {
  color: var(--muted);
  padding: 18px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

/* EstateFlow premium application shell */
.app-shell {
  --ink: #102a3b;
  --muted: #71818c;
  --line: #dfe8ed;
  --bg: #f2f6f8;
  --surface: #ffffff;
  --blue: #0e7f88;
  --teal: #0f9b8e;
  --green: #16a779;
  --sidebar: #071f31;
  --sidebar-soft: rgba(255, 255, 255, 0.065);
  --shadow: 0 10px 34px rgba(19, 51, 68, 0.065), 0 2px 8px rgba(19, 51, 68, 0.035);
  --radius: 15px;
  grid-template-columns: 278px minmax(0, 1fr);
  background:
    radial-gradient(circle at 96% 2%, rgba(14, 127, 136, 0.07), transparent 24%),
    var(--bg);
}

.app-shell .sidebar {
  padding: 0 15px 20px;
  background:
    radial-gradient(circle at 0 100%, rgba(15, 155, 142, 0.14), transparent 30%),
    linear-gradient(180deg, #071f31 0%, #092839 100%);
  box-shadow: 12px 0 42px rgba(7, 31, 49, 0.12);
}

.app-shell .sidebar-head {
  min-height: 78px;
  margin: 0 -15px;
  padding: 15px 16px;
  border-bottom-color: rgba(255, 255, 255, 0.07);
  background: transparent;
}

.app-shell .sidebar-brand {
  gap: 11px;
}

.app-shell .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, #1688e8, #0ea5a4);
  font-size: 18px;
  box-shadow: 0 10px 24px rgba(14, 165, 164, 0.2);
}

.sidebar-brand-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sidebar-brand-copy strong {
  font-size: 18px;
  letter-spacing: -0.025em;
}

.sidebar-brand-copy small {
  color: #6f94a3;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.app-shell .sidebar-toggle {
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  color: #9db4bf;
}

.app-shell .sidebar-profile {
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(12px);
}

.app-shell .sidebar-profile:hover {
  border-color: rgba(94, 234, 212, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.app-shell .sidebar-avatar {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  background: #dff7f2;
  color: #087b72;
}

.app-shell .sidebar-title {
  padding: 6px 11px 2px;
  color: #668594;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.app-shell .nav-tabs {
  gap: 5px;
}

.app-shell .nav-tab {
  min-height: 45px;
  border-radius: 11px;
  padding: 0 13px;
  color: #9fb4be;
  font-size: 13px;
  font-weight: 600;
}

.app-shell .nav-tab i {
  width: 21px;
  color: #6f929f;
  font-size: 16px;
  text-align: center;
}

.app-shell .nav-tab.active,
.app-shell .nav-tab:hover {
  border-color: rgba(94, 234, 212, 0.1);
  background: linear-gradient(135deg, rgba(15, 155, 142, 0.23), rgba(14, 127, 136, 0.16));
  color: #f3fbfb;
  box-shadow: inset 3px 0 0 #5eead4;
}

.app-shell .nav-tab.active i,
.app-shell .nav-tab:hover i {
  color: #5eead4;
}

.app-shell .settings-submenu {
  padding-left: 32px;
}

.app-shell .settings-submenu-item {
  border-radius: 9px;
  color: #89a4af;
  font-size: 12px;
}

.app-shell .sidebar-logout {
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  color: #9fb4be;
}

.app-shell .sidebar-logout:hover {
  border-color: rgba(248, 113, 113, 0.2);
  background: rgba(248, 113, 113, 0.11);
  color: #fecaca;
}

.app-shell .main {
  padding: 0 28px 38px;
}

.app-shell .topbar {
  min-height: 78px;
  margin: 0 -28px 26px;
  padding: 0 30px;
  border-bottom-color: rgba(210, 224, 231, 0.8);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 20px rgba(31, 68, 86, 0.035);
  backdrop-filter: blur(18px);
}

.app-shell .topbar .eyebrow {
  margin-bottom: 4px;
  color: #0e8c82;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.app-shell .topbar h1 {
  color: #102e3f;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.app-shell .notification-button,
.app-shell .sidebar-open-button {
  border-color: #dce7eb;
  border-radius: 12px;
  background: #f9fbfc;
  color: #315566;
}

.app-shell .notification-menu {
  border-color: #dce7eb;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(13, 45, 63, 0.18);
}

.app-shell .view.active {
  gap: 19px;
}

.app-shell .panel,
.app-shell .pipeline-column,
.app-shell .lead-card,
.app-shell .kpi-card,
.app-shell .metric,
.app-shell .info-timebar div,
.app-shell .toolbar,
.app-shell .date-toolbar {
  border-color: #dfe8ed;
  border-radius: 15px;
  box-shadow: var(--shadow);
}

.app-shell .section-heading {
  min-height: 74px;
  align-items: center;
  padding: 18px 20px;
  border-bottom-color: #e7eef2;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(180deg, #ffffff, #fcfdfd);
}

.app-shell .section-heading h2 {
  color: #153548;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.app-shell .section-heading p {
  color: #82929c;
  font-size: 12px;
}

.app-shell .info-timebar {
  gap: 13px;
}

.app-shell .info-timebar div {
  position: relative;
  gap: 5px;
  overflow: hidden;
  padding: 16px 18px;
  background: linear-gradient(145deg, #ffffff, #f9fcfc);
}

.app-shell .info-timebar div::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 52px;
  right: -18px;
  bottom: -24px;
  border-radius: 50%;
  background: rgba(14, 127, 136, 0.08);
}

.app-shell .info-timebar span {
  color: #82939d;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.app-shell .info-timebar strong {
  color: #17384a;
  font-size: 16px;
}

.app-shell .date-toolbar,
.app-shell .leads-toolbar,
.app-shell .pipeline-toolbar {
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
}

.app-shell label > span,
.app-shell .panel-label,
.app-shell .form-label-text {
  color: #667d89;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.055em;
}

.app-shell input,
.app-shell select,
.app-shell textarea {
  min-height: 43px;
  border-color: #dce6eb;
  border-radius: 10px;
  background: #fbfcfd;
  color: #183849;
}

.app-shell textarea {
  min-height: auto;
}

.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus {
  border-color: #2b9b9b;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(43, 155, 155, 0.1);
}

.app-shell .primary-button {
  min-height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0c7280, #10978e);
  box-shadow: 0 8px 18px rgba(14, 127, 136, 0.16);
  font-weight: 600;
}

.app-shell .primary-button:hover {
  background: linear-gradient(135deg, #095f6c, #0b827b);
  box-shadow: 0 10px 24px rgba(14, 127, 136, 0.22);
}

.app-shell .ghost-button,
.app-shell .icon-button {
  border-color: #dbe6eb;
  border-radius: 10px;
  background: #fff;
  color: #365563;
}

.app-shell .ghost-button:hover,
.app-shell .icon-button:hover {
  border-color: #bcd5d9;
  background: #f1f8f8;
  color: #0d7479;
}

.app-shell .metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.app-shell .metric {
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 2px 12px;
  padding: 18px;
  background: linear-gradient(145deg, #fff, #fbfdfd);
}

.app-shell .metric::before {
  display: none;
}

.app-shell .metric > i {
  grid-row: 1 / 4;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #e5f6f3;
  color: #0b897f;
  font-size: 17px;
}

.app-shell .metric span {
  color: #778b96;
  font-size: 10px;
  text-transform: uppercase;
}

.app-shell .metric strong {
  color: #133447;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.app-shell .metric small {
  color: #9aa8b0;
  font-size: 9px;
}

.app-shell .metric-hot {
  border-color: #fecaca;
  background: linear-gradient(145deg, #fff, #fff8f7);
}

.app-shell .metric-visit {
  border-color: #a7e2da;
  background: linear-gradient(145deg, #fff, #f2fbf9);
}

.app-shell .metric-visit > i {
  background: #d9f5f0;
  color: #078577;
}

.app-shell .metric-visit strong {
  color: #076b64;
}

.app-shell .metric-hot > i {
  background: #fee2e2;
  color: #dc2626;
}

.app-shell .metric-hot strong {
  color: #b91c1c;
}

.app-shell .metric-warm {
  border-color: #fde3a7;
  background: linear-gradient(145deg, #fff, #fffbeb);
}

.app-shell .metric-warm > i {
  background: #fef3c7;
  color: #d97706;
}

.app-shell .metric-warm strong {
  color: #b45309;
}

.app-shell .metric-cold {
  border-color: #bfdbfe;
  background: linear-gradient(145deg, #fff, #f5f9ff);
}

.app-shell .metric-cold > i {
  background: #dbeafe;
  color: #2563eb;
}

.app-shell .metric-cold strong {
  color: #1d4ed8;
}

.app-shell .target-summary-panel {
  padding: 18px 20px;
  background: linear-gradient(110deg, #0a3245, #0d5960);
  color: #fff;
}

.app-shell .target-summary-panel .panel-label,
.app-shell .target-summary-panel small {
  color: #a7c5cc;
}

.app-shell .target-summary-panel .progress-track {
  height: 9px;
  background: rgba(255, 255, 255, 0.15);
}

.app-shell .target-summary-panel .progress-track span {
  border-radius: 99px;
  background: linear-gradient(90deg, #2dd4bf, #6ee7b7);
}

.app-shell .sdr-row,
.app-shell .source-row,
.app-shell .activity-row,
.app-shell .editable-row,
.app-shell .kpi-card {
  border-color: #e1eaee;
  border-radius: 12px;
  padding: 14px;
  background: #fcfdfd;
}

.app-shell .progress-track {
  border-radius: 999px;
  background: #e7eff2;
}

.app-shell .progress-track span {
  border-radius: 999px;
  background: linear-gradient(90deg, #0e7f88, #16a779);
}

.app-shell .table-wrap {
  scrollbar-color: #bfd1d8 transparent;
}

.app-shell table {
  --bs-table-striped-bg: #fafcfc;
  --bs-table-hover-bg: #edf8f7;
}

.app-shell th {
  height: 48px;
  vertical-align: middle;
  background: #f5f9fa !important;
  color: #5f7783;
  font-size: 10px;
  letter-spacing: 0.055em;
}

.app-shell td {
  padding-top: 14px;
  padding-bottom: 14px;
  color: #294755;
}

.app-shell .table > :not(caption) > * > * {
  border-bottom-color: #e7eef1;
}

.app-shell .table tbody tr:hover > *,
.app-shell .clickable-row:hover td {
  background: #edf8f7 !important;
}

.app-shell .status-pill {
  min-height: 27px;
  padding: 0 10px;
  background: #e3f4f3;
  color: #087c78;
  font-size: 10px;
  letter-spacing: 0.02em;
}

.app-shell .pipeline-board {
  gap: 14px;
}

.app-shell .pipeline-column {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
}

.app-shell .pipeline-column header {
  min-height: 72px;
  border-bottom-color: #e1eaee;
  background: linear-gradient(180deg, #fff, #f8fbfb);
}

.app-shell .pipeline-column header h2 {
  color: #17394a;
  font-size: 15px;
}

.app-shell .lead-card {
  border-color: #dfe9ed;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(25, 61, 78, 0.055);
}

.app-shell .lead-card:hover,
.app-shell .lead-card:focus {
  border-color: #82c9c3;
  box-shadow: 0 12px 26px rgba(14, 127, 136, 0.12);
}

.app-shell .lead-card-meta span {
  background: #e8f6f3;
  color: #127a70;
}

body > dialog {
  --blue: #0e7f88;
  --teal: #0f9b8e;
  --ink: #102a3b;
  --muted: #71818c;
  --line: #dfe8ed;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(8, 35, 51, 0.25);
}

body > dialog::backdrop {
  background: rgba(5, 24, 36, 0.58);
  backdrop-filter: blur(4px);
}

body > dialog .modal-heading {
  background: linear-gradient(180deg, #fff, #f8fbfb);
}

.app-shell .table-pagination button {
  border-radius: 9px;
}

@media (max-width: 980px) {
  .login-screen {
    padding: 24px;
  }

  .login-shell {
    width: min(560px, 100%);
    min-height: auto;
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .login-showcase {
    display: none;
  }

  .login-panel {
    padding: 48px;
  }

  .login-mobile-brand {
    display: flex;
  }

  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .app-shell .main {
    padding: 0 22px 32px;
  }

  .app-shell .topbar {
    margin: 0 -22px 22px;
    padding: 0 22px;
  }

  .sidebar {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 18px;
  }

  .app-shell.sidebar-collapsed .sidebar {
    display: none;
  }

  .main {
    height: auto;
    overflow: visible;
  }

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

  .metric-grid,
  .info-timebar,
  .content-grid,
  .settings-grid,
  .toolbar,
  .date-toolbar,
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .target-editor {
    grid-template-columns: 1fr 1fr;
  }

  .account-editor {
    grid-template-columns: 1fr 1fr;
  }

  .target-period-toolbar {
    grid-template-columns: 1fr 1fr;
  }

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

  .followup-assistant-compact,
  .followup-compact-action {
    align-items: stretch;
    flex-direction: column;
  }

  .reminder-ticker {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .reminder-ticker-actions {
    grid-column: 1 / -1;
  }

  .profile-layout,
  .profile-form,
  .lead-detail-layout,
  .wa-copy-layout {
    grid-template-columns: 1fr;
  }

  .wa-category-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .lead-detail-summary {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .lead-detail-workstream {
    grid-template-rows: none;
  }

  .lead-detail-timeline,
  .lead-comments-panel,
  .detail-history-list,
  .lead-comment-list {
    max-height: none;
    overflow: visible;
  }

  .wa-browser-bar {
    grid-template-columns: 1fr;
  }

  .wa-funnel-hero {
    flex-direction: column;
  }

  .wa-funnel-infographic {
    grid-template-columns: 1fr;
  }

  .wa-funnel-mini-map {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-funnel-phase {
    grid-template-columns: 1fr;
  }

  .wa-funnel-phase-label {
    min-height: 0;
  }

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

  .leads-toolbar .search-box {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .login-screen {
    display: block;
    padding: 0;
    background: #fff;
  }

  .login-shell {
    width: 100%;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .login-panel {
    align-items: start;
    padding: 34px 24px;
  }

  .login-card {
    gap: 17px;
  }

  .login-heading h2 {
    font-size: 28px;
  }

  .login-captcha-wrap {
    grid-template-columns: 1fr;
  }

  .login-trust {
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }

  .main {
    height: auto;
    overflow: visible;
    padding: 18px;
  }

  .app-shell .main {
    padding: 0 16px 26px;
  }

  .app-shell .topbar {
    min-height: 70px;
    margin: 0 -16px 18px;
    padding: 12px 16px;
  }

  .app-shell .metric {
    min-height: 104px;
  }

  .topbar {
    gap: 12px;
  }

  .sidebar-head {
    align-items: stretch;
  }

  .topbar,
  .section-heading,
  .sdr-row-top,
  .source-row-top,
  .editable-row,
  .user-settings-head,
  .kpi-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-notification {
    width: 100%;
    margin-left: 0;
    display: flex;
    justify-content: flex-end;
  }

  .nav-tabs,
  .metric-grid,
  .info-timebar,
  .target-summary-panel,
  .content-grid,
  .settings-grid,
  .toolbar,
  .date-toolbar,
  .kpi-grid,
  .form-grid,
  .inline-form,
  .user-form,
  .target-editor,
  .target-period-toolbar,
  .account-editor,
  .profile-layout,
  .profile-form,
  .lead-detail-layout,
  .lead-detail-grid,
  .lead-address-grid,
  .wa-copy-layout,
  .wa-preview-modal-body,
  .inline-form.two-columns {
    grid-template-columns: 1fr;
  }

  .wa-preview-modal-body {
    max-height: calc(100vh - 150px);
    overflow: auto;
  }

  .wa-preview-send-panel {
    border-top: 1px solid var(--line);
    border-right: 0;
  }

  .lead-comment-tools {
    grid-template-columns: 1fr;
  }

  .lead-comment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .lead-detail-hero {
    align-items: stretch;
    flex-direction: column;
  }

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

  .pipeline-board {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  .pipeline-column {
    min-height: 320px;
  }

  .timeline-list::before {
    left: 24px;
  }

  .timeline-item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .timeline-marker span {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .timeline-head {
    flex-direction: column;
    gap: 4px;
  }

  .whatsapp-toolbar,
  .template-form,
  .whatsapp-template-card,
  .followup-reminder-grid,
  .followup-guide-card,
  .followup-modal-guide-card,
  .wa-template-grid {
    grid-template-columns: 1fr;
  }

  .followup-guide-meta {
    justify-items: start;
    text-align: left;
  }

  .template-form {
    padding: 24px;
  }

  #waTemplateModal .template-form {
    padding: 24px;
  }

  .template-form .modal-actions {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .wa-copy-layout {
    min-height: 0;
  }

  .wa-funnel-infographic {
    padding: 14px;
  }

  .wa-funnel-phase-steps {
    grid-template-columns: 1fr;
  }

  .wa-funnel-phase-steps::before {
    left: 31px;
    right: auto;
    top: 20px;
    bottom: 20px;
    width: 3px;
    height: auto;
  }

  .wa-template-workspace {
    padding: 18px;
  }

  .wa-category-sidebar {
    position: static;
  }

  .leads-toolbar {
    grid-template-columns: 1fr;
  }

  .leads-toolbar .search-box {
    min-width: 0;
  }

  .table-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .pagination-controls {
    justify-content: space-between;
  }
}


.field-help { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }


/* Multi-client Meta Ads management */
.meta-client-panel,
.meta-ad-library-panel {
  margin-bottom: 18px;
}

.meta-client-table {
  min-width: 1180px;
}

.meta-ad-library-table {
  min-width: 1080px;
}

.meta-client-table small,
.meta-ad-library-table small {
  color: var(--muted);
}

.meta-client-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.meta-client-status.is-active {
  color: #087269;
  background: #e6f8f4;
}

.meta-client-status.is-paused {
  color: #687985;
  background: #edf2f4;
}

.meta-client-status.is-error {
  color: #a13a35;
  background: #fff0ef;
}

.mono-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.meta-ad-library-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(280px, 1fr);
  margin-bottom: 14px;
}

.meta-ad-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}

.meta-ad-cell img,
.meta-ad-thumb-placeholder {
  width: 74px;
  height: 52px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 8px;
  background: #e8f0f2;
}

.meta-ad-thumb-placeholder {
  display: grid;
  place-items: center;
  color: #8aa0a8;
}

.meta-ad-cell strong,
.meta-ad-cell small {
  display: block;
}

.portal-visibility-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  color: #697b84;
  background: #edf2f4;
  border: 0;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
}

.portal-visibility-button.is-visible {
  color: #087269;
  background: #e4f8f3;
}

.portal-visibility-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.meta-portal-share-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 13px;
  background: #f2f9f8;
  border: 1px solid #d3eae6;
  border-radius: 12px;
}

.meta-portal-share-field label {
  margin: 0;
}

@media (max-width: 850px) {
  .meta-ad-library-toolbar,
  .meta-portal-share-field {
    grid-template-columns: 1fr;
  }
}

/* Premium Meta Ads workspace: performance report + client portal tabs */
#metaAdsView {
  --meta-navy: #062f43;
  --meta-navy-deep: #042536;
  --meta-teal: #0f9d91;
  --meta-teal-soft: #e7f8f5;
  --meta-surface: #ffffff;
  --meta-border: #dce8ec;
  --meta-muted: #68808b;
}

.meta-report-hero-premium {
  position: relative;
  align-items: center;
  min-height: 210px;
  padding: 34px 36px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(67, 224, 199, 0.22), transparent 30%),
    linear-gradient(118deg, var(--meta-navy-deep) 0%, #075060 54%, #0c968b 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  box-shadow: 0 24px 55px rgba(6, 47, 67, 0.18);
}

.meta-report-hero-premium::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -135px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, 0.025), 0 0 0 110px rgba(255, 255, 255, 0.018);
  pointer-events: none;
}

.meta-report-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.meta-report-hero-premium h2 {
  max-width: 720px;
  margin: 14px 0 10px;
  color: #fff;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.meta-report-hero-premium p {
  max-width: 700px;
  color: rgba(225, 245, 247, 0.78);
  font-size: 14px;
  line-height: 1.65;
}

.meta-report-hero-premium .meta-report-actions {
  position: relative;
  z-index: 1;
  max-width: 440px;
}

.meta-report-hero-premium .ghost-button,
.meta-report-hero-premium .primary-button {
  min-height: 43px;
  border-radius: 12px;
  font-weight: 600;
}

.meta-report-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--meta-border);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(24, 67, 82, 0.07);
}

.meta-report-tab {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 14px 16px;
  color: #52707c;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: 160ms ease;
}

.meta-report-tab > i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #48818a;
  background: #edf6f7;
  border-radius: 11px;
  font-size: 18px;
}

.meta-report-tab span,
.meta-report-tab strong,
.meta-report-tab small {
  display: block;
  min-width: 0;
}

.meta-report-tab strong {
  margin-bottom: 3px;
  color: #173f50;
  font-size: 13px;
}

.meta-report-tab small {
  color: #7b9099;
  font-size: 10px;
}

.meta-report-tab:hover {
  background: #f5fafb;
}

.meta-report-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #073e53, #0e8f88);
  border-color: rgba(14, 143, 136, 0.24);
  box-shadow: 0 10px 24px rgba(6, 85, 94, 0.17);
}

.meta-report-tab.active > i {
  color: #d9fffa;
  background: rgba(255, 255, 255, 0.12);
}

.meta-report-tab.active strong {
  color: #fff;
}

.meta-report-tab.active small {
  color: rgba(230, 255, 251, 0.72);
}

.meta-report-tab-panel {
  display: none;
}

.meta-report-tab-panel.active {
  display: block;
  animation: metaPanelIn 180ms ease-out;
}

@keyframes metaPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.meta-report-toolbar-premium {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  padding: 18px;
  background: #fff;
  border: 1px solid var(--meta-border);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(31, 73, 88, 0.07);
}

.meta-report-toolbar-premium .meta-report-period-note {
  grid-column: 1 / -1;
  justify-content: flex-start;
  min-height: auto;
  padding-top: 2px;
  color: #6d858f;
}

.meta-report-toolbar-premium .meta-report-period-note i {
  color: var(--meta-teal);
}

#metaAdsView .toolbar label > span {
  color: #68818c;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#metaAdsView .toolbar input,
#metaAdsView .toolbar select {
  min-height: 44px;
  background: #f9fbfc;
  border-color: #d6e4e8;
  border-radius: 11px;
}

.meta-report-kpis {
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: 13px;
}

.meta-report-kpis article {
  min-height: 142px;
  padding: 19px;
  background: linear-gradient(180deg, #fff, #fbfdfd);
  border: 1px solid var(--meta-border);
  border-radius: 17px;
  box-shadow: 0 12px 30px rgba(22, 70, 87, 0.065);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.meta-report-kpis article:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(22, 70, 87, 0.1);
}

.meta-report-kpis i {
  width: 38px;
  height: 38px;
  color: #0b9187;
  background: #e5f8f4;
  border: 1px solid #d0f0ea;
  border-radius: 11px;
}

.meta-report-kpis strong {
  margin: 8px 0 5px;
  color: #082f44;
  font-size: 23px;
  letter-spacing: -0.03em;
}

.meta-creative-panel,
.meta-campaign-panel,
.meta-funnel-panel,
.meta-client-panel,
.meta-ad-library-panel {
  border: 1px solid var(--meta-border);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(26, 70, 86, 0.07);
}

.meta-creative-panel {
  margin-bottom: 18px;
  overflow: hidden;
}

.meta-creative-heading {
  align-items: center;
  padding-bottom: 4px;
}

.meta-creative-heading h2,
.meta-funnel-panel h2,
.meta-campaign-panel h2,
.meta-client-panel h2,
.meta-ad-library-panel h2,
.meta-portal-intro h2 {
  margin: 4px 0 5px;
  color: #0a3448;
  letter-spacing: -0.02em;
}

.panel-label {
  color: #0c9288;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.meta-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: #08776f;
  background: #e9faf6;
  border: 1px solid #cbeee7;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.meta-creative-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 8px;
}

.meta-creative-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce8ec;
  border-radius: 17px;
  box-shadow: 0 12px 28px rgba(27, 72, 88, 0.075);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.meta-creative-card:hover {
  transform: translateY(-3px);
  border-color: #b9ddd8;
  box-shadow: 0 20px 40px rgba(27, 72, 88, 0.12);
}

.meta-creative-card.is-featured {
  border-color: #72cfc3;
  box-shadow: 0 20px 42px rgba(9, 145, 133, 0.15);
}

.meta-creative-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(145deg, #e8f0f2, #d9e7ea);
}

.meta-creative-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.meta-creative-card:hover .meta-creative-media img {
  transform: scale(1.025);
}

.meta-creative-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%;
  height: 100%;
  color: #7f9aa4;
  background:
    radial-gradient(circle at 25% 20%, rgba(14, 165, 164, 0.13), transparent 30%),
    linear-gradient(145deg, #edf4f5, #dfeaed);
}

.meta-creative-placeholder i {
  margin-bottom: 7px;
  font-size: 30px;
}

.meta-creative-placeholder span {
  font-size: 10px;
  font-weight: 600;
}

.meta-creative-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-creative-status,
.meta-creative-shared,
.meta-creative-rank {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.meta-creative-status {
  color: #475d67;
  background: rgba(242, 247, 248, 0.92);
}

.meta-creative-status.is-active {
  color: #076f67;
  background: rgba(223, 250, 244, 0.94);
}

.meta-creative-shared {
  color: #2a5e85;
  background: rgba(229, 244, 255, 0.94);
}

.meta-creative-rank {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: #634700;
  background: rgba(255, 242, 184, 0.95);
  box-shadow: 0 8px 20px rgba(91, 65, 0, 0.14);
}

.meta-creative-body {
  padding: 17px;
}

.meta-creative-client {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.meta-creative-client span {
  color: #0a857c;
  font-size: 10px;
  font-weight: 600;
}

.meta-creative-client small {
  overflow: hidden;
  color: #81949c;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-creative-campaign {
  display: block;
  overflow: hidden;
  color: #78909a;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-creative-body h3 {
  display: -webkit-box;
  min-height: 42px;
  margin: 8px 0 6px;
  overflow: hidden;
  color: #0b3347;
  font-size: 15px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.meta-creative-body > p {
  display: -webkit-box;
  min-height: 47px;
  margin: 0 0 14px;
  overflow: hidden;
  color: #708690;
  font-size: 10px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.meta-creative-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.meta-creative-metrics > div {
  min-width: 0;
  padding: 10px;
  background: #f6fafb;
  border: 1px solid #e3edef;
  border-radius: 10px;
}

.meta-creative-metrics span,
.meta-creative-metrics strong {
  display: block;
}

.meta-creative-metrics span {
  margin-bottom: 3px;
  color: #82959d;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.meta-creative-metrics strong {
  overflow: hidden;
  color: #153f50;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-creative-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  margin-top: 12px;
  color: #708791;
  border-top: 1px solid #e8eff1;
  font-size: 9px;
}

.meta-creative-footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.meta-creative-footer i {
  color: #0d948a;
}

.meta-creative-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 32px;
  color: #728892;
  text-align: center;
  background: linear-gradient(180deg, #f8fbfc, #f3f8f9);
  border: 1px dashed #cddde1;
  border-radius: 16px;
}

.meta-creative-empty i {
  margin-bottom: 12px;
  color: #7fb4b1;
  font-size: 38px;
}

.meta-creative-empty strong {
  color: #244c5b;
}

.meta-creative-empty p {
  max-width: 460px;
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.meta-funnel {
  grid-template-columns: repeat(11, minmax(28px, auto));
  padding-top: 14px;
}

.meta-funnel-step {
  min-width: 138px;
  background: linear-gradient(180deg, #f1fbf9, #fff);
  border-color: #d4e9e7;
  border-radius: 14px;
}

.meta-portal-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  margin-bottom: 18px;
  background:
    radial-gradient(circle at 90% 20%, rgba(15, 157, 145, 0.12), transparent 28%),
    #fff;
  border: 1px solid var(--meta-border);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(26, 70, 86, 0.07);
}

.meta-portal-intro > div {
  max-width: 760px;
}

.meta-portal-intro p {
  margin: 0;
  color: #708691;
  font-size: 12px;
  line-height: 1.6;
}

.meta-client-panel,
.meta-ad-library-panel {
  margin-bottom: 18px;
}

.meta-client-table thead th,
.meta-ad-library-table thead th,
.meta-report-table thead th {
  color: #5d7782;
  background: #f3f8f9;
  border-bottom-color: #dce8ec;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.meta-client-table tbody tr:hover,
.meta-ad-library-table tbody tr:hover,
.meta-report-table tbody tr:hover {
  background: #f7fbfb;
}

@media (max-width: 1500px) {
  .meta-report-kpis {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }

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

@media (max-width: 1180px) {
  .meta-report-hero-premium {
    align-items: stretch;
    flex-direction: column;
  }

  .meta-report-hero-premium .meta-report-actions {
    max-width: none;
    justify-content: flex-start;
  }

  .meta-report-toolbar-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 760px) {
  .meta-report-hero-premium {
    min-height: auto;
    padding: 24px;
    border-radius: 17px;
  }

  .meta-report-hero-premium h2 {
    font-size: 27px;
  }

  .meta-report-actions > button {
    flex: 1 1 150px;
  }

  .meta-report-tabs,
  .meta-report-toolbar-premium,
  .meta-report-kpis,
  .meta-creative-grid {
    grid-template-columns: 1fr;
  }

  .meta-report-tab {
    padding: 12px;
  }

  .meta-creative-heading,
  .meta-portal-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .meta-live-badge {
    align-self: flex-start;
  }

  .meta-portal-intro .primary-button {
    width: 100%;
  }

  .meta-creative-media {
    aspect-ratio: 16 / 9;
  }
}

/* Meta Ads compact creative + delivery status filter */
.meta-report-toolbar-premium {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.meta-ad-library-toolbar-status {
  grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 0.8fr) minmax(280px, 1.8fr);
}

.meta-creative-grid-compact {
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 12px;
}

.meta-creative-card-compact {
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(27, 72, 88, 0.065);
}

.meta-creative-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(27, 72, 88, 0.11);
}

.meta-creative-card-compact .meta-creative-media {
  aspect-ratio: 16 / 9;
  min-height: 104px;
  max-height: 128px;
}

.meta-creative-card-compact .meta-creative-badges {
  top: 8px;
  left: 8px;
  gap: 4px;
}

.meta-creative-card-compact .meta-creative-status,
.meta-creative-card-compact .meta-creative-shared {
  padding: 4px 6px;
  font-size: 7px;
}

.meta-creative-card-compact .meta-creative-body {
  padding: 12px;
}

.meta-creative-client-line {
  display: block;
  overflow: hidden;
  color: #69828d;
  font-size: 8px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-creative-card-compact .meta-creative-body h3 {
  min-height: 36px;
  margin: 6px 0 9px;
  font-size: 12px;
  line-height: 1.45;
}

.meta-creative-compact-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 10px;
}

.meta-creative-compact-metrics span {
  min-width: 0;
  padding: 6px 4px;
  overflow: hidden;
  color: #82959d;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #f6fafb;
  border: 1px solid #e3edef;
  border-radius: 8px;
  font-size: 7px;
  font-weight: 600;
  text-transform: uppercase;
}

.meta-creative-compact-metrics strong {
  display: block;
  margin-bottom: 2px;
  overflow: hidden;
  color: #153f50;
  font-size: 9px;
  text-overflow: ellipsis;
  text-transform: none;
}

.meta-creative-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  color: #087d76;
  text-decoration: none;
  background: #eaf9f6;
  border: 1px solid #ccece5;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 600;
}

.meta-creative-link:hover {
  color: #045c58;
  background: #def5f0;
}

.meta-creative-link.is-disabled {
  color: #8a9aa1;
  background: #f3f6f7;
  border-color: #e1e8ea;
  cursor: not-allowed;
}

.meta-creative-status.status-active {
  color: #087269;
  background: rgba(221, 250, 243, 0.95);
}

.meta-creative-status.status-scheduled,
.meta-creative-status.status-pending_review {
  color: #7d5700;
  background: rgba(255, 244, 202, 0.96);
}

.meta-creative-status.status-disapproved,
.meta-creative-status.status-not_delivering {
  color: #a23c35;
  background: rgba(255, 231, 228, 0.96);
}

.meta-creative-status.status-completed,
.meta-creative-status.status-recently_completed {
  color: #315f88;
  background: rgba(229, 242, 255, 0.96);
}

.meta-creative-status.status-inactive,
.meta-creative-status.status-deleted {
  color: #5f6e75;
  background: rgba(237, 242, 244, 0.96);
}

.meta-ad-library-table .meta-creative-status {
  position: static;
  padding: 5px 8px;
  font-size: 8px;
  backdrop-filter: none;
}

@media (max-width: 1500px) {
  .meta-creative-grid-compact {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
  }
}

@media (max-width: 1180px) {
  .meta-report-toolbar-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-ad-library-toolbar-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-ad-library-toolbar-status .search-box {
    grid-column: 1 / -1;
  }

  .meta-creative-grid-compact {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
  }
}

@media (max-width: 850px) {
  .meta-creative-grid-compact {
    grid-template-columns: repeat(2, minmax(145px, 1fr));
  }
}

@media (max-width: 560px) {
  .meta-report-toolbar-premium,
  .meta-ad-library-toolbar-status,
  .meta-creative-grid-compact {
    grid-template-columns: 1fr;
  }

  .meta-ad-library-toolbar-status .search-box {
    grid-column: auto;
  }

  .meta-creative-card-compact .meta-creative-media {
    max-height: 170px;
  }
}


/* Exact Meta Marketing API effective_status badges */
.meta-creative-status.status-active {
  color: #087269;
  background: #e4f8f3;
  border-color: #bde9df;
}

.meta-creative-status.status-in-process,
.meta-creative-status.status-pending-review,
.meta-creative-status.status-preapproved {
  color: #155e75;
  background: #ecfeff;
  border-color: #bae6fd;
}

.meta-creative-status.status-with-issues,
.meta-creative-status.status-disapproved,
.meta-creative-status.status-pending-billing-info {
  color: #b42318;
  background: #fff1f0;
  border-color: #fecaca;
}

.meta-creative-status.status-paused,
.meta-creative-status.status-adset-paused,
.meta-creative-status.status-campaign-paused {
  color: #8a5a00;
  background: #fff8e7;
  border-color: #f6d98b;
}

.meta-creative-status.status-archived,
.meta-creative-status.status-deleted,
.meta-creative-status.status-unknown {
  color: #64748b;
  background: #f1f5f9;
  border-color: #d8e0ea;
}

/* Campaign hierarchy + customer success matrix */
.meta-success-panel,
.meta-campaign-panel {
  margin-bottom: 18px;
}

.meta-success-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.meta-success-card {
  min-width: 0;
  padding: 17px;
  background: linear-gradient(180deg, #fbfefe 0%, #f6fbfb 100%);
  border: 1px solid #dbeaec;
  border-radius: 15px;
}

.meta-success-card-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding-bottom: 13px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5eff1;
}

.meta-success-card-head > i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #078a81;
  background: #e4f8f3;
  border-radius: 10px;
}

.meta-success-card h3 {
  margin: 1px 0 4px;
  color: #173e4f;
  font-size: 13px;
}

.meta-success-card p {
  margin: 0;
  color: #758b94;
  font-size: 9px;
  line-height: 1.5;
}

.meta-success-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.meta-success-metrics > div {
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #e3edef;
  border-radius: 10px;
}

.meta-success-metrics span,
.meta-success-metrics strong,
.meta-success-metrics small {
  display: block;
}

.meta-success-metrics span {
  color: #78909a;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.meta-success-metrics strong {
  margin: 4px 0 3px;
  overflow: hidden;
  color: #123f50;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-success-metrics small {
  min-height: 24px;
  color: #8a9ca3;
  font-size: 7px;
  line-height: 1.45;
}

.meta-success-diagnostic {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  color: #45646f;
  background: #eef8f7;
  border: 1px solid #d2e9e6;
  border-radius: 12px;
  font-size: 10px;
}

.meta-success-diagnostic span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.meta-success-diagnostic i {
  color: #078a81;
}

.meta-success-diagnostic.is-empty {
  display: flex;
  grid-template-columns: none;
  align-items: center;
}

.meta-campaign-heading {
  align-items: flex-end;
}

.meta-campaign-groups {
  display: grid;
  gap: 11px;
}

.meta-campaign-group {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce9eb;
  border-radius: 15px;
  box-shadow: 0 7px 20px rgba(30, 74, 88, 0.045);
}

.meta-campaign-group[open] {
  border-color: #c9e2df;
  box-shadow: 0 12px 28px rgba(30, 74, 88, 0.075);
}

.meta-campaign-group > summary {
  display: grid;
  grid-template-columns: minmax(250px, 1.35fr) minmax(480px, 2fr) 22px;
  align-items: center;
  gap: 18px;
  min-height: 86px;
  padding: 14px 17px;
  list-style: none;
  cursor: pointer;
  background: linear-gradient(180deg, #fff 0%, #fbfdfd 100%);
}

.meta-campaign-group > summary::-webkit-details-marker {
  display: none;
}

.meta-campaign-group[open] > summary {
  background: #f4faf9;
  border-bottom: 1px solid #dcebea;
}

.meta-campaign-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.meta-campaign-index {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #087b74;
  background: #e4f8f3;
  border: 1px solid #c4e9e1;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 600;
}

.meta-campaign-title > div {
  min-width: 0;
}

.meta-campaign-title h3 {
  margin: 0 0 5px;
  overflow: hidden;
  color: #143d4d;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-campaign-title p {
  margin: 0;
  overflow: hidden;
  color: #7b9098;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-campaign-summary-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(62px, 1fr));
  gap: 6px;
}

.meta-campaign-summary-metrics span {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #e1ecee;
  border-radius: 9px;
}

.meta-campaign-summary-metrics small,
.meta-campaign-summary-metrics strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-campaign-summary-metrics small {
  margin-bottom: 3px;
  color: #83969e;
  font-size: 7px;
  font-weight: 600;
  text-transform: uppercase;
}

.meta-campaign-summary-metrics strong {
  color: #163e4e;
  font-size: 10px;
}

.meta-campaign-chevron {
  color: #7c959e;
  transition: transform 0.2s ease;
}

.meta-campaign-group[open] .meta-campaign-chevron {
  transform: rotate(180deg);
}

.meta-campaign-body {
  padding: 14px 17px 16px;
}

.meta-campaign-body-head,
.meta-campaign-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.meta-campaign-body-head {
  margin-bottom: 10px;
}

.meta-campaign-body-head strong,
.meta-campaign-body-head small {
  display: block;
}

.meta-campaign-body-head strong {
  color: #214b5a;
  font-size: 11px;
}

.meta-campaign-body-head small,
.meta-campaign-body-head > span {
  color: #80959d;
  font-size: 8px;
}

.meta-campaign-body-head > span {
  padding: 5px 8px;
  background: #f0f6f7;
  border-radius: 999px;
  font-weight: 600;
}

.meta-campaign-ad-list {
  display: grid;
  gap: 7px;
}

.meta-campaign-ad-child {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 66px;
  padding: 8px;
  background: #fafcfc;
  border: 1px solid #e4edef;
  border-radius: 11px;
}

.meta-campaign-ad-child > img,
.meta-campaign-ad-placeholder {
  width: 72px;
  height: 48px;
  object-fit: cover;
  background: #e9f0f2;
  border-radius: 8px;
}

.meta-campaign-ad-placeholder {
  display: grid;
  place-items: center;
  color: #8ea2aa;
}

.meta-campaign-ad-copy {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(300px, 1.3fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.meta-campaign-ad-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.meta-campaign-ad-title > div {
  min-width: 0;
}

.meta-campaign-ad-title strong,
.meta-campaign-ad-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-campaign-ad-title strong {
  color: #173f4f;
  font-size: 10px;
}

.meta-campaign-ad-title small {
  margin-top: 4px;
  color: #84979f;
  font-size: 8px;
}

.meta-campaign-ad-title .meta-creative-status {
  position: static;
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 1px solid transparent;
  font-size: 7px;
  backdrop-filter: none;
}

.meta-campaign-ad-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(62px, 1fr));
  gap: 5px;
}

.meta-campaign-ad-metrics span {
  min-width: 0;
  color: #85979e;
  font-size: 7px;
  text-transform: uppercase;
}

.meta-campaign-ad-metrics strong {
  display: block;
  margin-bottom: 2px;
  overflow: hidden;
  color: #244b59;
  font-size: 9px;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.meta-campaign-ad-loading {
  color: #84979f;
  font-size: 8px;
}

.meta-campaign-ad-loading i {
  margin-right: 5px;
}

.meta-campaign-ad-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-campaign-ad-link,
.meta-campaign-portal-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #087b74;
  background: #e8f8f5;
  border: 1px solid #cceae5;
  border-radius: 8px;
  text-decoration: none;
}

.meta-campaign-ad-link:hover {
  color: #045d58;
  background: #dcf4ef;
}

.meta-campaign-ad-link.is-disabled {
  color: #8c9ba1;
  background: #f2f5f6;
  border-color: #e1e8ea;
}

.meta-campaign-portal-mark {
  color: #2563a6;
  background: #edf5ff;
  border-color: #d5e7fb;
}

.meta-campaign-no-ads {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px;
  color: #7d929a;
  background: #f7fafb;
  border: 1px dashed #d7e3e6;
  border-radius: 10px;
  font-size: 9px;
}

.meta-campaign-footer {
  padding-top: 11px;
  margin-top: 11px;
  color: #708891;
  border-top: 1px solid #e5edef;
  font-size: 8px;
}

.meta-campaign-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.meta-campaign-footer > span i {
  color: #078a81;
}

@media (max-width: 1400px) {
  .meta-success-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-campaign-group > summary {
    grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.8fr) 22px;
  }

  .meta-campaign-summary-metrics {
    grid-template-columns: repeat(3, minmax(70px, 1fr));
  }
}

@media (max-width: 1050px) {
  .meta-campaign-group > summary {
    grid-template-columns: 1fr 22px;
  }

  .meta-campaign-summary-metrics {
    grid-column: 1 / -1;
  }

  .meta-campaign-chevron {
    grid-column: 2;
    grid-row: 1;
  }

  .meta-campaign-ad-copy {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .meta-success-matrix,
  .meta-success-diagnostic {
    grid-template-columns: 1fr;
  }

  .meta-campaign-group > summary {
    gap: 10px;
    padding: 12px;
  }

  .meta-campaign-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-campaign-body {
    padding: 12px;
  }

  .meta-campaign-ad-child {
    grid-template-columns: 58px minmax(0, 1fr) auto;
  }

  .meta-campaign-ad-child > img,
  .meta-campaign-ad-placeholder {
    width: 58px;
    height: 46px;
  }

  .meta-campaign-ad-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-campaign-body-head,
  .meta-campaign-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* 2026-08-04 — Funnel-first hierarchy and readable statistics */
.meta-funnel-panel-priority {
  position: relative;
  margin: 0 0 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(14, 165, 164, 0.10), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
  border-color: #cfe4e5;
  box-shadow: 0 16px 38px rgba(22, 69, 82, 0.08);
}

.meta-funnel-panel-priority::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #0ea5a4, #08746f);
}

.meta-funnel-heading {
  align-items: flex-end;
  margin-bottom: 18px;
}

.meta-funnel-heading h2,
.meta-success-panel .section-heading h2,
.meta-campaign-panel .section-heading h2 {
  margin-top: 4px;
  color: #123b4b;
  font-size: clamp(20px, 1.45vw, 26px);
  letter-spacing: -0.025em;
}

.meta-funnel-heading p,
.meta-success-panel .section-heading p,
.meta-campaign-panel .section-heading p {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.6;
}

.meta-funnel {
  display: flex;
  align-items: stretch;
  gap: 9px;
  padding: 0 2px 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.meta-funnel > i {
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  color: #7aa6a5;
  font-size: 16px;
}

.meta-funnel-step {
  position: relative;
  flex: 1 0 145px;
  min-width: 145px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 17px 16px;
  text-align: left;
  background: #fff;
  border: 1px solid #d8e8e9;
  border-radius: 14px;
  box-shadow: 0 7px 18px rgba(25, 72, 84, 0.055);
}

.meta-funnel-step::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #0ea5a4, #5eead4);
  border-radius: 999px 999px 0 0;
  opacity: 0.85;
}

.meta-funnel-step span {
  color: #607c86;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.075em;
}

.meta-funnel-step strong {
  margin: 8px 0 7px;
  color: #0e3949;
  font-size: clamp(26px, 2vw, 34px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.meta-funnel-step small {
  color: #6f8790;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.meta-report-kpis {
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 13px;
  margin-bottom: 20px;
}

.meta-report-kpis article {
  min-height: 148px;
  padding: 19px;
  border-radius: 16px;
}

.meta-report-kpis i {
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  font-size: 17px;
}

.meta-report-kpis span {
  color: #667f89;
  font-size: 10px;
  letter-spacing: 0.07em;
}

.meta-report-kpis strong {
  margin: 8px 0 7px;
  color: #0f394a;
  font-size: clamp(23px, 1.65vw, 31px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.meta-report-kpis small {
  color: #758b94;
  font-size: 10px;
  line-height: 1.45;
}

.meta-success-card {
  padding: 19px;
}

.meta-success-card h3 {
  font-size: 15px;
}

.meta-success-card p {
  font-size: 10px;
}

.meta-success-metrics > div {
  min-height: 88px;
  padding: 12px;
}

.meta-success-metrics span {
  font-size: 9px;
}

.meta-success-metrics strong {
  margin: 7px 0 5px;
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.15;
}

.meta-success-metrics small {
  min-height: 28px;
  font-size: 9px;
  line-height: 1.45;
}

.meta-success-diagnostic {
  padding: 15px 16px;
  font-size: 11px;
  line-height: 1.55;
}

.meta-campaign-group > summary {
  min-height: 102px;
  padding: 17px 19px;
}

.meta-campaign-title h3 {
  margin-bottom: 6px;
  font-size: 15px;
}

.meta-campaign-title p {
  font-size: 10px;
}

.meta-campaign-summary-metrics span {
  min-height: 58px;
  padding: 10px;
}

.meta-campaign-summary-metrics small {
  margin-bottom: 5px;
  font-size: 8px;
}

.meta-campaign-summary-metrics strong {
  font-size: 13px;
}

.meta-campaign-body-head strong {
  font-size: 13px;
}

.meta-campaign-body-head small,
.meta-campaign-body-head > span {
  font-size: 9px;
}

.meta-campaign-ad-child {
  min-height: 76px;
  padding: 10px;
}

.meta-campaign-ad-title strong {
  font-size: 12px;
}

.meta-campaign-ad-title small {
  font-size: 9px;
}

.meta-campaign-ad-metrics span {
  font-size: 8px;
}

.meta-campaign-ad-metrics strong {
  margin-bottom: 4px;
  font-size: 12px;
}

.meta-campaign-footer {
  font-size: 10px;
}

@media (max-width: 1500px) {
  .meta-report-kpis {
    grid-template-columns: repeat(4, minmax(165px, 1fr));
  }
}

@media (max-width: 900px) {
  .meta-funnel-panel-priority {
    padding: 18px;
  }

  .meta-funnel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .meta-report-kpis strong {
    font-size: 27px;
  }
}

@media (max-width: 560px) {
  .meta-report-kpis {
    grid-template-columns: 1fr;
  }

  .meta-report-kpis article {
    min-height: 128px;
  }

  .meta-funnel-step {
    flex-basis: 138px;
    min-width: 138px;
  }

  .meta-success-metrics strong {
    font-size: 18px;
  }
}


/* Client identity column — clearer hierarchy and stable width */
.meta-client-table {
  min-width: 1260px;
  table-layout: fixed;
}

.meta-client-table .meta-client-col-identity { width: 270px; }
.meta-client-table .meta-client-col-account { width: 165px; }
.meta-client-table .meta-client-col-status { width: 190px; }
.meta-client-table .meta-client-col-ads { width: 110px; }
.meta-client-table .meta-client-col-portal { width: 160px; }
.meta-client-table .meta-client-col-link { width: 180px; }
.meta-client-table .meta-client-col-actions { width: 220px; }

.meta-client-table th,
.meta-client-table td {
  padding: 17px 16px;
  vertical-align: middle;
}

.meta-client-table th:first-child,
.meta-client-table td:first-child {
  padding-left: 22px;
}

.meta-client-identity-cell {
  min-width: 270px;
}

.meta-client-identity {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.meta-client-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: #087269;
  background: linear-gradient(145deg, #e8faf7, #d7f3ef);
  border: 1px solid #bfe9e1;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 7px 18px rgba(8, 114, 105, 0.08);
}

.meta-client-identity-copy {
  display: block;
  min-width: 0;
}

.meta-client-name {
  display: block;
  margin: 0 0 7px;
  color: #113548;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.meta-client-project-label {
  display: block;
  margin-bottom: 2px;
  color: #8aa0aa;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.meta-client-project-name {
  display: block;
  color: #617a85 !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

@media (max-width: 900px) {
  .meta-client-table {
    min-width: 1160px;
  }

  .meta-client-table .meta-client-col-identity,
  .meta-client-identity-cell {
    width: 245px;
    min-width: 245px;
  }
}


/* Leads workspace header — professional hierarchy */
#leadsView {
  --lead-accent: #0b8f8f;
  --lead-accent-dark: #087477;
  --lead-surface: #ffffff;
  --lead-border: #dce8ec;
}

.lead-workspace-header {
  overflow: hidden;
  border: 1px solid var(--lead-border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
  box-shadow: 0 18px 46px rgba(20, 55, 72, 0.08);
}

.lead-workspace-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid #edf2f4;
  background:
    radial-gradient(circle at 88% 10%, rgba(43, 155, 155, 0.10), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f8fcfc 100%);
}

.lead-workspace-copy {
  min-width: 0;
}

.lead-workspace-kicker,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--lead-accent-dark);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.lead-workspace-copy h2 {
  margin: 8px 0 6px;
  color: #12364a;
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.lead-workspace-copy p {
  max-width: 720px;
  margin: 0;
  color: #6e838e;
  font-size: 13px;
  line-height: 1.6;
}

.lead-primary-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 142px;
  min-height: 46px !important;
  padding-inline: 18px;
  box-shadow: 0 12px 24px rgba(11, 143, 143, 0.18);
}

#leadsView .leads-toolbar {
  grid-template-columns: minmax(260px, 1.65fr) repeat(5, minmax(135px, 1fr));
  gap: 13px;
  padding: 18px 24px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

#leadsView .leads-toolbar label > span {
  margin-bottom: 1px;
  color: #58717e;
  font-size: 9px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

#leadsView .leads-toolbar input,
#leadsView .leads-toolbar select {
  min-height: 45px;
  border-color: #d8e5e9;
  background: #fbfcfd;
}

#leadsView .leads-toolbar .search-box input {
  padding-left: 14px;
}

.lead-priority-panel {
  margin: 0;
  border: 0;
  border-top: 1px solid #edf2f4;
  border-radius: 0;
  background: #f8fbfb;
  box-shadow: none;
}

.lead-priority-panel .followup-assistant-compact {
  display: grid;
  grid-template-columns: minmax(390px, 0.78fr) minmax(0, 1.5fr);
  gap: 22px;
  padding: 18px 24px 20px;
}

.lead-priority-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 10px;
}

.lead-priority-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid #dfe9ec;
  border-radius: 13px;
  background: #fff;
}

.lead-priority-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf7f7;
  color: #0b8586;
  font-size: 15px;
}

.lead-priority-card strong,
.lead-priority-card small {
  display: block;
}

.lead-priority-card strong {
  color: #15384a;
  font-size: 19px;
  line-height: 1;
}

.lead-priority-card small {
  margin-top: 5px;
  color: #7a8d97;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
}

.lead-priority-card.is-danger .lead-priority-icon {
  background: #fff0f1;
  color: #dc3545;
}

.lead-priority-card.is-today .lead-priority-icon {
  background: #fff7e7;
  color: #c97a00;
}

.lead-priority-card.is-unscheduled .lead-priority-icon {
  background: #f1f4f6;
  color: #607481;
}

.lead-priority-card.is-active .lead-priority-icon {
  background: #e9f8f4;
  color: #0a8d73;
}

.lead-priority-focus {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 22px;
  border-left: 1px solid #dfe8eb;
}

.lead-priority-focus-copy {
  min-width: 0;
  flex: 1;
}

.lead-priority-focus-copy > span {
  display: block;
  margin-bottom: 7px;
  color: #6b818d;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.lead-priority-focus .reminder-ticker {
  padding: 0;
  border: 0;
  background: transparent;
}

.lead-priority-focus .reminder-ticker.is-compact {
  max-width: none;
}

.lead-priority-focus .reminder-ticker-track span {
  color: #0b8586;
}

.lead-priority-focus .reminder-ticker-track strong {
  color: #18394a;
  font-size: 13px;
}

.lead-priority-focus .reminder-ticker-track p {
  color: #71858f;
  font-size: 11px;
}

.lead-reminder-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.lead-database-heading {
  min-height: 88px !important;
  align-items: center !important;
  gap: 22px;
  padding: 18px 20px !important;
}

.lead-database-title h2 {
  margin: 4px 0 3px;
}

.lead-database-title p {
  margin: 0;
}

.lead-table-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.lead-data-actions {
  justify-content: flex-end;
}

.lead-data-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  white-space: nowrap;
}

.lead-data-actions .ghost-button {
  background: #fff;
}

.lead-data-actions .danger-button {
  box-shadow: none;
}

.lead-database-heading .page-size-control {
  min-width: 92px;
}

.lead-database-heading .page-size-control select {
  min-height: 40px;
}

@media (max-width: 1320px) {
  #leadsView .leads-toolbar {
    grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(135px, 1fr));
  }

  .lead-priority-panel .followup-assistant-compact {
    grid-template-columns: 1fr;
  }

  .lead-priority-focus {
    padding-top: 15px;
    padding-left: 0;
    border-top: 1px solid #dfe8eb;
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .lead-workspace-intro,
  .lead-database-heading,
  .lead-table-controls,
  .lead-priority-focus {
    align-items: stretch !important;
    flex-direction: column;
  }

  .lead-primary-cta,
  .lead-reminder-button {
    width: 100%;
  }

  #leadsView .leads-toolbar,
  .lead-priority-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #leadsView .leads-toolbar .search-box {
    grid-column: 1 / -1;
  }

  .lead-table-controls,
  .lead-data-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .lead-workspace-intro,
  #leadsView .leads-toolbar,
  .lead-priority-panel .followup-assistant-compact {
    padding-right: 16px;
    padding-left: 16px;
  }

  #leadsView .leads-toolbar,
  .lead-priority-metrics {
    grid-template-columns: 1fr;
  }

  #leadsView .leads-toolbar .search-box {
    grid-column: auto;
    min-width: 0;
  }

  .lead-data-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lead-data-actions button,
  .lead-database-heading .page-size-control {
    width: 100%;
  }
}


/* =========================================================
   Lead detail activity & comments — natural, unclipped flow
   ========================================================= */
.lead-detail-panel {
  overflow: visible;
}

.lead-detail-layout {
  align-items: start;
}

.lead-detail-workstream {
  display: grid;
  grid-template-rows: none;
  gap: 18px;
  min-width: 0;
  min-height: 0;
}

.lead-workstream-card {
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 1px solid #dce7ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 41, 62, 0.055);
}

.lead-detail-timeline,
.lead-comments-panel {
  overflow: visible;
}

.lead-detail-timeline {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.lead-comments-panel {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 16px;
  padding: 18px;
}

.lead-workstream-heading {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.lead-workstream-heading-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eaf8f7;
  color: #078a81;
  font-size: 17px;
}

.lead-workstream-heading h2,
.lead-workstream-heading p {
  margin: 0;
}

.lead-workstream-heading h2 {
  color: #113548;
  font-size: 17px;
  line-height: 1.25;
}

.lead-workstream-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.detail-history-list,
.lead-comment-list {
  min-height: 0;
  max-height: 430px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 2px 8px 2px 2px;
  scroll-behavior: smooth;
}

.detail-history-list:focus-visible,
.lead-comment-list:focus-visible {
  outline: 2px solid rgba(13, 110, 253, 0.35);
  outline-offset: 4px;
  border-radius: 8px;
}

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

.detail-history-item {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e3ebf0;
  border-radius: 11px;
  background: #fbfdfe;
}

.detail-history-item .history-item-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

.detail-history-item p {
  margin: 8px 0 6px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.detail-history-item small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  white-space: normal;
}

.lead-comment-list {
  display: grid;
  align-content: start;
  gap: 14px;
}

.lead-comment-item {
  min-width: 0;
}

.lead-comment-bubble {
  min-width: 0;
  gap: 8px;
  padding: 13px 14px;
  border-radius: 12px;
}

.lead-comment-item.is-latest .lead-comment-bubble {
  border-color: #a8ded8;
  box-shadow: 0 0 0 3px rgba(14, 165, 164, 0.07);
}

.lead-comment-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

.lead-comment-author {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.lead-comment-author strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lead-latest-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 2px 7px;
  background: #e6f8f4;
  color: #087269;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lead-comment-head small {
  flex: 0 0 auto;
  line-height: 1.4;
  white-space: normal;
}

.lead-comment-bubble p {
  white-space: pre-wrap;
  word-break: break-word;
}

.lead-reply-quote span,
.lead-reply-preview p {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lead-comment-form {
  position: relative;
  z-index: 2;
  margin: 0 -2px -2px;
  padding: 16px 2px 2px;
  background: #fff;
}

.lead-comment-form textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .lead-detail-layout {
    grid-template-columns: 1fr;
  }

  .lead-detail-summary {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .lead-detail-layout {
    padding: 0 12px 12px;
  }

  .lead-detail-timeline,
  .lead-comments-panel {
    padding: 14px;
  }

  .detail-history-list,
  .lead-comment-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .lead-comment-item,
  .lead-comment-item.own-comment {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .lead-comment-item.own-comment .lead-comment-avatar {
    grid-column: 1;
    grid-row: 1;
  }

  .lead-comment-item.own-comment .lead-comment-bubble {
    grid-column: 2;
    grid-row: 1;
  }

  .comment-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
}


/* Meta Ads PDF preview — modal-first print flow */
.meta-pdf-preview-dialog {
  width: min(1420px, calc(100vw - 32px));
  height: min(920px, calc(100vh - 32px));
  max-width: none;
  max-height: none;
  overflow: hidden;
}

.meta-pdf-preview-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  background: #eef4f6;
}

.meta-pdf-preview-heading {
  padding: 20px 24px;
  border-bottom: 1px solid #dce7eb;
}

.meta-pdf-preview-heading h2 {
  margin: 2px 0 4px;
}

.meta-pdf-preview-heading small {
  color: var(--muted);
}

.meta-pdf-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid #dce7eb;
}

.meta-pdf-preview-status,
.meta-pdf-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meta-pdf-preview-status {
  color: #58717a;
  font-size: 13px;
  font-weight: 600;
}

.meta-pdf-preview-status.is-ready { color: #087269; }
.meta-pdf-preview-status.is-error { color: #b43b35; }

.meta-pdf-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #c9d9df;
  border-top-color: #0e8c82;
  border-radius: 50%;
  animation: metaPdfSpin 0.8s linear infinite;
}

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

.meta-pdf-preview-frame-wrap {
  position: relative;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
}

.meta-pdf-preview-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 1px solid #ccdce2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 48, 65, 0.1);
}

.meta-pdf-preview-placeholder {
  position: absolute;
  inset: 16px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 30px;
  color: #607b85;
  text-align: center;
  background: linear-gradient(180deg, #f8fbfc, #eef5f6);
  border: 1px dashed #bdd1d7;
  border-radius: 12px;
}

.meta-pdf-preview-placeholder > i {
  color: #b43b35;
  font-size: 34px;
}

.meta-pdf-preview-placeholder strong {
  color: #173f50;
  font-size: 17px;
}

.meta-pdf-preview-placeholder p {
  max-width: 520px;
  margin: 0;
  font-size: 12px;
}

.meta-campaign-readonly {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #087269;
  font-size: 11px;
  font-weight: 600;
}

/* Detached source rendered by html2pdf. */
.meta-pdf-document {
  position: fixed;
  left: -20000px;
  top: 0;
  width: 1110px;
  padding: 0;
  color: #163847;
  background: #fff;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.45;
}

.meta-pdf-document * { box-sizing: border-box; }

.meta-pdf-document-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  color: #fff;
  background: linear-gradient(125deg, #073447, #087b75);
  border-radius: 12px;
}

.meta-pdf-document-header span {
  color: #aaf5e9;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.meta-pdf-document-header h1 {
  margin: 5px 0 3px;
  color: #fff;
  font-size: 28px;
  letter-spacing: -0.03em;
}

.meta-pdf-document-header p { margin: 0; color: #d3eceb; }
.meta-pdf-generated { min-width: 190px; text-align: right; }
.meta-pdf-generated small, .meta-pdf-generated strong { display: block; }
.meta-pdf-generated small { color: #aaf5e9; text-transform: uppercase; }
.meta-pdf-generated strong { margin-top: 4px; font-size: 11px; }

.meta-pdf-funnel-section,
.meta-pdf-success-section,
.meta-pdf-campaign-section {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #d9e7ea;
  border-radius: 10px;
  background: #fff;
  break-inside: avoid;
}

.meta-pdf-section-title span {
  color: #0b8279;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.meta-pdf-section-title h2 {
  margin: 3px 0 8px;
  color: #173f50;
  font-size: 18px;
}

.meta-pdf-section-title p { margin: -3px 0 10px; color: #71818c; }

.meta-pdf-funnel {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.meta-pdf-funnel article {
  position: relative;
  min-height: 86px;
  padding: 11px;
  background: #eff9f7;
  border: 1px solid #d1ebe6;
  border-radius: 8px;
}

.meta-pdf-funnel article small,
.meta-pdf-funnel article strong,
.meta-pdf-funnel article span { display: block; }
.meta-pdf-funnel article small { color: #61777f; font-size: 8px; font-weight: 600; text-transform: uppercase; }
.meta-pdf-funnel article strong { margin: 5px 0 4px; color: #0b5961; font-size: 21px; }
.meta-pdf-funnel article span { color: #61777f; font-size: 8px; }
.meta-pdf-funnel article i { position: absolute; right: -9px; top: 34px; z-index: 2; color: #8faeb2; font-style: normal; font-size: 15px; }

.meta-pdf-kpis {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.meta-pdf-kpis article,
.meta-pdf-success-grid article {
  padding: 11px;
  border: 1px solid #dbe7ea;
  border-radius: 8px;
  background: #fff;
  break-inside: avoid;
}

.meta-pdf-kpis span,
.meta-pdf-success-grid span {
  display: block;
  color: #71818c;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.meta-pdf-kpis strong {
  display: block;
  margin-top: 5px;
  color: #173f50;
  font-size: 15px;
}

.meta-pdf-success-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.meta-pdf-success-grid strong {
  display: block;
  margin: 4px 0 2px;
  color: #0b5961;
  font-size: 15px;
}

.meta-pdf-success-grid small { color: #71818c; font-size: 8px; }

.meta-pdf-campaign-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 8px;
}

.meta-pdf-campaign-table th,
.meta-pdf-campaign-table td {
  padding: 7px 6px;
  vertical-align: top;
  border-bottom: 1px solid #dfe8eb;
}

.meta-pdf-campaign-table th {
  color: #496672;
  background: #eff5f6;
  font-size: 7px;
  text-transform: uppercase;
}

.meta-pdf-campaign-table th:nth-child(1) { width: 4%; }
.meta-pdf-campaign-table th:nth-child(2) { width: 32%; }
.meta-pdf-campaign-table th:nth-child(n+3) { width: 8%; }
.meta-pdf-campaign-table td strong,
.meta-pdf-campaign-table td small { display: block; }
.meta-pdf-campaign-table td strong { color: #173f50; font-size: 9px; }
.meta-pdf-campaign-table td small { margin-top: 2px; color: #71818c; }
.meta-pdf-index { color: #0b8279; font-weight: 600; }

.meta-pdf-ad-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}

.meta-pdf-ad-list span {
  padding: 2px 4px;
  color: #48646f;
  background: #edf6f5;
  border-radius: 4px;
  font-size: 6.5px;
}

.meta-pdf-ad-list em { color: #0b8279; font-style: normal; font-weight: 600; }

.meta-pdf-document-footer {
  margin-top: 14px;
  padding-top: 9px;
  color: #71818c;
  border-top: 1px solid #dfe8eb;
  font-size: 8px;
}

@media (max-width: 780px) {
  .meta-pdf-preview-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }
  .meta-pdf-preview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .meta-pdf-preview-actions { justify-content: flex-end; }
  .meta-pdf-preview-frame-wrap { padding: 8px; }
  .meta-pdf-preview-placeholder { inset: 8px; }
}

/* WhatsApp Coexistence Inbox - Phase 1 */
.wa-main-panel {
  padding: 0;
  overflow: hidden;
}

.wa-main-heading {
  padding: 22px 24px 12px;
  margin-bottom: 0;
}

.wa-connection-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  padding: 9px 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.wa-connection-summary > span:last-child {
  display: grid;
  gap: 1px;
}

.wa-connection-summary strong,
.wa-connection-summary small {
  display: block;
}

.wa-connection-summary small {
  color: var(--muted);
  font-size: 11px;
}

.wa-status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  background: #94a3b8;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}

.wa-status-dot.is-online {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

.wa-status-dot.is-error {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.wa-main-panel > .wa-page-tabs {
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}

.wa-main-panel > .wa-page-tabs .wa-page-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 10px 10px 0 0;
}

.wa-inbox-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) repeat(3, minmax(145px, 0.55fr)) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}

.wa-inbox-search {
  position: relative;
  display: block;
}

.wa-inbox-search i {
  position: absolute;
  top: 50%;
  left: 13px;
  color: #94a3b8;
  transform: translateY(-50%);
}

.wa-inbox-search input,
.wa-inbox-toolbar select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  outline: none;
}

.wa-inbox-search input {
  padding-left: 38px;
}

.wa-inbox-search input:focus,
.wa-inbox-toolbar select:focus,
.wa-composer textarea:focus,
.wa-contact-field select:focus {
  border-color: rgba(13, 110, 253, 0.55);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.09);
}

.wa-unread-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.wa-inbox-layout {
  display: grid;
  grid-template-columns: minmax(280px, 310px) minmax(520px, 1fr) minmax(250px, 280px);
  min-height: 690px;
  height: calc(100vh - 220px);
  max-height: 920px;
  background: #fff;
}

.wa-conversation-column,
.wa-chat-column,
.wa-contact-column {
  min-width: 0;
  min-height: 0;
}

.wa-conversation-column {
  display: grid;
  grid-template-rows: auto 1fr;
  border-right: 1px solid var(--line);
}

.wa-column-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border-bottom: 1px solid #edf1f6;
}

.wa-column-heading small {
  color: var(--muted);
  font-size: 11px;
}

.wa-conversation-list {
  min-height: 0;
  overflow-y: auto;
}

.wa-conversation-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.wa-conversation-item:hover {
  background: #f7fbff;
}

.wa-conversation-item.active {
  background: #eef6ff;
  box-shadow: inset 3px 0 0 var(--blue);
}

.wa-contact-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #087f5b;
  background: #dff8ef;
  border: 1px solid #c2eedf;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wa-contact-avatar.large {
  width: 62px;
  height: 62px;
  font-size: 16px;
}

.wa-conversation-copy,
.wa-conversation-top,
.wa-conversation-preview,
.wa-conversation-tags {
  min-width: 0;
}

.wa-conversation-copy {
  display: grid;
  gap: 4px;
}

.wa-conversation-top,
.wa-conversation-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wa-conversation-top strong,
.wa-conversation-preview small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-conversation-top strong {
  color: #172033;
  font-size: 13px;
}

.wa-conversation-top time {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 10px;
}

.wa-conversation-preview small {
  color: #64748b;
  font-size: 11px;
}

.wa-conversation-preview b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  color: #fff;
  background: #20b86a;
  border-radius: 999px;
  font-size: 10px;
}

.wa-conversation-tags {
  display: flex;
  gap: 5px;
  overflow: hidden;
}

.wa-conversation-tags em {
  max-width: 50%;
  overflow: hidden;
  padding: 3px 6px;
  color: #526175;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-chat-column {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  background: #f4f7f5;
}

.wa-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  padding: 11px 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.wa-chat-header > div:first-child,
.wa-chat-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wa-chat-header strong,
.wa-chat-header small {
  display: block;
}

.wa-chat-header small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.wa-chat-status,
.wa-connection-health > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-open,
.status-active {
  color: #087f5b;
  background: #dcfce7;
}

.status-pending {
  color: #a16207;
  background: #fef3c7;
}

.status-resolved,
.status-disconnected {
  color: #475569;
  background: #e2e8f0;
}

.status-spam,
.status-error {
  color: #b42318;
  background: #fee2e2;
}

.wa-service-window {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  color: #087f5b;
  background: #ecfdf5;
  border-bottom: 1px solid #d1fae5;
  font-size: 11px;
  font-weight: 600;
}

.wa-service-window.expired {
  color: #9a3412;
  background: #fff7ed;
  border-bottom-color: #ffedd5;
}

.wa-message-list {
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  background-color: #efeae2;
  background-image: radial-gradient(rgba(90, 110, 100, 0.055) 1px, transparent 1px);
  background-size: 16px 16px;
}

.wa-message-row {
  display: flex;
  margin-bottom: 8px;
}

.wa-message-row.outbound {
  justify-content: flex-end;
}

.wa-message-bubble {
  position: relative;
  max-width: min(76%, 580px);
  padding: 9px 10px 6px;
  color: #1f2937;
  background: #fff;
  border-radius: 4px 12px 12px 12px;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.09);
}

.wa-message-row.outbound .wa-message-bubble {
  background: #d9fdd3;
  border-radius: 12px 4px 12px 12px;
}

.wa-message-bubble.is-failed {
  border: 1px solid #fecaca;
}

.wa-message-bubble p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.wa-message-bubble > span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 3px;
  color: #64748b;
  font-size: 9px;
}

.wa-message-bubble .wa-read {
  color: #0d6efd;
}

.wa-message-bubble .wa-failed,
.wa-message-error {
  color: #dc2626;
}

.wa-message-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  color: #475569;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.wa-message-error {
  display: block;
  margin-top: 5px;
  font-size: 10px;
}

.wa-chat-empty,
.wa-contact-empty,
.wa-list-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 180px;
  padding: 24px;
  color: #94a3b8;
  text-align: center;
}

.wa-chat-empty i,
.wa-contact-empty i {
  font-size: 34px;
}

.wa-chat-empty strong,
.wa-contact-empty strong {
  color: #475569;
}

.wa-chat-empty span,
.wa-contact-empty span {
  max-width: 260px;
  font-size: 11px;
  line-height: 1.5;
}

.wa-composer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
  padding: 10px 12px;
  background: #f0f2f5;
  border-top: 1px solid #dfe5ea;
}

.wa-composer textarea {
  width: 100%;
  min-height: 44px;
  max-height: 140px;
  padding: 11px 13px;
  resize: vertical;
  background: #fff;
  border: 1px solid #d8e0e8;
  border-radius: 12px;
  outline: none;
}

.wa-composer .primary-button {
  min-height: 44px;
  border-radius: 12px;
}

.wa-composer-hint {
  margin: 0;
  padding: 0 13px 9px;
  color: #64748b;
  background: #f0f2f5;
  font-size: 9.5px;
}

.wa-contact-column {
  padding: 16px;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid var(--line);
}

.wa-contact-profile {
  display: grid;
  justify-items: center;
  padding: 10px 0 18px;
  text-align: center;
  border-bottom: 1px solid #edf1f6;
}

.wa-contact-profile h3 {
  margin: 10px 0 2px;
  font-size: 16px;
}

.wa-contact-profile p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.wa-contact-details {
  display: grid;
  gap: 0;
  margin: 12px 0;
}

.wa-contact-details > div {
  display: grid;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
}

.wa-contact-details span,
.wa-contact-field > span {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wa-contact-details strong {
  color: #334155;
  font-size: 11px;
}

.wa-contact-field {
  display: grid;
  gap: 6px;
  margin-top: 11px;
}

.wa-contact-field select {
  width: 100%;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  outline: none;
  font-size: 11px;
}

.full-button {
  width: 100%;
  margin-top: 14px;
}

.wa-connection-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 18px;
  padding: 20px 24px;
}

.wa-connection-form,
.wa-webhook-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.compact-heading {
  margin-bottom: 16px;
}

.wa-connection-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
}

.inline-actions {
  justify-content: flex-start;
  margin-top: 16px;
}

.wa-webhook-card h3 {
  margin: 8px 0 18px;
}

.wa-webhook-card label {
  display: grid;
  gap: 7px;
}

.wa-webhook-card label > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.wa-copy-value {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
}

.wa-copy-value code {
  padding: 11px;
  overflow: hidden;
  color: #334155;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-copy-value button {
  width: 42px;
  color: #475569;
  background: #fff;
  border: 0;
  border-left: 1px solid #dbe3ee;
}

.wa-config-checks {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.wa-config-checks span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
}

.wa-config-checks .ready {
  color: #087f5b;
  background: #ecfdf5;
}

.wa-config-checks .missing {
  color: #b45309;
  background: #fffbeb;
}

.wa-webhook-card > p {
  margin: 14px 0 0;
  color: #64748b;
  font-size: 10px;
  line-height: 1.55;
}

.wa-connection-list {
  display: grid;
  gap: 10px;
  padding: 0 24px 24px;
}

.wa-connection-item {
  display: grid;
  grid-template-columns: 46px minmax(220px, 1fr) minmax(190px, auto) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.wa-connection-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: #20b86a;
  border-radius: 12px;
  font-size: 21px;
}

.wa-connection-item > div:nth-child(2) {
  display: grid;
  gap: 2px;
}

.wa-connection-item > div:nth-child(2) span,
.wa-connection-item > div:nth-child(2) small,
.wa-connection-health small {
  color: #64748b;
  font-size: 10px;
}

.wa-connection-health {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.wa-connection-actions {
  display: flex;
  gap: 7px;
}

.wa-connection-error {
  grid-column: 2 / -1;
  margin: 0;
  padding: 8px 10px;
  color: #b42318;
  background: #fff1f2;
  border-radius: 8px;
  font-size: 10px;
}

@media (max-width: 1220px) {
  .wa-inbox-layout {
    grid-template-columns: 280px minmax(380px, 1fr);
  }

  .wa-contact-column {
    display: none;
  }
}

@media (max-width: 900px) {
  .wa-inbox-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .wa-inbox-layout {
    grid-template-columns: minmax(230px, 38%) minmax(360px, 1fr);
    height: calc(100vh - 285px);
    overflow-x: auto;
  }

  .wa-connection-layout {
    grid-template-columns: 1fr;
  }

  .wa-connection-item {
    grid-template-columns: 44px 1fr;
  }

  .wa-connection-health,
  .wa-connection-actions,
  .wa-connection-error {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .wa-main-heading {
    align-items: stretch;
  }

  .wa-connection-summary {
    width: 100%;
  }

  .wa-main-panel > .wa-page-tabs {
    padding: 0 12px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .wa-inbox-toolbar {
    grid-template-columns: 1fr;
  }

  .wa-inbox-layout {
    display: block;
    height: auto;
    max-height: none;
  }

  .wa-conversation-column {
    min-height: 360px;
    max-height: 440px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .wa-chat-column {
    min-height: 620px;
  }

  .wa-message-bubble {
    max-width: 88%;
  }

  .wa-connection-layout,
  .wa-connection-list {
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* WhatsApp Coexistence Phase 2 */
.wa-analytics-shell {
  min-height: 680px;
  padding: 20px 18px 28px;
  background: #f8fafc;
}

.wa-analytics-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 4px 2px 16px;
  border-bottom: 1px solid var(--line);
}

.wa-analytics-heading h3 {
  margin: 5px 0 7px;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
}

.wa-analytics-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.wa-analytics-actions {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 8px;
}

.wa-analytics-actions small {
  color: var(--muted);
  font-size: 11px;
}

.wa-phase2-overview {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  padding: 0;
}

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

.wa-kpi-card {
  min-width: 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.04);
}

.wa-kpi-card > i {
  display: inline-grid;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  place-items: center;
  color: #087f5b;
  background: #e9fbf4;
  border-radius: 9px;
}

.wa-kpi-card span,
.wa-kpi-card strong {
  display: block;
}

.wa-kpi-card span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-kpi-card strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 19px;
}

.wa-reminder-strip {
  min-width: 0;
  padding: 13px;
  background: #fffaf0;
  border: 1px solid #fde6b2;
  border-radius: 12px;
}

.wa-reminder-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.wa-reminder-strip-head strong,
.wa-reminder-strip-head small {
  display: block;
}

.wa-reminder-strip-head small {
  margin-top: 2px;
  color: #9a6700;
}

.wa-reminder-strip-head > span {
  padding: 4px 8px;
  color: #92400e;
  background: #ffedd5;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.wa-reminder-strip-list {
  display: grid;
  gap: 5px;
  max-height: 154px;
  overflow: auto;
}

.wa-reminder-strip-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  color: inherit;
  text-align: left;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 9px;
  cursor: pointer;
}

.wa-reminder-strip-list button:hover {
  background: #fff;
}

.wa-reminder-strip-list strong,
.wa-reminder-strip-list small {
  display: block;
}

.wa-reminder-strip-list small {
  margin-top: 2px;
  color: #9a6700;
  font-size: 10px;
}

.wa-reminder-empty {
  padding: 14px;
  color: #55746b;
  text-align: center;
}

.wa-template-composer {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border-top: 1px solid var(--line);
}

.wa-template-composer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.wa-template-composer label,
.wa-template-parameter-fields label {
  display: grid;
  gap: 5px;
}

.wa-template-composer label > span,
.wa-template-parameter-fields label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.wa-template-composer select,
.wa-template-composer input {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.wa-template-parameter-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wa-template-inline-preview {
  padding: 10px 12px;
  background: #dcf8c6;
  border: 1px solid #b9e9a0;
  border-radius: 10px 10px 3px 10px;
}

.wa-template-inline-preview strong {
  display: block;
  margin-bottom: 4px;
  color: #2b6a39;
  font-size: 10px;
  text-transform: uppercase;
}

.wa-template-inline-preview p {
  margin: 0;
  line-height: 1.45;
}

.wa-official-template-heading,
.wa-embedded-signup-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 16px 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.wa-official-template-heading h3,
.wa-embedded-signup-card h3 {
  margin: 4px 0 6px;
}

.wa-official-template-heading p,
.wa-embedded-signup-card p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

.wa-official-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wa-official-template-actions select {
  min-height: 40px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.wa-official-template-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 12px;
}

.wa-template-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.wa-template-status strong {
  color: var(--ink);
  font-size: 13px;
}

.wa-official-template-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 18px 18px;
}

.wa-official-template-card {
  min-width: 0;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.wa-official-template-card-head,
.wa-official-template-card footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wa-official-template-card-head strong,
.wa-official-template-card-head small {
  display: block;
}

.wa-official-template-card-head small {
  margin-top: 3px;
  color: var(--muted);
}

.wa-official-template-card > p {
  min-height: 56px;
  margin: 13px 0;
  padding: 11px;
  color: #244735;
  line-height: 1.5;
  background: #eaf8ee;
  border-radius: 9px;
}

.wa-official-template-card footer {
  flex-wrap: wrap;
  justify-content: flex-start;
  color: var(--muted);
  font-size: 10px;
}

.wa-template-status-pill {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
}

.wa-template-status-pill.status-approved {
  color: #166534;
  background: #dcfce7;
}

.wa-template-status-pill.status-pending {
  color: #92400e;
  background: #fef3c7;
}

.wa-template-status-pill.status-rejected,
.wa-template-status-pill.status-disabled {
  color: #991b1b;
  background: #fee2e2;
}

.wa-template-status-pill.status-paused {
  color: #475569;
  background: #e2e8f0;
}

.wa-embedded-signup-card {
  align-items: stretch;
  color: #fff;
  background: linear-gradient(128deg, #172554, #1d4ed8 62%, #0f766e);
  border: 0;
  box-shadow: 0 16px 34px rgba(29, 78, 216, 0.18);
}

.wa-embedded-signup-card .eyebrow,
.wa-embedded-signup-card p {
  color: rgba(255, 255, 255, 0.78);
}

.wa-embedded-signup-action {
  display: grid;
  align-content: center;
  justify-items: end;
  min-width: 230px;
  gap: 8px;
}

.wa-embedded-signup-action .primary-button {
  color: #15306e;
  background: #fff;
  border-color: #fff;
}

.wa-embedded-signup-action small {
  max-width: 300px;
  color: rgba(255, 255, 255, 0.78);
  text-align: right;
}

.wa-embedded-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.wa-embedded-checks span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.wa-embedded-checks span.missing {
  color: #ffedd5;
}

.wa-label-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.wa-label-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
}

.wa-label-option input {
  margin: 0;
}

.wa-conversation-tags em.priority-high,
.wa-conversation-tags em.priority-urgent {
  color: #991b1b;
  background: #fee2e2;
}

.wa-conversation-tags em.label-red,
.wa-label-option.label-red { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
.wa-conversation-tags em.label-blue,
.wa-label-option.label-blue { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
.wa-conversation-tags em.label-amber,
.wa-label-option.label-amber { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.wa-conversation-tags em.label-purple,
.wa-label-option.label-purple { color: #6b21a8; background: #f3e8ff; border-color: #e9d5ff; }
.wa-conversation-tags em.label-green,
.wa-label-option.label-green { color: #166534; background: #dcfce7; border-color: #bbf7d0; }



/* Focused Inbox + separated Analytics */
.wa-followup-panel[data-wa-followup-panel="inbox"] {
  background: #fff;
}

.wa-followup-panel[data-wa-followup-panel="inbox"] .wa-inbox-toolbar {
  position: relative;
  z-index: 2;
}

.wa-chat-column {
  background: #f7f9fb;
}

.wa-chat-header,
.wa-composer,
.wa-template-composer,
.wa-composer-hint {
  background-color: #fff;
}

.wa-message-list {
  background-image: radial-gradient(circle at 1px 1px, rgba(100, 116, 139, 0.08) 1px, transparent 0);
  background-size: 18px 18px;
}

@media (min-width: 901px) and (max-width: 1360px) {
  .wa-inbox-toolbar {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(145px, .7fr) minmax(145px, .7fr);
  }

  .wa-inbox-search {
    grid-column: 1 / 3;
  }

  .wa-inbox-toolbar #waInboxStatusFilter {
    grid-column: 3;
  }

  .wa-inbox-toolbar #waInboxAttentionFilter {
    grid-column: 4;
  }

  .wa-inbox-toolbar #waInboxLabelFilter {
    grid-column: 1 / 3;
  }

  .wa-inbox-toolbar .wa-unread-filter {
    grid-column: 3;
    justify-self: end;
  }

  .wa-inbox-toolbar #waInboxRefreshBtn {
    grid-column: 4;
    justify-self: end;
  }
}

@media (max-width: 1180px) {
  .wa-phase2-overview {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {
  .wa-analytics-shell {
    min-height: 0;
    padding: 14px 12px 20px;
  }

  .wa-analytics-heading {
    display: grid;
    align-items: start;
    gap: 14px;
  }

  .wa-analytics-actions {
    width: 100%;
    justify-items: stretch;
  }

  .wa-analytics-actions small {
    text-align: left;
  }

  .wa-phase2-overview {
    padding: 0 12px 12px;
  }

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

  .wa-template-composer-row,
  .wa-template-parameter-fields {
    grid-template-columns: 1fr;
  }

  .wa-official-template-heading,
  .wa-embedded-signup-card {
    display: grid;
    margin: 12px;
  }

  .wa-official-template-actions,
  .wa-official-template-actions select,
  .wa-official-template-actions button,
  .wa-embedded-signup-action,
  .wa-embedded-signup-action button {
    width: 100%;
  }

  .wa-embedded-signup-action {
    min-width: 0;
    justify-items: stretch;
  }

  .wa-embedded-signup-action small {
    text-align: left;
  }

  .wa-official-template-list,
  .wa-official-template-summary {
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* WhatsApp Inbox: compact and aligned checkbox controls */
.wa-unread-filter {
  min-height: 40px;
  width: max-content;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.wa-unread-filter:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.wa-unread-filter:has(input:focus-visible) {
  border-color: rgba(13, 110, 253, 0.55);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.09);
}

.wa-unread-filter input[type="checkbox"],
.wa-label-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 15px;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  color: currentColor;
  background: #fff;
  border: 1.5px solid #94a3b8;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
}

.wa-unread-filter input[type="checkbox"]::before,
.wa-label-option input[type="checkbox"]::before {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.wa-unread-filter input[type="checkbox"]:checked {
  background: #0f9f8f;
  border-color: #0f9f8f;
}

.wa-label-option input[type="checkbox"]:checked {
  background: currentColor;
  border-color: currentColor;
}

.wa-unread-filter input[type="checkbox"]:checked::before,
.wa-label-option input[type="checkbox"]:checked::before {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.wa-unread-filter input[type="checkbox"]:focus,
.wa-label-option input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
}

.wa-label-picker > div {
  align-items: center;
  gap: 7px;
}

.wa-label-option {
  min-height: 30px;
  max-width: 100%;
  gap: 6px;
  padding: 5px 9px;
  line-height: 1.15;
  white-space: nowrap;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.wa-label-option:hover {
  transform: translateY(-1px);
}

.wa-label-option:has(input:checked) {
  box-shadow: inset 0 0 0 1px currentColor;
}

.wa-label-option:has(input:not(:checked)) {
  opacity: 0.82;
}

.wa-label-option:has(input:focus-visible) {
  outline: 2px solid rgba(13, 110, 253, 0.22);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .wa-unread-filter {
    justify-self: start;
  }
}

/* WhatsApp scalability: cursor pagination and lazy message history */
.wa-load-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 20px);
  min-height: 38px;
  margin: 10px;
  padding: 9px 12px;
  color: #0f766e;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.wa-load-more-button:hover:not(:disabled) {
  background: #ccfbf1;
}

.wa-load-more-button:disabled {
  cursor: wait;
  opacity: .65;
}

.wa-list-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px 16px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.wa-message-history-control,
.wa-message-history-start {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 0 14px;
}

.wa-message-history-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 12px;
  color: #475569;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #dbe3eb;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.wa-message-history-control button:hover:not(:disabled) {
  color: #0f766e;
  border-color: #5eead4;
}

.wa-message-history-control button:disabled {
  cursor: wait;
  opacity: .65;
}

.wa-message-history-start {
  color: #64748b;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* =========================================================
   WhatsApp Web workspace UX — 2026-08-05
   Full-height inbox, focused chat navigation, lead drawer
   ========================================================= */

#inboxView.view.active {
  display: block;
  height: calc(100vh - 78px);
  margin: -26px -28px -38px;
  overflow: hidden;
}

#inboxView .wa-main-panel {
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

#inboxView .wa-main-panel > .wa-page-tabs {
  align-items: end;
  gap: 2px;
  min-width: 0;
  padding: 0 22px;
  border-bottom: 1px solid #dbe4e8;
  background: #fff;
}

#inboxView .wa-page-tab {
  position: relative;
  min-height: 52px;
  gap: 8px;
  padding: 0 15px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #607784;
  font-size: 12px;
  font-weight: 600;
}

#inboxView .wa-page-tab::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  content: "";
}

#inboxView .wa-page-tab.active,
#inboxView .wa-page-tab:hover {
  border: 0;
  background: transparent;
  color: #087f70;
}

#inboxView .wa-page-tab.active::after {
  background: #12a594;
}

#inboxView .wa-followup-panel {
  min-height: 0;
  overflow: auto;
}

#inboxView .wa-followup-panel.wa-inbox-panel.active {
  display: block;
  height: 100%;
  overflow: hidden;
}

.wa-inbox-layout {
  position: relative;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  background: #f0f2f5;
}

.wa-conversation-column {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #d9e1e5;
  background: #fff;
}

.wa-conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 66px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid #edf1f3;
  background: #f7f9fa;
}

.wa-conversation-title {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.wa-conversation-title strong {
  color: #102e3f;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.wa-conversation-title small {
  color: #78909c;
  font-size: 10px;
}

.wa-conversation-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.wa-icon-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  flex: 0 0 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #546e7a;
  font-size: 17px;
  transition: background .16s ease, color .16s ease;
}

.wa-icon-button:hover,
.wa-icon-button.active {
  background: #e6edef;
  color: #087f70;
}

.wa-connection-summary.wa-connection-summary-compact {
  min-width: 0;
  max-width: 116px;
  gap: 7px;
  padding: 6px 8px;
  border-color: transparent;
  background: transparent;
  border-radius: 10px;
}

.wa-connection-summary-compact .wa-status-dot {
  width: 8px;
  height: 8px;
  flex-basis: 8px;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
}

.wa-connection-summary-compact > span:last-child {
  min-width: 0;
}

.wa-connection-summary-compact strong,
.wa-connection-summary-compact small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-connection-summary-compact strong {
  color: #35515f;
  font-size: 10px;
}

.wa-connection-summary-compact small {
  font-size: 8px;
}

.wa-conversation-tools {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 10px 12px 9px;
  border-bottom: 1px solid #edf1f3;
  background: #fff;
}

.wa-inbox-search {
  position: relative;
  display: block;
}

.wa-inbox-search i {
  left: 14px;
  color: #7d919b;
  font-size: 14px;
}

.wa-inbox-search input {
  width: 100%;
  min-height: 38px;
  padding: 0 13px 0 40px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f0f2f5;
  color: #243b48;
  font-size: 12px;
  outline: none;
}

.wa-inbox-search input:focus {
  border-color: #b8dcd7;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(18, 165, 148, .08);
}

.wa-quick-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.wa-quick-filters::-webkit-scrollbar { display: none; }

.wa-quick-filters button {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid #e0e7ea;
  border-radius: 999px;
  background: #fff;
  color: #607782;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.wa-quick-filters button:hover {
  background: #f5f8f9;
}

.wa-quick-filters button.active {
  border-color: #c7ece6;
  background: #e8f8f5;
  color: #087f70;
}

.wa-advanced-filters {
  position: absolute;
  z-index: 20;
  top: calc(100% - 2px);
  right: 12px;
  left: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 13px;
  border: 1px solid #dbe4e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 46, 63, .16);
}

.wa-advanced-filter-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wa-advanced-filter-head strong {
  color: #274553;
  font-size: 12px;
}

.wa-advanced-filter-head button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #0d9488;
  font-size: 10px;
  font-weight: 600;
}

.wa-advanced-filters > label:not(.wa-unread-filter) {
  display: grid;
  gap: 5px;
}

.wa-advanced-filters label > span {
  color: #80939d;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .06em;
}

.wa-advanced-filters select {
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid #dce5e9;
  border-radius: 8px;
  background: #fff;
  color: #36515e;
  font-size: 10px;
}

.wa-advanced-filters .wa-unread-filter {
  grid-column: 1 / -1;
  min-height: 32px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #f7f9fa;
}

.wa-conversation-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #c7d2d8 transparent;
}

.wa-conversation-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 11px;
  width: 100%;
  min-height: 78px;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid #edf1f3;
  background: #fff;
  text-align: left;
}

.wa-conversation-item:hover {
  background: #f6f8f9;
}

.wa-conversation-item.active {
  background: #e9f4f3;
  box-shadow: inset 3px 0 0 #12a594;
}

.wa-conversation-item.is-unread .wa-conversation-top strong,
.wa-conversation-item.is-unread .wa-conversation-preview small {
  color: #152f3c;
  font-weight: 600;
}

.wa-conversation-item .wa-contact-avatar {
  width: 48px;
  height: 48px;
  font-size: 13px;
}

.wa-conversation-copy {
  display: grid;
  align-content: center;
  gap: 4px;
}

.wa-conversation-top strong {
  color: #1d3541;
  font-size: 13px;
  font-weight: 600;
}

.wa-conversation-top time {
  color: #8a9ca5;
  font-size: 9px;
}

.wa-conversation-preview small {
  display: block;
  min-width: 0;
  color: #647984;
  font-size: 10.5px;
}

.wa-conversation-preview small i {
  color: #45a4d6;
  font-size: 10px;
}

.wa-conversation-preview b {
  min-width: 19px;
  height: 19px;
  background: #25d366;
  font-size: 9px;
}

.wa-conversation-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #8a9ca5;
  font-size: 8.5px;
}

.wa-conversation-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-conversation-meta span + span::before {
  margin-right: 7px;
  content: "•";
}

.wa-conversation-tags {
  margin-top: 1px;
}

.wa-conversation-tags em {
  padding: 2px 6px;
  font-size: 8px;
}

.wa-list-end,
.wa-load-more-button {
  min-height: 42px;
  font-size: 9px;
}

.wa-chat-column {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 66px auto minmax(0, 1fr) auto auto auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #efeae2;
}

.wa-chat-header {
  position: relative;
  z-index: 4;
  min-height: 66px;
  padding: 8px 14px;
  border-bottom: 1px solid #d9e1e5;
  background: #f7f9fa;
}

.wa-chat-placeholder {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: #6d828c;
}

.wa-chat-placeholder > i {
  width: 42px;
  height: 42px;
  display: inline-grid;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: #daf5ef;
  color: #0b9686;
  font-size: 20px;
}

.wa-chat-placeholder span,
.wa-chat-placeholder strong,
.wa-chat-placeholder small {
  display: block;
}

.wa-chat-person {
  flex: 1;
}

.wa-chat-person .wa-contact-avatar {
  width: 42px;
  height: 42px;
}

.wa-chat-person span:last-child {
  min-width: 0;
}

.wa-chat-person strong,
.wa-chat-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-chat-person strong {
  color: #17313d;
  font-size: 13px;
}

.wa-chat-person small {
  max-width: min(55vw, 580px);
  color: #72858f;
  font-size: 9.5px;
}

.wa-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wa-chat-back {
  display: none;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #546e7a;
  font-size: 18px;
}

.wa-chat-status {
  padding: 5px 8px;
  font-size: 8px;
}

.wa-service-window {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 9.5px;
}

.wa-message-list {
  min-height: 0;
  padding: 18px max(4%, 24px) 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: #efeae2;
  background-image:
    linear-gradient(rgba(239, 234, 226, .86), rgba(239, 234, 226, .86)),
    radial-gradient(circle at 1px 1px, rgba(82, 101, 92, .12) 1px, transparent 0);
  background-size: auto, 18px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(105, 122, 114, .35) transparent;
}

.wa-message-date {
  position: sticky;
  z-index: 2;
  top: 4px;
  display: flex;
  justify-content: center;
  margin: 8px 0 12px;
  pointer-events: none;
}

.wa-message-date span,
.wa-message-history-start {
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .9);
  color: #607680;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
  font-size: 9px;
  font-weight: 600;
}

.wa-message-row {
  margin-bottom: 5px;
}

.wa-message-bubble {
  max-width: min(68%, 680px);
  padding: 7px 9px 5px;
  border-radius: 3px 9px 9px 9px;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .12);
}

.wa-message-row.outbound .wa-message-bubble {
  background: #d9fdd3;
  border-radius: 9px 3px 9px 9px;
}

.wa-message-bubble p {
  font-size: 12px;
  line-height: 1.42;
}

.wa-message-bubble > span {
  margin-top: 1px;
  font-size: 8px;
}

.wa-chat-empty {
  min-height: 100%;
  color: #71858f;
}

.wa-chat-empty-illustration {
  width: 90px;
  height: 90px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .66);
  color: #12a594;
  box-shadow: 0 8px 28px rgba(55, 77, 68, .08);
}

.wa-chat-empty-illustration i {
  font-size: 38px;
}

.wa-chat-empty strong {
  color: #49616c;
  font-size: 14px;
}

.wa-template-composer {
  max-height: 40vh;
  overflow-y: auto;
  border-top: 1px solid #d9e1e5;
  background: #fff;
}

.wa-composer {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  padding: 9px 12px 8px;
  border-top: 1px solid #d9e1e5;
  background: #f0f2f5;
}

.wa-composer-field {
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: 9px;
  background: #fff;
}

.wa-composer textarea {
  min-height: 42px;
  max-height: 124px;
  padding: 11px 13px;
  resize: none;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 12px;
  line-height: 1.45;
}

.wa-composer textarea:focus {
  border: 0;
  box-shadow: none;
}

.wa-send-button {
  min-width: 74px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: #0d9488;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 5px 14px rgba(13, 148, 136, .18);
}

.wa-send-button:hover { background: #087f70; }
.wa-send-button:disabled { background: #b8c7cd; box-shadow: none; cursor: not-allowed; }

.wa-composer-hint {
  min-height: 19px;
  padding: 0 14px 7px;
  background: #f0f2f5;
  color: #82949d;
  font-size: 8px;
  text-align: center;
}

.wa-contact-scrim {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: block;
  visibility: hidden;
  padding: 0;
  border: 0;
  background: rgba(15, 36, 47, .18);
  opacity: 0;
  transition: opacity .18s ease, visibility .18s ease;
}

.wa-contact-column {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(370px, 92vw);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  border-left: 1px solid #d9e1e5;
  background: #fff;
  box-shadow: -16px 0 42px rgba(16, 46, 63, .16);
  transform: translateX(105%);
  transition: transform .22s ease;
}

.wa-inbox-layout.details-open .wa-contact-column {
  transform: translateX(0);
}

.wa-inbox-layout.details-open .wa-contact-scrim {
  visibility: visible;
  opacity: 1;
}

.wa-contact-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 10px 12px 10px 17px;
  border-bottom: 1px solid #e7edef;
  background: #f7f9fa;
}

.wa-contact-drawer-head > div {
  display: grid;
  gap: 1px;
}

.wa-contact-drawer-head strong {
  color: #17313d;
  font-size: 14px;
}

.wa-contact-drawer-head small {
  color: #80939d;
  font-size: 9px;
}

.wa-contact-drawer-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px 24px;
}

.wa-contact-profile {
  padding: 24px 0 20px;
}

.wa-contact-profile h3 {
  margin-top: 11px;
  color: #17313d;
  font-size: 17px;
}

.wa-contact-open-lead {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 0 11px;
  border: 1px solid #cfe7e3;
  border-radius: 8px;
  background: #edf9f7;
  color: #087f70;
  font-size: 10px;
  font-weight: 600;
}

.wa-contact-section {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #e2e9ec;
  border-radius: 12px;
  background: #fff;
}

.wa-contact-section h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 11px;
  color: #36525f;
  font-size: 11px;
  font-weight: 600;
}

.wa-contact-section h4 i {
  color: #0d9488;
}

.wa-contact-details {
  margin: 0;
}

.wa-contact-details > div {
  padding: 8px 0;
}

.wa-contact-details > div:first-child { padding-top: 0; }
.wa-contact-details > div:last-child { padding-bottom: 0; border-bottom: 0; }

.wa-contact-details span,
.wa-contact-field > span {
  font-size: 8px;
}

.wa-contact-details strong {
  font-size: 10.5px;
}

.wa-contact-field {
  margin-top: 9px;
}

.wa-contact-field:first-of-type { margin-top: 0; }

.wa-contact-field select,
.wa-contact-field input[type="datetime-local"] {
  width: 100%;
  min-height: 37px;
  padding: 0 9px;
  border: 1px solid #dbe4e8;
  border-radius: 8px;
  background: #fff;
  color: #36515e;
  font-size: 10px;
  outline: none;
}

.wa-contact-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.wa-label-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wa-label-option {
  min-height: 30px;
  gap: 6px;
  padding: 5px 9px;
  font-size: 9px;
}

.wa-label-option input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px;
}

@media (min-width: 1200px) {
  .wa-inbox-layout.details-open .wa-contact-scrim {
    background: transparent;
    pointer-events: none;
  }
}

@media (max-width: 1100px) {
  .wa-inbox-layout { grid-template-columns: 330px minmax(0, 1fr); }
  .wa-connection-summary-compact > span:last-child { display: none; }
  .wa-connection-summary.wa-connection-summary-compact { width: 18px; padding: 0; }
  .wa-message-bubble { max-width: 78%; }
}

@media (max-width: 860px) {
  #inboxView.view.active {
    height: calc(100vh - 78px);
    margin: -22px -22px -32px;
  }

  #inboxView .wa-main-panel { grid-template-rows: 50px minmax(0, 1fr); }
  #inboxView .wa-main-panel > .wa-page-tabs { padding: 0 8px; }
  #inboxView .wa-page-tab { min-height: 50px; padding: 0 11px; }
  #inboxView .wa-page-tab span { display: none; }
  #inboxView .wa-page-tab i { font-size: 16px; }

  .wa-inbox-layout {
    display: block;
    height: 100%;
  }

  .wa-conversation-column,
  .wa-chat-column {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .wa-chat-column { display: none; }
  .wa-inbox-layout.has-conversation .wa-conversation-column { display: none; }
  .wa-inbox-layout.has-conversation .wa-chat-column { display: grid; }
  .wa-chat-back { display: inline-grid; }
  .wa-chat-status { display: none; }
  .wa-chat-person small { max-width: 55vw; }
  .wa-message-list { padding-right: 12px; padding-left: 12px; }
  .wa-message-bubble { max-width: 86%; }
}

@media (max-width: 560px) {
  #inboxView.view.active {
    height: calc(100dvh - 68px);
    margin: -22px -22px -32px;
  }

  .wa-conversation-header { padding-left: 13px; }
  .wa-conversation-title strong { font-size: 17px; }
  .wa-conversation-item { grid-template-columns: 45px minmax(0, 1fr); padding: 10px 11px; }
  .wa-conversation-item .wa-contact-avatar { width: 45px; height: 45px; }
  .wa-chat-header { padding: 7px 8px; }
  .wa-chat-person .wa-contact-avatar { width: 39px; height: 39px; }
  .wa-chat-person small { max-width: 48vw; }
  .wa-composer { padding: 7px 8px 6px; }
  .wa-send-button { min-width: 42px; width: 42px; padding: 0; border-radius: 50%; }
  .wa-send-button span { display: none; }
  .wa-composer-hint { display: none; }
  .wa-contact-column { width: 100%; }
  .wa-contact-field-grid { grid-template-columns: 1fr; }
  .wa-advanced-filters { grid-template-columns: 1fr; }
  .wa-advanced-filter-head,
  .wa-advanced-filters .wa-unread-filter { grid-column: 1; }
}

/* =========================================================
   WhatsApp navigation visibility + template gallery composer
   2026-08-05
   ========================================================= */

#inboxView .wa-main-panel {
  grid-template-rows: 62px minmax(0, 1fr);
}

#inboxView .wa-main-panel > .wa-page-tabs {
  position: relative;
  z-index: 12;
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  min-height: 62px;
  height: 62px;
  padding: 8px 18px !important;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid #d9e3e7;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 42, 54, .045);
  scrollbar-width: thin;
  scrollbar-color: #cbd8dd transparent;
}

#inboxView .wa-main-panel > .wa-page-tabs::-webkit-scrollbar {
  height: 5px;
}

#inboxView .wa-main-panel > .wa-page-tabs::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: #cbd8dd;
}

#inboxView .wa-page-tab {
  position: relative;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 42px !important;
  height: 42px;
  margin: 0;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #526b77 !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1 !important;
  white-space: nowrap;
  transform: none !important;
}

#inboxView .wa-page-tab i,
#inboxView .wa-page-tab span {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1;
}

#inboxView .wa-page-tab i {
  color: #78909a;
  font-size: 14px;
}

#inboxView .wa-page-tab::after {
  display: none;
}

#inboxView .wa-page-tab:hover {
  border-color: #d7e6e7 !important;
  background: #f3f9f8 !important;
  color: #0b746c !important;
}

#inboxView .wa-page-tab.active {
  border-color: #b9e2dd !important;
  background: #e9f8f5 !important;
  color: #087f70 !important;
  box-shadow: inset 0 0 0 1px rgba(18, 165, 148, .04);
}

#inboxView .wa-page-tab.active i {
  color: #0d9488;
}

.wa-composer {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.wa-composer-action {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  align-self: end;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #607985;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.wa-composer-action:hover:not(:disabled),
.wa-composer-action:focus-visible {
  background: #dfe9ec;
  color: #087f70;
}

.wa-composer-action:active:not(:disabled) {
  transform: scale(.96);
}

.wa-composer-action:disabled {
  color: #a9b9c0;
  cursor: not-allowed;
  opacity: .7;
}

.wa-composer-action i {
  font-size: 19px;
}

.wa-composer-action span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wa-composer-action.is-required {
  background: #fff3d6;
  color: #b66a00;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .12);
}

.wa-template-gallery-dialog {
  width: min(980px, calc(100vw - 36px));
  height: min(700px, calc(100dvh - 54px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #173642;
  box-shadow: 0 24px 70px rgba(10, 35, 47, .28);
}

.wa-template-gallery-dialog::backdrop {
  background: rgba(7, 29, 40, .52);
  backdrop-filter: blur(2px);
}

.wa-template-gallery-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.wa-template-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #e1eaed;
  background: #fbfcfc;
}

.wa-template-gallery-head > div {
  min-width: 0;
}

.wa-template-gallery-head .eyebrow {
  color: #0d9488;
  font-size: 8px;
  letter-spacing: .12em;
}

.wa-template-gallery-head h3 {
  margin: 3px 0 3px;
  color: #173642;
  font-size: 18px;
}

.wa-template-gallery-head p {
  margin: 0;
  color: #728690;
  font-size: 10px;
}

.wa-dialog-close {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  padding: 0;
  border: 1px solid #dce6e9;
  border-radius: 10px;
  background: #fff;
  color: #5e747f;
}

.wa-dialog-close:hover {
  background: #eff5f6;
  color: #173642;
}

.wa-template-gallery-body {
  display: grid;
  grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.wa-template-gallery-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 14px;
  border-right: 1px solid #e0e8eb;
  background: #f7f9fa;
}

.wa-template-gallery-search {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dce6e9;
  border-radius: 10px;
  background: #fff;
  color: #8798a0;
}

.wa-template-gallery-search input {
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 11px;
  box-shadow: none !important;
}

.wa-template-gallery-list {
  min-height: 0;
  margin-top: 12px;
  padding-right: 4px;
  overflow-y: auto;
}

.wa-template-gallery-card {
  width: 100%;
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid #dfe8eb;
  border-radius: 11px;
  background: #fff;
  color: #36515e;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.wa-template-gallery-card:hover {
  border-color: #a9d8d2;
  background: #f8fdfc;
}

.wa-template-gallery-card.active {
  border-color: #20a797;
  background: #eaf9f6;
  box-shadow: 0 0 0 2px rgba(32, 167, 151, .1);
}

.wa-template-gallery-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.wa-template-gallery-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: #173642;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-template-gallery-card-head em {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 99px;
  background: #dcfce7;
  color: #15803d;
  font-size: 7px;
  font-style: normal;
  font-weight: 600;
}

.wa-template-gallery-card small {
  color: #78909a;
  font-size: 8px;
}

.wa-template-gallery-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #526b77;
  font-size: 9px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.wa-template-gallery-empty {
  min-height: 240px;
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 24px;
  color: #78909a;
  text-align: center;
}

.wa-template-gallery-empty i {
  color: #0d9488;
  font-size: 26px;
}

.wa-template-gallery-empty strong {
  color: #36515e;
  font-size: 12px;
}

.wa-template-gallery-empty span {
  font-size: 9px;
}

.wa-template-gallery-dialog .wa-template-composer {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  padding: 18px;
  overflow: hidden;
  border: 0;
  background: #fff;
}

.wa-template-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf2f4;
}

.wa-template-selected-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.wa-template-selected-head span {
  color: #82949d;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.wa-template-selected-head strong {
  overflow: hidden;
  color: #173642;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-template-selected-badge {
  max-width: 48%;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #ecfdf5;
  color: #087f5b !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-template-parameter-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 180px;
  padding: 14px 0 4px;
  overflow-y: auto;
}

.wa-template-parameter-heading,
.wa-template-no-parameter {
  grid-column: 1 / -1;
}

.wa-template-parameter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wa-template-parameter-heading strong {
  color: #36515e;
  font-size: 10px;
}

.wa-template-parameter-heading small {
  color: #82949d;
  font-size: 8px;
}

.wa-template-parameter-fields label {
  display: grid;
  gap: 5px;
}

.wa-template-parameter-fields label span {
  color: #607985;
  font-size: 8px;
  font-weight: 600;
}

.wa-template-parameter-fields input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #dce6e9;
  border-radius: 8px;
  background: #fff;
  font-size: 10px;
}

.wa-template-no-parameter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f0fdf9;
  color: #28756a;
  font-size: 9px;
}

.wa-template-inline-preview {
  min-height: 0;
  margin-top: 12px;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid #e1e9ec;
  border-radius: 12px;
  background: #f4f1eb;
}

.wa-template-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.wa-template-preview-label strong {
  color: #526b77;
  font-size: 9px;
  text-transform: uppercase;
}

.wa-template-preview-label small {
  color: #82949d;
  font-size: 8px;
}

.wa-template-preview-bubble {
  width: fit-content;
  max-width: 88%;
  margin-left: auto;
  padding: 10px 12px;
  border-radius: 10px 3px 10px 10px;
  background: #d9fdd3;
  color: #253f49;
  font-size: 10px;
  line-height: 1.5;
  box-shadow: 0 1px 1px rgba(26, 55, 68, .08);
}

.wa-template-gallery-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 14px;
  border-top: 1px solid #edf2f4;
}

@media (max-width: 860px) {
  #inboxView .wa-main-panel {
    grid-template-rows: 56px minmax(0, 1fr);
  }

  #inboxView .wa-main-panel > .wa-page-tabs {
    min-height: 56px;
    height: 56px;
    padding: 7px 9px !important;
  }

  #inboxView .wa-page-tab {
    min-height: 40px !important;
    height: 40px;
    padding: 0 12px !important;
  }

  #inboxView .wa-page-tab span {
    display: inline-flex !important;
  }

  .wa-template-gallery-dialog {
    width: calc(100vw - 18px);
    height: calc(100dvh - 18px);
    border-radius: 12px;
  }

  .wa-template-gallery-body {
    grid-template-columns: minmax(230px, 40%) minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  #inboxView .wa-page-tab span {
    display: none !important;
  }

  #inboxView .wa-page-tab {
    width: 42px;
    padding: 0 !important;
  }

  .wa-template-gallery-body {
    display: block;
    overflow-y: auto;
  }

  .wa-template-gallery-sidebar {
    max-height: 44%;
    border-right: 0;
    border-bottom: 1px solid #e0e8eb;
  }

  .wa-template-gallery-dialog .wa-template-composer {
    min-height: 56%;
    overflow: visible;
  }

  .wa-template-parameter-fields {
    grid-template-columns: 1fr;
  }

  .wa-template-gallery-head {
    padding: 14px;
  }

  .wa-template-gallery-head p {
    display: none;
  }
}

/* =========================================================
   WhatsApp rich chat: reply, reaction, media, slash replies
   2026-08-05
   ========================================================= */

.wa-chat-column {
  grid-template-rows: 66px auto minmax(0, 1fr) auto;
}

.wa-composer-zone {
  position: relative;
  z-index: 5;
  border-top: 1px solid #d9e1e5;
  background: #f0f2f5;
}

.wa-composer-zone .wa-composer {
  position: relative;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  border-top: 0;
}

.wa-composer-menu-wrap {
  position: relative;
  display: grid;
  align-items: end;
}

.wa-composer-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  align-self: end;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #607985;
  font-size: 20px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.wa-composer-icon:hover:not(:disabled),
.wa-composer-icon:focus-visible,
.wa-composer-icon.active {
  background: #dfe9ec;
  color: #087f70;
}

.wa-composer-icon:active:not(:disabled) { transform: scale(.96); }
.wa-composer-icon:disabled { color: #a9b9c0; cursor: not-allowed; opacity: .62; }
.wa-composer-icon.is-required { background: #fff3d6; color: #b66a00; box-shadow: 0 0 0 3px rgba(245, 158, 11, .12); }

.wa-attachment-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  bottom: calc(100% + 10px);
  width: 250px;
  padding: 7px;
  border: 1px solid #dbe5e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(19, 48, 61, .2);
}

.wa-attachment-menu button {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #294754;
  text-align: left;
}

.wa-attachment-menu button:hover { background: #eef7f5; }
.wa-attachment-menu button > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #e6f7f4; color: #0d9488; font-size: 17px; }
.wa-attachment-menu button > span { min-width: 0; display: grid; gap: 1px; }
.wa-attachment-menu strong { font-size: 11px; }
.wa-attachment-menu small { color: #81939c; font-size: 8.5px; }

.wa-reply-preview {
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 0;
  padding: 7px 8px;
  border-left: 4px solid #0d9488;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 48, 60, .08);
}

.wa-reply-preview-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e7f7f4; color: #0d9488; }
.wa-reply-preview > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.wa-reply-preview strong { color: #087f70; font-size: 10px; }
.wa-reply-preview small { overflow: hidden; color: #5e737d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.wa-reply-preview button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #738892; }
.wa-reply-preview button:hover { background: #edf2f4; color: #263f4a; }

.wa-quick-reply-menu {
  position: absolute;
  z-index: 25;
  left: 68px;
  right: 86px;
  bottom: calc(100% + 8px);
  max-height: min(420px, 55vh);
  overflow: hidden;
  border: 1px solid #d8e3e7;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(15, 43, 56, .22);
}

.wa-quick-reply-head {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  border-bottom: 1px solid #e5ecef;
  background: #f8fbfb;
}

.wa-quick-reply-head span { display: inline-flex; align-items: center; gap: 6px; color: #0b766e; font-size: 10px; font-weight: 600; }
.wa-quick-reply-head small { color: #8a9ba3; font-size: 8px; }
.wa-quick-reply-list { max-height: 350px; overflow-y: auto; padding: 5px; }
.wa-quick-reply-list button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) 22px; align-items: center; gap: 9px; padding: 9px; border: 0; border-radius: 9px; background: transparent; color: #294754; text-align: left; }
.wa-quick-reply-list button:hover,
.wa-quick-reply-list button.active { background: #eaf7f5; }
.wa-quick-reply-list button > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.wa-quick-reply-list strong { font-size: 10px; }
.wa-quick-reply-list small { overflow: hidden; color: #71858e; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.wa-quick-reply-key { max-width: 135px; overflow: hidden; padding: 4px 7px; border-radius: 6px; background: #f1f5f6; color: #087f70; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.wa-quick-reply-list button > i { color: #8da0a8; }

.wa-message-row { position: relative; }
.wa-message-row.is-highlighted .wa-message-bubble { animation: wa-message-highlight 1.35s ease; }
@keyframes wa-message-highlight { 0%, 100% { box-shadow: 0 1px 1px rgba(15,23,42,.12); } 35% { box-shadow: 0 0 0 4px rgba(13,148,136,.28), 0 1px 1px rgba(15,23,42,.12); } }

.wa-message-bubble { position: relative; min-width: 88px; }
.wa-message-hover-actions {
  position: absolute;
  z-index: 4;
  top: -13px;
  right: 5px;
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid #d8e1e4;
  border-radius: 99px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 4px 12px rgba(20,44,56,.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.wa-message-bubble:hover .wa-message-hover-actions,
.wa-message-bubble:focus-within .wa-message-hover-actions { opacity: 1; visibility: visible; transform: translateY(0); }
.wa-message-hover-actions button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #627983; font-size: 13px; }
.wa-message-hover-actions button:hover { background: #eaf4f3; color: #087f70; }

.wa-message-quote {
  width: 100%;
  display: grid;
  gap: 2px;
  margin-bottom: 6px;
  padding: 6px 8px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid #0d9488;
  border-radius: 6px;
  background: rgba(0,0,0,.045);
  color: inherit;
  text-align: left;
}
.wa-message-row.outbound .wa-message-quote { background: rgba(0, 90, 73, .065); }
.wa-message-quote strong { color: #087f70; font-size: 9px; }
.wa-message-quote span { overflow: hidden; color: #536a74; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }

.wa-message-media { margin: -2px -4px 6px; overflow: hidden; border-radius: 7px; }
.wa-message-image { display: block; max-width: 420px; background: #dce4e1; }
.wa-message-image img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.wa-message-image.is-sticker { width: 160px; background: transparent; }
.wa-message-image.is-sticker img { max-height: 160px; object-fit: contain; }
.wa-message-video video { display: block; width: min(420px, 100%); max-height: 340px; background: #111; }
.wa-message-audio { min-width: min(330px, 70vw); display: flex; align-items: center; gap: 9px; padding: 9px; background: rgba(255,255,255,.52); }
.wa-audio-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 50%; background: #0d9488; color: #fff; }
.wa-message-audio audio { width: 100%; min-width: 190px; height: 34px; }
.wa-message-document { min-width: min(330px, 70vw); display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 9px; padding: 9px; background: rgba(255,255,255,.58); color: #2f4a56; text-decoration: none; }
.wa-document-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: #fff; color: #d24b3d; font-size: 20px; }
.wa-message-document > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.wa-message-document strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.wa-message-document small { overflow: hidden; color: #738791; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.wa-message-document > i { color: #71858e; }
.wa-message-type { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; color: #607984; font-size: 8px; }
.wa-message-meta { display: flex !important; justify-content: flex-end; align-items: center; gap: 2px; }

.wa-message-reactions {
  position: absolute;
  left: 8px;
  bottom: -14px;
  display: flex;
  gap: 3px;
}
.wa-message-row.outbound .wa-message-reactions { right: 8px; left: auto; }
.wa-message-row:has(.wa-message-reactions) { margin-bottom: 18px; }
.wa-reaction-chip { min-width: 27px; height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; border: 1px solid #d4dfe2; border-radius: 99px; background: #fff; box-shadow: 0 2px 5px rgba(19,44,56,.12); font-size: 13px; }
.wa-reaction-chip.is-mine { border-color: #a9ddd6; background: #e9f8f5; }
.wa-reaction-chip small { color: #6c8089; font-size: 8px; }

.wa-reaction-picker {
  position: fixed;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid #d7e1e4;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(11,37,49,.24);
}
.wa-reaction-picker button { width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 20px; transition: background .13s ease, transform .13s ease; }
.wa-reaction-picker button:hover,
.wa-reaction-picker button.active { background: #e9f6f4; transform: scale(1.12); }
.wa-reaction-picker .wa-reaction-remove { color: #78909a; font-size: 15px; }

.wa-media-dialog {
  width: min(620px, calc(100vw - 30px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(10,35,47,.3);
}
.wa-media-dialog::backdrop { background: rgba(7,29,40,.54); backdrop-filter: blur(2px); }
.wa-media-dialog-shell { display: grid; grid-template-rows: auto minmax(180px, auto) auto auto; max-height: calc(100dvh - 44px); }
.wa-media-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #e1e9ec; }
.wa-media-dialog-head h3 { margin: 2px 0 3px; color: #173642; font-size: 17px; }
.wa-media-dialog-head p { margin: 0; color: #738892; font-size: 9px; }
.wa-media-preview { display: grid; place-items: center; gap: 10px; min-height: 230px; max-height: 55vh; padding: 16px; overflow: auto; background: #eef1ee; }
.wa-media-preview > img,
.wa-media-preview > video { max-width: 100%; max-height: 390px; border-radius: 10px; object-fit: contain; box-shadow: 0 6px 22px rgba(15,39,49,.16); }
.wa-media-audio-preview { width: min(460px, 100%); display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 12px; background: #fff; }
.wa-media-audio-preview > i { color: #0d9488; font-size: 38px; }
.wa-media-audio-preview audio { width: 100%; }
.wa-media-document-preview { width: min(460px, 100%); display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 12px; padding: 18px; border-radius: 12px; background: #fff; }
.wa-media-document-preview > i { color: #d24b3d; font-size: 42px; }
.wa-media-document-preview span { min-width: 0; display: grid; gap: 3px; }
.wa-media-document-preview strong { overflow: hidden; color: #2d4753; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wa-media-document-preview small { color: #7a8e97; font-size: 9px; }
.wa-media-file-meta { display: grid; gap: 2px; text-align: center; }
.wa-media-file-meta strong { max-width: 440px; overflow: hidden; color: #344f5b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.wa-media-file-meta span { color: #7a8f98; font-size: 8.5px; }
.wa-media-caption-field { display: grid; gap: 6px; padding: 13px 18px; border-top: 1px solid #e1e9ec; }
.wa-media-caption-field > span { color: #526b76; font-size: 9px; font-weight: 600; }
.wa-media-caption-field textarea { width: 100%; min-height: 70px; max-height: 130px; resize: vertical; border: 1px solid #d7e2e6; border-radius: 9px; font-size: 11px; }
.wa-media-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 15px; border-top: 1px solid #e1e9ec; }

@media (max-width: 560px) {
  .wa-composer-zone .wa-composer { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 3px; }
  .wa-composer-icon { width: 36px; height: 40px; font-size: 18px; }
  .wa-quick-reply-menu { left: 8px; right: 8px; }
  .wa-quick-reply-head small { display: none; }
  .wa-attachment-menu { position: fixed; right: 10px; bottom: 74px; left: 10px; width: auto; }
  .wa-message-bubble { max-width: 90%; }
  .wa-message-hover-actions { opacity: 1; visibility: visible; top: -12px; transform: none; }
  .wa-message-image { max-width: min(76vw, 360px); }
  .wa-message-audio,
  .wa-message-document { min-width: min(76vw, 330px); }
  .wa-reply-preview { margin-right: 8px; margin-left: 8px; }
  .wa-media-dialog { width: calc(100vw - 16px); }
  .wa-media-preview { min-height: 180px; max-height: 48vh; }
}

/* Coexistence: indicator for messages echoed from WhatsApp Business App */
.wa-message-origin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  opacity: 0.72;
}

/* =========================================================
   WhatsApp optimistic sending + retry + upload progress
   Asia/Jakarta timestamps — 2026-08-05
   ========================================================= */
.wa-message-bubble.is-sending {
  opacity: .86;
}

.wa-message-sending-dot {
  width: 11px;
  height: 11px;
  display: inline-block;
  border: 1.7px solid rgba(67, 91, 101, .28);
  border-top-color: #52727e;
  border-radius: 50%;
  animation: wa-send-spin .75s linear infinite;
}

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

.wa-message-upload-progress {
  min-width: 170px;
  display: grid;
  gap: 4px;
  margin: 6px 0 3px;
}

.wa-message-upload-progress::before {
  content: "";
  grid-area: 1 / 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(59, 87, 98, .15);
}

.wa-message-upload-progress > span {
  grid-area: 1 / 1;
  height: 3px;
  border-radius: 99px;
  background: #0d9488;
  transition: width .18s ease;
}

.wa-message-upload-progress small {
  color: #607984;
  font-size: 8px;
  text-align: right;
}

.wa-message-retry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(196, 57, 57, .24);
  border-radius: 7px;
  background: rgba(255, 255, 255, .66);
  color: #b42d2d;
  font-size: 8.5px;
  font-weight: 600;
  cursor: pointer;
}

.wa-message-retry:hover,
.wa-message-retry:focus-visible {
  border-color: rgba(180, 45, 45, .45);
  background: #fff;
  outline: none;
}

.wa-message-bubble.is-failed .wa-message-meta {
  margin-top: 3px;
}


/* =========================================================
   WhatsApp centered dialogs + flexible quick reply editor
   2026-08-05
   ========================================================= */

/* Native dialogs are explicitly centered to avoid inherited layout or browser quirks. */
.wa-template-gallery-dialog,
.wa-media-dialog {
  position: fixed !important;
  inset: 0 !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  overscroll-behavior: contain;
}

.wa-template-gallery-dialog[open],
.wa-media-dialog[open] {
  display: block;
}

.wa-template-gallery-dialog {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}

.wa-media-dialog {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px);
}

.wa-template-gallery-shell,
.wa-media-dialog-shell {
  width: 100%;
}

/* Quick replies become a spacious editor rather than a cramped single-line composer. */
.wa-composer-field {
  min-height: 42px;
}

.wa-composer-edit-context {
  display: flex;
  align-items: center;
  padding: 9px 12px 0;
  color: #47626d;
}

.wa-composer-edit-context > span {
  display: grid;
  grid-template-columns: 18px auto;
  column-gap: 7px;
  align-items: center;
}

.wa-composer-edit-context i {
  grid-row: 1 / span 2;
  color: #0d9488;
  font-size: 15px;
}

.wa-composer-edit-context strong {
  color: #1f4752;
  font-size: 10px;
}

.wa-composer-edit-context small {
  color: #83959d;
  font-size: 8px;
}

.wa-composer.is-expanded {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "field field field field"
    "attachment template spacer send";
  gap: 8px;
  padding-top: 10px;
}

.wa-composer.is-expanded .wa-composer-menu-wrap {
  grid-area: attachment;
}

.wa-composer.is-expanded #waTemplateOpenBtn {
  grid-area: template;
}

.wa-composer.is-expanded .wa-composer-field {
  grid-area: field;
  display: grid;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #d8e4e7;
  border-radius: 12px;
  box-shadow: 0 2px 7px rgba(26, 60, 73, .06);
}

.wa-composer.is-expanded .wa-send-button {
  grid-area: send;
  justify-self: end;
}

.wa-composer.is-expanded textarea {
  min-height: 132px;
  max-height: 280px;
  padding: 10px 13px 13px;
  resize: vertical;
  line-height: 1.55;
}

.wa-composer.is-expanded + .wa-composer-hint,
.wa-composer-zone:has(.wa-composer.is-expanded) .wa-composer-hint {
  padding-top: 3px;
}

@media (max-width: 720px) {
  .wa-template-gallery-dialog,
  .wa-media-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  .wa-template-gallery-dialog {
    height: calc(100dvh - 16px) !important;
  }

  .wa-composer.is-expanded {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .wa-composer.is-expanded textarea {
    min-height: 118px;
    max-height: 44dvh;
  }
}

/* =========================================================
   Pipeline compact cards + reliable server save feedback
   ========================================================= */
.pipeline-board {
  grid-auto-columns: minmax(284px, 304px);
  gap: 10px;
  padding: 2px 2px 12px;
  scroll-snap-type: x proximity;
}

.app-shell .pipeline-column,
.pipeline-column {
  min-height: 520px;
  overflow: hidden;
  gap: 0;
  border: 1px solid #dfe8eb;
  border-radius: 14px;
  background: #f5f8f9;
  scroll-snap-align: start;
}

.app-shell .pipeline-column header,
.pipeline-column-header {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 62px;
  padding: 10px 12px;
  border-bottom: 1px solid #dfe8eb;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.pipeline-column-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.pipeline-stage-index {
  display: inline-grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 8px;
  color: #0c7774;
  background: #e5f5f3;
  font-size: 11px;
  font-weight: 600;
}

.pipeline-column-title > div {
  min-width: 0;
}

.app-shell .pipeline-column header h2,
.pipeline-column-title h2 {
  overflow: hidden;
  margin: 0;
  color: #153847;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-column-title small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #81939b;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-count-badge {
  display: inline-grid;
  min-width: 27px;
  height: 27px;
  padding: 0 7px;
  place-items: center;
  border: 1px solid #d4e3e5;
  border-radius: 999px;
  color: #49666f;
  background: #f2f7f7;
  font-size: 11px;
  font-weight: 600;
}

.pipeline-dropzone {
  gap: 8px;
  min-height: 455px;
  padding: 8px;
}

.app-shell .lead-card.pipeline-card-compact,
.lead-card.pipeline-card-compact {
  padding: 11px;
  border-color: #dce7ea;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(24, 61, 75, 0.045);
}

.app-shell .lead-card.pipeline-card-compact:hover,
.app-shell .lead-card.pipeline-card-compact:focus,
.lead-card.pipeline-card-compact:hover,
.lead-card.pipeline-card-compact:focus {
  border-color: #78c5bd;
  box-shadow: 0 8px 20px rgba(14, 127, 136, 0.1);
  transform: translateY(-1px);
}

.pipeline-card-compact .pipeline-card-heading {
  align-items: center;
}

.pipeline-lead-identity {
  min-width: 0;
}

.pipeline-card-compact .pipeline-card-heading h3 {
  overflow: hidden;
  margin: 0;
  color: #183b49;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-card-compact .pipeline-card-heading small {
  overflow: hidden;
  margin-top: 2px;
  color: #758a92;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-card-compact .pipeline-drag-handle {
  display: inline-grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 7px;
  color: #9aabb1;
}

.pipeline-card-compact .pipeline-drag-handle:hover {
  color: #0e817d;
  background: #edf8f7;
}

.pipeline-card-compact .pipeline-card-badges {
  justify-content: flex-start;
  gap: 5px;
  margin-top: 8px;
}

.pipeline-card-compact .pipeline-quality,
.pipeline-card-compact .pipeline-completeness {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 8px;
  letter-spacing: 0.025em;
}

.pipeline-compact-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.pipeline-compact-facts span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  padding: 6px 7px;
  border: 1px solid #e7eef0;
  border-radius: 7px;
  color: #526c76;
  background: #f8fafb;
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-compact-facts i {
  flex: 0 0 auto;
  color: #3d918a;
  font-size: 11px;
}

.pipeline-value-followup {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 6px;
  margin-top: 7px;
}

.pipeline-card-value,
.pipeline-followup-compact {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #e3ecee;
  border-radius: 8px;
}

.pipeline-card-value {
  background: #f8fbfb;
}

.pipeline-card-value span,
.pipeline-card-value strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-card-value span {
  color: #8a9ba2;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.pipeline-card-value strong {
  margin-top: 3px;
  color: #1c5d5b;
  font-size: 10px;
  font-weight: 600;
}

.pipeline-followup-compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: #216d70;
  background: #eef8f7;
  border-color: #d7ece9;
}

.pipeline-followup-compact > i {
  font-size: 14px;
}

.pipeline-followup-compact span,
.pipeline-followup-compact strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-followup-compact span {
  font-size: 8px;
  font-weight: 600;
}

.pipeline-followup-compact strong {
  margin-top: 2px;
  color: #5f777e;
  font-size: 8px;
  font-weight: 600;
}

.pipeline-followup-compact.is-urgent {
  color: #b42318;
  background: #fff2f1;
  border-color: #f3d0cc;
}

.pipeline-followup-compact.is-today {
  color: #916000;
  background: #fff8df;
  border-color: #eedda9;
}

.pipeline-note-compact {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  margin: 7px 0 0;
  color: #667c85;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-note-compact i {
  flex: 0 0 auto;
  color: #72a7a2;
}

.pipeline-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #edf1f2;
}

.pipeline-card-footer .sdr-avatar-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: #49666f;
  font-size: 9px;
  font-weight: 600;
}

.pipeline-card-footer .sdr-avatar-label strong {
  display: inline-grid;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #168b84;
  font-size: 8px;
}

.pipeline-card-footer .sdr-avatar-label em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-created-at {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8a9ca3;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}

.pipeline-card-compact .pipeline-card-actions {
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 0;
  border: 0;
}

.pipeline-card-compact .pipeline-card-actions button {
  width: 27px;
  min-width: 27px;
  height: 27px;
  min-height: 27px;
  padding: 0;
  border-radius: 7px;
  font-size: 11px;
}

.pipeline-card-compact .pipeline-card-actions button:last-child {
  color: #14845f;
}

.pipeline-empty-state {
  display: grid;
  min-height: 95px;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px dashed #cadadd;
  border-radius: 10px;
  color: #8a9ba2;
  background: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  font-weight: 600;
}

.pipeline-empty-state i {
  font-size: 18px;
}

.pipeline-save-status {
  position: relative;
  min-height: 20px;
  padding-left: 21px;
  margin: 10px 2px 0;
  color: #687d85;
  font-size: 11px;
  font-weight: 600;
}

.pipeline-save-status::before {
  position: absolute;
  top: 0;
  left: 1px;
  color: #258a82;
  content: "\f2da";
  font-family: "bootstrap-icons";
}

.pipeline-save-status.is-saving {
  color: #76601e;
}

.pipeline-save-status.is-saving::before {
  color: #b28713;
  content: "\f130";
  animation: pipeline-status-spin 0.8s linear infinite;
}

.pipeline-save-status.is-success {
  color: #176b56;
}

.pipeline-save-status.is-success::before {
  color: #178568;
  content: "\f26a";
}

.pipeline-save-status.is-error {
  color: #a8322b;
}

.pipeline-save-status.is-error::before {
  color: #c13c33;
  content: "\f33a";
}

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

@media (max-width: 760px) {
  .pipeline-board {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .pipeline-column {
    min-height: 300px;
  }

  .pipeline-dropzone {
    min-height: 220px;
  }
}


/* WhatsApp multi-number, automation, chatbot, and AI summary */
.wa-number-filter{display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid #dbe3ea;border-radius:10px;background:#fff;color:#5f6f7c;min-height:38px}
.wa-number-filter select{width:100%;min-width:0;border:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;font-size:12px;font-weight: 600;color:#334155}
.wa-number-filter i{font-size:13px;color:#64748b}.wa-number-filter.hidden{display:none!important}
.wa-number-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:10px;color:#64748b;font-weight: 600}.wa-number-chip i{font-size:9px}.wa-number-chip strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-chat-person small .wa-number-chip{margin-left:5px}
.wa-automation-shell{padding:24px;min-height:calc(100vh - 150px);background:#f7f9fb}
.wa-automation-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:20px}.wa-automation-heading h3{margin:4px 0 6px;font-size:24px}.wa-automation-heading p{margin:0;color:#64748b}
.wa-automation-connection{display:grid;gap:6px;min-width:260px}.wa-automation-connection span{font-size:11px;font-weight: 600;color:#64748b;text-transform:uppercase;letter-spacing:.05em}
.wa-automation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.wa-automation-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.04)}
.wa-automation-card>header{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding-bottom:15px;border-bottom:1px solid #eef2f7}.wa-automation-card h4{margin:0 0 3px;font-size:16px}.wa-automation-card p{margin:0;color:#64748b;font-size:12px;line-height:1.5}
.wa-automation-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#e8f7ef;color:#0f8b5f;font-size:18px}
.wa-switch{position:relative;width:42px;height:24px}.wa-switch input{position:absolute;opacity:0;width:1px!important;height:1px!important}.wa-switch span{display:block;width:42px;height:24px;border-radius:99px;background:#cbd5e1;cursor:pointer;transition:.2s}.wa-switch span:after{content:"";display:block;width:18px;height:18px;border-radius:50%;background:#fff;transform:translate(3px,3px);box-shadow:0 1px 4px rgba(0,0,0,.18);transition:.2s}.wa-switch input:checked+span{background:#15a66c}.wa-switch input:checked+span:after{transform:translate(21px,3px)}
.wa-automation-fields{display:grid;gap:13px;padding-top:15px}.wa-automation-fields label{display:grid;gap:6px}.wa-automation-fields label>span{font-size:11px;font-weight: 600;color:#64748b}.wa-automation-fields input,.wa-automation-fields textarea,.wa-automation-fields select,.wa-automation-connection select{border:1px solid #dbe3ea;border-radius:10px;background:#fff;padding:10px 11px;font:inherit;font-size:12px;line-height:1.45}.wa-automation-fields textarea{resize:vertical;min-height:58px}
.wa-question-grid,.wa-stage-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.wa-automation-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding:15px 17px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}.wa-automation-footer>div:last-child{display:flex;align-items:center;gap:12px}.wa-ai-config-status{display:flex;align-items:center;gap:9px;color:#64748b;font-size:12px}.wa-ai-config-status.is-ready{color:#087a53}.wa-ai-config-status.is-error{color:#b42318}
.wa-ai-summary-card{border:1px solid #dce8e2;border-radius:13px;background:linear-gradient(180deg,#f7fffb,#fff);overflow:hidden}.wa-ai-summary-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-bottom:1px solid #e7f1ec}.wa-ai-summary-head>span{display:flex;align-items:center;gap:8px}.wa-ai-summary-head i{color:#0f9f6e}.wa-ai-summary-head strong{font-size:12px}.wa-ai-summary-head small{display:block;color:#789087;font-size:10px;margin-top:2px}.wa-ai-summary-head button{border:0;background:#e8f7ef;color:#087a53;border-radius:9px;padding:7px 9px;cursor:pointer;font-size:11px;font-weight: 600}.wa-ai-summary-body{padding:12px 13px;display:grid;gap:10px}.wa-ai-summary-body p{margin:0;color:#334155;font-size:12px;line-height:1.55}.wa-ai-summary-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.wa-ai-summary-meta div{padding:8px 9px;border-radius:9px;background:#f3f7f5}.wa-ai-summary-meta span{display:block;color:#789087;font-size:9px;text-transform:uppercase;font-weight: 600}.wa-ai-summary-meta strong{display:block;margin-top:2px;font-size:11px;color:#334155}.wa-ai-empty{color:#64748b;font-size:11px;line-height:1.5}.wa-ai-summary-loading{display:flex;gap:8px;align-items:center;color:#64748b;font-size:11px}
.wa-chatbot-status-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}.wa-chatbot-status-card>div{display:flex;align-items:center;gap:9px}.wa-chatbot-status-card i{color:#0f8b5f}.wa-chatbot-status-card strong{display:block;font-size:11px}.wa-chatbot-status-card small{display:block;font-size:10px;color:#64748b;margin-top:2px}.wa-chatbot-actions{display:flex;gap:6px}.wa-chatbot-actions button{border:1px solid #dbe3ea;background:#fff;border-radius:8px;padding:6px 8px;font-size:10px;font-weight: 600;cursor:pointer}.wa-chatbot-actions button.primary{background:#e8f7ef;color:#087a53;border-color:#cbe9da}
@media(max-width:980px){.wa-automation-grid{grid-template-columns:1fr}.wa-automation-heading{align-items:stretch;flex-direction:column}.wa-automation-connection{min-width:0}.wa-automation-footer{align-items:flex-start;flex-direction:column}.wa-automation-footer>div:last-child{width:100%;justify-content:space-between}}
@media(max-width:640px){.wa-automation-shell{padding:14px}.wa-question-grid,.wa-stage-rule-grid{grid-template-columns:1fr}.wa-automation-card{padding:14px}.wa-ai-summary-meta{grid-template-columns:1fr}}


/* WhatsApp admin-only role gate
   Keep these selectors more specific than the WhatsApp tab display rules. */
html body #inboxView .wa-page-tab.admin-only.hidden,
html body #inboxView .wa-page-tab.admin-only[hidden],
html body #inboxView .wa-followup-panel.admin-only.hidden,
html body #inboxView .wa-followup-panel.admin-only[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   WhatsApp autosave feedback, toast, and loading states
   2026-08-05
   ========================================================= */

#waInboxRefreshBtn.is-loading i {
  animation: wa-ui-spin .8s linear infinite;
}

#waInboxRefreshBtn:disabled {
  cursor: wait;
  opacity: .72;
}

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

.wa-contact-save-feedback {
  position: sticky;
  z-index: 4;
  top: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  margin: 0 -2px 14px;
  padding: 10px 12px;
  border: 1px solid #dbe7e9;
  border-radius: 11px;
  background: rgba(248, 251, 252, .97);
  color: #4e6973;
  box-shadow: 0 5px 16px rgba(27, 62, 78, .07);
  backdrop-filter: blur(8px);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.wa-contact-save-feedback-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #e9f4f3;
  color: #168a81;
  font-size: 15px;
}

.wa-contact-save-feedback > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.wa-contact-save-feedback strong {
  color: inherit;
  font-size: 10.5px;
  font-weight: 600;
}

.wa-contact-save-feedback small {
  overflow: hidden;
  color: #78909a;
  font-size: 8.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.wa-contact-save-feedback.is-saving {
  border-color: #eadca8;
  background: rgba(255, 250, 231, .98);
  color: #87630d;
}

.wa-contact-save-feedback.is-saving .wa-contact-save-feedback-icon {
  color: #a87908;
  background: #fff0bd;
}

.wa-contact-save-feedback.is-saving .wa-contact-save-feedback-icon i {
  animation: wa-ui-spin .8s linear infinite;
}

.wa-contact-save-feedback.is-success {
  border-color: #bfe4d5;
  background: rgba(238, 251, 245, .98);
  color: #167052;
}

.wa-contact-save-feedback.is-success .wa-contact-save-feedback-icon {
  color: #16845f;
  background: #d8f3e7;
}

.wa-contact-save-feedback.is-error {
  border-color: #f1c9c5;
  background: rgba(255, 243, 242, .98);
  color: #a3332d;
}

.wa-contact-save-feedback.is-error .wa-contact-save-feedback-icon {
  color: #b73a33;
  background: #fbe0dd;
}

.wa-contact-autosave-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: #6f8a91;
  font-size: 8px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.wa-contact-autosave-hint i {
  color: #168a81 !important;
}

.wa-contact-field.is-saving,
.wa-label-picker.is-saving,
.wa-label-option.is-saving {
  position: relative;
}

.wa-contact-field.is-saving::after,
.wa-label-picker.is-saving::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 10px;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  border: 2px solid #c8d7dc;
  border-top-color: #0d9488;
  border-radius: 50%;
  content: "";
  animation: wa-ui-spin .7s linear infinite;
  pointer-events: none;
}

.wa-contact-field.is-saving select,
.wa-contact-field.is-saving input,
.wa-label-picker.is-saving {
  cursor: wait;
  opacity: .68;
}

.wa-label-picker.is-saving::after {
  top: 9px;
  right: 3px;
  margin-top: 0;
}

.wa-chat-loading-state {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  color: #69808a;
  text-align: center;
}

.wa-chat-loading-state strong {
  color: #36535e;
  font-size: 13px;
}

.wa-chat-loading-state small {
  font-size: 9px;
}

.wa-chat-loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #dbe8e9;
  border-top-color: #0d9488;
  border-radius: 50%;
  animation: wa-ui-spin .8s linear infinite;
}

.wa-chat-loading-bubbles {
  width: min(300px, 78vw);
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.wa-chat-loading-bubbles span {
  display: block;
  width: 68%;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(90deg, #edf2f3 25%, #f8fafb 50%, #edf2f3 75%);
  background-size: 200% 100%;
  animation: wa-loading-shimmer 1.2s ease-in-out infinite;
}

.wa-chat-loading-bubbles span:nth-child(2) {
  width: 78%;
  margin-left: auto;
}

.wa-chat-loading-bubbles span:nth-child(3) {
  width: 52%;
}

@keyframes wa-loading-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.wa-toast-stack {
  position: fixed;
  z-index: 10050;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  gap: 9px;
  pointer-events: none;
}

.wa-toast {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 11px 13px;
  border: 1px solid #d9e6e7;
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  color: #36535e;
  box-shadow: 0 14px 36px rgba(22, 51, 65, .2);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}

.wa-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wa-toast i {
  color: #16845f;
  font-size: 17px;
}

.wa-toast span {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
}

.wa-toast.is-error {
  border-color: #efc8c4;
  color: #98342e;
}

.wa-toast.is-error i {
  color: #bd3d35;
}

.wa-toast.is-info i {
  color: #287fa5;
}

@media (max-width: 560px) {
  .wa-contact-save-feedback {
    margin-right: 0;
    margin-left: 0;
  }

  .wa-toast-stack {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }
}

/* WhatsApp Marketing Campaign */
.campaign-manager-only[hidden],
.campaign-manager-only.hidden { display: none !important; }
.wa-campaign-shell { padding: 24px; min-height: calc(100vh - 180px); background: #f7f9fb; }
.wa-campaign-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.wa-campaign-heading h3 { margin: 4px 0 6px; font-size: 1.45rem; }
.wa-campaign-heading p { margin: 0; max-width: 760px; color: var(--muted); }
.wa-campaign-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.wa-campaign-heading-actions small { color: var(--muted); white-space: nowrap; }
.wa-campaign-notice { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; margin-bottom: 16px; border: 1px solid #b7e4d3; border-radius: 12px; background: #effbf6; color: #195b48; }
.wa-campaign-notice > i { margin-top: 2px; font-size: 1.05rem; }
.wa-campaign-notice span { display: grid; gap: 2px; font-size: .85rem; }
.wa-campaign-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.wa-campaign-metric { padding: 15px; border: 1px solid #e4e8ed; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.035); }
.wa-campaign-metric span { display: flex; align-items: center; gap: 7px; color: #697586; font-size: .76rem; font-weight: 600; }
.wa-campaign-metric strong { display: block; margin-top: 7px; color: #17212b; font-size: 1.55rem; line-height: 1; }
.wa-campaign-metric small { display: block; margin-top: 6px; color: #8a96a5; font-size: .71rem; }
.wa-campaign-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 190px 220px; gap: 10px; margin-bottom: 13px; }
.wa-campaign-toolbar select, .wa-campaign-search { min-height: 42px; border: 1px solid #dce2e8; border-radius: 10px; background: #fff; }
.wa-campaign-toolbar select { padding: 0 12px; }
.wa-campaign-search { display: flex; align-items: center; gap: 9px; padding: 0 12px; }
.wa-campaign-search i { color: #8a96a5; }
.wa-campaign-search input { width: 100%; padding: 0 !important; border: 0 !important; outline: 0; background: transparent; }
.wa-campaign-list { display: grid; gap: 12px; }
.wa-campaign-card { border: 1px solid #e1e6eb; border-radius: 15px; background: #fff; overflow: hidden; box-shadow: 0 3px 12px rgba(15,23,42,.04); }
.wa-campaign-card-main { display: grid; grid-template-columns: minmax(250px, 1.5fr) minmax(170px, .8fr) minmax(260px, 1.15fr) auto; align-items: center; gap: 18px; padding: 16px 18px; }
.wa-campaign-identity { min-width: 0; }
.wa-campaign-identity > div:first-child { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wa-campaign-identity h4 { margin: 0; color: #17212b; font-size: .98rem; }
.wa-campaign-identity p { margin: 7px 0 0; color: #738091; font-size: .77rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-campaign-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; }
.wa-campaign-status[data-status="draft"] { background: #eef1f4; color: #586574; }
.wa-campaign-status[data-status="scheduled"] { background: #eef4ff; color: #315fa8; }
.wa-campaign-status[data-status="processing"] { background: #e8f8f1; color: #087858; }
.wa-campaign-status[data-status="paused"] { background: #fff5df; color: #9b6410; }
.wa-campaign-status[data-status="completed"] { background: #e9f7ed; color: #287143; }
.wa-campaign-status[data-status="cancelled"] { background: #fcebed; color: #a33c49; }
.wa-campaign-schedule { display: grid; gap: 5px; color: #5f6c7b; font-size: .76rem; }
.wa-campaign-schedule span { display: flex; gap: 7px; align-items: center; }
.wa-campaign-progress { min-width: 0; }
.wa-campaign-progress-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #607080; font-size: .72rem; }
.wa-campaign-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e8edf1; }
.wa-campaign-progress-track span { display: block; height: 100%; border-radius: inherit; background: #18a176; transition: width .25s ease; }
.wa-campaign-delivery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 9px; }
.wa-campaign-delivery span { display: grid; gap: 2px; color: #7c8997; font-size: .64rem; }
.wa-campaign-delivery strong { color: #2c3947; font-size: .78rem; }
.wa-campaign-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.wa-campaign-actions button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #dde3e8; border-radius: 9px; background: #fff; color: #526170; cursor: pointer; }
.wa-campaign-actions button:hover { border-color: #9ccfbe; color: #087858; background: #f1fbf7; }
.wa-campaign-actions button.is-danger:hover { border-color: #efb5bc; color: #a12c3c; background: #fff3f4; }
.wa-campaign-card-foot { display: flex; justify-content: space-between; gap: 12px; padding: 9px 18px; border-top: 1px solid #edf0f2; background: #fafbfc; color: #7a8794; font-size: .7rem; }

.wa-campaign-dialog, .wa-campaign-recipients-dialog { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 24px 80px rgba(15,23,42,.25); }
.wa-campaign-recipients-dialog { width: min(820px, calc(100vw - 32px)); }
.wa-campaign-dialog::backdrop, .wa-campaign-recipients-dialog::backdrop { background: rgba(15,23,42,.54); backdrop-filter: blur(3px); }
.wa-campaign-form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.wa-campaign-dialog-head, .wa-campaign-recipients-shell > header { display: flex; justify-content: space-between; gap: 18px; padding: 20px 22px 16px; border-bottom: 1px solid #e7eaee; background: #fff; }
.wa-campaign-dialog-head h3, .wa-campaign-recipients-shell h3 { margin: 4px 0 4px; }
.wa-campaign-dialog-head p, .wa-campaign-recipients-shell p { margin: 0; color: var(--muted); font-size: .82rem; }
.wa-dialog-close { width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: #f0f3f5; color: #526170; cursor: pointer; }
.wa-campaign-dialog-body { padding: 20px 22px 26px; overflow: auto; background: #f7f9fb; }
.wa-campaign-form-section { padding: 18px; margin-bottom: 14px; border: 1px solid #e1e6ea; border-radius: 15px; background: #fff; }
.wa-campaign-step { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 16px; }
.wa-campaign-step > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #0f8e68; color: #fff; font-size: .75rem; font-weight: 600; }
.wa-campaign-step > div { display: grid; gap: 3px; }
.wa-campaign-step strong { font-size: .9rem; }
.wa-campaign-step small { color: #7a8794; font-size: .73rem; }
.wa-campaign-template-preview { display: flex; align-items: flex-start; gap: 12px; padding: 13px; margin-top: 13px; border: 1px solid #dfe6e3; border-radius: 12px; background: #f1f8f5; color: #345648; }
.wa-campaign-template-preview > i { margin-top: 2px; }
.wa-campaign-template-preview span { white-space: pre-wrap; line-height: 1.55; font-size: .8rem; }
.wa-campaign-parameter-map { display: grid; gap: 9px; margin-top: 12px; }
.wa-campaign-param-row { display: grid; grid-template-columns: 90px 160px 1fr; align-items: center; gap: 9px; padding: 9px; border: 1px solid #e5e9ed; border-radius: 10px; background: #fbfcfd; }
.wa-campaign-param-row > strong { color: #526170; font-size: .73rem; }
.wa-campaign-param-row select, .wa-campaign-param-row input { min-height: 38px; }
.wa-campaign-param-custom.hidden { display: none !important; }
.wa-campaign-audience-actions { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.wa-campaign-audience-actions span { color: #6c7987; font-size: .77rem; }
.wa-campaign-audience-preview { margin-top: 12px; }
.wa-campaign-audience-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-campaign-audience-summary span { padding: 7px 10px; border-radius: 9px; background: #f0f3f5; color: #526170; font-size: .72rem; }
.wa-campaign-audience-summary span.is-valid { background: #e9f8f1; color: #147455; }
.wa-campaign-audience-sample { display: grid; gap: 6px; margin-top: 10px; }
.wa-campaign-audience-sample div { display: grid; grid-template-columns: minmax(140px,1fr) minmax(130px,1fr) 130px 110px; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #edf0f2; color: #596777; font-size: .7rem; }
.wa-campaign-audience-sample strong { color: #253341; }
.wa-campaign-consent { display: flex !important; align-items: flex-start; gap: 11px; padding: 13px; margin-top: 13px; border: 1px solid #b9dfd2; border-radius: 12px; background: #f2fbf7; }
.wa-campaign-consent input { width: 17px !important; height: 17px !important; flex: 0 0 auto; margin-top: 2px; padding: 0 !important; }
.wa-campaign-consent span { display: grid; gap: 4px; }
.wa-campaign-consent strong { color: #244a3d; font-size: .8rem; }
.wa-campaign-consent small { color: #608073; font-size: .7rem; }
.wa-campaign-dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 22px; border-top: 1px solid #e3e7eb; background: #fff; }
.wa-campaign-dialog-footer > div { display: flex; gap: 8px; }
.wa-campaign-dialog-footer .detect-status { min-height: auto; }

.wa-campaign-recipients-shell { max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: #fff; }
.wa-campaign-recipient-filter { display: flex; justify-content: flex-end; gap: 9px; padding: 12px 18px; border-bottom: 1px solid #e9edf0; }
.wa-campaign-recipient-filter select { min-width: 160px; }
.wa-campaign-recipient-list { min-height: 280px; overflow: auto; padding: 8px 18px 20px; }
.wa-campaign-recipient-row { display: grid; grid-template-columns: minmax(170px,1.25fr) minmax(130px,1fr) 110px minmax(140px,1fr); gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid #edf0f2; font-size: .73rem; }
.wa-campaign-recipient-row strong { display: block; color: #253341; }
.wa-campaign-recipient-row small { color: #82909d; }
.wa-campaign-recipient-row .wa-campaign-status { justify-self: start; }
.wa-campaign-recipient-error { color: #a13b47; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1050px) {
  .wa-campaign-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .wa-campaign-card-main { grid-template-columns: minmax(240px,1fr) minmax(230px,1fr) auto; }
  .wa-campaign-schedule { display: none; }
}
@media (max-width: 760px) {
  .wa-campaign-shell { padding: 14px; }
  .wa-campaign-heading { flex-direction: column; }
  .wa-campaign-heading-actions { width: 100%; justify-content: flex-start; }
  .wa-campaign-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wa-campaign-toolbar { grid-template-columns: 1fr; }
  .wa-campaign-card-main { grid-template-columns: 1fr; gap: 13px; }
  .wa-campaign-actions { justify-content: flex-start; }
  .wa-campaign-card-foot { flex-direction: column; }
  .wa-campaign-param-row { grid-template-columns: 1fr; }
  .wa-campaign-audience-sample div { grid-template-columns: 1fr 1fr; }
  .wa-campaign-dialog-footer { align-items: stretch; flex-direction: column; }
  .wa-campaign-dialog-footer > div { justify-content: flex-end; }
  .wa-campaign-recipient-row { grid-template-columns: 1fr 1fr; }
}

/* ========================================================================== 
   ESTATEFLOW ENTERPRISE MODERN THEME — 2026-08-05
   Clean, light, high-trust property CRM visual system inspired by premium
   enterprise software: restrained blue, neutral surfaces, dense clarity.
   ========================================================================== */
:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #64748b;
  --line: #d9e2ec;
  --bg: #f3f6f9;
  --surface: #ffffff;
  --navy: #0b2744;
  --blue: #0a6ed1;
  --blue-strong: #075caf;
  --blue-soft: #eaf3fc;
  --teal: #0f828f;
  --green: #18864b;
  --amber: #b86e00;
  --red: #bb0000;
  --sidebar: #0b2744;
  --sidebar-soft: #123a5d;
  --shadow: 0 1px 2px rgba(15, 35, 55, .05), 0 8px 24px rgba(15, 35, 55, .055);
  --shadow-raised: 0 18px 48px rgba(15, 35, 55, .12);
  --radius: .625rem;
}

html { background: var(--bg); }
body {
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1, "cv04" 1;
}
::selection { background: rgba(10,110,209,.18); color: #102a43; }
* { scrollbar-width: thin; scrollbar-color: #b7c6d5 #eef2f6; }

/* Login — compact enterprise authentication */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    linear-gradient(rgba(255,255,255,.68), rgba(255,255,255,.68)),
    radial-gradient(circle at 10% 14%, rgba(10,110,209,.13), transparent 31%),
    radial-gradient(circle at 90% 88%, rgba(15,130,143,.10), transparent 29%),
    #edf3f8;
}
.login-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(78,105,130,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,105,130,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 70%);
}
.login-shell {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  min-height: 590px;
  display: grid;
  grid-template-columns: minmax(300px, .84fr) minmax(430px, 1.16fr);
  overflow: hidden;
  border: 1px solid rgba(118,143,165,.28);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(26,54,80,.14), 0 4px 14px rgba(26,54,80,.06);
}
.login-showcase {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  overflow: hidden;
  padding: 42px 38px;
  color: #fff;
  background:
    linear-gradient(150deg, rgba(255,255,255,.035), transparent 45%),
    linear-gradient(145deg, #0b2744 0%, #0d365d 72%, #0c4b68 100%);
}
.login-showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 390px;
  height: 390px;
  right: -260px;
  top: -210px;
  border: 1px solid rgba(166,212,255,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 64px rgba(166,212,255,.035), 0 0 0 128px rgba(166,212,255,.02);
}
.login-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 38px;
  right: 38px;
  bottom: 94px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.22), transparent);
}
.login-showcase-glow {
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  left: -100px;
  bottom: -100px;
  border-radius: 50%;
  background: rgba(65,184,213,.16);
  filter: blur(30px);
}
.login-premium-brand,
.login-mobile-brand { display: flex; align-items: center; gap: 12px; }
.login-premium-brand > span:last-child,
.login-mobile-brand > span:last-child { display: grid; gap: 2px; }
.login-premium-brand strong,
.login-mobile-brand strong { font-size: 19px; line-height: 1; letter-spacing: -.025em; }
.login-premium-brand small,
.login-mobile-brand small { font-size: 8px; font-weight: 600; letter-spacing: .18em; opacity: .68; }
.login-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: #0a6ed1;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.15);
  font-size: 18px;
}
.login-showcase-copy { max-width: 390px; margin: auto 0; }
.login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9ed0ff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.login-showcase-copy h1 {
  margin: 17px 0 14px;
  color: #fff;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 600;
}
.login-showcase-copy p { max-width: 340px; margin: 0; color: #c9d8e6; font-size: 14px; line-height: 1.65; }
.login-showcase-footer { display: flex; justify-content: space-between; gap: 18px; color: #a9bfd1; font-size: 10px; font-weight: 600; letter-spacing: .03em; }
.login-showcase-footer span { display: inline-flex; align-items: center; gap: 6px; }
.login-panel { display: grid; place-items: center; padding: 48px 62px; background: #fff; }
.login-card { width: min(380px, 100%); display: grid; gap: 17px; }
.login-mobile-brand { display: none; margin-bottom: 4px; color: #0b2744; }
.login-mobile-brand .login-logo { color: #fff; }
.login-heading { margin-bottom: 5px; }
.login-secure-label {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0a6ed1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.login-heading h2 { margin: 10px 0 6px; color: #172033; font-size: 31px; line-height: 1.15; letter-spacing: -.035em; }
.login-heading p { margin: 0; color: #697b8c; font-size: 13px; }
.login-field { display: grid; gap: 7px; }
.login-field > span:first-child { color: #40566b; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.login-input-wrap {
  min-height: 50px;
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #cfd9e3;
  border-radius: 8px;
  background: #fff;
  color: #7890a4;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.login-input-wrap:hover { border-color: #aabccc; }
.login-input-wrap:focus-within { border-color: #0a6ed1; box-shadow: 0 0 0 3px rgba(10,110,209,.12); }
.login-input-wrap input { min-width: 0; height: 48px; border: 0; outline: 0; padding: 0; background: transparent; color: #172033; }
.login-input-wrap input::placeholder { color: #9aabba; }
.login-captcha-wrap { display: grid; grid-template-columns: .88fr 1.12fr; gap: 9px; }
.captcha-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 40px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cfd9e3;
  border-radius: 8px;
  background: #f5f8fb;
}
.captcha-row strong { min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 0 8px; color: #173b5f; font-size: 14px; }
.login-refresh-button { width: 40px; height: 50px; border: 0; border-left: 1px solid #cfd9e3; background: transparent; color: #0a6ed1; }
.login-refresh-button:hover { background: #eaf3fc; }
.login-submit-button {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #0a6ed1;
  border-radius: 8px;
  background: #0a6ed1;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(10,110,209,.20);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.login-submit-button:hover { transform: translateY(-1px); background: #075caf; border-color: #075caf; box-shadow: 0 12px 22px rgba(10,110,209,.24); }
.login-trust { display: flex; justify-content: flex-start; gap: 12px; color: #8293a3; font-size: 10px; }
.login-trust span { display: inline-flex; align-items: center; gap: 6px; }
.login-trust i { color: #18864b; }
.login-hint { margin: -4px 0 0; }

/* Enterprise shell */
.app-shell { grid-template-columns: 252px minmax(0,1fr); background: var(--bg); }
.sidebar {
  padding: 0 12px 16px;
  gap: 12px;
  background: linear-gradient(180deg, #0b2744 0%, #09243e 70%, #081f35 100%);
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: 6px 0 20px rgba(15,35,55,.07);
}
.sidebar-head { min-height: 62px; margin: 0 -12px; padding: 12px; border-bottom-color: rgba(255,255,255,.09); background: rgba(5,23,40,.20); }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: #0a6ed1; box-shadow: inset 0 1px rgba(255,255,255,.2); }
.sidebar-brand:hover .brand-mark,
.sidebar-brand:focus-visible .brand-mark { background: #2b88df; }
.sidebar-brand strong { font-size: 16px; letter-spacing: -.02em; }
.sidebar-brand-copy small { color: #86a4be; }
.sidebar-profile,
.sidebar-panel,
.sidebar-logout,
.sidebar-toggle { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.055); }
.sidebar-profile { border-radius: 8px; padding: 10px; }
.sidebar-profile:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.09); }
.sidebar-title { color: #7898b4; font-size: 9px; letter-spacing: .12em; }
.nav-tabs { gap: 4px; }
.nav-tab { min-height: 40px; border-radius: 6px; color: #c4d2df; padding: 0 11px; font-size: 13px; font-weight: 600; }
.nav-tab i { color: #8fb0cc; }
.nav-tab.active,
.nav-tab:hover { border-color: rgba(117,188,255,.20); background: rgba(10,110,209,.80); color: #fff; box-shadow: inset 3px 0 0 #85c7ff; }
.nav-tab.active i,
.nav-tab:hover i { color: #fff; }
.settings-submenu { padding-left: 19px; }
.settings-submenu-item { color: #b9cad8; border-radius: 6px; font-size: 12px; }
.settings-submenu-item.active,
.settings-submenu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-logout { border-radius: 7px; color: #d7e2eb; }
.sidebar-logout:hover,
.sidebar-toggle:hover { background: #0a6ed1; color: #fff; }
.sidebar-avatar,
.user-avatar,
.profile-avatar-large,
.avatar-option { background: #e8f3ff; color: #0a6ed1; }

.main { padding: 0 22px 30px; background: var(--bg); }
.topbar {
  min-height: 64px;
  margin: 0 -22px 20px;
  padding: 0 22px;
  border-bottom: 1px solid #dbe3eb;
  background: rgba(255,255,255,.96);
  box-shadow: 0 1px 3px rgba(15,35,55,.045);
  backdrop-filter: blur(14px);
}
.topbar h1 { color: #172033; font-size: 21px; letter-spacing: -.02em; }
.topbar .eyebrow,
.eyebrow { color: #0a6ed1; font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.sidebar-open-button,
.topbar-notification button { border-color: #d7e1ea; background: #fff; color: #49657d; }
.sidebar-open-button:hover,
.topbar-notification button:hover { border-color: #9fc4e8; background: #eef6fd; color: #0a6ed1; }
.notification-menu { border-radius: 10px; border-color: #d5e0ea; box-shadow: var(--shadow-raised); }
.notification-menu-head { background: #f7f9fb; border-bottom: 1px solid #e3eaf0; }

/* Forms and actions */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control,
.form-select {
  border-color: #cad6e1;
  border-radius: 7px;
  background: #fff;
  color: #172033;
  box-shadow: none;
}
input::placeholder,
textarea::placeholder { color: #91a2b2; }
input:hover,
select:hover,
textarea:hover { border-color: #aebfce; }
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus { border-color: #0a6ed1; box-shadow: 0 0 0 3px rgba(10,110,209,.11); outline: none; }
select option { background: #fff; color: #172033; }
input[type="checkbox"],
input[type="radio"] { accent-color: #0a6ed1; }
label span,
.panel-label { color: #53697d; }
.primary-button,
.login-submit-button,
.wa-send-button,
.btn-primary { border-color: #0a6ed1 !important; background: #0a6ed1 !important; color: #fff !important; box-shadow: 0 5px 14px rgba(10,110,209,.16); }
.primary-button:hover,
.wa-send-button:hover,
.btn-primary:hover { border-color: #075caf !important; background: #075caf !important; }
.ghost-button,
.secondary-button,
.icon-button,
.btn-outline-secondary,
.btn-light { border-color: #cad6e1 !important; background: #fff !important; color: #405a70 !important; }
.ghost-button:hover,
.secondary-button:hover,
.icon-button:hover,
.btn-outline-secondary:hover,
.btn-light:hover { border-color: #8fbce5 !important; background: #eef6fd !important; color: #0a6ed1 !important; }
.danger-button,
.btn-danger { border-color: #d7a5a5 !important; background: #fff5f5 !important; color: #a10f0f !important; }
.danger-button:hover,
.btn-danger:hover { background: #bb0000 !important; border-color: #bb0000 !important; color: #fff !important; }

/* Panels, cards, tables and dialogs */
.panel,
.wide-panel,
.table-panel,
.settings-panel,
.profile-panel,
.history-panel,
.timeline-panel,
.target-summary-panel,
.meta-client-panel,
.meta-creative-panel,
.meta-funnel-panel,
.meta-ad-library-panel,
.lead-detail-panel,
.lead-comments-panel,
.reminder-page-panel,
.followup-assistant-panel {
  border-color: #dbe4ec !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: var(--shadow) !important;
}
.card,
.kpi-card,
.lead-card,
.timeline-card,
.followup-guide-card,
.followup-reminder-card,
.lead-address-card,
.lead-priority-card,
.lead-workstream-card,
.meta-success-card,
.meta-creative-card,
.meta-creative-card-compact {
  border-color: #dce5ed !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #172033;
  box-shadow: 0 3px 12px rgba(15,35,55,.045);
}
.kpi-card strong,
.meta-report-kpis strong,
.target-summary-panel strong { color: #173b5f; }
.kpi-card::before,
.meta-success-card::before { background: #0a6ed1 !important; }
.table,
.master-table,
.target-table,
.meta-client-table,
.meta-report-table,
.meta-ad-library-table,
.import-preview-table,
.matrix-table { color: #24364a; }
.table th,
.master-table th,
.target-table th,
.meta-client-table th,
.meta-report-table th,
.meta-ad-library-table th,
.import-preview-table th,
.matrix-table th { border-color: #dce5ed !important; background: #f5f7f9 !important; color: #40566b !important; }
.table td,
.master-table td,
.target-table td,
.meta-client-table td,
.meta-report-table td,
.meta-ad-library-table td,
.import-preview-table td,
.matrix-table td { border-color: #e5ebf0 !important; }
.table tbody tr:hover,
.master-table tbody tr:hover { background: #f3f8fd; }
.modal,
dialog,
.modal-card,
.modal-content { border-color: #d4dfe9 !important; border-radius: 12px !important; background: #fff !important; color: #172033 !important; box-shadow: 0 28px 70px rgba(15,35,55,.22) !important; }
dialog::backdrop,
.modal-backdrop { background: rgba(18,37,54,.48) !important; backdrop-filter: blur(4px); }
.modal-heading,
.modal-header { border-bottom-color: #e1e8ee !important; background: #f9fafb; }
.modal-actions,
.modal-footer { border-top-color: #e1e8ee !important; background: #f9fafb; }
.empty-state { border-color: #cad8e4 !important; background: #f8fafc !important; color: #718397 !important; }

/* Dashboard, pipeline and sales workspace */
.info-timebar,
.date-toolbar,
.toolbar,
.leads-toolbar,
.pipeline-toolbar { border-color: #dae3eb !important; border-radius: 9px !important; background: #fff !important; box-shadow: 0 2px 8px rgba(15,35,55,.035); }
.progress-track { background: #dce6ef; }
.progress-track span { background: linear-gradient(90deg, #0a6ed1, #36a3e9); }
.pipeline-board { background: transparent; }
.pipeline-column { border-color: #d8e2eb !important; border-radius: 10px !important; background: #eef3f7 !important; }
.pipeline-column-header { border-bottom-color: #d8e2eb !important; background: #f8fafb !important; }
.pipeline-column-title,
.pipeline-card-heading { color: #172033 !important; }
.pipeline-stage-index,
.pipeline-count-badge { border-color: #c8dff4 !important; background: #eaf3fc !important; color: #0a6ed1 !important; }
.pipeline-card-compact { border-color: #dbe4ec !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 2px 8px rgba(15,35,55,.045); }
.pipeline-card-compact:hover { border-color: #8dbbe4 !important; box-shadow: 0 8px 20px rgba(15,35,55,.09); transform: translateY(-1px); }
.pipeline-card-value { color: #075caf !important; }
.pipeline-last-note,
.pipeline-property-summary,
.pipeline-contact,
.pipeline-created-at { color: #718397 !important; }
.pipeline-dropzone { border-color: #cbd8e4 !important; }
.pipeline-dropzone.is-over { border-color: #0a6ed1 !important; background: #eaf3fc !important; }

/* WhatsApp workspace */
.wa-main-panel,
.wa-inbox-layout,
.wa-chat-screen,
.wa-analytics-shell,
.wa-settings-panel,
.wa-automation-shell,
.wa-campaign-shell,
.wa-funnel-content { border-color: #d7e1ea !important; background: #fff !important; }
.wa-page-tabs,
.wa-browser-bar,
.wa-inbox-toolbar,
.wa-chat-header,
.wa-conversation-header,
.wa-contact-drawer-head,
.wa-analytics-heading,
.wa-automation-heading,
.wa-campaign-heading { border-color: #dce5ed !important; background: #f8fafb !important; }
.wa-page-tab { color: #526a7e !important; }
.wa-page-tab.active,
.wa-page-tab:hover { border-color: #9bc4e8 !important; background: #eaf3fc !important; color: #0a6ed1 !important; }
.wa-conversation-column,
.wa-contact-column { border-color: #dce5ed !important; background: #fff !important; }
.wa-conversation-item { border-bottom-color: #e5ebf0 !important; background: #fff !important; }
.wa-conversation-item:hover { background: #f5f8fb !important; }
.wa-conversation-item.active { background: #eaf3fc !important; box-shadow: inset 3px 0 0 #0a6ed1; }
.wa-conversation-title,
.wa-chat-person strong,
.wa-contact-profile strong { color: #172033 !important; }
.wa-conversation-preview,
.wa-conversation-meta,
.wa-contact-details,
.wa-contact-field small { color: #718397 !important; }
.wa-contact-avatar,
.wa-chat-person .wa-contact-avatar { border-color: #cce0f2 !important; background: #eaf3fc !important; color: #0a6ed1 !important; }
.wa-message-list {
  background:
    radial-gradient(circle at 1px 1px, rgba(91,117,140,.08) 1px, transparent 1px),
    #f4f1eb !important;
  background-size: 24px 24px !important;
}
.wa-message-bubble { border-color: rgba(76,99,119,.10) !important; background: #fff !important; color: #24364a !important; box-shadow: 0 2px 6px rgba(15,35,55,.07); }
.wa-message-row.outbound .wa-message-bubble,
.wa-message-row.is-outbound .wa-message-bubble { border-color: #bee6bc !important; background: #d9fdd3 !important; color: #173322 !important; }
.wa-message-meta,
.wa-message-origin { color: #6f8191 !important; }
.wa-message-quote,
.wa-reply-preview { border-color: #bfd8ee !important; background: #eef6fd !important; }
.wa-message-date,
.wa-service-window { border-color: #d8e2eb !important; background: rgba(255,255,255,.90) !important; color: #53697d !important; }
.wa-composer-zone,
.wa-composer,
.wa-composer-field { border-color: #d9e3eb !important; background: #f7f9fb !important; }
.wa-composer-field textarea { background: #fff !important; }
.wa-composer-action,
.wa-composer-icon,
.wa-icon-button { border-color: #ccd8e2 !important; background: #fff !important; color: #526a7e !important; }
.wa-composer-action:hover,
.wa-composer-icon:hover,
.wa-icon-button:hover { border-color: #8ebce5 !important; background: #eaf3fc !important; color: #0a6ed1 !important; }
.wa-contact-drawer-body,
.wa-contact-section { border-color: #e0e7ed !important; background: #fff !important; }
.wa-contact-save-feedback { border-color: #c7ddf1 !important; background: #eef6fd !important; color: #075caf !important; }
.wa-kpi-card,
.wa-ai-summary-card,
.wa-chatbot-status-card,
.wa-automation-card,
.wa-embedded-signup-card,
.wa-official-template-card,
.wa-template-gallery-card,
.wa-campaign-card,
.wa-campaign-metric { border-color: #dbe4ec !important; background: #fff !important; color: #24364a !important; box-shadow: 0 3px 12px rgba(15,35,55,.045); }
.wa-kpi-card strong,
.wa-campaign-metric strong { color: #173b5f !important; }
.wa-template-gallery-dialog,
.wa-media-dialog,
.wa-campaign-dialog,
.wa-campaign-recipients-dialog { border-color: #cfdbe5 !important; background: #fff !important; }
.wa-template-gallery-head,
.wa-media-dialog-head,
.wa-campaign-dialog-head,
.wa-campaign-recipients-shell > header,
.wa-campaign-dialog-footer { border-color: #dde5ec !important; background: #f8fafb !important; }
.wa-template-gallery-body,
.wa-media-dialog-shell,
.wa-campaign-dialog-body,
.wa-campaign-recipients-shell { background: #fff !important; }
.wa-template-gallery-card:hover,
.wa-template-gallery-card.is-selected { border-color: #82b5e2 !important; box-shadow: 0 0 0 2px rgba(10,110,209,.08); }
.wa-template-preview-bubble,
.wa-campaign-template-preview { border-color: #b9dfb7 !important; background: #e5f8e3 !important; color: #23422a !important; }
.wa-quick-reply-menu,
.wa-attachment-menu,
.wa-reaction-picker { border-color: #cad7e2 !important; background: #fff !important; box-shadow: var(--shadow-raised) !important; }
.wa-quick-reply-list button:hover { background: #eaf3fc !important; }
.wa-campaign-toolbar,
.wa-campaign-form-section,
.wa-campaign-card-foot,
.wa-campaign-param-row,
.wa-campaign-audience-summary span,
.wa-campaign-audience-sample div,
.wa-campaign-consent,
.wa-campaign-recipient-filter { border-color: #dbe4ec !important; background: #f8fafb !important; }
.wa-campaign-step > span { background: #0a6ed1 !important; color: #fff !important; }
.wa-campaign-actions button { border-color: #cad7e2 !important; background: #fff !important; color: #49657d !important; }
.wa-campaign-actions button:hover { border-color: #8ebce5 !important; background: #eaf3fc !important; color: #0a6ed1 !important; }
.wa-switch input:checked + span { background: #0a6ed1 !important; }

/* Meta reports and client-facing surfaces */
.meta-report-hero {
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 84% 12%, rgba(73,170,255,.20), transparent 28%),
    linear-gradient(125deg, #0b2744, #0d4c7f 66%, #0a6ed1) !important;
  box-shadow: 0 18px 42px rgba(15,54,89,.16);
}
.meta-report-badge { color: #d8ecff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.meta-report-hero .primary-button { background: #fff !important; border-color: #fff !important; color: #075caf !important; }

/* Feedback, loading and semantic states */
.toast,
.app-toast,
.notification-toast { border-color: #cad7e2 !important; background: #fff !important; color: #172033 !important; box-shadow: var(--shadow-raised) !important; }
.loading-spinner,
.login-submit-spinner,
.wa-chat-loading-spinner { border-color: rgba(10,110,209,.18) !important; border-top-color: #0a6ed1 !important; }
:focus-visible { outline: 2px solid #0a6ed1 !important; outline-offset: 2px; }
.status-success,
.status-active,
.status-open { color: #126c3d !important; background: #e9f7ef !important; }
.status-warning,
.status-pending { color: #8a5200 !important; background: #fff5df !important; }
.status-error,
.status-disconnected,
.status-spam { color: #a10f0f !important; background: #fff0f0 !important; }
.status-resolved { color: #53697d !important; background: #edf2f6 !important; }

/* Secondary surfaces */
.notification-menu,
.notification-item,
.info-timebar div,
.settings-tabbar,
.lead-detail-timeline,
.lead-detail-grid > div,
.detail-history-item,
.lead-mention-suggestions,
.lead-comment-form,
.section-heading,
.table-pagination,
.meta-report-kpis article,
.meta-success-metrics > div,
.meta-campaign-group,
.meta-campaign-summary-metrics span,
.meta-funnel-step,
.wa-funnel-mini-map,
.wa-funnel-step,
.wa-category-sidebar,
.whatsapp-template-card,
.wa-template-meta,
.wa-preview-send-panel,
.wa-webhook-card,
.wa-connection-form,
.wa-connection-item,
.wa-reminder-strip,
.wa-advanced-filters,
.wa-template-composer,
.wa-number-filter,
.wa-automation-footer { border-color: #dce5ed !important; background: #fff !important; color: #24364a !important; }
.notification-item:hover,
.lead-mention-suggestions button:hover,
.wa-reminder-strip-list button:hover,
.wa-quick-filters button:hover,
.wa-quick-filters button.active { background: #eaf3fc !important; color: #0a6ed1 !important; }
.settings-tabbar .settings-tab,
.wa-settings-tab,
.wa-language-button,
.wa-quick-filters button,
.small-button,
.table-pagination button { border-color: #cad7e2 !important; background: #fff !important; color: #526a7e !important; }
.settings-tabbar .settings-tab.active,
.wa-settings-tab.active,
.wa-language-button.active { border-color: #98c1e5 !important; background: #eaf3fc !important; color: #0a6ed1 !important; }
.lead-row-unread td,
.timeline-item-unread .timeline-card { background: #f0f7fd !important; }
.wa-config-checks .missing,
.wa-connection-error { border-color: #edb8b8 !important; background: #fff3f3 !important; color: #a10f0f !important; }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; width: min(520px,100%); min-height: 0; }
  .login-showcase { display: none; }
  .login-panel { padding: 42px 38px; }
  .login-mobile-brand { display: flex; }
}
@media (max-width: 600px) {
  .login-screen { padding: 14px; }
  .login-shell { border-radius: 15px; }
  .login-panel { padding: 30px 22px; }
  .login-heading h2 { font-size: 27px; }
  .login-captcha-wrap { grid-template-columns: 1fr; }
  .main { padding-left: 14px; padding-right: 14px; }
  .topbar { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}


/* ========================================================================== 
   EstateFlow — Medium enterprise typography scale
   Applied after the enterprise-modern theme to improve long-session readability.
   ========================================================================== */
:root {
  --font-size-body: 15px;
  --font-size-control: 14px;
  --font-size-label: 12px;
  --font-size-caption: 11.5px;
  --font-size-section: 19px;
}

html { font-size: 16px; }
body {
  font-size: var(--font-size-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font-size: var(--font-size-control);
  line-height: 1.4;
}

/* Login */
.login-showcase-copy p { font-size: 15px; line-height: 1.65; }
.login-kicker,
.login-secure-label { font-size: 11px; }
.login-showcase-footer,
.login-trust { font-size: 11.5px; }
.login-heading h2 { font-size: 32px; }
.login-heading p { font-size: 14.5px; line-height: 1.55; }
.login-field > span:first-child { font-size: 11.5px; }
.login-input-wrap input { font-size: 14.5px; }
.captcha-row strong { font-size: 15px; }
.login-submit-button { font-size: 14.5px; }
.login-hint { font-size: 12px; }

/* Shell, navigation and page hierarchy */
.sidebar-brand strong { font-size: 17px; }
.sidebar-brand-copy small { font-size: 10.5px; }
.sidebar-title { font-size: 10.5px; }
.nav-tab { font-size: 14px; }
.settings-submenu-item { font-size: 13px; }
.sidebar-profile strong,
.sidebar-profile .profile-name { font-size: 14px; }
.sidebar-profile small,
.sidebar-profile .profile-role { font-size: 11.5px; }
.sidebar-logout { font-size: 13.5px; }
.topbar h1 { font-size: 23px; }
.topbar .eyebrow,
.eyebrow { font-size: 10.5px; }

/* Forms and compact labels */
label,
.form-label,
.panel-label,
.field-label { font-size: 13px; }
label > span,
.form-label > span,
.panel-label,
.field-label,
.field-help,
.form-help,
.help-text { font-size: 12px; line-height: 1.5; }
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control,
.form-select { min-height: 42px; }
textarea { line-height: 1.55; }
.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.small-button,
.icon-text-button,
.btn { font-size: 13.5px; }

/* Panels, cards and tables */
.panel h2,
.wide-panel h2,
.table-panel h2,
.settings-panel h2,
.section-heading h2 { font-size: 20px; }
.panel h3,
.card h3,
.section-heading h3 { font-size: 16px; }
.panel p,
.card p,
.empty-state p { font-size: 14px; line-height: 1.55; }
.kpi-card span,
.kpi-card small,
.meta-report-kpis span,
.meta-report-kpis small { font-size: 12px; }
.kpi-card strong,
.meta-report-kpis strong { font-size: 25px; }
.table th,
.master-table th,
.target-table th,
.meta-client-table th,
.meta-report-table th,
.meta-ad-library-table th,
.import-preview-table th,
.matrix-table th { font-size: 12px; line-height: 1.35; }
.table td,
.master-table td,
.target-table td,
.meta-client-table td,
.meta-report-table td,
.meta-ad-library-table td,
.import-preview-table td,
.matrix-table td { font-size: 13.5px; line-height: 1.45; }
.table-pagination,
.table-pagination button { font-size: 12.5px; }
.badge,
.status-badge,
.priority-badge,
.quality-badge,
.source-badge { font-size: 11px; }

/* Lead detail, reminders and feed */
.lead-card h3,
.timeline-card h3,
.followup-guide-card h3 { font-size: 15px; }
.lead-card p,
.timeline-card p,
.followup-guide-card p,
.followup-reminder-card p { font-size: 13px; }
.lead-card small,
.timeline-card small,
.detail-history-item small,
.notification-item small { font-size: 11.5px; }

/* Compact pipeline with readable medium text */
.pipeline-column-title { font-size: 14.5px !important; }
.pipeline-count-badge,
.pipeline-stage-index { font-size: 11px !important; }
.pipeline-card-heading { font-size: 14px !important; line-height: 1.35; }
.pipeline-card-value { font-size: 14px !important; }
.pipeline-property-summary,
.pipeline-contact,
.pipeline-created-at,
.pipeline-last-note { font-size: 12px !important; line-height: 1.45; }
.pipeline-card-compact .badge,
.pipeline-card-compact .status-badge { font-size: 10.5px !important; }
.pipeline-card-actions button { font-size: 12px; }

/* WhatsApp navigation, conversation list and messages */
.wa-page-tab,
.wa-settings-tab { font-size: 14px !important; }
.wa-page-heading h2,
.wa-analytics-heading h2,
.wa-automation-heading h2,
.wa-campaign-heading h2 { font-size: 20px !important; }
.wa-page-heading p,
.wa-analytics-heading p,
.wa-automation-heading p,
.wa-campaign-heading p { font-size: 13px !important; }
.wa-browser-bar strong,
.wa-conversation-column-header strong { font-size: 16px !important; }
.wa-browser-bar small,
.wa-conversation-column-header small { font-size: 11.5px !important; }
.wa-quick-filters button,
.wa-filter-control,
.wa-number-filter select { font-size: 12px !important; }
.wa-conversation-title { font-size: 14px !important; line-height: 1.35; }
.wa-conversation-preview { font-size: 12.5px !important; line-height: 1.4; }
.wa-conversation-meta,
.wa-conversation-time,
.wa-conversation-tags { font-size: 11px !important; }
.wa-chat-person strong,
.wa-contact-profile strong { font-size: 14.5px !important; }
.wa-chat-person small,
.wa-contact-profile small { font-size: 11.5px !important; }
.wa-service-window,
.wa-message-date { font-size: 11.5px !important; }
.wa-message-bubble { font-size: 14px !important; line-height: 1.5 !important; }
.wa-message-meta,
.wa-message-origin { font-size: 10.5px !important; }
.wa-message-quote { font-size: 12px !important; }
.wa-composer-field textarea { font-size: 14px !important; line-height: 1.55 !important; }
.wa-composer-hint,
.wa-composer-status { font-size: 11.5px !important; }
.wa-contact-field small,
.wa-contact-section label,
.wa-contact-section .panel-label { font-size: 11.5px !important; }
.wa-contact-field strong,
.wa-contact-field span { font-size: 13.5px !important; }
.wa-contact-section select,
.wa-contact-section input { font-size: 13px !important; }
.wa-contact-save-feedback { font-size: 12px !important; }

/* WhatsApp cards, template gallery, automation and campaign */
.wa-kpi-card span,
.wa-campaign-metric span { font-size: 11.5px !important; }
.wa-kpi-card strong,
.wa-campaign-metric strong { font-size: 23px !important; }
.wa-ai-summary-card p,
.wa-chatbot-status-card p,
.wa-automation-card p,
.wa-embedded-signup-card p,
.wa-official-template-card p,
.wa-template-gallery-card p,
.wa-campaign-card p { font-size: 13px !important; line-height: 1.5; }
.wa-ai-summary-card small,
.wa-chatbot-status-card small,
.wa-automation-card small,
.wa-template-meta,
.wa-template-gallery-card small,
.wa-campaign-card small { font-size: 11.5px !important; }
.wa-template-gallery-head h3,
.wa-media-dialog-head h3,
.wa-campaign-dialog-head h3 { font-size: 18px !important; }
.wa-template-gallery-card h4,
.wa-campaign-card h3 { font-size: 14px !important; }
.wa-template-preview-bubble,
.wa-campaign-template-preview { font-size: 13.5px !important; line-height: 1.55; }
.wa-quick-reply-list button { font-size: 13px !important; }
.wa-campaign-step { font-size: 13px !important; }
.wa-campaign-step > span { font-size: 12px !important; }
.wa-campaign-actions button { font-size: 12.5px !important; }

/* Meta Ads and management surfaces */
.meta-report-hero p,
.meta-client-panel p,
.meta-funnel-panel p { font-size: 14px; }
.meta-report-badge { font-size: 11.5px; }
.meta-success-card span,
.meta-success-card small,
.meta-campaign-summary-metrics small { font-size: 11.5px; }
.meta-success-card strong,
.meta-campaign-summary-metrics strong { font-size: 20px; }
.meta-creative-card h3,
.meta-creative-card-compact h3 { font-size: 14.5px; }
.meta-creative-card p,
.meta-creative-card-compact p { font-size: 12.5px; }

/* Loading, toast and feedback */
.toast,
.app-toast,
.notification-toast { font-size: 13.5px !important; }
.loading-copy,
.wa-chat-loading-copy,
.empty-state { font-size: 13px; }

@media (max-width: 900px) {
  body { font-size: 14.5px; }
  .nav-tab { font-size: 13.5px; }
  .wa-message-bubble { font-size: 13.5px !important; }
}

@media (max-width: 600px) {
  body { font-size: 14px; }
  .login-heading h2 { font-size: 28px; }
  .topbar h1 { font-size: 21px; }
  .table td,
  .master-table td,
  .target-table td { font-size: 13px; }
}

/* ========================================================================== 
   EstateFlow — WhatsApp connection page enterprise UX refinement
   Fixes legacy white-on-white copy and oversized global checkbox behavior.
   ========================================================================== */
.wa-followup-panel[data-wa-followup-panel="connection"] {
  padding-bottom: 28px;
  background: #f5f8fb;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 28px;
  min-height: 0;
  margin: 20px 24px 8px;
  padding: 20px 22px;
  color: #24364a !important;
  background: linear-gradient(135deg, #ffffff 0%, #f4f9fe 100%) !important;
  border: 1px solid #d6e2ec !important;
  border-left: 4px solid #0a6ed1 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(15, 35, 55, 0.055) !important;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-copy {
  position: relative;
  min-width: 0;
  padding-left: 48px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-copy::before {
  content: "\F618";
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #075caf;
  background: #e7f2fc;
  border: 1px solid #c9e1f6;
  border-radius: 9px;
  font-family: "bootstrap-icons";
  font-size: 17px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 6px;
  padding: 3px 8px;
  color: #075caf !important;
  background: #eaf3fc;
  border: 1px solid #cfe4f7;
  border-radius: 999px;
  font-size: 10.5px !important;
  letter-spacing: .08em;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card h3 {
  margin: 0 0 4px;
  color: #172033 !important;
  font-size: 17px !important;
  line-height: 1.35;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card p {
  max-width: 760px;
  margin: 0;
  color: #60758a !important;
  font-size: 13px !important;
  line-height: 1.55;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-checks {
  gap: 6px;
  margin-top: 11px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-checks span {
  min-height: 26px;
  padding: 4px 9px;
  color: #31566f !important;
  background: #f3f7fa !important;
  border: 1px solid #d7e3ec;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-checks span.ready {
  color: #087f5b !important;
  background: #ecfdf5 !important;
  border-color: #bdebd9;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-checks span.missing {
  color: #9a5b08 !important;
  background: #fff9eb !important;
  border-color: #f2d99b;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-action {
  justify-items: end;
  min-width: 230px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-action .primary-button {
  min-height: 42px;
  padding-inline: 17px;
  color: #fff !important;
  background: #0a6ed1 !important;
  border-color: #0a6ed1 !important;
  box-shadow: 0 6px 16px rgba(10, 110, 209, .16);
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-action .primary-button:hover {
  background: #075caf !important;
  border-color: #075caf !important;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-action small {
  max-width: 300px;
  color: #708499 !important;
  font-size: 11.5px !important;
  line-height: 1.45;
  text-align: right;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-layout {
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr);
  align-items: start;
  gap: 16px;
  padding: 16px 24px 20px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form,
.wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card {
  padding: 20px;
  background: #fff !important;
  border: 1px solid #d7e1ea !important;
  border-radius: 11px !important;
  box-shadow: 0 3px 12px rgba(15, 35, 55, .045) !important;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form .section-heading {
  margin: -2px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5ebf0;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form .section-heading h3,
.wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card h3 {
  color: #172033;
  font-size: 16px !important;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form .section-heading p,
.wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card > p {
  color: #708499;
  font-size: 12px !important;
  line-height: 1.55;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form .form-grid {
  gap: 14px 12px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form label > span:not(.wa-connection-check-copy),
.wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card label > span {
  color: #53697d;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form input:not([type="checkbox"]) {
  min-height: 42px;
  padding: 9px 11px;
  color: #172033;
  background: #fff;
  border-color: #cbd7e1;
  border-radius: 7px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form input:not([type="checkbox"]):focus {
  border-color: #0a6ed1;
  box-shadow: 0 0 0 3px rgba(10, 110, 209, .1);
}

/* Coexistence control: compact switch, never inherits global input width/padding. */
.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 13px 14px;
  color: #24364a;
  background: #f7fafc;
  border: 1px solid #dbe4ec;
  border-radius: 9px;
  cursor: pointer;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check:hover {
  background: #f1f7fc;
  border-color: #bcd5eb;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check input[type="checkbox"] {
  position: relative;
  display: block;
  flex: none;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  background: #aebdca;
  border: 1px solid #9eafbd;
  border-radius: 999px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15, 35, 55, .24);
  transition: transform .18s ease;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check input[type="checkbox"]:checked {
  background: #0a6ed1;
  border-color: #0a6ed1;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(10, 110, 209, .16);
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-transform: none !important;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check-copy strong {
  color: #24364a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check-copy small {
  color: #708499;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form .inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5ebf0;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form .detect-status {
  min-height: 20px;
  margin: 10px 0 0;
  color: #60758a;
  font-size: 12px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card {
  position: sticky;
  top: 82px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card .eyebrow {
  color: #0a6ed1;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-copy-value {
  background: #f7f9fb;
  border-color: #d2dee8;
  border-radius: 7px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-copy-value code {
  color: #3c5368;
  font-size: 11px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-config-checks span {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 11.5px;
}

@media (max-width: 1050px) {
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-action {
    justify-items: start;
    min-width: 0;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-action small {
    text-align: left;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-layout {
    grid-template-columns: 1fr;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card {
    margin: 14px 12px 6px;
    padding: 16px;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-copy {
    padding-left: 0;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-copy::before {
    display: none;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-action,
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-action .primary-button {
    width: 100%;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-layout {
    padding: 12px;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-form,
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card {
    padding: 16px;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-check {
    grid-template-columns: 42px minmax(0, 1fr);
  }
}

/* WhatsApp connection manager — compact multi-number workspace */
body.modal-open {
  overflow: hidden;
}

.wa-followup-panel[data-wa-followup-panel="connection"] {
  padding-bottom: 28px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-manager {
  margin: 16px 24px 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d7e1ea;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(15, 35, 55, .045);
}

.wa-connection-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5ebf0;
}

.wa-connection-manager-head > div:first-child {
  min-width: 0;
}

.wa-connection-manager-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.wa-connection-manager-title-row h3 {
  margin: 0;
  color: #172033;
  font-size: 17px;
  line-height: 1.25;
}

.wa-connection-manager-head p {
  margin: 5px 0 0;
  color: #708499;
  font-size: 12.5px;
  line-height: 1.45;
}

.wa-connection-count {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  color: #075caf;
  background: #edf6ff;
  border: 1px solid #c8e2f8;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.wa-connection-manager-head .secondary-button {
  flex: none;
  min-height: 40px;
  padding-inline: 14px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-list {
  display: grid;
  gap: 0;
  padding: 0;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-item {
  display: grid;
  grid-template-columns: minmax(280px, 1.25fr) minmax(300px, .85fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e9eef3;
  border-radius: 0;
  box-shadow: none;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-item:last-child {
  border-bottom: 0;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-item:hover {
  background: #f8fbfe;
}

.wa-connection-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(32, 184, 106, .14);
}

.wa-connection-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wa-connection-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wa-connection-name-row strong {
  overflow: hidden;
  color: #172033;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-connection-name-row > span[class^="status-"] {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.wa-connection-identity > span {
  color: #526a7f;
  font-size: 12.5px;
  font-weight: 600;
}

.wa-connection-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.wa-connection-tags small {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 7px;
  color: #60758a !important;
  background: #f1f5f8;
  border: 1px solid #e1e8ee;
  border-radius: 999px;
  font-size: 10.5px !important;
  font-weight: 600;
}

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

.wa-connection-meta > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wa-connection-meta span {
  color: #8192a3;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.wa-connection-meta strong {
  overflow: hidden;
  color: #344b60;
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.wa-connection-actions .icon-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  color: #526a7f;
  background: #fff;
  border: 1px solid #cfdae4;
  border-radius: 8px;
}

.wa-connection-actions .icon-button:hover {
  color: #075caf;
  background: #edf6ff;
  border-color: #a9cdeb;
}

.wa-connection-actions .icon-button.is-danger {
  color: #b42318;
  border-color: #efc4bf;
}

.wa-connection-actions .icon-button.is-danger:hover {
  background: #fff2f1;
  border-color: #e59b93;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-error {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -3px 0 0 54px;
  padding: 8px 10px;
  color: #a92c23;
  background: #fff4f3;
  border: 1px solid #f3d2cf;
  border-radius: 7px;
  font-size: 11.5px;
}

.wa-connection-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
}

.wa-connection-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #0a6ed1;
  background: #edf6ff;
  border: 1px solid #c8e2f8;
  border-radius: 11px;
  font-size: 19px;
}

.wa-connection-empty > div {
  display: grid;
  gap: 3px;
}

.wa-connection-empty strong {
  color: #172033;
  font-size: 14px;
}

.wa-connection-empty span:not(.wa-connection-empty-icon) {
  color: #708499;
  font-size: 12.5px;
}

.wa-webhook-disclosure {
  margin: 12px 24px 0;
  background: #fff;
  border: 1px solid #d7e1ea;
  border-radius: 11px;
  box-shadow: 0 3px 12px rgba(15, 35, 55, .035);
}

.wa-webhook-disclosure > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
}

.wa-webhook-disclosure > summary::-webkit-details-marker {
  display: none;
}

.wa-webhook-disclosure-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #0a6ed1;
  background: #edf6ff;
  border-radius: 9px;
}

.wa-webhook-disclosure > summary > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.wa-webhook-disclosure > summary strong {
  color: #24364a;
  font-size: 13px;
}

.wa-webhook-disclosure > summary small {
  color: #7b8e9f;
  font-size: 11.5px;
}

.wa-webhook-disclosure > summary > i {
  color: #7b8e9f;
  transition: transform .18s ease;
}

.wa-webhook-disclosure[open] > summary > i {
  transform: rotate(180deg);
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card-compact {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  gap: 16px;
  margin: 0;
  padding: 4px 16px 16px;
  border: 0 !important;
  border-top: 1px solid #e7edf2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.wa-webhook-card-compact > p {
  grid-column: 1 / -1;
  margin-top: 0 !important;
}

.wa-connection-modal {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: grid;
  place-items: center;
  padding: 24px;
}

.wa-connection-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(19, 38, 57, .42);
  border: 0;
  backdrop-filter: blur(3px);
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-editor {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 0;
  background: #fff !important;
  border: 1px solid #cfdae4 !important;
  border-radius: 14px !important;
  box-shadow: 0 22px 70px rgba(14, 37, 58, .24) !important;
}

.wa-connection-editor-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 17px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid #e5ebf0;
  backdrop-filter: blur(8px);
}

.wa-connection-editor-head h3 {
  margin: 5px 0 3px;
  color: #172033;
  font-size: 18px !important;
}

.wa-connection-editor-head p {
  margin: 0;
  color: #708499;
  font-size: 12.5px !important;
}

.wa-connection-editor-head .icon-button {
  flex: none;
  width: 36px;
  height: 36px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-editor > .form-grid,
.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-editor > .wa-connection-check,
.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-editor > .detect-status {
  margin-right: 22px;
  margin-left: 22px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-editor > .form-grid {
  margin-top: 20px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-editor > .inline-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  justify-content: flex-end;
  margin: 18px 0 0;
  padding: 15px 22px;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid #e5ebf0;
  backdrop-filter: blur(8px);
}

@media (max-width: 1100px) {
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-item {
    grid-template-columns: minmax(260px, 1fr) auto;
  }
  .wa-connection-meta {
    grid-column: 1 / -1;
    padding-left: 54px;
  }
}

@media (max-width: 720px) {
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-manager,
  .wa-webhook-disclosure {
    margin-right: 12px;
    margin-left: 12px;
  }
  .wa-connection-manager-head {
    align-items: stretch;
    flex-direction: column;
  }
  .wa-connection-manager-head .secondary-button {
    width: 100%;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-item {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 15px 14px;
  }
  .wa-connection-main {
    grid-column: 1 / -1;
  }
  .wa-connection-meta {
    grid-column: 1;
    grid-template-columns: 1fr;
    padding-left: 54px;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-actions {
    grid-column: 2;
    grid-row: 2;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-error {
    margin-left: 0;
  }
  .wa-connection-empty {
    grid-template-columns: auto 1fr;
  }
  .wa-connection-empty .secondary-button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card-compact {
    grid-template-columns: 1fr;
  }
  .wa-connection-modal {
    align-items: end;
    padding: 0;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-editor {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0 !important;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-editor > .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== 
   ESTATEFLOW MINIMAL LOGIN — 2026-08-05
   Simplified enterprise authentication with reduced marketing copy.
   ========================================================================== */
.login-screen {
  padding: 24px;
  background:
    radial-gradient(circle at 8% 12%, rgba(10,110,209,.10), transparent 28%),
    radial-gradient(circle at 92% 88%, rgba(15,130,143,.075), transparent 26%),
    #f3f6f9;
}
.login-screen::before {
  opacity: .18;
  background-size: 40px 40px;
}
.login-shell {
  width: min(900px, 100%);
  min-height: 560px;
  grid-template-columns: minmax(300px, .76fr) minmax(430px, 1.24fr);
  border-radius: 18px;
  border-color: rgba(111,137,160,.24);
  box-shadow: 0 26px 70px rgba(25,51,75,.12), 0 3px 12px rgba(25,51,75,.055);
}
.login-showcase {
  justify-content: space-between;
  gap: 26px;
  padding: 38px 36px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.04), transparent 44%),
    linear-gradient(145deg, #0b2744 0%, #103c65 72%, #0f526b 100%);
}
.login-showcase::before {
  width: 350px;
  height: 350px;
  right: -235px;
  top: -205px;
  box-shadow: 0 0 0 58px rgba(166,212,255,.03), 0 0 0 116px rgba(166,212,255,.018);
}
.login-showcase::after {
  left: 36px;
  right: 36px;
  bottom: 78px;
  opacity: .72;
}
.login-showcase-glow {
  width: 210px;
  height: 210px;
  left: -105px;
  bottom: -100px;
  background: rgba(44,160,190,.13);
}
.login-premium-brand strong,
.login-mobile-brand strong {
  font-size: 18px;
}
.login-logo {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  font-size: 17px;
}
.login-showcase-copy {
  max-width: 290px;
  margin: auto 0;
}
.login-kicker {
  color: #a8d6ff;
  font-size: 10.5px;
  letter-spacing: .1em;
}
.login-showcase-copy h1 {
  margin: 16px 0 12px;
  font-size: clamp(35px, 3.6vw, 43px);
  line-height: 1.05;
  letter-spacing: -.043em;
  font-weight: 600;
}
.login-showcase-copy h1 em {
  display: inline-block;
  color: #8bd0ff;
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
}
.login-showcase-copy p {
  max-width: 280px;
  color: #d0dce7;
  font-size: 14px;
  line-height: 1.55;
}
.login-showcase-footer {
  align-items: center;
  color: #aec2d4;
  font-size: 10.5px;
  font-weight: 600;
}
.login-showcase-footer span:last-child {
  color: rgba(215,230,242,.65);
}
.login-panel {
  padding: 44px 54px;
}
.login-card {
  width: min(390px, 100%);
  gap: 16px;
}
.login-heading {
  margin-bottom: 7px;
}
.login-heading h2 {
  margin-top: 9px;
  font-size: 30px;
}
.login-heading p {
  max-width: 330px;
  font-size: 14px;
}
.login-secure-label {
  font-size: 10.5px;
}
.login-trust {
  justify-content: center;
  width: 100%;
  color: #8293a3;
}

@media (max-width: 900px) {
  .login-shell {
    width: min(510px, 100%);
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .login-showcase { display: none; }
  .login-panel { padding: 42px 42px; }
  .login-mobile-brand { display: flex; }
}
@media (max-width: 600px) {
  .login-screen { padding: 12px; }
  .login-shell { border-radius: 14px; }
  .login-panel { padding: 28px 22px; }
  .login-heading h2 { font-size: 27px; }
}


/* Sales role nomenclature — enterprise hierarchy guide */
.role-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.role-guide article {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line, #d8e2ee);
  border-radius: 12px;
  background: #f8fbff;
}
.role-guide strong { color: #102a43; font-size: 13.5px; line-height: 1.35; }
.role-guide span, .role-help-text { color: #62748a; font-size: 12.5px; line-height: 1.55; }
@media (max-width: 980px) { .role-guide { grid-template-columns: 1fr; } }

/* Password recovery + SMTP settings */
.login-password-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
}
.login-text-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #156fc4;
  padding: 3px 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.login-text-button:hover { color: #0d579b; text-decoration: underline; }

.auth-dialog {
  width: min(440px, calc(100vw - 28px));
  max-width: 440px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  overflow: visible;
}
.auth-dialog[open] { display: grid; place-items: center; }
.auth-dialog::backdrop { background: rgba(8, 25, 43, .48); backdrop-filter: blur(5px); }
.auth-dialog-card {
  position: relative;
  display: grid;
  gap: 15px;
  width: 100%;
  padding: 30px;
  border: 1px solid #d9e4ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 42, 67, .23);
}
.auth-dialog-card h2 { margin: 0; color: #102a43; font-size: 25px; }
.auth-dialog-card > p { margin: -7px 0 2px; color: #63758a; font-size: 13.5px; line-height: 1.55; }
.auth-dialog-card label { display: grid; gap: 7px; color: #334e68; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .045em; }
.auth-dialog-card input { width: 100%; min-height: 46px; }
.auth-dialog-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #1677d2;
  background: #eaf4ff;
  font-size: 20px;
}
.auth-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #dce6f0;
  border-radius: 9px;
  color: #536b82;
  background: #f8fafc;
  cursor: pointer;
}
.auth-dialog-status { min-height: 20px; margin: 0 !important; font-size: 12.5px !important; font-weight: 600; }
.auth-dialog-status[data-status="success"] { color: #12805c; }
.auth-dialog-status[data-status="error"] { color: #c43e4f; }
.auth-dialog-status[data-status="info"] { color: #526a82; }
.password-policy { color: #6e8093; font-size: 11.5px; line-height: 1.45; }
.auth-back-login { justify-self: center; }

.smtp-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #d9e4ef;
  border-radius: 999px;
  color: #65798d;
  background: #f7fafc;
  font-size: 11.5px;
  font-weight: 600;
}
.smtp-health-badge i { color: #9aaabc; font-size: 8px; }
.smtp-health-badge.is-ready { color: #087a57; border-color: #bfe7d8; background: #ecfbf5; }
.smtp-health-badge.is-ready i { color: #18a875; }
.smtp-settings-form { display: grid; gap: 20px; }
.smtp-enable-card {
  padding: 15px 16px;
  border: 1px solid #d9e4ef;
  border-radius: 12px;
  background: #f8fbff;
}
.enterprise-switch {
  display: flex !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.enterprise-switch > input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.enterprise-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #b8c5d3;
  transition: .2s ease;
}
.enterprise-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(15,42,67,.25);
  transition: .2s ease;
}
.enterprise-switch input:checked + .enterprise-switch-track { background: #1677d2; }
.enterprise-switch input:checked + .enterprise-switch-track::after { transform: translateX(18px); }
.enterprise-switch > span:last-child { display: grid; gap: 3px; }
.enterprise-switch strong { color: #17324d; font-size: 13.5px; }
.enterprise-switch small { color: #6d7f91; font-size: 11.5px; font-weight: 500; }
.smtp-form-grid { align-items: start; }
.smtp-form-grid label > small { margin-top: 5px; color: #718397; font-size: 11px; line-height: 1.45; }
.smtp-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #e4ebf2;
}
.smtp-form-footer .detect-status { margin: 0; }
.detect-status[data-status="success"] { color: #10815c; }
.detect-status[data-status="error"] { color: #c33e50; }
.smtp-test-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, .9fr);
  gap: 18px 24px;
  align-items: end;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #d9e4ef;
  border-radius: 13px;
  background: #fbfdff;
}
.smtp-test-card strong { color: #17324d; font-size: 14px; }
.smtp-test-card p { margin: 5px 0 0; color: #687b8e; font-size: 12px; }
.smtp-test-card form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 9px; }
.smtp-test-card > small { grid-column: 1 / -1; min-height: 18px; }

@media (max-width: 760px) {
  .auth-dialog-card { padding: 24px 20px; }
  .smtp-form-footer { align-items: stretch; flex-direction: column; }
  .smtp-test-card { grid-template-columns: 1fr; }
  .smtp-test-card form { grid-template-columns: 1fr; }
}


/* Meta billing awareness — direct billing model */
.wa-meta-billing-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  margin: 16px 0;
  border: 1px solid #c9d9e8;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7fbff 0%, #eef5fb 100%);
  box-shadow: 0 4px 14px rgba(28, 75, 110, .06);
}

.wa-meta-billing-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #e3f0fb;
  color: #0a6ed1;
  font-size: 1.25rem;
}

.wa-meta-billing-content { min-width: 0; }
.wa-meta-billing-content .eyebrow { color: #47718f; }
.wa-meta-billing-content h3 {
  margin: 4px 0 6px;
  color: #183b58;
  font-size: 16px;
  line-height: 1.35;
}
.wa-meta-billing-content > p {
  margin: 0;
  max-width: 880px;
  color: #536b7e;
  font-size: 13px;
  line-height: 1.6;
}
.wa-meta-billing-points {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin-top: 11px;
}
.wa-meta-billing-points span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #415d72;
  font-size: 12px;
  line-height: 1.4;
}
.wa-meta-billing-points i { color: #0a6ed1; }
.wa-meta-billing-points .bi-exclamation-circle { color: #b56a0b; }
.wa-meta-billing-actions {
  display: grid;
  gap: 8px;
  min-width: 196px;
}
.wa-meta-billing-actions a {
  min-height: 39px;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.wa-campaign-billing-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  margin: -6px 0 16px;
  border: 1px solid #c7d9ea;
  border-radius: 12px;
  background: #f2f7fc;
  color: #36566f;
}
.wa-campaign-billing-notice > i {
  color: #0a6ed1;
  font-size: 1.05rem;
}
.wa-campaign-billing-notice span {
  font-size: 12.5px;
  line-height: 1.5;
}
.wa-campaign-billing-notice a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0a6ed1;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.wa-campaign-billing-notice a:hover { text-decoration: underline; }

.wa-template-billing-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 11px;
  margin-top: 12px;
  border: 1px solid #d6e2ed;
  border-radius: 10px;
  background: #f6f9fc;
  color: #526b7e;
  font-size: 12px;
  line-height: 1.5;
}
.wa-template-billing-note i {
  margin-top: 2px;
  color: #0a6ed1;
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .wa-meta-billing-card { grid-template-columns: auto minmax(0, 1fr); }
  .wa-meta-billing-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  .wa-campaign-billing-notice { grid-template-columns: auto minmax(0, 1fr); }
  .wa-campaign-billing-notice a { grid-column: 2; justify-self: start; }
}

@media (max-width: 640px) {
  .wa-meta-billing-card {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 15px;
  }
  .wa-meta-billing-icon { width: 40px; height: 40px; }
  .wa-meta-billing-actions { grid-template-columns: 1fr; }
  .wa-meta-billing-points { display: grid; }
  .wa-campaign-billing-notice { grid-template-columns: 1fr; }
  .wa-campaign-billing-notice a { grid-column: 1; }
}


/* ========================================================================== 
   GRIYA CRM — Tenant-friendly WhatsApp connection manager
   Hides platform webhook details and presents only customer-facing actions.
   ========================================================================== */
.wa-followup-panel[data-wa-followup-panel="connection"] {
  padding: 16px 0 32px;
  background: #f4f7fa;
}

.wa-connection-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 14px;
  margin: 0 24px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card-tenant,
.wa-followup-panel[data-wa-followup-panel="connection"] .wa-meta-billing-card-tenant {
  min-height: 178px;
  margin: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 14px rgba(20, 52, 78, .045) !important;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card-tenant {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 22px 24px;
  border-left-width: 1px !important;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card-tenant .wa-embedded-signup-copy {
  padding-left: 52px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card-tenant .wa-embedded-signup-copy::before {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.wa-connection-ready-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: #477087;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.wa-connection-ready-label i {
  color: #16845f;
  font-size: 14px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-action {
  align-self: center;
  min-width: auto;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-meta-billing-card-tenant {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 14px;
  padding: 20px;
  background: #fff !important;
  border: 1px solid #d7e1ea;
}

.wa-meta-billing-card-tenant .wa-meta-billing-icon {
  align-self: start;
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.wa-meta-billing-card-tenant .wa-meta-billing-content h3 {
  margin-top: 2px;
  font-size: 15px;
}

.wa-meta-billing-card-tenant .wa-meta-billing-content > p {
  font-size: 12.5px;
  line-height: 1.55;
}

.wa-meta-billing-card-tenant .wa-meta-billing-points {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.wa-meta-billing-card-tenant .wa-meta-billing-points span {
  font-size: 11.5px;
}

.wa-meta-billing-card-tenant .wa-meta-billing-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid #e7edf2;
}

.wa-meta-billing-card-tenant .wa-meta-billing-actions a {
  flex: 1 1 0;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 11.5px;
}

.wa-followup-panel[data-wa-followup-panel="connection"] .wa-connection-manager-tenant {
  margin-top: 14px;
}

.wa-connection-manager-tenant .wa-connection-manager-head {
  padding: 17px 20px;
}

.wa-connection-manager-tenant .wa-connection-manager-title-row h3 {
  font-size: 16px;
}

.wa-connection-manager-tenant .wa-connection-manager-head p {
  max-width: 680px;
}

.wa-connection-manager-tenant .wa-connection-item {
  min-height: 84px;
}

.wa-connection-manager-tenant .wa-connection-meta span {
  letter-spacing: .025em;
}

/* Webhook configuration is a platform concern and is intentionally not exposed to tenants. */
.wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-disclosure,
.wa-followup-panel[data-wa-followup-panel="connection"] .wa-webhook-card {
  display: none !important;
}

@media (max-width: 1180px) {
  .wa-connection-overview {
    grid-template-columns: 1fr;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card-tenant,
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-meta-billing-card-tenant {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .wa-followup-panel[data-wa-followup-panel="connection"] {
    padding-top: 12px;
  }
  .wa-connection-overview {
    margin: 0 12px;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card-tenant {
    grid-template-columns: 1fr;
    padding: 17px;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card-tenant .wa-embedded-signup-copy {
    padding-left: 0;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card-tenant .wa-embedded-signup-copy::before {
    display: none;
  }
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card-tenant .wa-embedded-signup-action,
  .wa-followup-panel[data-wa-followup-panel="connection"] .wa-embedded-signup-card-tenant .wa-embedded-signup-action .primary-button {
    width: 100%;
  }
  .wa-meta-billing-card-tenant .wa-meta-billing-actions {
    flex-direction: column;
  }
}


/* Central email transport — tenant only controls notification preference */
.core-email-summary-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 17px;
  border: 1px solid #d7e4f0;
  border-radius: 13px;
  background: linear-gradient(135deg, #f8fbff, #eef6ff);
}
.core-email-summary-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #1677d2;
  color: #fff;
  font-size: 18px;
}
.core-email-summary-card strong { color: #17324d; font-size: 13.5px; }
.core-email-summary-card p { margin: 4px 0; color: #526b83; font-size: 12px; }
.core-email-summary-card small { color: #718397; font-size: 11px; }
.core-email-managed-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid #c8d9ea;
  border-radius: 999px;
  background: #fff;
  color: #325b80;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.password-reset-core-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 15px;
  border: 1px solid #cce8dc;
  border-radius: 12px;
  background: #f2fbf7;
  color: #176744;
}
.password-reset-core-note > i { margin-top: 2px; }
.password-reset-core-note strong { display: block; font-size: 12.5px; }
.password-reset-core-note p { margin: 4px 0 0; color: #477560; font-size: 11.5px; line-height: 1.5; }
@media (max-width: 760px) {
  .core-email-summary-card { grid-template-columns: auto minmax(0, 1fr); }
  .core-email-managed-badge { grid-column: 1 / -1; justify-self: start; }
}


/* Workspace company profile and tenant identity — 2026-08-06 */
.workspace-brand-logo,
.topbar-workspace-logo,
.workspace-logo-preview {
  overflow: hidden;
  flex: 0 0 auto;
}
.workspace-brand-logo img,
.topbar-workspace-logo img,
.workspace-logo-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #fff;
}
.workspace-brand-logo > span,
.topbar-workspace-logo > span,
.workspace-logo-preview > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.workspace-brand-logo > span + i,
.topbar-workspace-logo > span + i,
.workspace-logo-preview > span + i { display: none; }
.sidebar-brand-copy { min-width: 0; }
.sidebar-brand-copy strong {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-brand-copy small {
  text-transform: none;
  letter-spacing: .02em;
  font-size: 8px;
}
.topbar-workspace-identity {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 300px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(10, 42, 74, .06);
}
.topbar-workspace-logo {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eaf4ff;
  color: #0a6ed1;
}
.topbar-workspace-identity > span:last-child { min-width: 0; display: grid; gap: 2px; }
.topbar-workspace-identity strong,
.topbar-workspace-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-workspace-identity strong { color: #102a43; font-size: 12px; }
.topbar-workspace-identity small { color: #6b8298; font-size: 9px; }
.topbar-notification { margin-left: 0; }
.workspace-profile-panel { overflow: hidden; }
.workspace-profile-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eaf8f0;
  color: #177245;
  font-size: 11px;
  font-weight: 600;
}
.workspace-profile-form { display: grid; gap: 22px; }
.workspace-brand-editor {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(260px, 1.1fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid #dce8f2;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fbfe, #eef6fc);
}
.workspace-logo-preview-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(10,110,209,.16);
  border-radius: 10px;
  background: #fff;
}
.workspace-logo-preview {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid #d7e6f3;
  border-radius: 12px;
  background: #0a6ed1;
  color: #fff;
  font-size: 24px;
}
.workspace-logo-preview-copy { min-width: 0; display: grid; gap: 4px; }
.workspace-logo-preview-copy strong { overflow: hidden; color: #102a43; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-logo-preview-copy small { color: #6f8497; font-size: 10px; font-weight: 600; }
.workspace-logo-actions { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.workspace-logo-upload { flex: 1 1 220px; display: grid; gap: 7px; }
.workspace-logo-upload span { color: #314b62; font-size: 12px; font-weight: 600; }
.workspace-logo-upload small { color: #7890a4; font-size: 10px; }
.workspace-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.workspace-profile-grid label { display: grid; gap: 7px; }
.workspace-profile-grid label > span { color: #314b62; font-size: 11px; font-weight: 600; }
.workspace-profile-grid .full-span { grid-column: 1 / -1; }
.workspace-profile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2ebf2;
}
.workspace-profile-footer p { margin: 0; color: #6b8298; font-size: 11px; }
.workspace-profile-footer p[data-status="success"] { color: #177245; }
.workspace-profile-footer p[data-status="error"] { color: #b42318; }
@media (max-width: 980px) {
  .topbar-workspace-identity { max-width: 220px; }
  .workspace-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .topbar-workspace-identity { width: 100%; max-width: none; order: 3; }
  .workspace-brand-editor,
  .workspace-profile-grid { grid-template-columns: 1fr; }
  .workspace-profile-grid .full-span { grid-column: auto; }
  .workspace-profile-footer { align-items: stretch; flex-direction: column; }
  .workspace-profile-footer .primary-button { width: 100%; justify-content: center; }
}

/* WhatsApp inbound source & referral visibility — v2026.08.06.4 */
.wa-inbound-source-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.wa-inbound-source-row > small {
  min-width: 0;
  overflow: hidden;
  color: #64798a;
  font-size: 8.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-inbound-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #d6e2eb;
  border-radius: 999px;
  background: #f5f8fa;
  color: #526b7c;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.wa-inbound-source-badge i { font-size: 9px; }
.wa-inbound-source-badge.is-compact { flex: 0 0 auto; padding: 3px 6px; font-size: 8px; }
.wa-inbound-source-badge.is-meta_ads {
  border-color: #bfd5ff;
  background: #eef4ff;
  color: #2258a8;
}
.wa-inbound-source-badge.is-whatsapp_direct {
  border-color: #bfe6d0;
  background: #edf9f2;
  color: #177245;
}
.wa-chat-source-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 3px;
}
.wa-chat-source-line em {
  min-width: 0;
  overflow: hidden;
  color: #64798a;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-inbound-source-banner {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(680px, 94%);
  margin: 0 auto 14px;
  padding: 10px 12px;
  border: 1px solid #d4e0e8;
  border-radius: 10px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 16px rgba(27,55,75,.08);
}
.wa-inbound-source-banner.is-meta_ads { border-color: #bdd3fb; background: rgba(243,247,255,.96); }
.wa-inbound-source-banner.is-whatsapp_direct { border-color: #bfe1cc; background: rgba(241,250,245,.96); }
.wa-inbound-source-banner-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e7eef4;
  color: #526d80;
  font-size: 15px;
}
.wa-inbound-source-banner.is-meta_ads .wa-inbound-source-banner-icon { background: #dfeaff; color: #245db5; }
.wa-inbound-source-banner.is-whatsapp_direct .wa-inbound-source-banner-icon { background: #dff4e7; color: #177245; }
.wa-inbound-source-banner-copy { min-width: 0; display: grid; gap: 2px; }
.wa-inbound-source-banner-copy small { color: #7b8f9e; font-size: 8px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.wa-inbound-source-banner-copy strong,
.wa-inbound-source-banner-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-inbound-source-banner-copy strong { color: #203b4e; font-size: 11px; }
.wa-inbound-source-banner-copy span { color: #687e8e; font-size: 9px; }
.wa-inbound-source-banner > a,
.wa-inbound-source-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid #c6d8e8;
  border-radius: 8px;
  background: #fff;
  color: #235d92;
  font-size: 9px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.wa-inbound-source-banner > a:hover,
.wa-inbound-source-link:hover { border-color: #8fb8dc; background: #f2f8fd; }
.wa-inbound-source-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid #d8e4ec;
  border-radius: 10px;
  background: #f8fafb;
}
.wa-inbound-source-card.is-meta_ads { border-color: #c7d9fa; background: #f4f7ff; }
.wa-inbound-source-card.is-whatsapp_direct { border-color: #c9e5d4; background: #f3faf6; }
.wa-inbound-source-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wa-inbound-source-card-head > small { color: #728798; font-size: 8px; text-align: right; }
.wa-inbound-source-card-grid { display: grid; gap: 0; }
.wa-inbound-source-card-grid > div {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(132,159,179,.18);
}
.wa-inbound-source-card-grid > div:last-child { border-bottom: 0; }
.wa-inbound-source-card-grid span { color: #728798; font-size: 8.5px; }
.wa-inbound-source-card-grid strong { overflow-wrap: anywhere; color: #263f51; font-size: 10px; }
.wa-inbound-source-card-copy {
  margin: 0;
  color: #5f7686;
  font-size: 9.5px;
  line-height: 1.55;
}
.wa-inbound-source-card.is-compact-source { gap: 7px; padding: 10px 11px; }
.wa-inbound-source-direct-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #177245;
  font-size: 9.5px;
  font-weight: 600;
}
.wa-inbound-source-direct-badge i { font-size: 13px; }
.wa-source-section.is-whatsapp_direct { background: #fbfdfc !important; }
.wa-inbound-source-link { width: 100%; }
@media (max-width: 640px) {
  .wa-inbound-source-banner { grid-template-columns: 34px minmax(0, 1fr); width: 100%; }
  .wa-inbound-source-banner > a { grid-column: 1 / -1; }
  .wa-chat-source-line em { max-width: 150px; }
  .wa-inbound-source-card-head { align-items: flex-start; flex-direction: column; }
  .wa-inbound-source-card-head > small { text-align: left; }
}

/* WhatsApp Inbox status dropdown and contextual source UI — v2026.08.06.10 */
.wa-chat-header-actions {
  flex: 0 0 auto;
  min-width: 0;
}
.wa-chat-status-dropdown {
  min-height: 34px;
  display: inline-grid;
  grid-template-columns: 16px minmax(68px, auto) 12px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid #d8e4e9;
  border-radius: 9px;
  background: #fff;
  color: #526d7a;
  box-shadow: 0 1px 2px rgba(31,56,70,.04);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.wa-chat-status-dropdown:hover,
.wa-chat-status-dropdown:focus-within { border-color: #a9c8c3; background: #f9fcfb; box-shadow: 0 2px 6px rgba(31,56,70,.08); }
.wa-chat-status-dropdown > i:first-child { font-size: 13px; }
.wa-chat-status-dropdown select {
  width: 100%;
  min-width: 68px;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 9.5px;
  font-weight: 600;
  cursor: pointer;
}
.wa-chat-status-dropdown .wa-chat-status-chevron { font-size: 9px; opacity: .72; pointer-events: none; }
.wa-chat-status-dropdown.status-open { color: #0b7f73; border-color: #b9dfd9; background: #effaf7; }
.wa-chat-status-dropdown.status-pending { color: #916000; border-color: #ead9ad; background: #fff9e9; }
.wa-chat-status-dropdown.status-resolved { color: #177245; border-color: #c9e5d4; background: #f1faf5; }
.wa-chat-status-dropdown.status-spam { color: #b42318; border-color: #efcbc7; background: #fff4f3; }
.wa-chat-status-dropdown.is-saving,
.wa-chat-status-dropdown:has(select[disabled]) { opacity: .58; cursor: wait; }
.wa-chat-status-dropdown select[disabled] { cursor: wait; }
.wa-add-lead-header {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #b9dfd9;
  border-radius: 9px;
  background: #eaf8f5;
  color: #087f70;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}
.wa-add-lead-header:hover { border-color: #82c8be; background: #ddf4ef; }
.wa-unlinked-lead-card {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  margin-top: 14px;
  padding: 11px;
  border: 1px dashed #a9d7cf;
  border-radius: 11px;
  background: #f2fbf9;
  text-align: left;
}
.wa-unlinked-lead-card > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #daf3ee;
  color: #087f70;
  font-size: 15px;
}
.wa-unlinked-lead-card > span { min-width: 0; display: grid; gap: 2px; }
.wa-unlinked-lead-card strong { color: #264854; font-size: 10.5px; }
.wa-unlinked-lead-card small { color: #718793; font-size: 8.5px; line-height: 1.45; }
.wa-unlinked-lead-card button {
  grid-column: 1 / -1;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: #0d9488;
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
}
.wa-label-manager { display: grid; gap: 10px; }
.wa-label-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wa-label-manager-head > span { min-width: 0; display: grid; gap: 2px; }
.wa-label-manager-head strong { color: #36515e; font-size: 10px; }
.wa-label-manager-head small { color: #7b8f99; font-size: 8px; line-height: 1.35; }
.wa-label-add-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid #cfe1e7;
  border-radius: 8px;
  background: #f7fafb;
  color: #365866;
  font-size: 8.5px;
  font-weight: 600;
  white-space: nowrap;
}
.wa-label-create-form {
  display: none;
  grid-template-columns: minmax(0, 1fr) 92px auto;
  align-items: end;
  gap: 7px;
  padding: 10px;
  border: 1px solid #cfe6e1;
  border-radius: 10px;
  background: #f4fbf9;
}
.wa-label-create-form.is-open { display: grid; }
.wa-label-create-form label { display: grid; gap: 4px; }
.wa-label-create-form label > span { color: #6b818d; font-size: 8px; font-weight: 600; }
.wa-label-create-form input,
.wa-label-create-form select {
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid #d5e2e6;
  border-radius: 8px;
  background: #fff;
  color: #2e4b58;
  font-size: 9.5px;
}
.wa-label-create-form .primary-button { min-height: 34px; padding: 0 10px; font-size: 9px; }
.wa-label-search {
  min-height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid #dae5e9;
  border-radius: 9px;
  background: #fff;
  color: #78909a;
}
.wa-label-search input {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #36515e;
  font-size: 9.5px;
  outline: none;
}
.wa-label-search > span { min-width: 22px; padding: 2px 5px; border-radius: 999px; background: #edf2f4; font-size: 8px; text-align: center; }
.wa-label-selected-list { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-label-selected-chip {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid #d6e2e7;
  border-radius: 999px;
  background: #f5f8fa;
  color: #496574;
  font-size: 8.5px;
  font-weight: 600;
}
.wa-label-selected-chip i { font-size: 11px; }
.wa-label-list {
  max-height: 214px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}
.wa-label-list .wa-label-option {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-color: #dce6ea;
  background: #fff;
  color: #47616d;
}
.wa-label-list .wa-label-option > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-label-color-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: currentColor; }
.wa-label-option.label-teal,
.wa-label-selected-chip.label-teal { color: #087f70; border-color: #b9dfd9; background: #eaf8f5; }
.wa-label-option.label-blue,
.wa-label-selected-chip.label-blue { color: #245db5; border-color: #c8daf7; background: #eef4ff; }
.wa-label-option.label-green,
.wa-label-selected-chip.label-green { color: #177245; border-color: #c7e4d2; background: #eef8f2; }
.wa-label-option.label-amber,
.wa-label-selected-chip.label-amber { color: #9a6700; border-color: #ead9ad; background: #fff8e7; }
.wa-label-option.label-red,
.wa-label-selected-chip.label-red { color: #b42318; border-color: #efcbc7; background: #fff1f0; }
.wa-label-option.label-purple,
.wa-label-selected-chip.label-purple { color: #7544a5; border-color: #ddcff0; background: #f7f2fc; }
.wa-label-option.label-pink,
.wa-label-selected-chip.label-pink { color: #a62962; border-color: #edc9da; background: #fff1f7; }
.wa-label-option.label-slate,
.wa-label-selected-chip.label-slate { color: #536976; border-color: #d6e0e5; background: #f3f6f7; }
.wa-label-empty-state,
.wa-label-no-result {
  grid-column: 1 / -1;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px;
  border: 1px dashed #d8e2e7;
  border-radius: 9px;
  color: #7b8f99;
  font-size: 8.8px;
  text-align: center;
}
.wa-label-more { border: 1px solid #d8e3e7 !important; background: #f4f7f8 !important; color: #647985 !important; }

@media (max-width: 1180px) {
  .wa-chat-status-dropdown { grid-template-columns: 14px minmax(58px, auto) 10px; min-height: 32px; padding: 0 7px; gap: 4px; }
  .wa-chat-status-dropdown select { min-width: 58px; font-size: 9px; }
  .wa-add-lead-header span { display: none; }
  .wa-add-lead-header { width: 34px; padding: 0; }
}
@media (max-width: 860px) {
  .wa-chat-header-actions { gap: 4px; }
  .wa-chat-status-dropdown { grid-template-columns: 13px 52px 9px; min-height: 30px; padding: 0 6px; }
  .wa-chat-status-dropdown select { min-width: 52px; }
  .wa-add-lead-header { width: 30px; min-height: 30px; }
  .wa-label-create-form { grid-template-columns: 1fr; }
  .wa-label-create-form .primary-button { width: 100%; }
}
@media (max-width: 520px) {
  .wa-label-list { grid-template-columns: 1fr; }
}
.wa-conversation-tags em.label-teal { color: #087f70; background: #eaf8f5; border-color: #b9dfd9; }
.wa-conversation-tags em.label-pink { color: #a62962; background: #fff1f7; border-color: #edc9da; }
.wa-conversation-tags em.label-slate { color: #536976; background: #f3f6f7; border-color: #d6e0e5; }

/* WhatsApp Inbox readable typography and spacious status control — v2026.08.06.11 */
#inboxView .wa-page-tab {
  font-size: 14.5px !important;
  letter-spacing: .005em;
}
#inboxView .wa-conversation-title strong { font-size: 20px !important; }
#inboxView .wa-conversation-title small { font-size: 11.5px !important; }
#inboxView .wa-connection-summary-compact strong { font-size: 11.5px !important; }
#inboxView .wa-connection-summary-compact small { font-size: 9.5px !important; }
#inboxView .wa-inbox-search input {
  min-height: 42px;
  font-size: 13.5px !important;
}
#inboxView .wa-quick-filters button,
#inboxView .wa-filter-control,
#inboxView .wa-number-filter select {
  min-height: 34px;
  font-size: 12.5px !important;
}
#inboxView .wa-conversation-item {
  min-height: 84px;
  padding-top: 12px;
  padding-bottom: 12px;
}
#inboxView .wa-conversation-top strong {
  font-size: 14.5px !important;
  line-height: 1.35;
}
#inboxView .wa-conversation-top time { font-size: 10.5px !important; }
#inboxView .wa-conversation-preview small {
  font-size: 12.5px !important;
  line-height: 1.45;
}
#inboxView .wa-conversation-preview small i { font-size: 11.5px; }
#inboxView .wa-conversation-meta {
  font-size: 10.5px !important;
  line-height: 1.35;
}
#inboxView .wa-conversation-tags em {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  font-size: 10px !important;
}
#inboxView .wa-list-end,
#inboxView .wa-load-more-button { font-size: 11px; }

#inboxView .wa-chat-header {
  min-height: 74px;
  padding: 10px 18px;
}
#inboxView .wa-chat-person strong {
  font-size: 15.5px !important;
  line-height: 1.3;
}
#inboxView .wa-chat-person small {
  margin-top: 3px;
  font-size: 11.5px !important;
  line-height: 1.35;
}
#inboxView .wa-chat-header-actions {
  gap: 10px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid #dde6e9;
}
#inboxView .wa-chat-status-dropdown {
  min-width: 158px;
  min-height: 46px;
  grid-template-columns: 20px minmax(96px, 1fr) 14px;
  gap: 9px;
  padding: 5px 12px;
  border-radius: 11px;
  box-shadow: 0 2px 6px rgba(31, 56, 70, .07);
}
#inboxView .wa-chat-status-dropdown > i:first-child {
  font-size: 16px;
}
#inboxView .wa-chat-status-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 1px;
}
#inboxView .wa-chat-status-copy small {
  margin: 0;
  color: currentColor;
  font-size: 9px !important;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .035em;
  opacity: .72;
  text-transform: uppercase;
}
#inboxView .wa-chat-status-dropdown select {
  min-width: 96px;
  font-size: 12.8px !important;
  font-weight: 600;
  line-height: 1.25;
}
#inboxView .wa-chat-status-dropdown .wa-chat-status-chevron {
  font-size: 11px;
}
#inboxView .wa-add-lead-header {
  min-height: 42px;
  padding: 0 13px;
  font-size: 11.5px;
}
#inboxView .wa-service-window {
  min-height: 34px;
  font-size: 11.5px !important;
}
#inboxView .wa-message-date span,
#inboxView .wa-message-history-start { font-size: 10.5px !important; }
#inboxView .wa-message-bubble {
  padding: 9px 11px 7px;
}
#inboxView .wa-message-bubble p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}
#inboxView .wa-message-bubble > span,
#inboxView .wa-message-meta,
#inboxView .wa-message-origin {
  font-size: 10.5px !important;
}
#inboxView .wa-message-type,
#inboxView .wa-message-error { font-size: 11px; }
#inboxView .wa-message-quote { font-size: 12.5px !important; }
#inboxView .wa-composer textarea,
#inboxView .wa-composer-field textarea {
  min-height: 46px;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}
#inboxView .wa-send-button {
  min-width: 84px;
  height: 46px;
  font-size: 12.5px;
}
#inboxView .wa-composer-hint,
#inboxView .wa-composer-status { font-size: 11px !important; }

#inboxView .wa-contact-drawer-head {
  min-height: 70px;
  padding-left: 18px;
}
#inboxView .wa-contact-drawer-head strong { font-size: 15.5px !important; }
#inboxView .wa-contact-drawer-head small { font-size: 10.5px !important; }
#inboxView .wa-contact-profile h3 { font-size: 18.5px !important; }
#inboxView .wa-contact-profile p,
#inboxView .wa-contact-profile small { font-size: 12px !important; }
#inboxView .wa-contact-open-lead {
  min-height: 38px;
  font-size: 11.5px;
}
#inboxView .wa-contact-section {
  padding: 15px;
}
#inboxView .wa-contact-section h4 {
  margin-bottom: 12px;
  font-size: 13px !important;
}
#inboxView .wa-contact-details span,
#inboxView .wa-contact-field > span {
  font-size: 10.5px !important;
  line-height: 1.35;
}
#inboxView .wa-contact-details strong {
  font-size: 12.5px !important;
  line-height: 1.45;
}
#inboxView .wa-contact-field select,
#inboxView .wa-contact-field input[type="datetime-local"] {
  min-height: 42px;
  font-size: 12.5px !important;
}
#inboxView .wa-contact-save-feedback { font-size: 12px !important; }
#inboxView .wa-inbound-source-card-head > small { font-size: 10px !important; }
#inboxView .wa-inbound-source-card-grid span { font-size: 10.5px !important; }
#inboxView .wa-inbound-source-card-grid strong { font-size: 12.5px !important; }
#inboxView .wa-inbound-source-card-copy {
  font-size: 11.5px !important;
  line-height: 1.55;
}
#inboxView .wa-inbound-source-direct-badge { font-size: 11.5px !important; }
#inboxView .wa-label-manager-head strong { font-size: 12px; }
#inboxView .wa-label-manager-head small { font-size: 10px; }
#inboxView .wa-label-add-button {
  min-height: 34px;
  font-size: 10.5px;
}
#inboxView .wa-label-create-form label > span { font-size: 10px; }
#inboxView .wa-label-create-form input,
#inboxView .wa-label-create-form select,
#inboxView .wa-label-search input { font-size: 12px; }
#inboxView .wa-label-selected-chip,
#inboxView .wa-label-list .wa-label-option { font-size: 10.5px; }
#inboxView .wa-label-empty-state,
#inboxView .wa-label-no-result { font-size: 10.5px; }

@media (max-width: 1180px) {
  #inboxView .wa-chat-header-actions {
    gap: 7px;
    margin-left: 8px;
    padding-left: 8px;
  }
  #inboxView .wa-chat-status-dropdown {
    min-width: 136px;
    min-height: 42px;
    grid-template-columns: 18px minmax(80px, 1fr) 12px;
    gap: 7px;
    padding: 4px 10px;
  }
  #inboxView .wa-chat-status-dropdown select {
    min-width: 80px;
    font-size: 12px !important;
  }
  #inboxView .wa-chat-status-copy small { font-size: 8.5px !important; }
}
@media (max-width: 860px) {
  #inboxView .wa-chat-header { min-height: 66px; padding: 8px 10px; }
  #inboxView .wa-chat-header-actions {
    margin-left: 5px;
    padding-left: 5px;
    border-left: 0;
  }
  #inboxView .wa-chat-status-dropdown {
    min-width: 112px;
    min-height: 40px;
    grid-template-columns: 16px minmax(68px, 1fr) 10px;
    gap: 5px;
    padding: 3px 8px;
  }
  #inboxView .wa-chat-status-copy small { display: none; }
  #inboxView .wa-chat-status-dropdown select {
    min-width: 68px;
    font-size: 11.5px !important;
  }
  #inboxView .wa-add-lead-header { min-height: 40px; }
}


/* Enterprise conversation status menu — v2026.08.06.12 */
#inboxView .wa-chat-status-control {
  --wa-status-color: #0a6ed1;
  --wa-status-soft: #eef6ff;
  --wa-status-border: #bfd7ee;
  position: relative;
  flex: 0 0 auto;
  width: 176px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wa-status-color);
}
#inboxView .wa-chat-status-control.status-open {
  --wa-status-color: #087f70;
  --wa-status-soft: #eef9f7;
  --wa-status-border: #b9dfd9;
}
#inboxView .wa-chat-status-control.status-pending {
  --wa-status-color: #8a5a00;
  --wa-status-soft: #fff8e8;
  --wa-status-border: #ead9ad;
}
#inboxView .wa-chat-status-control.status-resolved {
  --wa-status-color: #177245;
  --wa-status-soft: #eef8f2;
  --wa-status-border: #c7e4d2;
}
#inboxView .wa-chat-status-control.status-spam {
  --wa-status-color: #b42318;
  --wa-status-soft: #fff2f1;
  --wa-status-border: #efcbc7;
}
#inboxView .wa-chat-status-trigger {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 7px;
  border: 1px solid var(--wa-status-border);
  border-radius: 12px;
  background: #fff;
  color: var(--wa-status-color);
  box-shadow: 0 2px 8px rgba(25, 49, 66, .06);
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
#inboxView .wa-chat-status-trigger:hover {
  background: var(--wa-status-soft);
  box-shadow: 0 5px 14px rgba(25, 49, 66, .09);
}
#inboxView .wa-chat-status-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--wa-status-color) 18%, transparent);
  outline-offset: 2px;
}
#inboxView .wa-chat-status-control.is-open .wa-chat-status-trigger {
  border-color: var(--wa-status-color);
  background: var(--wa-status-soft);
  box-shadow: 0 7px 20px rgba(25, 49, 66, .12);
}
#inboxView .wa-chat-status-trigger[disabled] {
  cursor: wait;
  opacity: .62;
}
#inboxView .wa-chat-status-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--wa-status-soft);
  color: var(--wa-status-color);
  font-size: 15px;
}
#inboxView .wa-chat-status-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
#inboxView .wa-chat-status-copy small {
  margin: 0;
  overflow: hidden;
  color: #728691;
  font-size: 9px !important;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
#inboxView .wa-chat-status-copy strong {
  overflow: hidden;
  color: #203b49;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#inboxView .wa-chat-status-chevron {
  color: #6d818d;
  font-size: 11px;
  transition: transform .16s ease;
}
#inboxView .wa-chat-status-control.is-open .wa-chat-status-chevron {
  transform: rotate(180deg);
}
#inboxView .wa-chat-status-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 264px;
  max-width: calc(100vw - 28px);
  padding: 7px;
  border: 1px solid #d9e4e9;
  border-radius: 14px;
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 18px 42px rgba(24, 46, 61, .18), 0 3px 10px rgba(24, 46, 61, .08);
  color: #263f4c;
  transform-origin: top right;
  animation: waStatusMenuIn .14s ease-out;
}
@keyframes waStatusMenuIn {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#inboxView .wa-chat-status-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 9px 9px;
  border-bottom: 1px solid #edf1f3;
}
#inboxView .wa-chat-status-menu-head span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
#inboxView .wa-chat-status-menu-head strong {
  color: #1f3947;
  font-size: 12px !important;
  font-weight: 600;
}
#inboxView .wa-chat-status-menu-head small {
  margin: 0;
  color: #7b8e98;
  font-size: 10px !important;
  line-height: 1.35;
}
#inboxView .wa-chat-status-menu-list {
  display: grid;
  gap: 3px;
  padding-top: 6px;
}
#inboxView .wa-chat-status-option {
  --option-color: #526d7a;
  --option-soft: #f5f8fa;
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--option-color);
  text-align: left;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
#inboxView .wa-chat-status-option.status-open { --option-color: #087f70; --option-soft: #eef9f7; }
#inboxView .wa-chat-status-option.status-pending { --option-color: #8a5a00; --option-soft: #fff8e8; }
#inboxView .wa-chat-status-option.status-resolved { --option-color: #177245; --option-soft: #eef8f2; }
#inboxView .wa-chat-status-option.status-spam { --option-color: #b42318; --option-soft: #fff2f1; }
#inboxView .wa-chat-status-option:hover,
#inboxView .wa-chat-status-option:focus-visible {
  border-color: color-mix(in srgb, var(--option-color) 22%, #dce5e9);
  outline: 0;
  background: var(--option-soft);
  transform: translateX(1px);
}
#inboxView .wa-chat-status-option.is-selected {
  border-color: color-mix(in srgb, var(--option-color) 24%, #dce5e9);
  background: var(--option-soft);
}
#inboxView .wa-chat-status-option:disabled {
  cursor: wait;
  opacity: .58;
}
#inboxView .wa-chat-status-option-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--option-soft);
  color: var(--option-color);
  font-size: 15px;
}
#inboxView .wa-chat-status-option-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
#inboxView .wa-chat-status-option-copy strong {
  color: #263f4c;
  font-size: 12.5px !important;
  font-weight: 600;
  line-height: 1.2;
}
#inboxView .wa-chat-status-option-copy small {
  margin: 0;
  overflow: hidden;
  color: #748892;
  font-size: 10px !important;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#inboxView .wa-chat-status-option-check {
  visibility: hidden;
  color: var(--option-color);
  font-size: 15px;
}
#inboxView .wa-chat-status-option.is-selected .wa-chat-status-option-check {
  visibility: visible;
}
#inboxView .wa-chat-status-control.is-saving {
  pointer-events: none;
  opacity: .65;
}

@media (max-width: 1180px) {
  #inboxView .wa-chat-status-control { width: 156px; }
  #inboxView .wa-chat-status-trigger {
    grid-template-columns: 29px minmax(0, 1fr) 14px;
    gap: 7px;
    min-height: 44px;
    padding-right: 8px;
  }
  #inboxView .wa-chat-status-icon { width: 29px; height: 29px; font-size: 14px; }
  #inboxView .wa-chat-status-copy strong { font-size: 12.5px !important; }
}
@media (max-width: 860px) {
  #inboxView .wa-chat-status-control { width: 118px; }
  #inboxView .wa-chat-status-trigger {
    grid-template-columns: 28px minmax(0, 1fr) 12px;
    min-height: 40px;
    gap: 6px;
    padding: 5px 7px 5px 6px;
    border-radius: 10px;
  }
  #inboxView .wa-chat-status-icon { width: 28px; height: 28px; border-radius: 8px; }
  #inboxView .wa-chat-status-copy small { display: none; }
  #inboxView .wa-chat-status-copy strong { font-size: 11.5px !important; }
  #inboxView .wa-chat-status-menu { width: 250px; }
}
@media (max-width: 520px) {
  #inboxView .wa-chat-status-control { width: 108px; }
  #inboxView .wa-chat-status-menu { position: fixed; top: 78px; right: 12px; left: 12px; width: auto; max-width: none; }
}


/* WhatsApp Inbox default status, wider lead drawer, and reliable label composer — v2026.08.06.13 */
#inboxView .wa-contact-column {
  width: clamp(420px, 32vw, 500px);
  max-width: 96vw;
}
#inboxView .wa-contact-drawer-body {
  padding-right: 20px;
  padding-left: 20px;
}
#inboxView .wa-contact-section {
  border-radius: 14px;
}
#inboxView .wa-label-add-button {
  min-width: 104px;
  justify-content: center;
  border-color: #c8dde3;
  background: #fff;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
#inboxView .wa-label-add-button:hover,
#inboxView .wa-label-add-button:focus-visible,
#inboxView .wa-label-add-button.is-active {
  border-color: #82c8bd;
  outline: 0;
  background: #eaf8f5;
  color: #087f70;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .09);
}
#inboxView .wa-label-create-form {
  grid-template-columns: minmax(180px, 1fr) 112px auto;
  gap: 10px;
  padding: 13px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
#inboxView .wa-label-create-form input,
#inboxView .wa-label-create-form select,
#inboxView .wa-label-create-form .primary-button {
  min-height: 40px;
}
#inboxView .wa-label-create-form .primary-button {
  min-width: 88px;
  justify-content: center;
}
@media (max-width: 1180px) {
  #inboxView .wa-contact-column { width: min(440px, 94vw); }
}
@media (max-width: 700px) {
  #inboxView .wa-contact-column { width: 100%; max-width: none; }
  #inboxView .wa-contact-drawer-body { padding-right: 16px; padding-left: 16px; }
  #inboxView .wa-label-create-form { grid-template-columns: 1fr; }
  #inboxView .wa-label-create-form .primary-button { width: 100%; }
}


/* WhatsApp Inbox open queue and accountable sender identity — v2026.08.06.14 */
#inboxView .wa-message-row {
  flex-direction: column;
  align-items: flex-start;
}
#inboxView .wa-message-row.outbound {
  align-items: flex-end;
  justify-content: flex-start;
}
#inboxView .wa-message-sender {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: min(76%, 680px);
  margin: 4px 8px 2px;
  color: #667b86;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
}
#inboxView .wa-message-sender i {
  flex: 0 0 auto;
  color: #0b8a78;
  font-size: 11px;
}
#inboxView .wa-message-sender strong {
  color: #344c58;
  font-weight: 600;
}
#inboxView .wa-message-sender-automation i { color: #7c3aed; }
#inboxView .wa-message-sender-business-app i { color: #2563eb; }
#inboxView .wa-message-sender-unknown { color: #8a6a2f; }
#inboxView .wa-message-sender-unknown i { color: #b7791f; }
@media (max-width: 760px) {
  #inboxView .wa-message-sender {
    max-width: 90%;
    margin-right: 5px;
    margin-left: 5px;
    font-size: 10px;
  }
}

/* WhatsApp Contact Directory & Google Contacts — v2026.08.06.16 */
.wa-contacts-shell{padding:24px;display:grid;gap:18px;background:#f7fafb;min-height:calc(100vh - 190px)}
.wa-contacts-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 24px;border:1px solid #dfe8eb;border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(18,52,65,.05)}
.wa-contacts-heading h3{margin:4px 0 6px;font-size:24px;color:#143445}.wa-contacts-heading p{margin:0;max-width:760px;color:#667e89;line-height:1.55}
.wa-contacts-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.wa-google-contacts-status{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid #dce7ea;border-radius:15px;background:#fff;color:#294a59}
.wa-google-contacts-status[data-state="connected"]{border-color:#bfe3d9;background:#f2fbf8}.wa-google-contacts-status[data-state="warning"]{border-color:#ead9a6;background:#fffaf0}.wa-google-contacts-status[data-state="error"]{border-color:#f0c9c9;background:#fff6f6}
.wa-google-contacts-status>span:nth-child(2){display:grid;gap:3px;flex:1}.wa-google-contacts-status strong{font-size:14px}.wa-google-contacts-status small{color:#718791;line-height:1.4}
.wa-google-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid #dce7ea;font-size:18px;box-shadow:0 4px 12px rgba(18,52,65,.06)}
.wa-contact-inline-action{border:0;background:transparent;color:#2b6e78;font-weight: 600;cursor:pointer;padding:8px 10px;border-radius:9px}.wa-contact-inline-action:hover{background:#e7f4f2}
.wa-contact-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.wa-contact-metrics article{padding:16px 18px;border:1px solid #dfe8eb;border-radius:15px;background:#fff;display:grid;gap:5px}.wa-contact-metrics article>span{display:flex;align-items:center;gap:8px;color:#58727d;font-size:12px;font-weight: 600;text-transform:uppercase;letter-spacing:.04em}.wa-contact-metrics article strong{font-size:25px;color:#173b4b}.wa-contact-metrics article small{color:#83949b}
.wa-contact-directory-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;min-height:520px}
.wa-contact-group-sidebar,.wa-contact-directory-main{border:1px solid #dfe8eb;border-radius:17px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(18,52,65,.04)}
.wa-contact-group-head{height:64px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6edef}.wa-contact-group-head>span{display:grid;gap:2px}.wa-contact-group-head strong{font-size:15px;color:#183c4c}.wa-contact-group-head small{font-size:11px;color:#82949c}.wa-contact-group-head button{width:34px;height:34px;border:1px solid #dce7ea;border-radius:10px;background:#fff;color:#236a72;cursor:pointer}
.wa-contact-group-list{padding:10px;display:grid;gap:4px;max-height:650px;overflow:auto}.wa-contact-group-row{display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:4px}.wa-contact-group-item{width:100%;border:0;background:transparent;padding:11px 10px;border-radius:11px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;color:#355563;cursor:pointer}.wa-contact-group-item:hover{background:#f2f7f8}.wa-contact-group-item.active{background:#e7f5f2;color:#075f62}.wa-contact-group-item>span{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:1px 7px;min-width:0}.wa-contact-group-item i{grid-row:1/3}.wa-contact-group-item strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wa-contact-group-item small{font-size:10px;color:#8799a0}.wa-contact-group-item em{font-style:normal;font-size:11px;font-weight: 600;background:#edf3f5;padding:3px 7px;border-radius:999px}.wa-contact-group-menu{border:0;background:transparent;width:30px;height:30px;border-radius:8px;color:#718790;cursor:pointer}.wa-contact-group-menu:hover{background:#edf3f5;color:#214d5a}
.wa-contact-toolbar{height:64px;padding:0 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #e6edef}.wa-contact-search{flex:1;display:flex;align-items:center;gap:9px;border:1px solid #d7e3e6;border-radius:11px;padding:0 12px;height:40px;background:#fbfdfd}.wa-contact-search input{border:0;outline:0;background:transparent;width:100%;font-size:13px}.wa-contact-toolbar select{height:40px;min-width:170px;border:1px solid #d7e3e6;border-radius:11px;padding:0 34px 0 11px;background:#fff;color:#34545f}
.wa-contact-list{padding:8px 14px 18px;overflow:auto}.wa-contact-table-head,.wa-contact-row{display:grid;grid-template-columns:minmax(230px,1.4fr) minmax(140px,.85fr) minmax(160px,1fr) 130px 110px 76px;gap:12px;align-items:center}.wa-contact-table-head{padding:11px 12px;color:#7b8e96;font-size:10px;font-weight: 600;text-transform:uppercase;letter-spacing:.06em}.wa-contact-row{min-height:76px;padding:11px 12px;border-top:1px solid #edf2f3}.wa-contact-row:hover{background:#fbfdfd}.wa-contact-identity{display:flex;align-items:center;gap:11px;min-width:0}.wa-contact-avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;background:#e5f3f5;color:#126373;font-weight: 600}.wa-contact-identity>span:last-child,.wa-contact-company{display:grid;gap:2px;min-width:0}.wa-contact-identity strong,.wa-contact-company strong{font-size:13px;color:#183b4a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wa-contact-identity small,.wa-contact-company small{font-size:11px;color:#799099;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-contact-group-chips{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.wa-contact-group-chips span{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 7px;border-radius:999px;background:#e8f4f3;color:#24636a;font-size:10px;font-weight: 600}.wa-contact-group-chips em{font-style:normal;font-size:10px;color:#647d86}.wa-contact-group-chips small{color:#93a1a6}.wa-contact-source{display:flex;align-items:center;gap:7px;color:#526d78;font-size:11px}.wa-contact-optin{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eef3f5;color:#647982;font-size:10px;font-weight: 600}.wa-contact-optin[data-status="opted_in"]{background:#e5f6ed;color:#1a7146}.wa-contact-optin[data-status="opted_out"]{background:#fdeaea;color:#a43b3b}.wa-contact-row-actions{display:flex;justify-content:flex-end;gap:5px}.wa-contact-row-actions button{width:32px;height:32px;border:1px solid #dfe8eb;border-radius:9px;background:#fff;color:#5d7680;cursor:pointer}.wa-contact-row-actions button:hover{background:#edf7f5;color:#075f62}
.wa-contact-dialog{width:min(720px,calc(100vw - 32px));max-height:90vh;border:0;border-radius:20px;padding:0;box-shadow:0 30px 80px rgba(8,35,47,.25);overflow:hidden}.wa-group-dialog{width:min(580px,calc(100vw - 32px))}.wa-contact-dialog::backdrop{background:rgba(7,28,38,.52);backdrop-filter:blur(3px)}.wa-contact-dialog-body{padding:22px 24px;max-height:64vh;overflow:auto}.wa-contact-form select[multiple]{min-height:132px;padding:8px}.field-hint{display:block;margin-top:5px;color:#81949b;font-size:10px}
.wa-campaign-source-grid{margin-bottom:14px;padding:14px;border:1px solid #dfe8eb;border-radius:13px;background:#f8fbfb}
@media(max-width:1100px){.wa-contact-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.wa-contact-directory-layout{grid-template-columns:220px minmax(0,1fr)}.wa-contact-table-head,.wa-contact-row{grid-template-columns:minmax(220px,1.5fr) minmax(130px,1fr) minmax(140px,1fr) 110px 70px}.wa-contact-table-head span:nth-child(5),.wa-contact-row>div:nth-child(5){display:none}}
@media(max-width:820px){.wa-contacts-shell{padding:12px}.wa-contacts-heading{padding:17px;display:grid}.wa-contacts-heading-actions{justify-content:flex-start}.wa-contact-directory-layout{grid-template-columns:1fr}.wa-contact-group-sidebar{max-height:260px}.wa-contact-toolbar{height:auto;padding:12px;flex-wrap:wrap}.wa-contact-search{flex-basis:100%}.wa-contact-toolbar select{flex:1}.wa-contact-table-head{display:none}.wa-contact-row{grid-template-columns:1fr auto;gap:9px;padding:14px}.wa-contact-row>div:nth-child(2),.wa-contact-row>div:nth-child(3),.wa-contact-row>div:nth-child(4),.wa-contact-row>div:nth-child(5){grid-column:1}.wa-contact-row-actions{grid-column:2;grid-row:1}.wa-contact-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wa-contact-metrics{grid-template-columns:1fr}.wa-contacts-heading-actions>*{flex:1}.wa-google-contacts-status{align-items:flex-start;flex-wrap:wrap}.wa-contact-directory-layout{min-height:400px}}

/* ========================================================================== 
   ENTERPRISE UI POLISH PACK — 2026-08-06.17
   Normalises icon spacing, toolbar controls, and contact directory actions
   so the interface remains proportional and professional across modules.
   ========================================================================== */
.app-shell .primary-button,
.app-shell .ghost-button,
.app-shell .danger-button,
.app-shell .icon-button {
  gap: 8px;
  white-space: nowrap;
}

.app-shell .primary-button i,
.app-shell .ghost-button i,
.app-shell .danger-button i,
.app-shell .icon-button i {
  flex: 0 0 auto;
  font-size: 14px;
}

.app-shell select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #6f8190 50%),
    linear-gradient(135deg, #6f8190 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 11px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Contact directory header actions */
.wa-contacts-heading-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.wa-contacts-heading-actions > .ghost-button,
.wa-contacts-heading-actions > .primary-button {
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

/* Contact toolbar */
.wa-contact-toolbar {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) 240px 44px !important;
  align-items: center !important;
  gap: 12px !important;
  height: auto !important;
  padding: 16px !important;
}

.wa-contact-search,
.wa-template-gallery-search,
.wa-campaign-search,
.wa-inbox-search,
.wa-search-box {
  min-width: 0 !important;
}

.wa-contact-search {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid #d7e2ea !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.wa-contact-search i,
.wa-template-gallery-search i,
.wa-campaign-search i,
.wa-inbox-search i,
.wa-search-box i {
  flex: 0 0 auto;
  color: #7b8b97 !important;
  font-size: 15px !important;
}

.wa-contact-search input,
.wa-template-gallery-search input,
.wa-campaign-search input,
.wa-inbox-search input,
.wa-search-box input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

.wa-contact-search input::-webkit-search-decoration,
.wa-contact-search input::-webkit-search-cancel-button,
.wa-contact-search input::-webkit-search-results-button,
.wa-contact-search input::-webkit-search-results-decoration,
.wa-template-gallery-search input::-webkit-search-decoration,
.wa-template-gallery-search input::-webkit-search-cancel-button,
.wa-template-gallery-search input::-webkit-search-results-button,
.wa-template-gallery-search input::-webkit-search-results-decoration,
.wa-campaign-search input::-webkit-search-decoration,
.wa-campaign-search input::-webkit-search-cancel-button,
.wa-campaign-search input::-webkit-search-results-button,
.wa-campaign-search input::-webkit-search-results-decoration,
.wa-inbox-search input::-webkit-search-decoration,
.wa-inbox-search input::-webkit-search-cancel-button,
.wa-inbox-search input::-webkit-search-results-button,
.wa-inbox-search input::-webkit-search-results-decoration,
.wa-search-box input::-webkit-search-decoration,
.wa-search-box input::-webkit-search-cancel-button,
.wa-search-box input::-webkit-search-results-button,
.wa-search-box input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.wa-contact-toolbar select,
.wa-campaign-toolbar select,
.wa-inbox-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 40px 0 14px !important;
  border: 1px solid #d7e2ea !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  color: #223646 !important;
  font-size: 14px !important;
}

#waContactRefreshBtn {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid #d7e2ea !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #587180 !important;
}

#waContactRefreshBtn:hover {
  border-color: #8fbce2 !important;
  background: #eef6fd !important;
  color: #0a6ed1 !important;
}

/* Inbox top controls and status selectors */
.wa-inbox-search,
.wa-template-gallery-search,
.wa-campaign-search,
.wa-search-box {
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
}

.wa-inbox-toolbar select,
.wa-campaign-toolbar select,
.wa-contact-toolbar select {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

/* Responsive polish */
@media (max-width: 980px) {
  .wa-contact-toolbar {
    grid-template-columns: minmax(0, 1fr) 220px 44px !important;
  }
}

@media (max-width: 820px) {
  .wa-contacts-heading-actions {
    justify-content: flex-start !important;
  }

  .wa-contact-toolbar {
    grid-template-columns: 1fr !important;
  }

  .wa-contact-toolbar select,
  #waContactRefreshBtn {
    width: 100% !important;
  }

  #waContactRefreshBtn {
    display: inline-flex !important;
    justify-content: center !important;
  }
}

@media (max-width: 560px) {
  .wa-contacts-heading-actions > .ghost-button,
  .wa-contacts-heading-actions > .primary-button {
    width: 100%;
    justify-content: center;
  }
}


/* ========================================================================== 
   GRIYA CRM LOGIN CLARITY REFINEMENT — 2026-08-06.20
   Quieter enterprise login, aligned input shells, and restrained decoration.
   ========================================================================== */
.login-screen {
  min-height: 100vh;
  padding: 28px;
  background:
    radial-gradient(circle at 10% 15%, rgba(10, 110, 209, .075), transparent 30%),
    radial-gradient(circle at 90% 84%, rgba(15, 130, 143, .05), transparent 26%),
    #f3f6f9;
}

.login-screen::before {
  opacity: .08 !important;
  background-size: 48px 48px !important;
}

.login-shell {
  width: min(960px, 100%);
  min-height: 590px;
  grid-template-columns: minmax(330px, .86fr) minmax(480px, 1.14fr);
  overflow: hidden;
  border: 1px solid #d9e2ea;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(22, 48, 72, .11), 0 3px 10px rgba(22, 48, 72, .045);
}

.login-showcase {
  gap: 24px;
  padding: 38px 38px 34px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .025), transparent 46%),
    linear-gradient(145deg, #0b2744 0%, #0e3c66 72%, #0d4e6c 100%);
}

.login-showcase::before {
  width: 320px;
  height: 320px;
  right: -220px;
  top: -195px;
  opacity: .72;
  box-shadow: 0 0 0 54px rgba(166, 212, 255, .022), 0 0 0 108px rgba(166, 212, 255, .012);
}

.login-showcase::after {
  display: none;
}

.login-showcase-glow {
  width: 180px;
  height: 180px;
  left: -100px;
  bottom: -100px;
  opacity: .55;
}

.login-premium-brand {
  gap: 11px;
}

.login-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .13), inset 0 1px rgba(255, 255, 255, .14);
}

.login-premium-brand strong,
.login-mobile-brand strong {
  font-size: 18px;
  letter-spacing: -.02em;
}

.login-premium-brand small,
.login-mobile-brand small {
  font-size: 9px;
  letter-spacing: .15em;
}

.login-showcase-copy {
  max-width: 310px;
  margin: auto 0;
}

.login-kicker {
  gap: 7px;
  color: #a9d4f5;
  font-size: 10px;
  letter-spacing: .105em;
}

.login-showcase-copy h1 {
  margin: 18px 0 14px;
  font-size: clamp(36px, 3.7vw, 46px);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.login-showcase-copy h1 em {
  color: #79c8ff;
}

.login-showcase-copy p {
  max-width: 285px;
  color: #d1ddea;
  font-size: 14px;
  line-height: 1.6;
}

.login-showcase-footer {
  display: grid;
  justify-items: start;
  gap: 6px;
  color: #bbcedd;
  font-size: 10.5px;
  font-weight: 600;
}

.login-showcase-footer span:last-child {
  color: rgba(219, 233, 244, .58);
}

.login-panel {
  display: grid;
  place-items: center;
  padding: 52px 64px;
  background: #fff;
}

.login-card {
  width: min(420px, 100%);
  gap: 15px;
}

.login-heading {
  margin-bottom: 10px;
}

.login-secure-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #0a6ed1 !important;
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.login-heading h2 {
  max-width: 390px;
  margin: 11px 0 7px;
  color: #10233d;
  font-size: 31px;
  line-height: 1.12;
  letter-spacing: -.037em;
}

.login-heading p {
  margin: 0;
  color: #718397;
  font-size: 14px;
  line-height: 1.55;
}

.login-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.login-field > span:first-child {
  margin: 0;
  color: #334b62;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.login-input-wrap {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid #ccd9e4 !important;
  border-radius: 11px;
  background: #fff !important;
  color: #8497aa;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.login-input-wrap:hover {
  border-color: #aebfce !important;
}

.login-input-wrap:focus-within {
  border-color: #0a6ed1 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(10, 110, 209, .11) !important;
}

.login-input-wrap > i {
  width: 20px;
  display: inline-grid;
  place-items: center;
  color: #8094a8;
  font-size: 15px;
}

.login-input-wrap input,
.login-input-wrap input:focus,
.login-input-wrap input:focus-visible {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #172b42 !important;
  box-shadow: none !important;
  font-size: 14.5px !important;
}

.login-input-wrap input::placeholder {
  color: #9aabba;
  opacity: 1;
}

.login-password-tools {
  min-height: 18px;
  margin-top: -7px;
}

.login-text-button {
  padding: 0;
  color: #0a6ed1;
  font-size: 12.5px;
  font-weight: 600;
}

.login-captcha-wrap {
  display: grid;
  grid-template-columns: minmax(150px, .88fr) minmax(190px, 1.12fr);
  gap: 12px;
  min-width: 0;
}

.captcha-row {
  box-sizing: border-box;
  min-width: 0;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) 44px;
  border: 1px solid #ccd9e4;
  border-radius: 11px;
  background: #f8fafc;
}

.captcha-row strong {
  min-height: 50px;
  color: #173b5f;
  font-size: 14.5px;
  font-weight: 600;
}

.login-refresh-button {
  width: 44px;
  height: 50px;
  border-left: 1px solid #d8e2ea;
  color: #0a6ed1;
}

.login-refresh-button:hover {
  background: #edf5fc;
}

.login-submit-button {
  min-height: 52px;
  margin-top: 1px;
  border-radius: 11px;
  background: #0a6ed1;
  box-shadow: 0 10px 22px rgba(10, 110, 209, .18);
  font-size: 14px;
}

.login-submit-button:hover {
  background: #075caf;
  box-shadow: 0 13px 26px rgba(10, 110, 209, .23);
}

.login-hint {
  min-height: 0;
  margin: -2px 0 0;
  padding: 0;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.45;
}

.login-hint.login-error {
  color: #c2231d;
  font-weight: 600;
}

.login-hint.login-success {
  color: #117a45;
  font-weight: 600;
}

.login-trust {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  padding-top: 17px;
  border-top: 1px solid #e7edf2;
  color: #8798a8;
  font-size: 11px;
}

.login-trust span {
  gap: 7px;
}

.login-trust i {
  color: #4c779a;
}

@media (max-width: 900px) {
  .login-shell {
    width: min(530px, 100%);
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .login-showcase {
    display: none;
  }

  .login-panel {
    padding: 44px 46px;
  }

  .login-mobile-brand {
    display: flex;
    margin-bottom: 7px;
  }
}

@media (max-width: 600px) {
  .login-screen {
    padding: 12px;
  }

  .login-shell {
    border-radius: 15px;
  }

  .login-panel {
    padding: 30px 22px;
  }

  .login-heading h2 {
    font-size: 27px;
  }

  .login-captcha-wrap {
    grid-template-columns: 1fr;
  }

  .login-trust {
    text-align: center;
  }
}

/* ========================================================================== 
   GRIYA CRM — ENTERPRISE FIRST-LOGIN DASHBOARD 2026-08-06.22
   Brand-consistent navy/blue shell and action-oriented dashboard hierarchy.
   ========================================================================== */
:root {
  --griya-navy-950: #061d35;
  --griya-navy-900: #082744;
  --griya-navy-800: #0c365d;
  --griya-blue-700: #075caf;
  --griya-blue-600: #0a6ed1;
  --griya-blue-500: #187bdc;
  --griya-blue-100: #eaf3fc;
  --griya-surface-soft: #f5f8fb;
  --griya-border: #dce5ee;
  --griya-text: #102a43;
  --griya-muted: #6b8195;
  --griya-card-shadow: 0 4px 16px rgba(15, 48, 77, .055);
}

/* Enterprise application shell */
.app-shell {
  grid-template-columns: 258px minmax(0, 1fr) !important;
  background: #f3f7fa !important;
}

.sidebar {
  position: relative;
  isolation: isolate;
  gap: 0 !important;
  padding: 0 14px 16px !important;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 105% 5%, rgba(38, 131, 222, .22), transparent 30%),
    linear-gradient(180deg, var(--griya-navy-950) 0%, #07243f 54%, #061f37 100%) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 10px 0 28px rgba(6, 31, 55, .08) !important;
}

.sidebar::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -80px;
  right: -70px;
  bottom: 70px;
  height: 220px;
  opacity: .27;
  background-image: radial-gradient(rgba(90, 171, 245, .48) .8px, transparent .8px);
  background-size: 12px 12px;
  transform: rotate(-10deg);
  mask-image: linear-gradient(to right, transparent, #000 32%, #000 68%, transparent);
}

.sidebar-head {
  min-height: 76px !important;
  margin: 0 -14px 12px !important;
  padding: 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(2, 18, 34, .18) !important;
  backdrop-filter: blur(10px);
}

.sidebar-brand { gap: 11px !important; }
.sidebar-brand .brand-mark {
  width: 39px !important;
  height: 39px !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px !important;
  background: linear-gradient(145deg, #1686e8, #075caf) !important;
  box-shadow: 0 9px 22px rgba(1, 95, 186, .28), inset 0 1px rgba(255,255,255,.18) !important;
}
.sidebar-brand-copy { gap: 3px; }
.sidebar-brand-copy strong {
  max-width: 148px !important;
  color: #fff;
  font-size: 16.5px !important;
  font-weight: 600;
  letter-spacing: -.025em !important;
}
.sidebar-brand-copy small {
  color: #91b5d3 !important;
  font-size: 8.5px !important;
  font-weight: 600;
  letter-spacing: .13em !important;
}
.sidebar-toggle {
  width: 36px !important;
  height: 36px;
  border-radius: 9px !important;
  background: rgba(255,255,255,.055) !important;
}

.sidebar-section {
  min-height: 0;
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 9px !important;
}
.sidebar-title {
  padding: 0 10px;
  color: #7295b2 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .15em !important;
}
.nav-tabs { gap: 4px !important; }
.nav-tab {
  min-height: 43px !important;
  gap: 11px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  color: #c2d2df !important;
  background: transparent !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.nav-tab i {
  width: 20px;
  display: inline-grid;
  place-items: center;
  color: #84a8c5 !important;
  font-size: 15px !important;
}
.nav-tab:hover {
  border-color: rgba(124, 188, 241, .12) !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
}
.nav-tab.active {
  border-color: rgba(120, 196, 255, .20) !important;
  background: linear-gradient(90deg, #0a6ed1, #075caf) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(1, 93, 180, .24), inset 0 1px rgba(255,255,255,.12) !important;
}
.nav-tab.active i,
.nav-tab:hover i { color: #fff !important; }
.nav-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.30);
  background: #e04444;
  font-size: 10px;
}
.settings-submenu { padding: 5px 0 5px 30px !important; }
.settings-submenu-item {
  min-height: 33px;
  color: #aebfd0 !important;
  font-size: 11.5px !important;
}

.sidebar-account-zone {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin-top: 14px;
}
.sidebar-profile {
  min-height: 63px;
  gap: 10px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.055) !important;
  backdrop-filter: blur(10px);
}
.sidebar-profile:hover {
  border-color: rgba(127, 193, 248, .28) !important;
  background: rgba(255,255,255,.085) !important;
}
.sidebar-profile .sidebar-avatar {
  width: 39px !important;
  height: 39px !important;
  flex: 0 0 39px !important;
  border: 2px solid rgba(255,255,255,.18);
  font-size: 18px !important;
}
.sidebar-profile strong { color: #fff; font-size: 12.5px !important; }
.sidebar-profile small { color: #93acc1 !important; font-size: 9.5px !important; }
.sidebar-profile-chevron { margin-left: auto; color: #668aa8; font-size: 12px; }
.sidebar-logout {
  min-height: 39px !important;
  margin-top: 0 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.04) !important;
  color: #b9cad8 !important;
  font-size: 11.5px !important;
}
.sidebar-logout:hover { background: rgba(10,110,209,.78) !important; color: #fff !important; }

.main { padding: 0 24px 32px !important; background: #f3f7fa !important; }
.topbar {
  min-height: 72px !important;
  margin: 0 -24px 18px !important;
  padding: 0 24px !important;
  gap: 13px !important;
  border-bottom: 1px solid #e1e8ef !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 2px 10px rgba(15, 48, 77, .045) !important;
}
.topbar-title-block { min-width: 0; display: grid; gap: 2px; }
.topbar-title-block .eyebrow {
  color: #0a6ed1 !important;
  font-size: 8.5px !important;
  letter-spacing: .14em !important;
}
.topbar-title-block h1 { color: #102a43 !important; font-size: 20px !important; font-weight: 600; }
.topbar-workspace-identity {
  max-width: 250px !important;
  min-height: 44px;
  padding: 6px 10px !important;
  border-color: #dfe8f0 !important;
  border-radius: 11px !important;
  box-shadow: 0 3px 12px rgba(15, 48, 77, .045) !important;
}
.topbar-workspace-logo { width: 31px !important; height: 31px !important; border-radius: 8px !important; }
.topbar-workspace-identity strong { font-size: 11.5px !important; }
.topbar-workspace-identity small { font-size: 8.5px !important; }
.topbar-notification .icon-button {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

/* Dashboard layout */
.dashboard-enterprise {
  gap: 14px !important;
  max-width: 1680px;
  margin: 0 auto;
  padding-bottom: 12px;
}
.dashboard-welcome-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 5px 2px 2px;
}
.dashboard-welcome-copy { min-width: 0; }
.dashboard-welcome-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: #0a6ed1;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dashboard-welcome-copy h2 {
  color: #102a43;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.dashboard-welcome-copy p { margin-top: 4px; color: #6b8195; font-size: 12px; }
.dashboard-welcome-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.dashboard-date-chip {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--griya-border);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--griya-card-shadow);
}
.dashboard-date-chip > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eaf3fc;
  color: #0a6ed1;
}
.dashboard-date-chip > span { display: grid; gap: 1px; }
.dashboard-date-chip strong { color: #1c344a; font-size: 11px; }
.dashboard-date-chip small { color: #8294a4; font-size: 9px; }
.dashboard-period-control {
  min-width: 140px;
  display: grid;
  gap: 3px;
  padding: 6px 10px;
  border: 1px solid var(--griya-border);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--griya-card-shadow);
}
.dashboard-period-control > span { color: #8193a3; font-size: 8px !important; letter-spacing: .10em; }
.dashboard-period-control select {
  min-height: 25px !important;
  padding: 0 28px 0 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  color: #1b344a;
  font-size: 11px !important;
  font-weight: 600;
  box-shadow: none !important;
}

.dashboard-filter-bar {
  display: grid;
  grid-template-columns: auto minmax(170px, 220px) minmax(170px, 220px) auto;
  align-items: end;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #e0e8ef;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 3px 14px rgba(15,48,77,.035);
}
.dashboard-filter-label {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 8px;
  color: #49657d;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-filter-bar label { display: grid; gap: 4px; }
.dashboard-filter-bar label > span { color: #768b9d; font-size: 8px !important; letter-spacing: .09em; }
.dashboard-filter-bar input {
  min-height: 38px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
}
.dashboard-filter-bar .ghost-button {
  min-height: 38px !important;
  border-radius: 9px !important;
  color: #49657d;
  font-size: 11px !important;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}
.dashboard-kpi-card {
  position: relative;
  min-width: 0;
  min-height: 122px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  align-content: center;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--griya-border);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--griya-card-shadow);
}
.dashboard-kpi-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--kpi-color, #0a6ed1);
  opacity: .65;
}
.dashboard-kpi-icon {
  grid-row: 1 / 4;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--kpi-soft, #eaf3fc);
  color: var(--kpi-color, #0a6ed1);
  font-size: 17px;
}
.dashboard-kpi-label {
  min-width: 0;
  overflow: hidden;
  color: #5f7589;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.dashboard-kpi-card strong {
  min-width: 0;
  overflow: hidden;
  color: #102a43;
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-kpi-card small {
  min-width: 0;
  overflow: hidden;
  color: #8293a2;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-kpi-card.tone-amber { --kpi-color:#c87800; --kpi-soft:#fff4df; }
.dashboard-kpi-card.tone-teal { --kpi-color:#0a8f83; --kpi-soft:#e7f8f5; }
.dashboard-kpi-card.tone-green { --kpi-color:#13956c; --kpi-soft:#e7f8f1; }
.dashboard-kpi-card.tone-blue { --kpi-color:#315fd0; --kpi-soft:#edf2ff; }
.dashboard-kpi-card.tone-success { --kpi-color:#18864b; --kpi-soft:#eaf8f0; }
.dashboard-kpi-card.tone-warning { --kpi-color:#b86e00; --kpi-soft:#fff4df; }

.dashboard-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.05fr) minmax(300px, .82fr);
  gap: 12px;
  align-items: stretch;
}
.dashboard-side-stack { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.dashboard-secondary-grid {
  display: grid;
  grid-template-columns: minmax(350px, .78fr) minmax(0, 1.4fr);
  gap: 12px;
}
.dashboard-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--griya-border);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--griya-card-shadow);
}
.dashboard-card-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 1px solid #e8eef3;
}
.dashboard-card-head.compact { min-height: 54px; }
.dashboard-card-head > div { min-width: 0; }
.dashboard-card-kicker {
  display: block;
  margin-bottom: 2px;
  color: #8497a7;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.dashboard-card-head h3 { color: #143048; font-size: 14px; font-weight: 600; }
.dashboard-card-head > small { color: #8a9baa; font-size: 9px; }
.dashboard-link-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 5px 0;
  background: transparent;
  color: #0a6ed1;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-link-button:hover { color: #075caf; }

.dashboard-priority-list { display: grid; }
.dashboard-priority-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 8px 13px;
  border-bottom: 1px solid #edf1f5;
}
.dashboard-priority-item:last-child { border-bottom: 0; }
.dashboard-priority-item:hover { background: #f8fbfd; }
.dashboard-task-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #edf4fb;
  color: #0a6ed1;
}
.dashboard-task-icon.tone-danger { background: #fff0f0; color: #c23434; }
.dashboard-task-icon.tone-warning { background: #fff5df; color: #b86e00; }
.dashboard-task-icon.tone-today { background: #eaf3fc; color: #0a6ed1; }
.dashboard-task-main {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.dashboard-task-main strong,
.dashboard-task-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-task-main strong { color: #223c52; font-size: 10.5px; }
.dashboard-task-main small { color: #7b8f9f; font-size: 9px; }
.dashboard-task-date {
  padding: 4px 7px;
  border-radius: 999px;
  background: #f1f5f8;
  color: #687f91;
  font-size: 8.5px;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-task-action {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #dce6ee;
  border-radius: 8px;
  background: #fff;
  color: #56728a;
}
.dashboard-task-action:hover { border-color: #8fbce5; background: #eaf3fc; color: #0a6ed1; }

.dashboard-pipeline-summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 2px 14px;
  padding: 14px 15px 10px;
}
.dashboard-pipeline-summary span { color: #74899a; font-size: 9px; font-weight: 600; }
.dashboard-pipeline-summary strong { color: #102a43; font-size: 23px; letter-spacing: -.03em; }
.dashboard-pipeline-summary small { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #7790a3; font-size: 9px; }
.dashboard-funnel-list { display: grid; gap: 6px; padding: 5px 15px 15px; }
.dashboard-funnel-row {
  display: grid;
  grid-template-columns: 95px minmax(80px,1fr) 78px;
  align-items: center;
  gap: 9px;
}
.dashboard-funnel-name,
.dashboard-funnel-value { display: grid; gap: 0; }
.dashboard-funnel-name strong { color: #29465d; font-size: 9px; }
.dashboard-funnel-name small,
.dashboard-funnel-value small { color: #8497a7; font-size: 8px; }
.dashboard-funnel-value { text-align: right; }
.dashboard-funnel-value strong { color: #29465d; font-size: 9px; }
.dashboard-funnel-track { height: 24px; display: flex; align-items: center; justify-content: center; }
.dashboard-funnel-track > span {
  height: 100%;
  display: block;
  border-radius: 5px;
  background: linear-gradient(90deg, #7fb6ec, #0a6ed1);
  opacity: calc(1 - (var(--level, 1) * .04));
}
.dashboard-funnel-track > span[data-level="2"] { background: linear-gradient(90deg, #6ea7e4, #176fc5); }
.dashboard-funnel-track > span[data-level="3"] { background: linear-gradient(90deg, #518bd0, #125ba8); }
.dashboard-funnel-track > span[data-level="4"],
.dashboard-funnel-track > span[data-level="5"],
.dashboard-funnel-track > span[data-level="6"] { background: linear-gradient(90deg, #386fae, #0b477e); }
.dashboard-funnel-row.is-won .dashboard-funnel-track > span { background: linear-gradient(90deg, #49b69c, #16836f); }

.dashboard-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  padding: 11px;
}
.dashboard-quick-grid button {
  min-width: 0;
  min-height: 65px;
  display: grid;
  grid-template-columns: 35px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid #e0e8ef;
  border-radius: 10px;
  background: #fff;
  color: #264258;
  text-align: left;
}
.dashboard-quick-grid button:hover { border-color: #9cc4e7; background: #f2f8fd; transform: translateY(-1px); }
.dashboard-quick-grid button > i {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eaf3fc;
  color: #0a6ed1;
  font-size: 16px;
}
.dashboard-quick-grid button:nth-child(2) > i { background: #e8f8f2; color: #14916d; }
.dashboard-quick-grid button:nth-child(3) > i { background: #fff4df; color: #bd7600; }
.dashboard-quick-grid span { min-width: 0; display: grid; gap: 2px; }
.dashboard-quick-grid strong,
.dashboard-quick-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-quick-grid strong { font-size: 9.5px; }
.dashboard-quick-grid small { color: #8294a4; font-size: 8px; }

.dashboard-activity-list { display: grid; }
.dashboard-activity-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 12px;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  background: #fff;
  text-align: left;
}
.dashboard-activity-item:last-child { border-bottom: 0; }
.dashboard-activity-item:hover { background: #f8fbfd; }
.dashboard-activity-item > span:first-child {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #edf4fb;
  color: #0a6ed1;
  font-size: 12px;
}
.dashboard-activity-item > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.dashboard-activity-item strong,
.dashboard-activity-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-activity-item strong { color: #29465d; font-size: 8.8px; }
.dashboard-activity-item small { color: #7d91a1; font-size: 7.8px; }
.dashboard-activity-item time { color: #8294a4; font-size: 7.8px; white-space: nowrap; }

.dashboard-source-content {
  min-height: 205px;
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  align-items: center;
  gap: 18px;
  padding: 16px;
}
.dashboard-source-donut {
  position: relative;
  width: 132px;
  height: 132px;
  margin: auto;
  border-radius: 50%;
}
.dashboard-source-donut::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #edf1f5;
}
.dashboard-source-donut > span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  text-align: center;
}
.dashboard-source-donut strong { color: #173b5f; font-size: 23px; line-height: 1; }
.dashboard-source-donut small { color: #8496a5; font-size: 9px; }
.dashboard-source-legend { display: grid; }
.dashboard-source-legend > div {
  display: grid;
  grid-template-columns: 8px minmax(0,1fr) 30px 34px;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  border-bottom: 1px solid #edf1f5;
}
.dashboard-source-legend > div:last-child { border-bottom: 0; }
.dashboard-source-dot { width: 7px; height: 7px; border-radius: 50%; }
.dashboard-source-legend strong { overflow: hidden; color: #375168; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-source-legend span:not(.dashboard-source-dot),
.dashboard-source-legend small { color: #7a8f9f; font-size: 8.5px; text-align: right; }

.dashboard-performance-table { min-width: 660px; overflow-x: auto; }
.dashboard-performance-head,
.dashboard-performance-row {
  display: grid;
  grid-template-columns: minmax(190px,1.4fr) repeat(3, minmax(65px,.55fr)) minmax(110px,.8fr) minmax(105px,.8fr);
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}
.dashboard-performance-head {
  min-height: 35px;
  border-bottom: 1px solid #e8eef3;
  background: #f8fafc;
  color: #778b9d;
  font-size: 7.8px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dashboard-performance-row { min-height: 51px; border-bottom: 1px solid #edf1f5; }
.dashboard-performance-row:last-child { border-bottom: 0; }
.dashboard-performance-row > strong { color: #29465d; font-size: 9px; }
.dashboard-sales-person { min-width: 0; display: flex; align-items: center; gap: 8px; }
.dashboard-sales-person .user-avatar { width: 28px; height: 28px; flex: 0 0 28px; font-size: 12px; }
.dashboard-sales-person > span { min-width: 0; display: grid; gap: 1px; }
.dashboard-sales-person strong,
.dashboard-sales-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-sales-person strong { color: #233e54; font-size: 9px; }
.dashboard-sales-person small { color: #8294a4; font-size: 7.7px; }
.dashboard-conversion { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 6px; }
.dashboard-conversion strong { color: #29465d; font-size: 8.5px; }
.dashboard-conversion > span { height: 5px; overflow: hidden; border-radius: 999px; background: #e7edf2; }
.dashboard-conversion i { display: block; height: 100%; border-radius: inherit; background: #17864b; }
.dashboard-empty-state {
  min-height: 150px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 20px;
  color: #8295a5;
  text-align: center;
}
.dashboard-empty-state.compact { min-height: 80px; }
.dashboard-empty-state i { color: #5d8fbd; font-size: 22px; }
.dashboard-empty-state strong { color: #35536b; font-size: 11px; }
.dashboard-empty-state span { font-size: 9px; }

@media (max-width: 1450px) {
  .dashboard-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-primary-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .dashboard-side-stack { grid-column: 1 / -1; grid-template-columns: minmax(300px,.7fr) minmax(0,1.3fr); grid-template-rows: none; }
}

@media (max-width: 1100px) {
  .dashboard-welcome-bar { align-items: flex-start; flex-direction: column; }
  .dashboard-welcome-controls { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .dashboard-filter-bar { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; }
  .dashboard-filter-label { grid-column: 1 / -1; }
  .dashboard-primary-grid,
  .dashboard-secondary-grid { grid-template-columns: 1fr; }
  .dashboard-side-stack { grid-column: auto; grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-filter-bar { grid-template-columns: 1fr; }
  .dashboard-quick-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-source-content { grid-template-columns: 1fr; }
  .dashboard-source-donut { width: 120px; height: 120px; }
}

@media (max-width: 560px) {
  .main { padding-right: 12px !important; padding-left: 12px !important; }
  .topbar { margin-right: -12px !important; margin-left: -12px !important; padding-right: 12px !important; padding-left: 12px !important; }
  .topbar-workspace-identity { display: none !important; }
  .dashboard-welcome-controls,
  .dashboard-date-chip,
  .dashboard-period-control { width: 100%; }
  .dashboard-kpi-grid { grid-template-columns: 1fr; }
  .dashboard-kpi-card { min-height: 108px; }
  .dashboard-quick-grid { grid-template-columns: 1fr; }
  .dashboard-priority-item { grid-template-columns: 32px minmax(0,1fr) 28px; }
  .dashboard-task-date { display: none; }
  .dashboard-funnel-row { grid-template-columns: 75px minmax(60px,1fr) 65px; }
}

/* ========================================================================== 
   GRIYA CRM — DASHBOARD SPACING & ENTERPRISE LAYOUT POLISH 2026-08-06.23
   Uses the full application canvas, removes stacked horizontal insets, and
   normalises section/card rhythm across wide desktop, laptop, tablet, mobile.
   ========================================================================== */

/* Main application canvas: avoid wrapper + max-width spacing accumulation. */
.main {
  padding: 0 18px 28px !important;
}

.topbar {
  min-height: 68px !important;
  margin: 0 -18px 14px !important;
  padding: 0 18px !important;
}

.dashboard-enterprise {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  gap: 12px !important;
}

/* Welcome row: compact hierarchy without extra nested inset. */
.dashboard-welcome-bar {
  gap: 18px !important;
  padding: 0 2px 2px !important;
}

.dashboard-welcome-copy h2 {
  font-size: 21px !important;
  line-height: 1.2;
}

.dashboard-welcome-copy p {
  margin-top: 3px !important;
  line-height: 1.45;
}

.dashboard-welcome-controls {
  gap: 8px !important;
}

.dashboard-date-chip {
  min-height: 44px !important;
  padding: 0 11px !important;
}

.dashboard-period-control {
  min-width: 132px !important;
  padding: 5px 9px !important;
}

/* Analysis controls: predictable widths; Reset no longer stretches. */
.dashboard-filter-bar {
  grid-template-columns: 150px minmax(180px, 220px) minmax(180px, 220px) 112px !important;
  justify-content: start;
  align-items: end !important;
  gap: 10px !important;
  padding: 10px 12px !important;
}

.dashboard-filter-label {
  min-height: 38px;
  align-items: center !important;
  padding-right: 4px !important;
}

.dashboard-filter-bar input,
.dashboard-filter-bar .ghost-button {
  min-height: 38px !important;
}

.dashboard-filter-bar .clear-range-control {
  width: 112px;
  padding-right: 10px !important;
  padding-left: 10px !important;
}

/* KPI cards: equal rhythm, less vertical padding, larger usable content width. */
.dashboard-kpi-grid {
  gap: 10px !important;
}

.dashboard-kpi-card {
  min-height: 106px !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  column-gap: 9px !important;
  padding: 12px !important;
  border-radius: 12px !important;
}

.dashboard-kpi-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  font-size: 16px !important;
}

.dashboard-kpi-card strong {
  font-size: 19px !important;
}

/* Primary and supporting panels use one spacing scale. */
.dashboard-primary-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1.04fr) minmax(292px, .82fr) !important;
  gap: 12px !important;
}

.dashboard-side-stack,
.dashboard-secondary-grid {
  gap: 12px !important;
}

.dashboard-secondary-grid {
  grid-template-columns: minmax(320px, .7fr) minmax(0, 1.45fr) !important;
}

.dashboard-card {
  border-radius: 12px !important;
}

.dashboard-card-head {
  min-height: 56px !important;
  gap: 12px !important;
  padding: 11px 13px !important;
}

.dashboard-card-head.compact {
  min-height: 50px !important;
}

.dashboard-priority-item {
  min-height: 54px !important;
  padding: 7px 12px !important;
}

.dashboard-pipeline-summary {
  padding: 12px 13px 8px !important;
}

.dashboard-funnel-list {
  padding: 4px 13px 13px !important;
}

.dashboard-quick-grid {
  gap: 7px !important;
  padding: 10px !important;
}

.dashboard-quick-grid button {
  min-height: 60px !important;
  padding: 8px !important;
}

.dashboard-activity-item {
  min-height: 43px !important;
  padding: 6px 11px !important;
}

.dashboard-source-content {
  min-height: 184px !important;
  grid-template-columns: 138px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 13px !important;
}

.dashboard-source-donut {
  width: 118px !important;
  height: 118px !important;
}

.dashboard-source-donut::before {
  inset: 22px !important;
}

.dashboard-performance-head,
.dashboard-performance-row {
  padding-right: 12px !important;
  padding-left: 12px !important;
}

.dashboard-performance-row {
  min-height: 48px !important;
}

.dashboard-empty-state {
  min-height: 118px !important;
  padding: 16px !important;
}

/* Very wide screens should use the canvas instead of centring at 1680px. */
@media (min-width: 1800px) {
  .main {
    padding-right: 22px !important;
    padding-left: 22px !important;
  }

  .topbar {
    margin-right: -22px !important;
    margin-left: -22px !important;
    padding-right: 22px !important;
    padding-left: 22px !important;
  }

  .dashboard-primary-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.08fr) minmax(320px, .78fr) !important;
  }
}

@media (max-width: 1450px) {
  .dashboard-filter-bar {
    grid-template-columns: 140px minmax(170px, 1fr) minmax(170px, 1fr) 108px !important;
  }

  .dashboard-filter-bar .clear-range-control {
    width: 108px;
  }

  .dashboard-primary-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .dashboard-side-stack {
    grid-column: 1 / -1;
    grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr) !important;
    grid-template-rows: none !important;
  }
}

@media (max-width: 1100px) {
  .main {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .topbar {
    margin-right: -16px !important;
    margin-left: -16px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .dashboard-filter-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 108px !important;
  }

  .dashboard-filter-label {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .dashboard-primary-grid,
  .dashboard-secondary-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-side-stack {
    grid-column: auto;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  .dashboard-filter-bar {
    grid-template-columns: 1fr !important;
  }

  .dashboard-filter-bar .clear-range-control {
    width: 100%;
  }

  .dashboard-card-head {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

@media (max-width: 560px) {
  .main {
    padding: 0 12px 22px !important;
  }

  .topbar {
    min-height: 62px !important;
    margin: 0 -12px 12px !important;
    padding: 0 12px !important;
  }

  .dashboard-enterprise {
    gap: 10px !important;
  }

  .dashboard-welcome-bar {
    gap: 12px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .dashboard-kpi-card {
    min-height: 100px !important;
  }
}


/* =========================================================
   Pipeline board vertical-fit + card spacing refinement
   v2026.08.06.24
   ========================================================= */
#pipelineView {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100dvh - 118px);
}

#pipelineView .pipeline-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(170px, 1.2fr) minmax(170px, 1.2fr);
  gap: 12px;
  align-items: end;
  padding: 14px;
  margin-bottom: 0;
}

#pipelineView .pipeline-toolbar label {
  min-width: 0;
}

#pipelineView .pipeline-toolbar .primary-button,
#pipelineView .pipeline-toolbar .ghost-button {
  width: 100%;
  min-height: 44px;
}

#pipelineView .pipeline-scroll-top {
  margin: 0;
}

#pipelineView .pipeline-board {
  flex: 1 1 auto;
  align-items: start;
  grid-auto-columns: clamp(330px, 22vw, 370px);
  gap: 14px;
  min-height: 0;
  padding: 4px 2px 12px;
}

#pipelineView .pipeline-column {
  height: clamp(440px, calc(100dvh - 248px), 760px);
  min-height: clamp(440px, calc(100dvh - 248px), 760px);
  max-height: clamp(440px, calc(100dvh - 248px), 760px);
  border-radius: 16px;
}

#pipelineView .pipeline-column header,
#pipelineView .pipeline-column-header {
  min-height: 64px;
  padding: 12px 14px;
}

#pipelineView .pipeline-dropzone {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 10px;
}

#pipelineView .lead-card.pipeline-card-compact {
  padding: 12px;
  border-radius: 12px;
}

#pipelineView .pipeline-card-compact .pipeline-card-badges {
  gap: 6px;
}

#pipelineView .pipeline-compact-facts {
  gap: 7px;
  margin-top: 9px;
}

#pipelineView .pipeline-value-followup {
  gap: 7px;
  margin-top: 8px;
}

#pipelineView .pipeline-card-footer {
  gap: 8px;
  padding-top: 9px;
  margin-top: 9px;
}

@media (max-width: 1440px) {
  #pipelineView .pipeline-board {
    grid-auto-columns: clamp(318px, 24vw, 350px);
  }
}

@media (max-width: 1200px) {
  #pipelineView {
    min-height: auto;
  }

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

  #pipelineView .pipeline-toolbar .primary-button,
  #pipelineView .pipeline-toolbar .ghost-button {
    min-width: 0;
  }

  #pipelineView .pipeline-column {
    height: clamp(420px, calc(100dvh - 270px), 700px);
    min-height: clamp(420px, calc(100dvh - 270px), 700px);
    max-height: clamp(420px, calc(100dvh - 270px), 700px);
  }
}

@media (max-width: 760px) {
  #pipelineView .pipeline-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  #pipelineView .pipeline-board {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }

  #pipelineView .pipeline-column {
    height: auto;
    min-height: 320px;
    max-height: none;
  }

  #pipelineView .pipeline-dropzone {
    min-height: 220px;
    max-height: none;
    overflow: visible;
  }
}

/* =========================================================
   Pipeline visibility + stage card fit hotfix
   v2026.08.06.25
   ========================================================= */

/* Do not let the Pipeline view override the global inactive view state. */
#pipelineView.view:not(.active) {
  display: none !important;
}

#pipelineView.view.active {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

/* Give each stage enough horizontal room while keeping predictable overflow. */
#pipelineView .pipeline-board {
  width: 100%;
  max-width: 100%;
  grid-auto-columns: clamp(350px, 24vw, 390px);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
}

#pipelineView .pipeline-column {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#pipelineView .pipeline-column-header,
#pipelineView .pipeline-column-title,
#pipelineView .pipeline-column-title > div,
#pipelineView .pipeline-dropzone,
#pipelineView .pipeline-card-compact,
#pipelineView .pipeline-card-compact > *,
#pipelineView .pipeline-lead-identity,
#pipelineView .pipeline-card-value,
#pipelineView .pipeline-followup-compact,
#pipelineView .pipeline-followup-compact > div,
#pipelineView .pipeline-card-footer,
#pipelineView .sdr-avatar-label {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#pipelineView .pipeline-dropzone {
  width: 100%;
  overflow-x: hidden;
}

#pipelineView .lead-card.pipeline-card-compact {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#pipelineView .pipeline-card-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
}

#pipelineView .pipeline-card-heading h3,
#pipelineView .pipeline-card-heading small,
#pipelineView .pipeline-compact-facts span,
#pipelineView .pipeline-card-value strong,
#pipelineView .pipeline-followup-compact span,
#pipelineView .pipeline-followup-compact strong,
#pipelineView .pipeline-note-compact,
#pipelineView .pipeline-created-at,
#pipelineView .sdr-avatar-label em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipelineView .pipeline-card-badges {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
}

#pipelineView .pipeline-compact-facts,
#pipelineView .pipeline-value-followup {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

#pipelineView .pipeline-compact-facts span,
#pipelineView .pipeline-card-value,
#pipelineView .pipeline-followup-compact {
  width: 100%;
}

/* Footer no longer forces the card wider than the stage column. */
#pipelineView .pipeline-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "owner actions"
    "date actions";
  align-items: center;
  column-gap: 8px;
  row-gap: 5px;
}

#pipelineView .pipeline-card-footer .sdr-avatar-label {
  grid-area: owner;
}

#pipelineView .pipeline-card-footer .pipeline-created-at {
  grid-area: date;
}

#pipelineView .pipeline-card-footer .pipeline-card-actions {
  grid-area: actions;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, 28px);
  gap: 4px;
}

#pipelineView .pipeline-card-compact .pipeline-card-actions button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
}

/* Compact cards further on narrower laptop columns. */
@media (max-width: 1366px) {
  #pipelineView .pipeline-board {
    grid-auto-columns: clamp(336px, 28vw, 360px);
  }

  #pipelineView .pipeline-compact-facts,
  #pipelineView .pipeline-value-followup {
    grid-template-columns: minmax(0, 1fr);
  }

  #pipelineView .pipeline-card-value strong,
  #pipelineView .pipeline-followup-compact strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 1200px) {
  #pipelineView .pipeline-board {
    grid-auto-columns: minmax(330px, 350px);
  }
}

@media (max-width: 760px) {
  #pipelineView .pipeline-board {
    grid-auto-columns: auto;
  }

  #pipelineView .pipeline-card-footer {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ========================================================================== 
   GRIYA CRM — ENTERPRISE READABILITY TYPOGRAPHY v2026.08.06.26
   Raises the effective reading scale without using browser-style page zoom.
   Dashboard, shell navigation, data panels, and pipeline cards remain compact
   but readable on common 1366px–1920px desktop displays.
   ========================================================================== */

/* Application shell and navigation */
.sidebar-brand-copy strong {
  font-size: 18px !important;
}
.sidebar-brand-copy small {
  font-size: 9.5px !important;
}
.sidebar-title {
  font-size: 10px !important;
}
.nav-tab {
  min-height: 46px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}
.nav-tab i {
  font-size: 16px !important;
}
.settings-submenu-item {
  min-height: 36px !important;
  font-size: 12.5px !important;
}
.sidebar-profile strong {
  font-size: 13.5px !important;
}
.sidebar-profile small {
  font-size: 10.5px !important;
}
.sidebar-logout {
  min-height: 42px !important;
  font-size: 12.5px !important;
}

/* Header bar */
.topbar-title-block .eyebrow {
  font-size: 9.5px !important;
}
.topbar-title-block h1 {
  font-size: 22px !important;
}
.topbar-workspace-identity strong {
  font-size: 12.5px !important;
}
.topbar-workspace-identity small {
  font-size: 9.5px !important;
}

/* Dashboard intro and controls */
.dashboard-welcome-kicker {
  font-size: 10px !important;
}
.dashboard-welcome-copy h2 {
  font-size: 24px !important;
}
.dashboard-welcome-copy p {
  font-size: 13.5px !important;
}
.dashboard-date-chip strong {
  font-size: 12.5px !important;
}
.dashboard-date-chip small {
  font-size: 10.5px !important;
}
.dashboard-period-control > span {
  font-size: 9.5px !important;
}
.dashboard-period-control select {
  font-size: 12.5px !important;
}
.dashboard-filter-label {
  font-size: 11.5px !important;
}
.dashboard-filter-bar label > span {
  font-size: 9.5px !important;
}
.dashboard-filter-bar input,
.dashboard-filter-bar .ghost-button {
  font-size: 12.5px !important;
}

/* KPI cards */
.dashboard-kpi-card {
  min-height: 116px !important;
}
.dashboard-kpi-label {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}
.dashboard-kpi-card strong {
  font-size: 22px !important;
}
.dashboard-kpi-card small {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

/* Dashboard card hierarchy */
.dashboard-card-kicker {
  font-size: 9.5px !important;
}
.dashboard-card-head h3 {
  font-size: 16px !important;
}
.dashboard-card-head > small,
.dashboard-link-button {
  font-size: 11px !important;
}

/* Daily priority */
.dashboard-task-main strong {
  font-size: 12.5px !important;
}
.dashboard-task-main small {
  font-size: 10.5px !important;
}
.dashboard-task-date {
  font-size: 10px !important;
}
.dashboard-priority-item {
  min-height: 62px !important;
}

/* Pipeline overview on dashboard */
.dashboard-pipeline-summary span {
  font-size: 10.5px !important;
}
.dashboard-pipeline-summary strong {
  font-size: 25px !important;
}
.dashboard-pipeline-summary small {
  font-size: 10px !important;
}
.dashboard-funnel-name strong,
.dashboard-funnel-value strong {
  font-size: 11px !important;
}
.dashboard-funnel-name small,
.dashboard-funnel-value small {
  font-size: 9.5px !important;
}

/* Quick actions */
.dashboard-quick-grid button {
  min-height: 68px !important;
}
.dashboard-quick-grid strong {
  font-size: 11.5px !important;
}
.dashboard-quick-grid small {
  font-size: 9.5px !important;
}

/* Recent activity */
.dashboard-activity-item {
  min-height: 50px !important;
}
.dashboard-activity-item strong {
  font-size: 11px !important;
}
.dashboard-activity-item small,
.dashboard-activity-item time {
  font-size: 9.5px !important;
}

/* Lead source */
.dashboard-source-donut strong {
  font-size: 25px !important;
}
.dashboard-source-donut small {
  font-size: 10px !important;
}
.dashboard-source-legend strong {
  font-size: 11px !important;
}
.dashboard-source-legend span:not(.dashboard-source-dot),
.dashboard-source-legend small {
  font-size: 10px !important;
}
.dashboard-source-legend > div {
  min-height: 32px !important;
}

/* Sales performance table */
.dashboard-performance-head {
  min-height: 40px !important;
  font-size: 9.5px !important;
}
.dashboard-performance-row {
  min-height: 56px !important;
}
.dashboard-performance-row > strong,
.dashboard-sales-person strong {
  font-size: 11px !important;
}
.dashboard-sales-person small {
  font-size: 9.5px !important;
}
.dashboard-conversion strong {
  font-size: 10.5px !important;
}

/* Empty states */
.dashboard-empty-state strong {
  font-size: 13px !important;
}
.dashboard-empty-state span {
  font-size: 11px !important;
}

/* Pipeline page: preserve card fit while making its content legible. */
#pipelineView .pipeline-column-title h2,
#pipelineView .pipeline-column header h2 {
  font-size: 14px !important;
}
#pipelineView .pipeline-column-title small,
#pipelineView .pipeline-count-badge {
  font-size: 11px !important;
}
#pipelineView .pipeline-card-compact .pipeline-card-heading h3 {
  font-size: 13.5px !important;
}
#pipelineView .pipeline-card-compact .pipeline-card-heading small {
  font-size: 10.5px !important;
}
#pipelineView .pipeline-quality,
#pipelineView .pipeline-completeness,
#pipelineView .pipeline-card-value span,
#pipelineView .pipeline-followup-compact span {
  font-size: 9.5px !important;
}
#pipelineView .pipeline-compact-facts span,
#pipelineView .pipeline-card-value strong,
#pipelineView .pipeline-followup-compact strong,
#pipelineView .pipeline-note-compact,
#pipelineView .pipeline-card-footer .sdr-avatar-label,
#pipelineView .pipeline-created-at {
  font-size: 10.5px !important;
}

/* Allow larger labels to wrap gracefully instead of being clipped. */
.dashboard-kpi-label,
.dashboard-kpi-card small,
.dashboard-task-main strong,
.dashboard-task-main small,
.dashboard-quick-grid strong,
.dashboard-quick-grid small {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

@media (max-width: 1450px) {
  .dashboard-kpi-card {
    min-height: 112px !important;
  }
}

@media (max-width: 820px) {
  .nav-tab {
    font-size: 13.5px !important;
  }
  .dashboard-welcome-copy h2 {
    font-size: 22px !important;
  }
}

/* =========================================================
   Leads enterprise workspace simplification
   v2026.08.06.27
   ========================================================= */
#leadsView {
  display: none;
  gap: 16px;
}

#leadsView.view.active {
  display: grid;
}

#leadsView .lead-workspace-enterprise {
  overflow: visible;
  border: 1px solid #dbe5ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(15, 39, 71, 0.055);
}

#leadsView .lead-page-heading {
  min-height: 88px;
  padding: 18px 20px;
  border-bottom: 1px solid #e7edf3;
  background: #fff;
}

#leadsView .lead-workspace-copy h2 {
  margin: 5px 0 3px;
  font-size: clamp(21px, 1.65vw, 26px);
  letter-spacing: -0.025em;
}

#leadsView .lead-workspace-copy p {
  font-size: 13.5px;
  line-height: 1.5;
}

#leadsView .lead-primary-cta {
  min-height: 44px !important;
  min-width: 138px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(10, 110, 209, 0.16);
}

#leadsView .lead-filter-toolbar {
  position: sticky;
  z-index: 8;
  top: 76px;
  display: grid;
  grid-template-columns: minmax(300px, 1.7fr) repeat(3, minmax(150px, 0.9fr)) repeat(2, minmax(150px, 0.9fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 14px 16px;
  border-bottom: 1px solid #e7edf3;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
}

#leadsView .lead-filter-toolbar label > span:first-child {
  display: block;
  margin: 0 0 5px;
  color: #5e7285;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

#leadsView .lead-filter-toolbar input,
#leadsView .lead-filter-toolbar select,
#leadsView .lead-filter-reset {
  min-height: 43px;
  border-radius: 10px;
}

#leadsView .lead-search-control {
  display: flex !important;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid #d5e0e9;
  border-radius: 10px;
  background: #fbfcfe;
}

#leadsView .lead-search-control i {
  flex: 0 0 auto;
  color: #71869a;
  font-size: 14px;
}

#leadsView .lead-search-control input {
  width: 100%;
  min-width: 0;
  min-height: auto;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#leadsView .lead-filter-reset {
  align-self: end;
  padding-inline: 14px;
  white-space: nowrap;
}

#leadsView .lead-priority-panel {
  border-top: 0;
  background: #fff;
}

#leadsView .lead-priority-panel .followup-assistant-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

#leadsView .lead-insight-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid #e7edf3;
  background: #f8fafc;
}

#leadsView .lead-insight-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 72px;
  padding: 12px 16px;
  border-right: 1px solid #e3eaf0;
}

#leadsView .lead-insight-item:last-child {
  border-right: 0;
}

#leadsView .lead-insight-item::before {
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: #8aa5bd;
  content: "";
}

#leadsView .lead-insight-item > span {
  color: #566c80;
  font-size: 11px;
  font-weight: 600;
}

#leadsView .lead-insight-item strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #122d49;
  font-size: 23px;
  line-height: 1;
}

#leadsView .lead-insight-item small {
  color: #8797a7;
  font-size: 10.5px;
  line-height: 1.3;
}

#leadsView .lead-insight-item.is-total::before { background: #0a6ed1; }
#leadsView .lead-insight-item.is-danger::before { background: #dc3545; }
#leadsView .lead-insight-item.is-today::before { background: #e69613; }
#leadsView .lead-insight-item.is-unscheduled::before { background: #6b7f91; }
#leadsView .lead-insight-item.is-unassigned::before { background: #7b61c9; }

#leadsView .lead-priority-focus {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  padding: 11px 16px;
  border: 0;
  border-left: 0;
  background: #fff;
}

#leadsView .lead-priority-focus-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: #537087;
  font-size: 10px;
}

#leadsView .lead-priority-focus .reminder-ticker {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 34px;
  gap: 9px;
  align-items: center;
}

#leadsView .lead-priority-focus .reminder-ticker-track strong {
  font-size: 13.5px;
}

#leadsView .lead-priority-focus .reminder-ticker-track p {
  margin: 2px 0 0;
  font-size: 11.5px;
}

#leadsView .lead-reminder-button {
  min-height: 40px;
  border-radius: 9px;
}

#leadsView .lead-database-heading {
  min-height: 78px !important;
  padding: 15px 16px !important;
}

#leadsView .lead-created-date,
#leadsView .lead-age-label,
#leadsView .lead-next-action,
#leadsView .lead-next-action-date {
  display: block;
}

#leadsView .lead-age-label,
#leadsView .lead-next-action-date {
  margin-top: 3px;
  color: #7d8fa0;
  font-size: 11px;
}

#leadsView .lead-next-action {
  color: #183d62;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 1450px) {
  #leadsView .lead-filter-toolbar {
    grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(145px, 1fr));
  }

  #leadsView .lead-filter-reset {
    width: 100%;
  }

  #leadsView .lead-insight-strip {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 980px) {
  #leadsView .lead-filter-toolbar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #leadsView .lead-filter-search {
    grid-column: 1 / -1;
  }

  #leadsView .lead-priority-focus {
    align-items: stretch;
    flex-direction: column;
  }

  #leadsView .lead-reminder-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 620px) {
  #leadsView .lead-page-heading,
  #leadsView .lead-filter-toolbar {
    padding-inline: 14px;
  }

  #leadsView .lead-page-heading,
  #leadsView .lead-filter-toolbar {
    grid-template-columns: 1fr;
  }

  #leadsView .lead-filter-search {
    grid-column: auto;
  }

  #leadsView .lead-insight-strip {
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
  }

  #leadsView .lead-priority-focus .reminder-ticker {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }

  #leadsView .lead-priority-focus .reminder-ticker-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}


/* =========================================================
   Dashboard activity + sales performance readability
   v2026.08.06.29
   Minimum readable text: 11–12px without global page zoom.
   ========================================================= */
.dashboard-activity-item {
  min-height: 58px !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 9px 14px !important;
}

.dashboard-activity-item > span:first-child {
  width: 30px !important;
  height: 30px !important;
  font-size: 13px !important;
}

.dashboard-activity-item > span:nth-child(2) {
  gap: 3px !important;
}

.dashboard-activity-item strong {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.dashboard-activity-item small,
.dashboard-activity-item time {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.dashboard-activity-item small {
  white-space: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-activity-item time {
  align-self: start;
  padding-top: 2px;
}

.dashboard-performance-head {
  min-height: 44px !important;
  font-size: 11px !important;
  letter-spacing: .035em !important;
}

.dashboard-performance-row {
  min-height: 64px !important;
}

.dashboard-performance-row > strong,
.dashboard-sales-person strong {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.dashboard-sales-person small {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.dashboard-sales-person .user-avatar {
  width: 32px !important;
  height: 32px !important;
  flex-basis: 32px !important;
  font-size: 13px !important;
}

.dashboard-sales-person > span {
  gap: 3px !important;
}

.dashboard-conversion {
  grid-template-columns: 42px minmax(70px, 1fr) !important;
  gap: 8px !important;
}

.dashboard-conversion strong {
  font-size: 11px !important;
}

.dashboard-performance-row > strong,
.dashboard-performance-row > span:not(.dashboard-sales-person),
.dashboard-performance-row > div:not(.dashboard-sales-person):not(.dashboard-conversion) {
  font-size: 12px !important;
}

@media (max-width: 1100px) {
  .dashboard-activity-item strong {
    font-size: 11.5px !important;
  }

  .dashboard-activity-item small,
  .dashboard-activity-item time,
  .dashboard-sales-person small,
  .dashboard-performance-head,
  .dashboard-conversion strong {
    font-size: 11px !important;
  }
}


/* =========================================================
   Dashboard data-density resilience & layout balance
   v2026.08.06.31
   Keeps the dashboard stable when lead, activity, source,
   pipeline, and sales datasets become dense.
   ========================================================= */
.dashboard-welcome-bar {
  min-height: 82px;
  padding: 12px 14px !important;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 48, 77, .035);
}

.dashboard-welcome-copy h2 {
  margin: 0;
}

.dashboard-welcome-copy p {
  max-width: 720px;
}

.dashboard-welcome-controls {
  flex: 0 0 auto;
}

.dashboard-primary-grid {
  align-items: start !important;
}

.dashboard-priority-card,
.dashboard-pipeline-card,
.dashboard-side-stack {
  height: clamp(360px, 39vh, 420px);
  min-height: 360px;
  max-height: 420px;
}

.dashboard-priority-card,
.dashboard-pipeline-card,
.dashboard-activity-card,
.dashboard-source-card,
.dashboard-performance-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dashboard-priority-list,
#dashboardPipelineOverview,
.dashboard-activity-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.dashboard-priority-item {
  flex: 0 0 auto;
}

.dashboard-side-stack {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.dashboard-quick-card {
  flex: 0 0 auto;
}

.dashboard-quick-card .dashboard-card-head.compact,
.dashboard-activity-card .dashboard-card-head.compact {
  min-height: 46px !important;
}

.dashboard-quick-grid {
  gap: 6px !important;
  padding: 8px !important;
}

.dashboard-quick-grid button {
  min-height: 52px !important;
  padding: 7px 8px !important;
}

.dashboard-quick-grid button > i {
  width: 31px;
  height: 31px;
  font-size: 14px;
}

.dashboard-activity-item {
  min-height: 54px !important;
  padding: 8px 12px !important;
}

.dashboard-pipeline-summary {
  flex: 0 0 auto;
}

.dashboard-funnel-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.dashboard-secondary-grid {
  align-items: stretch;
}

.dashboard-source-card,
.dashboard-performance-card {
  height: clamp(300px, 30vh, 360px);
  min-height: 300px;
  max-height: 360px;
}

.dashboard-source-content,
.dashboard-performance-table {
  min-height: 0 !important;
  flex: 1 1 auto;
}

.dashboard-source-content {
  align-items: center !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 14px !important;
  overflow: hidden;
}

.dashboard-source-legend {
  max-height: 230px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.dashboard-source-legend > div {
  min-height: 31px;
}

.dashboard-performance-table {
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.dashboard-performance-head {
  position: sticky;
  z-index: 2;
  top: 0;
  background: #f8fafc;
  box-shadow: 0 1px 0 #e8eef3;
}

.dashboard-performance-row {
  flex: 0 0 auto;
}

@media (max-width: 1450px) {
  .dashboard-primary-grid {
    align-items: stretch !important;
  }

  .dashboard-priority-card,
  .dashboard-pipeline-card,
  .dashboard-side-stack {
    height: auto;
    min-height: 340px;
    max-height: none;
  }

  .dashboard-side-stack {
    min-height: 0;
  }

  .dashboard-source-card,
  .dashboard-performance-card {
    height: 340px;
    min-height: 340px;
    max-height: 340px;
  }
}

@media (max-width: 1100px) {
  .dashboard-priority-card,
  .dashboard-pipeline-card,
  .dashboard-side-stack,
  .dashboard-source-card,
  .dashboard-performance-card {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .dashboard-priority-list,
  #dashboardPipelineOverview,
  .dashboard-activity-list,
  .dashboard-source-legend,
  .dashboard-performance-table {
    max-height: none;
    overflow-y: visible !important;
  }

  .dashboard-source-content {
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .dashboard-welcome-bar {
    min-height: 0;
    padding: 12px !important;
  }

  .dashboard-source-content {
    grid-template-columns: 1fr !important;
  }
}
\n\n/* =========================================================
   Pipeline sales-action card refinement
   v2026.08.07.32
   Keeps cards simple and readable even when a stage has many leads.
   ========================================================= */
#pipelineView .pipeline-board {
  grid-auto-columns: clamp(370px, 24vw, 410px) !important;
  gap: 16px !important;
}

#pipelineView .pipeline-dropzone {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 10px !important;
  padding: 12px !important;
}

#pipelineView .lead-card.pipeline-sales-card {
  flex: 0 0 auto;
  width: 100%;
  min-height: 176px;
  padding: 14px !important;
  border: 1px solid #dce6ef !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(15, 47, 73, .055) !important;
  overflow: visible !important;
}

#pipelineView .lead-card.pipeline-sales-card:hover,
#pipelineView .lead-card.pipeline-sales-card:focus-visible {
  border-color: #72aee5 !important;
  box-shadow: 0 10px 24px rgba(18, 83, 139, .11) !important;
}

#pipelineView .pipeline-sales-card .pipeline-card-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: start;
  gap: 10px;
}

#pipelineView .pipeline-sales-card .pipeline-card-heading h3 {
  margin: 0;
  color: #132f49;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.35;
}

#pipelineView .pipeline-sales-card .pipeline-card-heading small {
  display: block;
  margin-top: 3px;
  color: #718397;
  font-size: 11px !important;
  line-height: 1.35;
}

#pipelineView .pipeline-sales-card .pipeline-card-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

#pipelineView .pipeline-sales-card .pipeline-quality,
#pipelineView .pipeline-sales-card .pipeline-completeness,
#pipelineView .pipeline-sales-card .pipeline-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px !important;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#pipelineView .pipeline-source-chip {
  max-width: 150px;
  overflow: hidden;
  border: 1px solid #dbe7f1;
  color: #4d667d;
  background: #f4f8fb;
  text-overflow: ellipsis;
}

#pipelineView .pipeline-source-chip i {
  flex: 0 0 auto;
  color: #2c78b9;
}

#pipelineView .pipeline-completeness.is-incomplete {
  border: 1px solid #f0d596;
  color: #8c5a00;
  background: #fff7df;
}

#pipelineView .pipeline-property-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  color: #526b7f;
  font-size: 11.5px !important;
  line-height: 1.4;
}

#pipelineView .pipeline-property-line i {
  flex: 0 0 auto;
  color: #378a85;
}

#pipelineView .pipeline-property-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipelineView .pipeline-sales-focus {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
  gap: 8px;
  margin-top: 10px;
}

#pipelineView .pipeline-sales-focus .pipeline-card-value,
#pipelineView .pipeline-next-action {
  min-width: 0;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid #e0e9f0;
  border-radius: 10px;
}

#pipelineView .pipeline-sales-focus .pipeline-card-value {
  background: #f7fafc;
}

#pipelineView .pipeline-sales-focus .pipeline-card-value span,
#pipelineView .pipeline-next-action span {
  display: block;
  color: #7a8d9e;
  font-size: 9.5px !important;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .035em;
}

#pipelineView .pipeline-sales-focus .pipeline-card-value strong {
  display: block;
  margin-top: 5px;
  color: #164a72;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

#pipelineView .pipeline-next-action {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #17615c;
  background: #f0faf8;
  border-color: #d3ebe6;
}

#pipelineView .pipeline-next-action > i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: #daf2ed;
  font-size: 13px;
}

#pipelineView .pipeline-next-action strong,
#pipelineView .pipeline-next-action small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipelineView .pipeline-next-action strong {
  margin-top: 3px;
  color: #184b49;
  font-size: 11px !important;
  font-weight: 600;
}

#pipelineView .pipeline-next-action small {
  margin-top: 2px;
  color: #68817f;
  font-size: 10px !important;
}

#pipelineView .pipeline-next-action.is-urgent {
  color: #b42318;
  background: #fff3f2;
  border-color: #f0cbc7;
}

#pipelineView .pipeline-next-action.is-urgent > i {
  background: #ffe1de;
}

#pipelineView .pipeline-next-action.is-urgent strong {
  color: #a3261d;
}

#pipelineView .pipeline-next-action.is-today {
  color: #986300;
  background: #fff8e4;
  border-color: #eed99f;
}

#pipelineView .pipeline-next-action.is-today > i {
  background: #ffedbc;
}

#pipelineView .pipeline-note-compact {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  color: #687c8c;
  font-size: 10.5px !important;
}

#pipelineView .pipeline-note-compact span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipelineView .pipeline-sales-card .pipeline-card-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #edf2f6;
}

#pipelineView .pipeline-sales-card .sdr-avatar-label {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 11px !important;
}

#pipelineView .pipeline-sales-card .sdr-avatar-label strong {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  font-size: 9px;
}

#pipelineView .pipeline-sales-card .pipeline-card-actions {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

#pipelineView .pipeline-sales-card .pipeline-card-actions button {
  display: inline-flex;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border-radius: 8px;
}

#pipelineView .pipeline-sales-card .pipeline-card-actions .pipeline-followup-action {
  width: auto;
  min-width: 92px;
  padding: 0 10px;
  border-color: #b9d8f4;
  color: #0967b2;
  background: #eef6fd;
  font-size: 11px !important;
  font-weight: 600;
}

#pipelineView .pipeline-sales-card .pipeline-card-actions .pipeline-followup-action span {
  display: inline;
}

@media (max-width: 1366px) {
  #pipelineView .pipeline-board {
    grid-auto-columns: clamp(356px, 30vw, 380px) !important;
  }

  #pipelineView .pipeline-sales-focus {
    grid-template-columns: minmax(0, 1fr);
  }

  #pipelineView .lead-card.pipeline-sales-card {
    min-height: 198px;
  }
}

@media (max-width: 760px) {
  #pipelineView .pipeline-board {
    grid-auto-columns: auto !important;
  }

  #pipelineView .pipeline-sales-card .pipeline-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  #pipelineView .pipeline-sales-card .pipeline-card-actions {
    width: 100%;
  }

  #pipelineView .pipeline-sales-card .pipeline-card-actions .pipeline-followup-action {
    flex: 1 1 auto;
  }
}


/* =========================================================
   Pipeline viewport-bottom fit
   v2026.08.07.33
   Uses the actual remaining viewport height instead of a capped clamp value.
   ========================================================= */
#pipelineView.view.active {
  height: var(--pipeline-viewport-height, calc(100dvh - 122px)) !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

#pipelineView .pipeline-toolbar,
#pipelineView .pipeline-scroll-top {
  flex: 0 0 auto;
}

#pipelineView .pipeline-board {
  flex: 1 1 0 !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-items: stretch !important;
  grid-auto-rows: minmax(0, 1fr);
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#pipelineView .pipeline-column {
  align-self: stretch;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

#pipelineView .pipeline-dropzone {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

@media (max-width: 760px) {
  #pipelineView.view.active {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #pipelineView .pipeline-board {
    height: auto !important;
    overflow: visible !important;
  }

  #pipelineView .pipeline-column {
    height: auto !important;
    min-height: 320px !important;
    max-height: none !important;
  }

  #pipelineView .pipeline-dropzone {
    overflow-y: visible !important;
  }
}

/* =========================================================
   Site Plan Digital — v2026.08.07.34
   ========================================================= */
.sp-page-shell {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
}

.sp-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid #dce6ef;
  border-radius: 16px;
  background: linear-gradient(110deg, #fff 60%, #edf7ff);
  box-shadow: 0 8px 26px rgba(15, 39, 71, .05);
}

.sp-page-header h2 {
  margin: 5px 0 5px;
  color: #102f4f;
  font-size: 24px;
  font-weight: 600;
}

.sp-page-header p {
  max-width: 760px;
  margin: 0;
  color: #64798c;
  font-size: 13px;
  line-height: 1.55;
}

.sp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #087b83;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
}

.sp-header-actions,
.sp-map-actions,
.sp-viewer-tools {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sp-toolbar-card {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(220px, 1fr) auto auto;
  align-items: end;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #dce6ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(15, 39, 71, .04);
}

.sp-project-selector {
  display: grid;
  gap: 6px;
}

.sp-project-selector > span {
  color: #526b80;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sp-project-selector select {
  min-height: 44px;
  padding: 0 40px 0 13px;
  border: 1px solid #cad9e6;
  border-radius: 11px;
  color: #193b5b;
  background-color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.sp-project-meta {
  min-width: 0;
  padding: 2px 0 3px;
}

.sp-project-meta strong,
.sp-project-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-project-meta strong {
  color: #173b5b;
  font-size: 14px;
  font-weight: 600;
}

.sp-project-meta small {
  margin-top: 4px;
  color: #7890a3;
  font-size: 11px;
}

.sp-viewer-tools {
  padding: 4px;
  border: 1px solid #dce6ef;
  border-radius: 11px;
  background: #f7fafc;
}

.sp-viewer-tools .icon-button {
  width: 35px;
  height: 35px;
  min-height: 35px;
}

#spZoomLabel {
  min-width: 48px;
  color: #2e526e;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.sp-status-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sp-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 13px 16px;
  border: 1px solid #dce6ef;
  border-radius: 13px;
  color: #4f677a;
  background: #fff;
  box-shadow: 0 5px 18px rgba(15, 39, 71, .035);
  cursor: pointer;
  transition: .18s ease;
}

.sp-status-card:hover,
.sp-status-card.active {
  border-color: #75aee0;
  box-shadow: 0 8px 22px rgba(24, 111, 194, .09);
  transform: translateY(-1px);
}

.sp-status-card span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}

.sp-status-card span i,
.sp-legend i,
.sp-detail-status i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #8ca0b1;
}

.sp-status-card strong {
  color: #153957;
  font-size: 24px;
  font-weight: 600;
}

.sp-status-card.is-available span i,
.sp-legend i.is-available,
.sp-detail-status.status-available i { background: #23a974; }
.sp-status-card.is-hold span i,
.sp-legend i.is-hold,
.sp-detail-status.status-hold i { background: #e7b532; }
.sp-status-card.is-booked span i,
.sp-legend i.is-booked,
.sp-detail-status.status-booked i { background: #df4d4d; }

.sp-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  min-height: calc(100dvh - 335px);
}

.sp-viewer-panel,
.sp-inventory-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce6ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(15, 39, 71, .045);
}

.sp-viewer-panel {
  position: relative;
  min-height: 560px;
}

.sp-empty-state {
  display: grid;
  height: 100%;
  min-height: 560px;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 32px;
  color: #7890a3;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(43, 134, 211, .08), transparent 36%),
    #f6f9fc;
}

.sp-empty-state i {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 16px;
  color: #1676c8;
  background: #e8f3fd;
  font-size: 24px;
}

.sp-empty-state h3 {
  margin: 5px 0 0;
  color: #21425f;
  font-size: 17px;
}

.sp-empty-state p {
  max-width: 420px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.sp-viewer {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 560px;
  background: #eaf0f5;
}

.sp-canvas {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background:
    linear-gradient(45deg, rgba(109, 130, 149, .08) 25%, transparent 25%) 0 0/22px 22px,
    linear-gradient(-45deg, rgba(109, 130, 149, .08) 25%, transparent 25%) 0 11px/22px 22px,
    #edf2f6;
}

.sp-canvas:active { cursor: grabbing; }
.sp-canvas.is-drawing { cursor: crosshair; }

.sp-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  border: 1px solid rgba(18, 57, 88, .15);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 12px 38px rgba(15, 39, 71, .17);
  transform-origin: center center;
  will-change: transform;
  user-select: none;
}

.sp-stage img,
.sp-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sp-stage img {
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.sp-overlay { overflow: visible; }

.sp-unit-shape {
  cursor: pointer;
  outline: none;
  transition: opacity .15s ease;
}

.sp-unit-shape polygon {
  stroke: rgba(255, 255, 255, .95);
  stroke-width: 2px;
  fill-opacity: .62;
  transition: fill-opacity .15s ease, filter .15s ease;
}

.sp-unit-shape text {
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(9, 35, 54, .76);
  stroke-width: .55px;
  font-size: 3.1px;
  font-weight: 600;
  pointer-events: none;
}

.sp-unit-shape.status-available polygon { fill: #1da96f; }
.sp-unit-shape.status-hold polygon { fill: #dfac22; }
.sp-unit-shape.status-booked polygon { fill: #dd4141; }
.sp-unit-shape:hover polygon,
.sp-unit-shape:focus polygon { fill-opacity: .9; filter: drop-shadow(0 0 2px rgba(15, 39, 71, .5)); }
.sp-unit-shape.is-dimmed { opacity: .16; }

.sp-draft-shape {
  fill: rgba(20, 112, 205, .16);
  stroke: #1470cd;
  stroke-width: 2px;
  stroke-dasharray: 5 3;
}

.sp-draft-point {
  fill: #fff;
  stroke: #1470cd;
  stroke-width: 2px;
}

.sp-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  padding: 10px 16px;
  border-top: 1px solid #dce6ef;
  color: #526b80;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
}

.sp-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.sp-legend small {
  margin-left: auto;
  color: #8295a5;
  font-size: 10px;
  font-weight: 600;
}

.sp-draw-toolbar {
  position: absolute;
  right: 16px;
  bottom: 66px;
  left: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #8abce6;
  border-radius: 13px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 36px rgba(15, 39, 71, .18);
  backdrop-filter: blur(12px);
}

.sp-draw-toolbar > div { min-width: 0; margin-right: auto; }
.sp-draw-toolbar strong,
.sp-draw-toolbar small { display: block; }
.sp-draw-toolbar strong { color: #153957; font-size: 12px; }
.sp-draw-toolbar small { margin-top: 2px; color: #71879a; font-size: 10px; }

.sp-inventory-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 560px;
}

.sp-inventory-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 12px;
  border-bottom: 1px solid #e3ebf2;
}

.sp-inventory-panel h3 {
  margin: 3px 0 0;
  color: #173b5b;
  font-size: 16px;
  font-weight: 600;
}

.sp-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #17835d;
  font-size: 10px;
  font-weight: 600;
}

.sp-live-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25ad79;
  box-shadow: 0 0 0 4px rgba(37, 173, 121, .12);
}

.sp-search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin: 12px 13px;
  padding: 0 12px;
  border: 1px solid #d6e2ec;
  border-radius: 10px;
  color: #7b90a2;
  background: #f8fafc;
}

.sp-search-box input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}

.sp-unit-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 12px 14px;
}

.sp-unit-list-item {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 63px;
  padding: 9px 10px;
  margin-bottom: 8px;
  border: 1px solid #dce6ef;
  border-left-width: 4px;
  border-radius: 11px;
  color: #173b5b;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: .16s ease;
}

.sp-unit-list-item:hover {
  border-color: #8ebce2;
  box-shadow: 0 7px 18px rgba(20, 91, 153, .08);
  transform: translateY(-1px);
}

.sp-unit-list-item.status-available { border-left-color: #23a974; }
.sp-unit-list-item.status-hold { border-left-color: #e2ad23; }
.sp-unit-list-item.status-booked { border-left-color: #df4d4d; }

.sp-unit-number {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  color: #0d6dbf;
  background: #eaf4fd;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.sp-unit-list-copy,
.sp-unit-list-status { min-width: 0; }
.sp-unit-list-copy strong,
.sp-unit-list-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-unit-list-copy strong { font-size: 12px; font-weight: 600; }
.sp-unit-list-copy small { margin-top: 4px; color: #74899b; font-size: 10px; }

.sp-unit-list-status {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.sp-unit-list-status em {
  font-style: normal;
  color: #526b80;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.sp-unit-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9a6b00;
  font-size: 9px;
  font-weight: 600;
}

.sp-list-empty,
.sp-list-loading {
  display: grid;
  min-height: 200px;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #7d91a2;
  text-align: center;
}

.sp-list-empty i { font-size: 23px; }
.sp-list-empty strong { color: #36556d; font-size: 13px; }
.sp-list-empty span { max-width: 220px; font-size: 10px; line-height: 1.5; }
.sp-list-loading { grid-template-columns: auto auto; min-height: 100px; font-size: 11px; }
.sp-list-loading span,
.sp-button-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid #cbd9e5;
  border-top-color: #1374ca;
  border-radius: 50%;
  animation: sp-spin .8s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

.sp-dialog {
  width: min(620px, calc(100vw - 24px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 28px 80px rgba(9, 30, 48, .28);
}

.sp-dialog::backdrop { background: rgba(9, 29, 45, .58); backdrop-filter: blur(3px); }
.sp-detail-dialog { width: min(560px, calc(100vw - 24px)); }
.sp-unit-dialog { width: min(700px, calc(100vw - 24px)); }

.sp-dialog-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid #dce6ef;
  border-radius: 18px;
  background: #fff;
}

.sp-dialog-card h2 { margin: 0; color: #163957; font-size: 21px; font-weight: 600; }
.sp-dialog-card > p { margin: -7px 0 2px; color: #74899a; font-size: 12px; line-height: 1.55; }
.sp-dialog-card label { display: grid; gap: 6px; }
.sp-dialog-card label > span { color: #4b657b; font-size: 11px; font-weight: 600; }
.sp-dialog-card input,
.sp-dialog-card select,
.sp-dialog-card textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cfdde8;
  border-radius: 10px;
  color: #193b5b;
  background: #fff;
  font: inherit;
  font-size: 13px;
}
.sp-dialog-card textarea { resize: vertical; }

.sp-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #62798c;
  background: #f2f6f9;
  cursor: pointer;
}

.sp-dialog-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  color: #1470c9;
  background: #eaf4fd;
  font-size: 20px;
}
.sp-dialog-icon.is-hold { color: #a87500; background: #fff5d8; }

.sp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sp-form-wide { grid-column: 1 / -1; }
.sp-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.sp-dialog-actions .danger-button { margin-right: auto; }
.sp-dialog-status { min-height: 18px; margin: 0 !important; color: #24765b !important; font-size: 11px !important; font-weight: 600; }
.sp-dialog-status[data-status="error"] { color: #b43b32 !important; }

.sp-detail-heading { padding-right: 44px; }
.sp-detail-heading h2 { margin-top: 8px; font-size: 28px; }
.sp-detail-heading p { margin: 4px 0 0; color: #71879a; font-size: 13px; }
.sp-detail-status { display: inline-flex; align-items: center; gap: 7px; color: #526b80; font-size: 10px; font-weight: 600; text-transform: uppercase; }

.sp-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sp-detail-grid > div {
  padding: 12px;
  border: 1px solid #dce6ef;
  border-radius: 11px;
  background: #f8fafc;
}
.sp-detail-grid span,
.sp-detail-grid strong { display: block; }
.sp-detail-grid span { color: #7890a3; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.sp-detail-grid strong { margin-top: 5px; color: #173b5b; font-size: 15px; font-weight: 600; }
.sp-detail-price { grid-column: 1 / -1; background: #edf7ff !important; border-color: #c7e1f6 !important; }
.sp-detail-price strong { color: #0872c8; font-size: 21px; }

.sp-detail-hold,
.sp-hold-notice,
.sp-detail-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #ecd995;
  border-radius: 11px;
  color: #765711;
  background: #fff9e7;
}
.sp-detail-hold strong,
.sp-detail-hold small { display: block; }
.sp-detail-hold small { margin-top: 3px; font-size: 10px; }
.sp-detail-note { border-color: #d8e5ee; color: #526b80; background: #f6f9fb; font-size: 11px; line-height: 1.5; }
.sp-hold-notice { font-size: 11px; line-height: 1.55; }

.sp-stock-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #dce6ef;
  border-radius: 11px;
  background: #f8fafc;
}
.sp-stock-actions button {
  min-height: 36px;
  border: 1px solid #cfdee9;
  border-radius: 9px;
  color: #3a5c75;
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.sp-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.sp-kpr-result {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #d5e4ef;
  border-radius: 12px;
  background: #f7fafc;
}
.sp-kpr-result > div { display: flex; justify-content: space-between; gap: 14px; padding: 5px; }
.sp-kpr-result span { color: #637b8d; font-size: 11px; }
.sp-kpr-result strong { color: #173b5b; font-size: 12px; }
.sp-kpr-result .is-primary { padding: 11px; border-radius: 9px; background: #e8f4ff; }
.sp-kpr-result .is-primary strong { color: #086dbf; font-size: 17px; }
.sp-kpr-disclaimer { color: #8396a5; font-size: 9px; line-height: 1.5; }

.sp-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(420px, calc(100vw - 30px));
  padding: 12px 14px;
  border: 1px solid #cce8dc;
  border-radius: 12px;
  color: #176a50;
  background: #f0fff8;
  box-shadow: 0 14px 36px rgba(9, 44, 34, .18);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: .2s ease;
}
.sp-toast.show { opacity: 1; transform: translateY(0); }
.sp-toast[data-type="error"] { border-color: #efc8c4; color: #a6352e; background: #fff3f2; }

@media (max-width: 1180px) {
  .sp-toolbar-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-workspace-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 900px) {
  .sp-page-shell { padding: 14px; }
  .sp-page-header { align-items: flex-start; flex-direction: column; }
  .sp-status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-workspace-grid { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .sp-viewer-panel, .sp-viewer, .sp-empty-state { min-height: 540px; }
  .sp-inventory-panel { min-height: 420px; max-height: 520px; }
}

@media (max-width: 620px) {
  .sp-page-shell { gap: 12px; padding: 10px; }
  .sp-page-header { padding: 17px; }
  .sp-page-header h2 { font-size: 21px; }
  .sp-header-actions { width: 100%; }
  .sp-header-actions > button { flex: 1; }
  .sp-toolbar-card { grid-template-columns: minmax(0, 1fr); }
  .sp-project-meta { order: -1; }
  .sp-viewer-tools, .sp-map-actions { justify-content: center; }
  .sp-map-actions .ghost-button { width: 100%; }
  .sp-status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sp-status-card { min-height: 60px; padding: 10px 11px; }
  .sp-status-card span { font-size: 10px; }
  .sp-status-card strong { font-size: 20px; }
  .sp-viewer-panel, .sp-viewer, .sp-empty-state { min-height: 470px; }
  .sp-canvas { min-height: 410px; }
  .sp-legend { flex-wrap: wrap; gap: 9px 13px; padding: 9px 11px; }
  .sp-legend small { width: 100%; margin-left: 0; }
  .sp-draw-toolbar { align-items: stretch; flex-wrap: wrap; bottom: 86px; }
  .sp-draw-toolbar > div { width: 100%; }
  .sp-draw-toolbar button { flex: 1; }
  .sp-form-grid, .sp-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-form-wide, .sp-detail-price { grid-column: auto; }
  .sp-dialog-card { padding: 20px 17px; }
  .sp-detail-actions > button { flex: 1; justify-content: center; }
}


/* =========================================================
   Lead ↔ Site Plan project relation — v2026.08.07.35
   ========================================================= */
.lead-siteplan-field select {
  min-height: 44px;
}

.lead-siteplan-help {
  display: block;
  margin-top: 6px;
  color: #6d8190;
  font-size: 11.5px;
  line-height: 1.45;
}

.lead-siteplan-help[data-status="success"],
.lead-siteplan-help[data-status="available"] {
  color: #247a55;
}

.lead-siteplan-help[data-status="warning"],
.lead-siteplan-help[data-status="hold"] {
  color: #a46d00;
}

.lead-siteplan-help[data-status="error"],
.lead-siteplan-help[data-status="booked"],
.lead-siteplan-help[data-status="sold"] {
  color: #c13e38;
}

.lead-siteplan-help[data-status="info"] {
  color: #39718f;
}

/* =========================================================
   Simplified grouped Lead form + data visibility hotfix
   v2026.08.07.36
   ========================================================= */
#leadDialog {
  width: min(840px, calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

#leadDialog .lead-form-simplified {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
  background: #f7f9fc;
}

#leadDialog .lead-modal-heading {
  flex: 0 0 auto;
  padding: 18px 20px;
  background: #fff;
}

.lead-modal-subtitle {
  margin: 4px 0 0;
  color: #708294;
  font-size: 12.5px;
  line-height: 1.45;
}

.lead-form-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 14px 16px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lead-form-guidance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dce7f1;
  border-radius: 10px;
  background: #eef6ff;
  color: #244e74;
  font-size: 12.5px;
}

.lead-form-guidance > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}

.lead-form-guidance small {
  color: #677d90;
  white-space: nowrap;
}

.required-mark {
  color: #d63838;
  font-weight: 600;
}

.optional-label {
  display: inline-flex;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef2f6;
  color: #728294;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.lead-form-section {
  border: 1px solid #dfe7ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 50, 74, .035);
}

.lead-form-section.is-primary {
  overflow: hidden;
  border-color: #cbdff1;
}

.lead-form-section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px 0;
}

.lead-form-section-heading h3 {
  margin: 0;
  color: #17344a;
  font-size: 15px;
  font-weight: 600;
}

.lead-form-section-heading p {
  margin: 3px 0 0;
  color: #718394;
  font-size: 11.5px;
}

.lead-form-step {
  display: inline-flex;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #e8f3ff;
  color: #0d6fd3;
  font-size: 12px;
  font-weight: 600;
}

#leadDialog .lead-primary-grid {
  gap: 12px 14px;
  padding: 14px 16px 16px;
}

#leadDialog label > span:first-child {
  color: #314e65;
  font-size: 11.5px;
  font-weight: 600;
}

#leadDialog input,
#leadDialog select,
#leadDialog textarea {
  min-height: 44px;
  border-radius: 9px;
  font-size: 13.5px;
}

#leadDialog textarea {
  min-height: 88px;
}

.lead-form-collapsible {
  overflow: hidden;
}

.lead-form-collapsible > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lead-form-collapsible > summary::-webkit-details-marker {
  display: none;
}

.lead-form-collapsible > summary strong {
  display: block;
  color: #1d3b51;
  font-size: 13.5px;
  font-weight: 600;
}

.lead-form-collapsible > summary small {
  display: block;
  margin-top: 2px;
  color: #758797;
  font-size: 11.5px;
  line-height: 1.35;
}

.lead-form-collapsible > summary > i {
  color: #71879a;
  transition: transform .18s ease;
}

.lead-form-collapsible[open] > summary {
  border-bottom: 1px solid #e5ebf0;
  background: #fbfcfe;
}

.lead-form-collapsible[open] > summary > i {
  transform: rotate(180deg);
}

#leadDialog .nested-form-grid {
  padding: 14px 15px 16px;
}

#leadDialog .lead-siteplan-help,
#leadDialog .field-help {
  margin-top: 5px;
  font-size: 11px;
}

#leadDialog .lead-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex: 0 0 auto;
  padding: 12px 16px;
  box-shadow: 0 -8px 22px rgba(15, 23, 42, .06);
}

#leadDialog .lead-modal-actions button {
  min-height: 42px;
}

@media (max-width: 720px) {
  #leadDialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  #leadDialog .lead-form-simplified {
    max-height: calc(100dvh - 16px);
  }

  #leadDialog .lead-modal-heading {
    align-items: flex-start;
    padding: 15px;
  }

  .lead-form-guidance {
    align-items: flex-start;
    flex-direction: column;
  }

  #leadDialog .lead-primary-grid,
  #leadDialog .nested-form-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Lead modal scroll and footer overlap fix
   v2026.08.07.37
   ========================================================= */
#leadDialog .lead-form-simplified {
  height: min(920px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

#leadDialog .lead-form-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 24px;
  scroll-padding-top: 14px;
  scroll-padding-bottom: 24px;
  scrollbar-gutter: stable;
}

#leadDialog .lead-modal-actions {
  position: relative;
  inset: auto;
  z-index: 4;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #dfe7ee;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -8px 22px rgba(15, 23, 42, .06);
}

#leadDialog .lead-form-collapsible[open] {
  scroll-margin-bottom: 24px;
}

#leadDialog #leadAddressInput {
  min-height: 96px;
  resize: vertical;
}

@media (max-width: 720px) {
  #leadDialog .lead-form-simplified {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  #leadDialog .lead-form-body {
    padding-bottom: 20px;
    scroll-padding-bottom: 20px;
  }

  #leadDialog .lead-modal-actions {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
}


/* =========================================================
   Lead form natural-height accordion visibility fix
   v2026.08.07.39
   ========================================================= */
#leadDialog {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - 20px);
}

#leadDialog .lead-form-simplified {
  height: min(940px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
}

#leadDialog .lead-form-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 16px 28px;
  scroll-padding: 14px 0 32px;
}

#leadDialog .lead-form-body > * {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: max-content;
}

#leadDialog .lead-form-section,
#leadDialog .lead-form-section.is-primary,
#leadDialog .lead-form-collapsible,
#leadDialog .lead-form-collapsible[open] {
  height: auto;
  min-height: 0;
  max-height: none;
}

#leadDialog .lead-form-section.is-primary,
#leadDialog .lead-form-collapsible:not([open]) {
  overflow: hidden;
}

#leadDialog .lead-form-collapsible[open] {
  overflow: visible;
}

#leadDialog .lead-form-collapsible[open] > .nested-form-grid {
  display: grid;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

#leadDialog .lead-primary-grid,
#leadDialog .nested-form-grid {
  grid-auto-rows: max-content;
  align-items: start;
}

#leadDialog .lead-form-collapsible > summary {
  position: relative;
  z-index: 1;
}

#leadDialog .lead-form-collapsible[open] > summary {
  position: sticky;
  top: -14px;
  z-index: 2;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .05);
}

#leadDialog .lead-form-collapsible[open] {
  scroll-margin-top: 8px;
  scroll-margin-bottom: 32px;
}

#leadDialog .lead-modal-actions {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  #leadDialog {
    width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
  }

  #leadDialog .lead-form-simplified {
    height: calc(100dvh - 10px);
    max-height: calc(100dvh - 10px);
  }

  #leadDialog .lead-form-body {
    padding: 12px 12px 24px;
  }

  #leadDialog .lead-form-collapsible[open] > summary {
    top: -12px;
  }
}


/* =========================================================
   Lead entry step-by-step wizard
   v2026.08.07.40
   ========================================================= */
#leadDialog {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - 20px);
}

#leadDialog .lead-wizard-form {
  display: flex;
  height: min(900px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  flex-direction: column;
  overflow: hidden;
  background: #f6f8fb;
}

#leadDialog .lead-wizard-progress {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) 38px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 14px 18px 16px;
  border-bottom: 1px solid #dde6ee;
  background: #fff;
}

#leadDialog .lead-wizard-progress-item {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #758697;
  text-align: left;
  cursor: pointer;
}

#leadDialog .lead-wizard-progress-item:hover {
  background: #f5f8fb;
}

#leadDialog .lead-wizard-progress-number {
  display: inline-flex;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7e1e9;
  border-radius: 50%;
  background: #fff;
  color: #73879a;
  font-size: 12px;
  font-weight: 600;
}

#leadDialog .lead-wizard-progress-item strong,
#leadDialog .lead-wizard-progress-item small {
  display: block;
}

#leadDialog .lead-wizard-progress-item strong {
  overflow: hidden;
  color: #566d7f;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leadDialog .lead-wizard-progress-item small {
  margin-top: 1px;
  color: #8a9aa8;
  font-size: 10.5px;
}

#leadDialog .lead-wizard-progress-item.is-active {
  background: #eef6ff;
}

#leadDialog .lead-wizard-progress-item.is-active .lead-wizard-progress-number {
  border-color: #1477d8;
  background: #1477d8;
  color: #fff;
  box-shadow: 0 5px 14px rgba(20, 119, 216, .22);
}

#leadDialog .lead-wizard-progress-item.is-active strong {
  color: #0d5fae;
}

#leadDialog .lead-wizard-progress-item.is-complete .lead-wizard-progress-number {
  border-color: #b8dfce;
  background: #e7f6ef;
  color: #16845e;
}

#leadDialog .lead-wizard-progress-connector {
  height: 2px;
  border-radius: 999px;
  background: #dce5ec;
}

#leadDialog .lead-wizard-progress-track {
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f6;
}

#leadDialog .lead-wizard-progress-track > span {
  display: block;
  width: 33.333%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1477d8, #23a6d5);
  transition: width .22s ease;
}

#leadDialog .lead-wizard-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 18px 24px;
  scroll-padding: 16px 0 28px;
  scrollbar-gutter: stable;
}

#leadDialog .lead-wizard-panel {
  width: 100%;
  min-height: auto;
  overflow: hidden;
  animation: leadWizardPanelIn .2s ease;
}

#leadDialog .lead-wizard-panel[hidden] {
  display: none !important;
}

#leadDialog .lead-wizard-panel-heading {
  align-items: flex-start;
  padding: 16px 17px 4px;
}

#leadDialog .lead-wizard-panel-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}

#leadDialog .lead-wizard-required-note {
  flex: 0 0 auto;
  margin-top: 4px;
  color: #748798;
  font-size: 11px;
  white-space: nowrap;
}

#leadDialog .lead-wizard-subsection {
  margin: 12px 16px 16px;
  overflow: hidden;
  border: 1px solid #e2e9ef;
  border-radius: 11px;
  background: #fbfcfe;
}

#leadDialog .lead-wizard-subsection + .lead-wizard-subsection {
  margin-top: 0;
}

#leadDialog .lead-wizard-subsection-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid #e7edf2;
  background: #f7fafc;
}

#leadDialog .lead-wizard-subsection-heading > i {
  display: inline-flex;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #e8f3ff;
  color: #0d6fd3;
}

#leadDialog .lead-wizard-subsection-heading strong,
#leadDialog .lead-wizard-subsection-heading small {
  display: block;
}

#leadDialog .lead-wizard-subsection-heading strong {
  color: #244258;
  font-size: 12.5px;
  font-weight: 600;
}

#leadDialog .lead-wizard-subsection-heading small {
  margin-top: 2px;
  color: #758797;
  font-size: 10.8px;
  line-height: 1.35;
}

#leadDialog .lead-wizard-subsection .nested-form-grid {
  padding: 13px;
}

#leadDialog .lead-wizard-actions {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid #dce5ec;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -8px 22px rgba(15, 23, 42, .06);
}

#leadDialog .lead-wizard-action-status {
  min-width: 0;
}

#leadDialog .lead-wizard-action-status strong,
#leadDialog .lead-wizard-action-status small {
  display: block;
}

#leadDialog .lead-wizard-action-status strong {
  color: #26445a;
  font-size: 12px;
  font-weight: 600;
}

#leadDialog .lead-wizard-action-status small {
  max-width: 330px;
  margin-top: 2px;
  color: #7a8b99;
  font-size: 10.8px;
  line-height: 1.35;
}

#leadDialog .lead-wizard-action-buttons {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#leadDialog .lead-wizard-action-buttons button {
  min-height: 42px;
  white-space: nowrap;
}

#leadDialog .secondary-button {
  border: 1px solid #b8d4ed;
  background: #eef6ff;
  color: #0f67b8;
  box-shadow: none;
}

#leadDialog .secondary-button:hover {
  border-color: #87bae5;
  background: #e4f1fd;
}

@keyframes leadWizardPanelIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  #leadDialog {
    width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
  }

  #leadDialog .lead-wizard-form {
    height: calc(100dvh - 10px);
    max-height: calc(100dvh - 10px);
  }

  #leadDialog .lead-wizard-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 10px 10px 13px;
  }

  #leadDialog .lead-wizard-progress-connector {
    display: none;
  }

  #leadDialog .lead-wizard-progress-item {
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    text-align: center;
  }

  #leadDialog .lead-wizard-progress-item > span:last-child small {
    display: none;
  }

  #leadDialog .lead-wizard-progress-item strong {
    font-size: 10.5px;
  }

  #leadDialog .lead-wizard-progress-number {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }

  #leadDialog .lead-wizard-body {
    padding: 12px 10px 20px;
  }

  #leadDialog .lead-wizard-panel-heading {
    padding: 14px 13px 4px;
  }

  #leadDialog .lead-wizard-panel-heading .optional-label,
  #leadDialog .lead-wizard-required-note {
    display: none;
  }

  #leadDialog .lead-wizard-subsection {
    margin: 10px 12px 13px;
  }

  #leadDialog .lead-wizard-action-status {
    display: none;
  }

  #leadDialog .lead-wizard-actions {
    justify-content: flex-end;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  }

  #leadDialog .lead-wizard-action-buttons {
    width: 100%;
  }

  #leadDialog .lead-wizard-action-buttons button {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 10px;
  }

  #leadDialog .lead-wizard-action-buttons .ghost-button[value="cancel"] {
    flex: 0 0 auto;
  }
}

#leadDialog .button-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: leadWizardSpin .7s linear infinite;
}

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


/* =========================================================
   Site Plan toolbar alignment refinement — v2026.08.07.41
   ========================================================= */
.sp-header-actions {
  align-items: stretch;
}

.sp-header-actions > button {
  min-height: 44px;
  height: 44px;
  margin: 0;
}

.sp-toolbar-card {
  grid-template-columns: minmax(240px, 310px) minmax(220px, 1fr) auto;
  align-items: end;
  column-gap: 16px;
  row-gap: 12px;
}

.sp-project-selector,
.sp-project-meta,
.sp-toolbar-actions {
  min-width: 0;
}

.sp-project-selector select {
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 0;
  box-sizing: border-box;
}

.sp-project-meta {
  align-self: end;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

.sp-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 44px;
  align-self: end;
  white-space: nowrap;
}

.sp-viewer-tools {
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  height: 44px;
  padding: 4px;
  margin: 0;
  box-sizing: border-box;
}

.sp-viewer-tools .icon-button,
.sp-viewer-tools .compact-button {
  flex: 0 0 auto;
  height: 34px;
  min-height: 34px;
  margin: 0;
}

.sp-viewer-tools .compact-button {
  padding-inline: 11px;
}

.sp-map-actions {
  flex: 0 0 auto;
  align-items: stretch;
  min-height: 44px;
  height: 44px;
  margin: 0;
}

.sp-map-actions .ghost-button {
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding-inline: 16px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .sp-toolbar-card {
    grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  }

  .sp-toolbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .sp-toolbar-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .sp-project-meta {
    order: 0;
    min-height: auto;
    padding: 2px 0;
  }

  .sp-toolbar-actions {
    grid-column: auto;
    flex-wrap: wrap;
    justify-content: stretch;
    min-height: 0;
  }

  .sp-viewer-tools {
    flex: 1 1 auto;
    justify-content: center;
  }

  .sp-map-actions {
    flex: 1 1 100%;
    width: 100%;
  }

  .sp-map-actions .ghost-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 460px) {
  .sp-viewer-tools {
    width: 100%;
  }

  #spZoomLabel {
    flex: 1 1 auto;
  }
}


/* =========================================================
   Site Plan compact workspace header — v2026.08.07.42
   Removes the duplicate in-page title and maximizes map space.
   ========================================================= */
#sitePlanView .sp-page-shell {
  gap: 12px;
  padding: 14px 18px 18px;
}

#sitePlanView .sp-page-header {
  display: none !important;
}

#sitePlanView .sp-toolbar-card {
  grid-template-columns: minmax(230px, 300px) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  padding: 10px 12px;
}

#sitePlanView .sp-project-selector,
#sitePlanView .sp-project-meta,
#sitePlanView .sp-toolbar-actions {
  align-self: center;
}

#sitePlanView .sp-project-admin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  flex: 0 0 auto;
}

#sitePlanView .sp-project-admin-actions > button {
  height: 44px;
  min-height: 44px;
  margin: 0;
  white-space: nowrap;
}

#sitePlanView .sp-toolbar-actions {
  gap: 8px;
}

#sitePlanView .sp-status-summary {
  gap: 10px;
}

#sitePlanView .sp-status-card {
  min-height: 56px;
  padding: 10px 14px;
}

#sitePlanView .sp-status-card strong {
  font-size: 20px;
}

#sitePlanView .sp-workspace-grid {
  height: calc(100dvh - 245px);
  min-height: 540px;
}

#sitePlanView .sp-viewer-panel,
#sitePlanView .sp-inventory-panel,
#sitePlanView .sp-viewer,
#sitePlanView .sp-empty-state {
  min-height: 0;
  height: 100%;
}

#sitePlanView .sp-canvas {
  min-height: 0;
}

@media (max-width: 1320px) {
  #sitePlanView .sp-toolbar-card {
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  }

  #sitePlanView .sp-toolbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  #sitePlanView .sp-workspace-grid {
    height: calc(100dvh - 295px);
    min-height: 520px;
  }
}

@media (max-width: 900px) {
  #sitePlanView .sp-page-shell {
    padding: 12px;
  }

  #sitePlanView .sp-toolbar-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  #sitePlanView .sp-toolbar-actions {
    grid-column: auto;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  #sitePlanView .sp-project-admin-actions,
  #sitePlanView .sp-viewer-tools,
  #sitePlanView .sp-map-actions {
    flex: 1 1 auto;
  }

  #sitePlanView .sp-project-admin-actions > button,
  #sitePlanView .sp-map-actions > button {
    flex: 1 1 auto;
    justify-content: center;
  }

  #sitePlanView .sp-workspace-grid {
    height: auto;
    min-height: 0;
  }

  #sitePlanView .sp-viewer-panel,
  #sitePlanView .sp-viewer,
  #sitePlanView .sp-empty-state {
    min-height: 520px;
    height: auto;
  }

  #sitePlanView .sp-inventory-panel {
    min-height: 420px;
    height: auto;
  }
}

@media (max-width: 560px) {
  #sitePlanView .sp-project-admin-actions {
    width: 100%;
    height: auto;
  }

  #sitePlanView .sp-viewer-tools,
  #sitePlanView .sp-map-actions {
    width: 100%;
  }
}

/* =========================================================
   KPR & installment compact simulator
   v2026.08.07.43
   ========================================================= */
.sp-mortgage-dialog {
  width: min(920px, calc(100vw - 24px));
}

.sp-payment-dialog-card {
  max-height: min(900px, calc(100dvh - 24px));
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.sp-payment-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-right: 48px;
}

.sp-payment-heading h2 {
  margin: 0;
}

.sp-payment-heading p {
  margin: 4px 0 0;
  color: #74899a;
  font-size: 12px;
  line-height: 1.45;
}

.sp-payment-unit-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #cee2f1;
  border-radius: 13px;
  background: linear-gradient(135deg, #f1f8fe, #f8fbfd);
}

.sp-payment-unit-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  color: #0c75c9;
  background: #dff0fd;
  font-size: 18px;
}

.sp-payment-unit-summary span,
.sp-payment-unit-summary strong,
.sp-payment-unit-summary small {
  display: block;
}

.sp-payment-unit-summary span {
  color: #4b657b;
  font-size: 11px;
  font-weight: 600;
}

.sp-payment-unit-summary strong {
  margin-top: 2px;
  color: #153c5d;
  font-size: 15px;
  font-weight: 600;
}

.sp-payment-unit-summary small {
  margin-top: 3px;
  color: #73899a;
  font-size: 10px;
  line-height: 1.4;
}

.sp-payment-unit-summary > b {
  color: #0872c8;
  font-size: 16px;
  white-space: nowrap;
}

.sp-payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.sp-payment-input-panel,
.sp-payment-output-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dce6ef;
  border-radius: 14px;
  background: #fff;
}

.sp-payment-output-panel {
  background: #f9fbfd;
}

.sp-payment-section-head {
  display: grid;
  gap: 2px;
}

.sp-payment-section-head > span {
  color: #173b5b;
  font-size: 13px;
  font-weight: 600;
}

.sp-payment-section-head small {
  color: #7a8e9e;
  font-size: 10px;
}

.sp-payment-form-grid {
  gap: 10px;
}

.sp-payment-helper {
  margin: -4px 0 0;
  color: #32785f;
  font-size: 10px;
  font-weight: 600;
}

.sp-cash-result {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #d8e7df;
  border-radius: 12px;
  background: #f5fbf7;
}

.sp-cash-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #deebe3;
}

.sp-cash-heading span {
  color: #1b654b;
  font-size: 12px;
  font-weight: 600;
}

.sp-cash-heading small {
  color: #759084;
  font-size: 9px;
  text-align: right;
}

.sp-cash-result > div:not(.sp-cash-heading) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px;
}

.sp-cash-result > div span {
  color: #637b70;
  font-size: 11px;
}

.sp-cash-result > div strong {
  color: #1d5a45;
  font-size: 12px;
}

.sp-cash-result .is-primary {
  padding: 11px !important;
  border-radius: 9px;
  background: #e4f6eb;
}

.sp-cash-result .is-primary strong {
  color: #13764f;
  font-size: 17px;
}

.sp-payment-share-preview {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px dashed #bdd4e5;
  border-radius: 12px;
  background: #f7fafc;
}

.sp-payment-share-preview span,
.sp-payment-share-preview strong {
  display: block;
}

.sp-payment-share-preview span {
  color: #7890a3;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.sp-payment-share-preview strong {
  margin-top: 3px;
  color: #173b5b;
  font-size: 12px;
}

.sp-payment-share-preview p {
  margin: 0;
  color: #526b80;
  font-size: 11px;
  line-height: 1.55;
}

.sp-payment-share-preview b {
  color: #0872c8;
}

.sp-payment-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.sp-payment-actions .is-whatsapp {
  color: #147a57;
  border-color: #b9ddcf;
  background: #f0fbf6;
}

.sp-payment-actions button {
  min-height: 42px;
}

.sp-kpr-disclaimer {
  font-size: 10px;
}

@media (max-width: 760px) {
  .sp-mortgage-dialog {
    width: min(100vw - 12px, 680px);
  }

  .sp-payment-dialog-card {
    max-height: calc(100dvh - 12px);
    padding: 18px 15px;
  }

  .sp-payment-layout,
  .sp-payment-share-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-payment-unit-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sp-payment-unit-summary > b {
    grid-column: 2;
    justify-self: start;
  }

  .sp-payment-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-payment-actions button {
    width: 100%;
  }
}

/* =========================================================
   KPR Calculator standalone workspace + WhatsApp Inbox tool
   v2026.08.07.44
   ========================================================= */
.pc-page-shell {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.pc-intro-card,
.pc-panel {
  background: #fff;
  border: 1px solid #dce7f0;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 52, 79, .06);
}

.pc-intro-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  background: linear-gradient(120deg, #fff 0%, #fff 64%, #edf7ff 100%);
}

.pc-intro-card .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.pc-intro-card h2 {
  margin: 0;
  color: #113553;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.18;
}

.pc-intro-card p {
  margin: 7px 0 0;
  color: #6b8294;
  font-size: 13px;
  line-height: 1.55;
}

.pc-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 16px;
  align-items: start;
}

.pc-panel {
  min-width: 0;
  overflow: hidden;
}

.pc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 19px;
  border-bottom: 1px solid #e5edf4;
  background: #fbfdff;
}

.pc-panel-head > div {
  display: grid;
  gap: 3px;
}

.pc-panel-head span {
  color: #153a58;
  font-size: 14px;
  font-weight: 600;
}

.pc-panel-head small {
  color: #8093a3;
  font-size: 11px;
}

.pc-panel-head > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #e9f4ff;
  color: #0872c8;
  font-size: 18px;
}

.pc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 19px;
}

.pc-form-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.pc-form-grid label > span {
  color: #35546c;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.pc-form-grid input,
.pc-form-grid select,
.wa-kpr-grid input,
.wa-kpr-grid select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbdbe7;
  border-radius: 10px;
  background: #fff;
  color: #183b58;
  font: inherit;
  font-size: 13px;
  padding: 0 13px;
  outline: none;
}

.pc-form-grid input:focus,
.pc-form-grid select:focus,
.wa-kpr-grid input:focus,
.wa-kpr-grid select:focus {
  border-color: #2185dc;
  box-shadow: 0 0 0 3px rgba(33, 133, 220, .12);
}

.pc-form-wide,
.wa-kpr-wide {
  grid-column: 1 / -1;
}

.pc-unit-context {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid #d7e8f5;
  border-radius: 12px;
  background: #f5faff;
}

.pc-unit-context > i {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: #e0f0ff;
  color: #0872c8;
  font-size: 18px;
}

.pc-unit-context span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.pc-unit-context strong {
  overflow: hidden;
  color: #173b59;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-unit-context small {
  color: #70889a;
  font-size: 11px;
  line-height: 1.4;
}

.pc-helper,
.wa-kpr-helper {
  margin: -5px 0 0;
  color: #6c8395;
  font-size: 11px;
}

.pc-output-panel {
  padding-bottom: 18px;
}

.pc-kpr-result,
.pc-cash-result,
.wa-kpr-summary,
.wa-kpr-cash {
  display: grid;
  gap: 9px;
  padding: 18px 19px 0;
}

.pc-kpr-result > div,
.pc-cash-result > div:not(.pc-cash-heading),
.wa-kpr-summary > div,
.wa-kpr-cash > div:not(.pc-cash-heading) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 52px;
  padding: 11px 13px;
  border: 1px solid #e0e9f0;
  border-radius: 11px;
  background: #f8fbfd;
}

.pc-kpr-result span,
.pc-cash-result span,
.wa-kpr-summary span,
.wa-kpr-cash span {
  color: #6d8393;
  font-size: 11px;
  font-weight: 600;
}

.pc-kpr-result strong,
.pc-cash-result strong,
.wa-kpr-summary strong,
.wa-kpr-cash strong {
  color: #173b59;
  font-size: 14px;
  text-align: right;
}

.pc-kpr-result .is-primary,
.pc-cash-result .is-primary,
.wa-kpr-summary .is-primary,
.wa-kpr-cash .is-primary {
  border-color: #b8dcfa;
  background: #eaf6ff;
}

.pc-kpr-result .is-primary strong,
.pc-cash-result .is-primary strong,
.wa-kpr-summary .is-primary strong,
.wa-kpr-cash .is-primary strong {
  color: #0872c8;
  font-size: 18px;
}

.pc-cash-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 3px 0 0;
  padding: 10px 2px 0;
}

.pc-cash-heading span {
  color: #153b59;
  font-size: 13px;
  font-weight: 600;
}

.pc-cash-heading small {
  color: #8194a3;
  font-size: 10px;
}

.pc-share-preview,
.wa-kpr-message-preview {
  display: grid;
  gap: 7px;
  margin: 18px 19px 0;
  padding: 14px 15px;
  border: 1px dashed #a9cce7;
  border-radius: 12px;
  background: #f5faff;
}

.pc-share-preview > div,
.wa-kpr-message-preview > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pc-share-preview span,
.wa-kpr-message-preview span {
  color: #718899;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.pc-share-preview strong,
.wa-kpr-message-preview strong {
  color: #173b59;
  font-size: 12px;
  text-align: right;
}

.pc-share-preview p,
.wa-kpr-message-preview p {
  margin: 0;
  color: #607a8d;
  font-size: 11px;
  line-height: 1.5;
}

.pc-share-preview b,
.wa-kpr-message-preview b {
  color: #0872c8;
}

.pc-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 19px 0;
}

.pc-actions button {
  min-height: 42px;
}

.pc-actions .is-whatsapp {
  color: #087f57;
  border-color: #b8e4d2;
  background: #f2fcf7;
}

.pc-disclaimer {
  display: block;
  margin: 13px 19px 0;
  color: #8295a4;
  font-size: 10px;
  line-height: 1.55;
}

.wa-calculator-trigger:not(:disabled) {
  color: #0b72c8;
  background: #eaf5ff;
}

.wa-kpr-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 30px 80px rgba(8, 32, 52, .28);
}

.wa-kpr-dialog::backdrop {
  background: rgba(14, 35, 50, .56);
  backdrop-filter: blur(3px);
}

.wa-kpr-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  border: 1px solid #d7e3ec;
  border-radius: 18px;
  background: #fff;
}

.wa-kpr-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid #e2ebf2;
}

.wa-kpr-dialog-head h3 {
  margin: 3px 0 4px;
  color: #123653;
  font-size: 20px;
}

.wa-kpr-dialog-head p {
  margin: 0;
  color: #718899;
  font-size: 12px;
}

.wa-kpr-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
  gap: 0;
  overflow: auto;
}

.wa-kpr-inputs {
  padding: 18px;
  border-right: 1px solid #e4edf3;
  background: #fbfdff;
}

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

.wa-kpr-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.wa-kpr-grid label > span {
  color: #36566e;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.wa-kpr-helper {
  margin-top: 10px;
}

.wa-kpr-results {
  padding-bottom: 18px;
}

.wa-kpr-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #e2ebf2;
  background: #fff;
}

.wa-kpr-dialog-actions button {
  min-height: 42px;
}

@media (max-width: 1050px) {
  .pc-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .pc-page-shell {
    padding: 12px;
  }

  .pc-intro-card {
    align-items: stretch;
    flex-direction: column;
    padding: 17px;
  }

  .pc-form-grid,
  .wa-kpr-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pc-form-wide,
  .wa-kpr-wide {
    grid-column: auto;
  }

  .pc-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .wa-kpr-dialog-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .wa-kpr-inputs {
    border-right: 0;
    border-bottom: 1px solid #e4edf3;
  }

  .wa-kpr-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-kpr-dialog-actions .primary-button {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   Griya CRM — WhatsApp Inbox composer, reply readability,
   and brand consistency refinement
   v2026.08.07.45
   ========================================================= */
:root {
  --griya-brand-navy: #0b3154;
  --griya-brand-navy-deep: #082641;
  --griya-brand-blue: #0a6ed1;
  --griya-brand-blue-hover: #075caf;
  --griya-brand-blue-soft: #eaf3fc;
  --griya-brand-blue-pale: #f4f8fc;
  --griya-brand-gold: #c9972b;
  --griya-brand-line: #d7e2ec;
  --griya-brand-text: #17324d;
  --griya-brand-muted: #6b8194;
}

/* Keep the WhatsApp workspace aligned with the Griya CRM visual system. */
#inboxView {
  --wa-brand-primary: var(--griya-brand-blue);
  --wa-brand-primary-hover: var(--griya-brand-blue-hover);
  --wa-brand-navy: var(--griya-brand-navy);
  --wa-brand-soft: var(--griya-brand-blue-soft);
  --wa-brand-line: var(--griya-brand-line);
  --wa-brand-text: var(--griya-brand-text);
  --wa-brand-muted: var(--griya-brand-muted);
}

#inboxView .wa-page-tabs,
#inboxView .wa-browser-bar,
#inboxView .wa-chat-header,
#inboxView .wa-conversation-column-header {
  border-color: var(--wa-brand-line) !important;
  background: #ffffff !important;
}

#inboxView .wa-page-tab {
  color: #536b7f !important;
}

#inboxView .wa-page-tab:hover,
#inboxView .wa-page-tab.active {
  border-color: #a9cbea !important;
  background: var(--wa-brand-soft) !important;
  color: var(--wa-brand-primary) !important;
}

#inboxView .wa-conversation-item.active {
  background: #edf5fd !important;
  box-shadow: inset 3px 0 0 var(--wa-brand-primary) !important;
}

#inboxView .wa-quick-filters button.active,
#inboxView .wa-quick-filters button:hover,
#inboxView .wa-filter-chip.active {
  border-color: #9fc6e9 !important;
  background: var(--wa-brand-soft) !important;
  color: var(--wa-brand-primary) !important;
}

#inboxView .wa-message-list {
  background:
    radial-gradient(circle at 1px 1px, rgba(44, 81, 111, .065) 1px, transparent 1px),
    #f5f7f9 !important;
  background-size: 24px 24px !important;
}

#inboxView .wa-message-bubble {
  border: 1px solid rgba(82, 107, 128, .12) !important;
  background: #ffffff !important;
  color: #263d52 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-shadow: 0 2px 7px rgba(13, 42, 68, .07) !important;
}

#inboxView .wa-message-row.outbound .wa-message-bubble,
#inboxView .wa-message-row.is-outbound .wa-message-bubble {
  border-color: #bdd9f1 !important;
  background: #e9f4ff !important;
  color: #173b59 !important;
}

/* Reply inside a message bubble: readable, compact, and no tiny text. */
#inboxView .wa-message-quote {
  display: grid;
  gap: 3px;
  min-width: 150px;
  margin-bottom: 7px;
  padding: 8px 10px;
  overflow: hidden;
  border: 0 !important;
  border-left: 3px solid var(--wa-brand-primary) !important;
  border-radius: 7px;
  background: rgba(10, 110, 209, .075) !important;
}

#inboxView .wa-message-row.outbound .wa-message-quote,
#inboxView .wa-message-row.is-outbound .wa-message-quote {
  background: rgba(255, 255, 255, .64) !important;
}

#inboxView .wa-message-quote strong {
  display: block;
  color: var(--wa-brand-primary) !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.35;
}

#inboxView .wa-message-quote span {
  display: -webkit-box;
  overflow: hidden;
  color: #526a7d !important;
  font-size: 11.5px !important;
  line-height: 1.42;
  text-overflow: ellipsis;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#inboxView .wa-reply-preview {
  margin: 8px 12px 0;
  padding: 9px 11px;
  border: 1px solid #c8def1 !important;
  border-left: 3px solid var(--wa-brand-primary) !important;
  border-radius: 10px;
  background: #f2f7fc !important;
}

#inboxView .wa-reply-preview-icon {
  background: #dfeeff !important;
  color: var(--wa-brand-primary) !important;
}

#inboxView .wa-reply-preview strong {
  color: var(--wa-brand-primary) !important;
  font-size: 12px !important;
  line-height: 1.35;
}

#inboxView .wa-reply-preview small {
  color: #526a7d !important;
  font-size: 11.5px !important;
  line-height: 1.4;
}

/* Five children are present: attachment, calculator, template, field, send. */
#inboxView .wa-composer-zone {
  z-index: 8;
  border-top: 1px solid var(--wa-brand-line) !important;
  background: #f4f7fa !important;
  box-shadow: 0 -5px 16px rgba(14, 43, 68, .045);
}

#inboxView .wa-composer-zone .wa-composer {
  display: grid !important;
  grid-template-columns: 42px 42px 42px minmax(180px, 1fr) auto !important;
  grid-template-areas: "attachment calculator template field send";
  align-items: end !important;
  gap: 7px !important;
  min-width: 0;
  padding: 10px 12px 8px !important;
  border: 0 !important;
  background: #f4f7fa !important;
}

#inboxView .wa-composer-menu-wrap {
  grid-area: attachment;
  min-width: 0;
}

#inboxView #waKprCalculatorBtn {
  grid-area: calculator;
}

#inboxView #waTemplateOpenBtn {
  grid-area: template;
}

#inboxView .wa-composer-field {
  grid-area: field;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid #cad8e4 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 7px rgba(15, 49, 78, .04);
}

#inboxView .wa-composer-field:focus-within {
  border-color: #7eb5e3 !important;
  box-shadow: 0 0 0 3px rgba(10, 110, 209, .10) !important;
}

#inboxView .wa-composer-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  max-height: 150px;
  padding: 11px 13px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--wa-brand-text) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  resize: none;
  box-shadow: none !important;
}

#inboxView .wa-composer-field textarea::placeholder {
  color: #8a9cac;
}

#inboxView .wa-composer-icon {
  width: 42px;
  height: 42px;
  border: 1px solid #cad8e4 !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #536b7f !important;
  font-size: 18px !important;
  box-shadow: 0 2px 6px rgba(15, 49, 78, .035);
}

#inboxView .wa-composer-icon:hover:not(:disabled),
#inboxView .wa-composer-icon:focus-visible,
#inboxView .wa-composer-icon.active {
  border-color: #8ab9e2 !important;
  background: var(--wa-brand-soft) !important;
  color: var(--wa-brand-primary) !important;
}

#inboxView .wa-calculator-trigger:not(:disabled) {
  border-color: #dfc586 !important;
  background: #fff9e9 !important;
  color: #9a6b08 !important;
}

#inboxView .wa-send-button {
  grid-area: send;
  min-width: 86px;
  height: 44px;
  margin: 0;
  border-radius: 11px !important;
  background: linear-gradient(135deg, var(--wa-brand-primary), #1688df) !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  box-shadow: 0 7px 16px rgba(10, 110, 209, .20) !important;
}

#inboxView .wa-send-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--wa-brand-primary-hover), var(--wa-brand-primary)) !important;
}

#inboxView .wa-send-button:disabled {
  background: #b8c6d1 !important;
  box-shadow: none !important;
}

#inboxView .wa-composer-hint {
  min-height: 22px;
  margin: 0;
  padding: 0 14px 8px !important;
  background: #f4f7fa !important;
  color: #74899a !important;
  font-size: 11px !important;
  line-height: 1.4;
  text-align: center;
}

/* Quick-reply expanded mode must also account for the calculator button. */
#inboxView .wa-composer.is-expanded {
  grid-template-columns: 42px 42px 42px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "field field field field field"
    "attachment calculator template spacer send" !important;
  gap: 8px !important;
}

#inboxView .wa-composer.is-expanded #waKprCalculatorBtn {
  grid-area: calculator;
}

#inboxView .wa-composer.is-expanded #waTemplateOpenBtn {
  grid-area: template;
}

#inboxView .wa-composer.is-expanded .wa-composer-field {
  grid-area: field;
}

#inboxView .wa-composer.is-expanded .wa-send-button {
  grid-area: send;
}

/* Brand the official status controls without losing semantic status colors. */
#inboxView .wa-service-window {
  border-color: #c9ddec !important;
  background: #f4f9fd !important;
  color: #4d687d !important;
}

#inboxView .wa-message-meta,
#inboxView .wa-message-origin {
  color: #698094 !important;
  font-size: 10.5px !important;
}

#inboxView .wa-message-origin i,
#inboxView .wa-read {
  color: var(--wa-brand-primary) !important;
}

@media (max-width: 900px) {
  #inboxView .wa-composer-zone .wa-composer {
    grid-template-columns: 40px 40px 40px minmax(120px, 1fr) 44px !important;
    gap: 5px !important;
    padding-inline: 8px !important;
  }

  #inboxView .wa-composer-icon {
    width: 40px;
    height: 40px;
  }

  #inboxView .wa-send-button {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  #inboxView .wa-send-button span {
    display: none;
  }
}

@media (max-width: 620px) {
  #inboxView .wa-composer-zone .wa-composer {
    grid-template-columns: repeat(3, 40px) minmax(0, 1fr) 44px !important;
    grid-template-areas:
      "field field field field field"
      "attachment calculator template spacer send" !important;
  }

  #inboxView .wa-composer-field {
    min-height: 44px;
  }

  #inboxView .wa-message-quote {
    min-width: 128px;
  }
}


/* =========================================================
   Griya CRM — WhatsApp-like bubbles, centered calculators,
   and composer emoji picker
   v2026.08.07.47
   ========================================================= */

/* Preserve familiar WhatsApp conversation semantics while the surrounding
   workspace continues to use Griya CRM navy/blue branding. */
#inboxView .wa-message-list {
  background:
    linear-gradient(rgba(239, 234, 226, .94), rgba(239, 234, 226, .94)),
    radial-gradient(circle at 2px 2px, rgba(89, 101, 92, .08) 1px, transparent 1px) !important;
  background-size: auto, 22px 22px !important;
}

#inboxView .wa-message-row {
  padding-inline: 13px;
}

#inboxView .wa-message-bubble {
  max-width: min(74%, 680px) !important;
  min-width: 68px;
  padding: 7px 9px 5px !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 9px 9px 9px !important;
  background: #ffffff !important;
  color: #202c33 !important;
  box-shadow: 0 1px 1px rgba(11, 20, 26, .13) !important;
}

#inboxView .wa-message-bubble::before {
  position: absolute;
  top: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 10px solid #ffffff;
  border-left: 8px solid transparent;
  content: "";
}

#inboxView .wa-message-row.outbound .wa-message-bubble,
#inboxView .wa-message-row.is-outbound .wa-message-bubble {
  border-radius: 9px 0 9px 9px !important;
  background: #d9fdd3 !important;
  color: #202c33 !important;
}

#inboxView .wa-message-row.outbound .wa-message-bubble::before,
#inboxView .wa-message-row.is-outbound .wa-message-bubble::before {
  right: -8px;
  left: auto;
  border-top-color: #d9fdd3;
  border-right: 8px solid transparent;
  border-left: 0;
}

#inboxView .wa-message-bubble p {
  margin: 0 0 2px !important;
  color: inherit !important;
}

#inboxView .wa-message-meta {
  min-height: 14px;
  color: #667781 !important;
}

#inboxView .wa-message-row.outbound .wa-message-quote,
#inboxView .wa-message-row.is-outbound .wa-message-quote {
  background: rgba(255, 255, 255, .72) !important;
}

/* Explicit centering prevents browser/viewport differences from pushing the
   payment simulation toward a corner, especially when opened from Inbox. */
.wa-kpr-dialog[open],
.sp-dialog.sp-mortgage-dialog[open] {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  transform: none !important;
}

.wa-kpr-dialog[open] {
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
}

.sp-dialog.sp-mortgage-dialog[open] {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
}

/* Composer now has six children: attachment, emoji, calculator, template,
   message field, and send. */
#inboxView .wa-composer-zone .wa-composer {
  grid-template-columns: 42px 42px 42px 42px minmax(180px, 1fr) auto !important;
  grid-template-areas: "attachment emoji calculator template field send" !important;
}

#inboxView #waEmojiBtn {
  grid-area: emoji;
}

#inboxView #waKprCalculatorBtn {
  grid-area: calculator;
}

#inboxView #waTemplateOpenBtn {
  grid-area: template;
}

#inboxView .wa-emoji-picker {
  position: absolute;
  z-index: 45;
  bottom: calc(100% + 9px);
  left: 58px;
  width: min(356px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid #d4e0e9;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(10, 35, 55, .23);
}

#inboxView .wa-emoji-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid #e4ebf1;
  background: #f8fafc;
}

#inboxView .wa-emoji-picker-head > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wa-brand-navy);
  font-size: 12px;
}

#inboxView .wa-emoji-picker-head > span i {
  color: var(--wa-brand-primary);
  font-size: 17px;
}

#inboxView .wa-emoji-picker-head button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #667b8c;
  cursor: pointer;
}

#inboxView .wa-emoji-picker-head button:hover {
  background: #eaf2f8;
  color: var(--wa-brand-primary);
}

#inboxView .wa-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  max-height: min(286px, 42dvh);
  padding: 10px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#inboxView .wa-emoji-grid button {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
  transition: background .14s ease, transform .14s ease;
}

#inboxView .wa-emoji-grid button:hover,
#inboxView .wa-emoji-grid button:focus-visible {
  background: #edf4fa;
  transform: scale(1.08);
  outline: none;
}

#inboxView .wa-composer.is-expanded {
  grid-template-columns: repeat(4, 42px) minmax(0, 1fr) auto !important;
  grid-template-areas:
    "field field field field field field"
    "attachment emoji calculator template spacer send" !important;
}

#inboxView .wa-composer.is-expanded #waEmojiBtn {
  grid-area: emoji;
}

@media (max-width: 900px) {
  #inboxView .wa-composer-zone .wa-composer {
    grid-template-columns: repeat(4, 40px) minmax(100px, 1fr) 44px !important;
  }
}

@media (max-width: 680px) {
  #inboxView .wa-message-bubble {
    max-width: 88% !important;
  }

  #inboxView .wa-composer-zone .wa-composer {
    grid-template-columns: repeat(4, 40px) minmax(0, 1fr) 44px !important;
    grid-template-areas:
      "field field field field field field"
      "attachment emoji calculator template spacer send" !important;
  }

  #inboxView .wa-emoji-picker {
    right: 8px;
    left: 8px;
    width: auto;
  }

  #inboxView .wa-emoji-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  #inboxView .wa-emoji-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}


/* =========================================================
   WhatsApp native text formatting renderer
   v2026.08.07.48
   ========================================================= */
#inboxView .wa-message-bubble p strong,
#inboxView .wa-message-quote strong strong,
#inboxView .wa-reply-preview small strong {
  font-weight: 600;
}
#inboxView .wa-message-bubble p em,
#inboxView .wa-message-quote em,
#inboxView .wa-reply-preview small em {
  font-style: italic;
}
#inboxView .wa-message-bubble p s,
#inboxView .wa-message-quote s,
#inboxView .wa-reply-preview small s {
  text-decoration: line-through;
}
#inboxView .wa-format-code {
  display: inline;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(11,20,26,.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .94em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#inboxView .wa-format-code-block {
  display: block;
  margin: 4px 0;
  padding: 7px 9px;
  line-height: 1.42;
}
#inboxView .wa-format-quote {
  display: block;
  margin: 3px 0;
  padding: 2px 0 2px 8px;
  border-left: 3px solid #00a884;
  color: #54656f;
}
#inboxView .wa-format-list {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px;
  align-items: start;
}
#inboxView .wa-format-list > i {
  color: inherit;
  font-style: normal;
  font-weight: 600;
  text-align: right;
}
#inboxView .wa-message-row.outbound .wa-format-code,
#inboxView .wa-message-row.is-outbound .wa-format-code {
  background: rgba(17,27,33,.07);
}

/* =========================================================
   Griya CRM — WhatsApp-like compact conversation list
   v2026.08.07.49
   ========================================================= */

/* The contact list follows WhatsApp Web's two-line hierarchy:
   name + time, then message preview + unread count. Supporting CRM
   metadata remains available in the selected conversation header/drawer. */
#inboxView .wa-conversation-column {
  background: #ffffff !important;
}

#inboxView .wa-conversation-list {
  background: #ffffff !important;
}

#inboxView .wa-conversation-item {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 68px !important;
  padding: 8px 10px 8px 12px !important;
  border-bottom: 1px solid #eef2f5 !important;
  border-radius: 0 !important;
}

#inboxView .wa-conversation-item .wa-contact-avatar {
  width: 44px !important;
  height: 44px !important;
  align-self: center;
  border-radius: 50% !important;
  font-size: 12.5px !important;
}

#inboxView .wa-conversation-copy {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  gap: 3px !important;
  min-width: 0;
  overflow: hidden;
}

#inboxView .wa-conversation-top,
#inboxView .wa-conversation-preview {
  min-width: 0;
  gap: 8px !important;
}

#inboxView .wa-conversation-top strong {
  min-width: 0;
  overflow: hidden;
  color: #172033 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#inboxView .wa-conversation-top time {
  flex: 0 0 auto;
  color: #8696a0 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

#inboxView .wa-conversation-preview small {
  display: block !important;
  min-width: 0;
  overflow: hidden;
  color: #667781 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

#inboxView .wa-conversation-preview small i {
  color: #53bdeb !important;
  font-size: 11px !important;
}

#inboxView .wa-conversation-preview b {
  flex: 0 0 auto;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #25d366 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 600 !important;
}

/* Keep the list compact. CRM context stays visible in the active-chat header
   and contact drawer instead of consuming vertical space for every contact. */
#inboxView .wa-conversation-item .wa-inbound-source-row,
#inboxView .wa-conversation-item .wa-conversation-meta,
#inboxView .wa-conversation-item .wa-number-chip,
#inboxView .wa-conversation-item .wa-conversation-tags {
  display: none !important;
}

#inboxView .wa-conversation-item:hover {
  background: #f5f6f6 !important;
}

#inboxView .wa-conversation-item.active {
  background: #f0f2f5 !important;
  box-shadow: inset 3px 0 0 var(--wa-brand-primary) !important;
}

#inboxView .wa-conversation-item.is-unread .wa-conversation-top strong {
  color: #111b21 !important;
  font-weight: 600 !important;
}

#inboxView .wa-conversation-item.is-unread .wa-conversation-preview small {
  color: #3b4a54 !important;
  font-weight: 600 !important;
}

/* Slightly compact the left-column chrome so more conversations fit. */
#inboxView .wa-conversation-header {
  min-height: 58px !important;
  padding: 8px 10px 8px 14px !important;
}

#inboxView .wa-conversation-title strong {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

#inboxView .wa-conversation-title small {
  font-size: 10.5px !important;
}

#inboxView .wa-inbox-search {
  padding-block: 7px !important;
}

#inboxView .wa-inbox-search input {
  min-height: 38px !important;
  font-size: 12.5px !important;
}

#inboxView .wa-quick-filters {
  padding-block: 6px !important;
}

#inboxView .wa-quick-filters button {
  min-height: 31px !important;
  padding-inline: 10px !important;
  font-size: 11px !important;
}

@media (min-width: 1101px) {
  #inboxView .wa-inbox-layout {
    grid-template-columns: 340px minmax(0, 1fr) !important;
  }
}

@media (max-width: 1100px) and (min-width: 861px) {
  #inboxView .wa-inbox-layout {
    grid-template-columns: 310px minmax(0, 1fr) !important;
  }

  #inboxView .wa-conversation-item {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 64px !important;
    padding: 7px 9px !important;
  }

  #inboxView .wa-conversation-item .wa-contact-avatar {
    width: 42px !important;
    height: 42px !important;
  }
}

@media (max-width: 860px) {
  #inboxView .wa-conversation-item {
    min-height: 66px !important;
  }
}


/* =========================================================
   Griya CRM — wider WhatsApp chat list + extensible filter row
   v2026.08.07.50
   ========================================================= */

/* Give the conversation rail enough room for the default filters without
   stealing too much workspace from the active conversation. */
@media (min-width: 1361px) {
  #inboxView .wa-inbox-layout {
    grid-template-columns: 420px minmax(0, 1fr) !important;
  }
}

@media (min-width: 1101px) and (max-width: 1360px) {
  #inboxView .wa-inbox-layout {
    grid-template-columns: 400px minmax(0, 1fr) !important;
  }
}

@media (min-width: 861px) and (max-width: 1100px) {
  #inboxView .wa-inbox-layout {
    grid-template-columns: 365px minmax(0, 1fr) !important;
  }
}

#inboxView .wa-conversation-header-actions {
  gap: 4px !important;
}

#inboxView .wa-quick-filters {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100%;
  min-width: 0;
  padding: 5px 0 6px !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#inboxView .wa-quick-filters::-webkit-scrollbar {
  display: none;
}

#inboxView .wa-quick-filters > button,
#inboxView .wa-custom-filter-chips > button {
  scroll-snap-align: start;
}

#inboxView .wa-quick-filters > [data-wa-quick-filter] {
  min-height: 31px !important;
  padding: 0 9px !important;
  font-size: 10.5px !important;
}

#inboxView .wa-custom-filter-chips {
  display: contents;
}

#inboxView .wa-custom-filter-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 31px;
  max-width: 150px;
  padding: 0 7px 0 10px;
  border: 1px solid #bfd8f1;
  border-radius: 999px;
  background: #edf6ff;
  color: #0a5eae;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

#inboxView .wa-custom-filter-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

#inboxView .wa-custom-filter-chip i {
  flex: 0 0 auto;
  font-size: 13px;
}

#inboxView .wa-custom-filter-chip:hover {
  border-color: #91bee7;
  background: #e2f1ff;
}

/* The add-filter control always lives at the end of the filter row. */
#inboxView .wa-quick-filter-add {
  display: inline-grid;
  flex: 0 0 31px;
  width: 31px;
  min-width: 31px;
  height: 31px;
  place-items: center;
  padding: 0 !important;
  border: 1px dashed #aebdca !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #526879 !important;
  font-size: 13px !important;
  font-weight: 600;
}

#inboxView .wa-quick-filter-add:hover,
#inboxView .wa-quick-filter-add.active {
  border-style: solid !important;
  border-color: #7fb2df !important;
  background: #edf6ff !important;
  color: #0a6ed1 !important;
}

#inboxView .wa-advanced-filters {
  right: 10px !important;
  left: 10px !important;
  border-color: #d8e5f0 !important;
  box-shadow: 0 18px 44px rgba(15, 39, 71, .18) !important;
}

#inboxView .wa-advanced-filter-head strong::after {
  content: " · pilih kombinasi sesuai kebutuhan";
  color: #7a8f9f;
  font-size: 10px;
  font-weight: 500;
}

@media (max-width: 860px) {
  #inboxView .wa-quick-filters {
    padding-right: 2px !important;
  }

  #inboxView .wa-advanced-filter-head strong::after {
    display: none;
  }
}


/* =========================================================
   Griya CRM — WhatsApp-style quick filters + label-only add button
   v2026.08.07.51
   ========================================================= */
#inboxView .wa-quick-filters {
  gap: 6px !important;
  padding-block: 6px !important;
}

#inboxView .wa-quick-filters > [data-wa-quick-filter] {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-color: #d8e1e8 !important;
  background: #ffffff !important;
  color: #4b5f6e !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

#inboxView .wa-quick-filters > [data-wa-quick-filter]:hover {
  background: #f5f8fb !important;
}

#inboxView .wa-quick-filters > [data-wa-quick-filter].active {
  border-color: #b8d6f3 !important;
  background: #edf6ff !important;
  color: #0a67bd !important;
}

#inboxView .wa-quick-filter-add {
  flex-basis: 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  border: 1px solid #d3dde5 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #526575 !important;
  font-size: 14px !important;
}

#inboxView .wa-quick-filter-add:hover,
#inboxView .wa-quick-filter-add.active {
  border-color: #9bc5eb !important;
  background: #edf6ff !important;
  color: #0a67bd !important;
}

#inboxView .wa-custom-filter-chip {
  min-height: 34px !important;
  max-width: 170px;
  padding: 0 8px 0 11px !important;
  gap: 6px !important;
  font-size: 11px !important;
}

#inboxView .wa-custom-filter-chip .wa-label-color-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}

/* The + control is now exclusively a label picker, like WhatsApp Web. */
#inboxView .wa-label-filter-picker {
  top: calc(100% - 1px) !important;
  right: 10px !important;
  left: auto !important;
  width: min(300px, calc(100% - 20px));
  display: block;
  padding: 10px !important;
  border: 1px solid #d7e2ea !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 45px rgba(15, 39, 71, .18) !important;
}

#inboxView .wa-label-filter-picker.hidden {
  display: none !important;
}

#inboxView .wa-label-filter-picker .wa-advanced-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 8px;
}

#inboxView .wa-label-filter-picker .wa-advanced-filter-head strong {
  color: #183a57;
  font-size: 12px !important;
  font-weight: 600;
}

#inboxView .wa-label-filter-picker .wa-advanced-filter-head strong::after {
  content: none !important;
}

#inboxView .wa-label-filter-picker .wa-advanced-filter-head button {
  color: #0a67bd !important;
  font-size: 10.5px !important;
}

#inboxView .wa-label-filter-hint {
  margin: 0 2px 8px;
  color: #7a8f9f;
  font-size: 10px;
  line-height: 1.35;
}

#inboxView .wa-label-filter-options {
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

#inboxView .wa-label-filter-option {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #29485d;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

#inboxView .wa-label-filter-option:hover,
#inboxView .wa-label-filter-option.active {
  background: #f1f7fd;
  color: #0b66b8;
}

#inboxView .wa-label-filter-option .wa-label-color-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

#inboxView .wa-label-filter-option > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#inboxView .wa-label-filter-option i {
  justify-self: end;
  color: #0a67bd;
  font-size: 13px;
}

#inboxView .wa-label-filter-empty {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 9px;
  border-radius: 9px;
  background: #f7f9fb;
  color: #768b9b;
  font-size: 10.5px;
  line-height: 1.4;
}

@media (max-width: 860px) {
  #inboxView .wa-label-filter-picker {
    right: 8px !important;
    width: min(300px, calc(100% - 16px));
  }
}

/* =========================================================
   Griya CRM — wider conversation rail + horizontal filter navigation
   v2026.08.07.52
   ========================================================= */
/* Use more of the viewport for contact discovery while preserving a wide
   active-chat workspace. The rail grows naturally on large monitors. */
@media (min-width: 1101px) {
  #inboxView .wa-inbox-layout {
    grid-template-columns: clamp(440px, 31vw, 500px) minmax(0, 1fr) !important;
  }
}

@media (min-width: 861px) and (max-width: 1100px) {
  #inboxView .wa-inbox-layout {
    grid-template-columns: clamp(390px, 40vw, 430px) minmax(0, 1fr) !important;
  }
}

/* Keep every quick filter on one horizontal rail. Users can swipe/trackpad,
   Shift+wheel, or use a normal mouse wheel while hovering this row. */
#inboxView .wa-quick-filters {
  position: relative;
  flex-wrap: nowrap !important;
  min-width: 0;
  padding: 6px 2px 8px 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: thin !important;
  scrollbar-color: #b8c9d8 transparent !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

#inboxView .wa-quick-filters::-webkit-scrollbar {
  display: block !important;
  height: 4px;
}

#inboxView .wa-quick-filters::-webkit-scrollbar-track {
  background: transparent;
}

#inboxView .wa-quick-filters::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #b8c9d8;
}

#inboxView .wa-quick-filters::-webkit-scrollbar-thumb:hover {
  background: #8faabd;
}

#inboxView .wa-quick-filters > [data-wa-quick-filter],
#inboxView .wa-custom-filter-chip,
#inboxView .wa-quick-filter-add {
  flex-shrink: 0 !important;
}

/* The + button intentionally remains the final item in document flow. */
#inboxView .wa-quick-filter-add {
  order: 999 !important;
}

/* Slightly wider search field and calmer padding now that the rail is wider. */
#inboxView .wa-conversation-tools {
  padding-inline: 12px !important;
}

#inboxView .wa-inbox-search input {
  padding-inline: 34px 12px !important;
}

@media (max-width: 860px) {
  #inboxView .wa-quick-filters {
    scrollbar-width: none !important;
    padding-bottom: 6px !important;
  }
  #inboxView .wa-quick-filters::-webkit-scrollbar {
    display: none !important;
  }
}


/* =========================================================
   Connectivity + loading feedback + performance UX
   v2026.08.07.53
   ========================================================= */
.app-boot-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(244, 248, 252, .96);
  color: #102a43;
  transition: opacity .2s ease, visibility .2s ease;
}
.app-boot-loader.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.app-boot-loader.is-error { color: #b42318; }
.app-boot-loader > span:last-child { display: grid; gap: 3px; }
.app-boot-loader strong { font-size: 14px; font-weight: 600; }
.app-boot-loader small { color: #6b8298; font-size: 12px; }
.app-boot-loader-spinner,
.global-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #d6e5f4;
  border-top-color: #1675d1;
  border-radius: 50%;
  animation: griya-spin .7s linear infinite;
}
@keyframes griya-spin { to { transform: rotate(360deg); } }

.topbar-network-status {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 112px;
  height: 38px;
  margin-left: 4px;
  padding: 6px 10px;
  border: 1px solid #dce7f2;
  border-radius: 11px;
  background: #fff;
  color: #334e68;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.topbar-network-status:hover { border-color: #b9d5ee; background: #f8fbff; box-shadow: 0 3px 12px rgba(15, 42, 67, .06); }
.network-status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.12); }
.network-status-copy { display: grid; min-width: 0; gap: 1px; }
.network-status-copy strong { font-size: 10.5px; line-height: 1.15; font-weight: 600; white-space: nowrap; }
.network-status-copy small { max-width: 92px; overflow: hidden; color: #7b8fa3; font-size: 8.5px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.topbar-network-status.is-online .network-status-dot { background: #16a36a; box-shadow: 0 0 0 3px rgba(22,163,106,.12); }
.topbar-network-status.is-slow { border-color: #f3d89c; background: #fffaf0; }
.topbar-network-status.is-slow .network-status-dot { background: #e6a700; box-shadow: 0 0 0 3px rgba(230,167,0,.13); }
.topbar-network-status.is-offline,
.topbar-network-status.is-error { border-color: #f2c5c5; background: #fff8f8; }
.topbar-network-status.is-offline .network-status-dot,
.topbar-network-status.is-error .network-status-dot { background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.12); }
.topbar-network-status.is-checking .network-status-dot { background: #3b82f6; animation: griya-network-pulse 1.2s ease-in-out infinite; }
@keyframes griya-network-pulse { 50% { opacity: .35; transform: scale(.78); } }

.global-loading-bar {
  position: fixed;
  top: 63px;
  left: var(--sidebar-width, 220px);
  right: 0;
  z-index: 1490;
  height: 3px;
  overflow: hidden;
  background: rgba(22,117,209,.10);
  pointer-events: none;
}
.global-loading-bar > span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #1675d1 30%, #4aa3ed 70%, transparent);
  animation: griya-loading-bar 1.1s ease-in-out infinite;
}
@keyframes griya-loading-bar { from { transform: translateX(-120%); } to { transform: translateX(330%); } }
.global-loading-toast {
  position: fixed;
  top: 78px;
  left: calc(50% + (var(--sidebar-width, 220px) / 2));
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 225px;
  max-width: min(420px, calc(100vw - 30px));
  padding: 11px 14px;
  border: 1px solid #d8e6f3;
  border-radius: 13px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 12px 34px rgba(15,42,67,.14);
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.global-loading-toast > span:last-child { display: grid; gap: 2px; }
.global-loading-toast strong { color: #12395b; font-size: 12px; font-weight: 600; }
.global-loading-toast small { color: #7890a4; font-size: 10px; }
.app-shell.sidebar-collapsed .global-loading-bar { left: var(--sidebar-collapsed-width, 78px); }
.app-shell.sidebar-collapsed .global-loading-toast { left: calc(50% + (var(--sidebar-collapsed-width, 78px) / 2)); }

@media (max-width: 1180px) {
  .topbar-network-status { min-width: 0; width: 38px; justify-content: center; padding: 0; }
  .network-status-copy { display: none; }
}
@media (max-width: 820px) {
  .global-loading-bar { left: 0; top: 63px; }
  .global-loading-toast { left: 50%; top: 76px; }
}

/* Match the current enterprise shell width for the global progress indicator. */
.app-shell { --sidebar-width: 258px; --sidebar-collapsed-width: 0px; }


/* =========================================================
   Griya CRM — Chat list label + sales assignment context
   v2026.08.07.54
   ========================================================= */
/* Keep the WhatsApp-style two-line list compact. A third micro-row appears
   only when a conversation has a label and/or Sales Representative assignment. */
#inboxView .wa-conversation-item.has-context {
  min-height: 86px !important;
}

#inboxView .wa-conversation-item.has-context .wa-conversation-copy {
  grid-template-rows: auto auto auto !important;
  gap: 3px !important;
}

#inboxView .wa-conversation-context {
  display: flex !important;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
}

#inboxView .wa-mini-label,
#inboxView .wa-assignee-mini {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  height: 19px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#inboxView .wa-mini-label {
  gap: 4px;
  max-width: 100px;
  padding: 0 7px 0 6px;
  border-color: var(--wa-label-border, #c8daf7);
  background: var(--wa-label-bg, #eef4ff);
  color: var(--wa-label-fg, #245db5);
}

#inboxView .wa-mini-label > span:last-child,
#inboxView .wa-assignee-mini > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#inboxView .wa-mini-label .wa-label-color-dot {
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border-radius: 50%;
  background: var(--wa-label-solid, currentColor) !important;
}

#inboxView .wa-mini-label.wa-label-more {
  flex: 0 0 auto;
  padding-inline: 6px;
  border-color: #d9e1e6;
  background: #f5f7f8;
  color: #647985;
}

#inboxView .wa-assignee-mini {
  gap: 4px;
  max-width: 118px;
  margin-left: 1px;
  padding: 0 7px;
  border-color: #dce5eb;
  background: #f6f8fa;
  color: #536978;
}

#inboxView .wa-assignee-mini i {
  flex: 0 0 auto;
  color: #1675d1;
  font-size: 10px;
}

/* One shared color system for labels in chat cards, the active filter chip,
   and the label picker. This keeps label identity visually consistent. */
#inboxView .label-teal   { --wa-label-solid:#159a88; --wa-label-fg:#087f70; --wa-label-border:#b9dfd9; --wa-label-bg:#eaf8f5; }
#inboxView .label-blue   { --wa-label-solid:#3b82d0; --wa-label-fg:#245db5; --wa-label-border:#c8daf7; --wa-label-bg:#eef4ff; }
#inboxView .label-green  { --wa-label-solid:#29a263; --wa-label-fg:#177245; --wa-label-border:#c7e4d2; --wa-label-bg:#eef8f2; }
#inboxView .label-amber  { --wa-label-solid:#d79b17; --wa-label-fg:#9a6700; --wa-label-border:#ead9ad; --wa-label-bg:#fff8e7; }
#inboxView .label-red    { --wa-label-solid:#dc574d; --wa-label-fg:#b42318; --wa-label-border:#efcbc7; --wa-label-bg:#fff1f0; }
#inboxView .label-purple { --wa-label-solid:#9463bf; --wa-label-fg:#7544a5; --wa-label-border:#ddcff0; --wa-label-bg:#f7f2fc; }
#inboxView .label-pink   { --wa-label-solid:#d0528b; --wa-label-fg:#a62962; --wa-label-border:#edc9da; --wa-label-bg:#fff1f7; }
#inboxView .label-slate  { --wa-label-solid:#718691; --wa-label-fg:#536976; --wa-label-border:#d6e0e5; --wa-label-bg:#f3f6f7; }

#inboxView .wa-custom-filter-chip[class*="label-"] {
  border-color: var(--wa-label-border) !important;
  background: var(--wa-label-bg) !important;
  color: var(--wa-label-fg) !important;
}

#inboxView .wa-custom-filter-chip[class*="label-"] .wa-label-color-dot,
#inboxView .wa-label-filter-option[class*="label-"] .wa-label-color-dot {
  background: var(--wa-label-solid) !important;
  color: var(--wa-label-solid) !important;
}

#inboxView .wa-custom-filter-chip[class*="label-"]:hover {
  border-color: var(--wa-label-solid) !important;
  background: var(--wa-label-bg) !important;
}

#inboxView .wa-label-filter-option[class*="label-"] {
  color: var(--wa-label-fg) !important;
}

#inboxView .wa-label-filter-option[class*="label-"]:hover,
#inboxView .wa-label-filter-option[class*="label-"].active {
  background: var(--wa-label-bg) !important;
  color: var(--wa-label-fg) !important;
  box-shadow: inset 3px 0 0 var(--wa-label-solid);
}

#inboxView .wa-label-filter-option[class*="label-"].active i {
  color: var(--wa-label-solid) !important;
}

@media (max-width: 1100px) {
  #inboxView .wa-mini-label { max-width: 86px; }
  #inboxView .wa-assignee-mini { max-width: 100px; }
}

@media (max-width: 860px) {
  #inboxView .wa-conversation-item.has-context { min-height: 84px !important; }
  #inboxView .wa-conversation-context { gap: 4px; }
}


/* ========================================================================== 
   GRIYA CRM — SIDEBAR COLLAPSE LAYOUT HOTFIX 2026-08-07.55
   Ensure the enterprise 258px shell override does not survive after the
   sidebar is hidden. The main workspace must reclaim the full viewport.
   ========================================================================== */
.app-shell.sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr) !important;
}

.app-shell.sidebar-collapsed > .sidebar {
  display: none !important;
}

.app-shell.sidebar-collapsed > .main {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-shell.sidebar-collapsed .topbar {
  width: auto;
  min-width: 0;
}

.app-shell.sidebar-collapsed .view,
.app-shell.sidebar-collapsed .dashboard-enterprise {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

.app-shell.sidebar-collapsed .sidebar-open-button {
  display: inline-flex !important;
  flex: 0 0 auto;
}

/* Loading feedback must also use the reclaimed full-width canvas. */
.app-shell.sidebar-collapsed .global-loading-bar {
  left: 0 !important;
}
.app-shell.sidebar-collapsed .global-loading-toast {
  left: 50% !important;
}

/* Prevent any wide dashboard/table child from generating a phantom app-shell
   column while the sidebar is collapsed. Horizontal overflow stays local to
   components that explicitly support it. */
.app-shell.sidebar-collapsed > .main {
  overflow-x: hidden;
}

@media (max-width: 980px) {
  .app-shell.sidebar-collapsed,
  .app-shell:not(.sidebar-collapsed) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .app-shell.sidebar-collapsed > .main {
    width: 100%;
  }
}


/* =========================================================
   Site Plan project management — v2026.08.07.56
   ========================================================= */
#sitePlanView .sp-project-admin-actions > #spEditProjectBtn {
  min-width: 82px;
}

#sitePlanView .sp-project-delete-button {
  height: 44px;
  width: 44px;
  min-width: 44px;
  border-color: #f3c4c4;
  color: #c43a3a;
  background: #fff8f8;
}

#sitePlanView .sp-project-delete-button:hover:not(:disabled) {
  border-color: #e99b9b;
  background: #fff0f0;
  color: #a92727;
}

.sp-project-image-field > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sp-project-image-field > span small {
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef4f9;
  color: #6d8192;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sp-project-image-field > small {
  display: block;
  margin-top: 6px;
  color: #75899a;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 1320px) {
  #sitePlanView .sp-project-admin-actions {
    flex-wrap: wrap;
    height: auto;
  }
}

@media (max-width: 560px) {
  #sitePlanView .sp-project-admin-actions > #spEditProjectBtn,
  #sitePlanView .sp-project-admin-actions > #spUploadImageBtn,
  #sitePlanView .sp-project-admin-actions > #spNewProjectBtn {
    flex: 1 1 calc(50% - 6px);
  }
}

/* =========================================================
   Site Plan safe project-management tabs — v2026.08.07.57
   Keeps destructive project actions out of the sales workspace.
   ========================================================= */
#sitePlanView .sp-page-shell {
  gap: 10px;
}

#sitePlanView .sp-section-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid #dce6ef;
  border-radius: 12px;
  background: #f7fafc;
  box-shadow: 0 4px 14px rgba(15, 44, 70, .04);
}

#sitePlanView .sp-section-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #597083;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

#sitePlanView .sp-section-tab:hover {
  background: #edf4fa;
  color: #153d61;
}

#sitePlanView .sp-section-tab.active {
  background: #ffffff;
  color: #0f67bd;
  box-shadow: 0 1px 5px rgba(15, 55, 88, .12);
}

#sitePlanView .sp-section-panel.hidden {
  display: none !important;
}

#sitePlanView #spWorkspacePanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#sitePlanView #spWorkspacePanel .sp-workspace-grid {
  height: calc(100dvh - 292px);
  min-height: 500px;
}

#sitePlanView .sp-management-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid #dce6ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 26px rgba(15, 44, 70, .06);
}

#sitePlanView .sp-management-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5edf4;
}

#sitePlanView .sp-management-header > div {
  min-width: 0;
}

#sitePlanView .sp-management-header h2 {
  margin: 3px 0 4px;
  color: #102f4a;
  font-size: 20px;
  line-height: 1.2;
}

#sitePlanView .sp-management-header p {
  margin: 0;
  max-width: 720px;
  color: #708598;
  font-size: 12px;
  line-height: 1.55;
}

#sitePlanView .sp-management-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  padding: 11px 12px;
  border: 1px solid #d9e8f5;
  border-radius: 11px;
  background: #f5f9fd;
  color: #547086;
  font-size: 11.5px;
  line-height: 1.5;
}

#sitePlanView .sp-management-safety-note > i {
  margin-top: 1px;
  color: #1775c9;
  font-size: 16px;
}

#sitePlanView .sp-management-safety-note strong {
  color: #173d5e;
}

#sitePlanView .sp-project-management-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: calc(100dvh - 285px);
  overflow: auto;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

#sitePlanView .sp-management-project-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px;
  border: 1px solid #dfe8ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(18, 49, 75, .045);
}

#sitePlanView .sp-management-project-card.is-current {
  border-color: #8ec3f2;
  box-shadow: 0 0 0 2px rgba(25, 120, 210, .07);
}

#sitePlanView .sp-management-project-main {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

#sitePlanView .sp-management-project-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: #edf6ff;
  color: #1976ce;
  font-size: 17px;
}

#sitePlanView .sp-management-project-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#sitePlanView .sp-management-project-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

#sitePlanView .sp-management-project-title strong {
  overflow: hidden;
  color: #17374f;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sitePlanView .sp-current-project-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e6f2ff;
  color: #1670c4;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#sitePlanView .sp-management-project-copy > span {
  overflow: hidden;
  color: #718596;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sitePlanView .sp-management-project-copy > small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
}

#sitePlanView .sp-management-project-copy > small.is-ready { color: #16845f; }
#sitePlanView .sp-management-project-copy > small.is-empty { color: #a4742f; }

#sitePlanView .sp-management-project-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(54px, auto));
  align-items: stretch;
  gap: 5px;
}

#sitePlanView .sp-management-project-stats > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 58px;
  padding: 6px 8px;
  border-radius: 9px;
  background: #f6f9fb;
  text-align: center;
}

#sitePlanView .sp-management-project-stats strong {
  color: #183b57;
  font-size: 13px;
}

#sitePlanView .sp-management-project-stats small {
  margin-top: 1px;
  color: #7d909f;
  font-size: 9px;
}

#sitePlanView .sp-management-project-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid #edf2f6;
}

#sitePlanView .sp-management-project-actions .ghost-button {
  min-height: 36px;
  padding: 0 11px;
  font-size: 11px;
}

#sitePlanView .sp-management-project-actions .sp-management-delete {
  margin-left: auto;
  border-color: #efcaca;
  background: #fffafa;
  color: #bb3636;
}

#sitePlanView .sp-management-project-actions .sp-management-delete:hover:not(:disabled) {
  border-color: #e69f9f;
  background: #fff1f1;
  color: #992b2b;
}

#sitePlanView .sp-management-empty {
  grid-column: 1 / -1;
  display: flex;
  min-height: 260px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed #cddce8;
  border-radius: 14px;
  background: #f8fbfd;
  color: #738899;
  text-align: center;
}

#sitePlanView .sp-management-empty > i {
  color: #3f8ed2;
  font-size: 28px;
}

#sitePlanView .sp-management-empty strong {
  color: #294a64;
  font-size: 14px;
}

#sitePlanView .sp-management-empty span {
  font-size: 11.5px;
}

.sp-dialog-icon.is-danger {
  background: #fff0f0;
  color: #c43c3c;
}

.sp-delete-project-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 12px;
}

.sp-delete-project-summary > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px;
  border-radius: 10px;
  background: #f7f9fb;
  text-align: center;
}

.sp-delete-project-summary strong {
  color: #173b57;
  font-size: 15px;
}

.sp-delete-project-summary small {
  color: #788b9a;
  font-size: 9.5px;
}

.sp-delete-confirm-field > span {
  color: #783333;
}

@media (max-width: 1320px) {
  #sitePlanView #spWorkspacePanel .sp-workspace-grid {
    height: calc(100dvh - 340px);
    min-height: 470px;
  }

  #sitePlanView .sp-project-management-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  #sitePlanView .sp-section-tabs {
    width: 100%;
    overflow-x: auto;
  }

  #sitePlanView .sp-section-tab {
    flex: 1 0 auto;
  }

  #sitePlanView #spWorkspacePanel .sp-workspace-grid {
    height: auto;
    min-height: 0;
  }

  #sitePlanView .sp-management-panel {
    padding: 13px;
  }

  #sitePlanView .sp-management-header {
    align-items: stretch;
    flex-direction: column;
  }

  #sitePlanView .sp-management-header .primary-button {
    width: 100%;
    justify-content: center;
  }

  #sitePlanView .sp-project-management-list {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 620px) {
  #sitePlanView .sp-management-project-card {
    grid-template-columns: minmax(0, 1fr);
  }

  #sitePlanView .sp-management-project-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #sitePlanView .sp-management-project-actions {
    flex-wrap: wrap;
  }

  #sitePlanView .sp-management-project-actions .ghost-button {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }

  #sitePlanView .sp-management-project-actions .sp-management-delete {
    margin-left: 0;
  }

  .sp-delete-project-summary {
    grid-template-columns: 1fr;
  }
}

/* Pilot readiness: recycle bin and CRM audit */
.recycle-bin-modal{width:min(1040px,94vw)}.recycle-bin-toolbar,.audit-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.recycle-bin-toolbar>span{color:var(--text-muted,#64748b);font-size:.9rem}.recycle-table-wrap,.audit-table-wrap{max-height:56vh;overflow:auto}.recycle-table td,.recycle-table th,.audit-table td,.audit-table th{vertical-align:top}.recycle-lead-main{display:flex;flex-direction:column;gap:3px}.recycle-lead-main strong{font-weight:600}.recycle-lead-main small{color:var(--text-muted,#64748b)}.recycle-actions{display:flex;justify-content:flex-end;gap:7px}.recycle-actions button{white-space:nowrap}.audit-toolbar .search-box{flex:1;max-width:520px}.audit-toolbar select{min-width:210px}.audit-action-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:var(--surface-soft,#f1f5f9);font-size:.78rem;font-weight:600}.audit-detail{max-width:420px;white-space:normal;line-height:1.4}.audit-entity{display:flex;flex-direction:column;gap:2px}.audit-entity code{font-size:.78rem}.recycle-bin-modal .empty-state,.settings-panel .empty-state{padding:26px 12px}
@media(max-width:720px){.recycle-bin-toolbar,.audit-toolbar{align-items:stretch;flex-direction:column}.audit-toolbar .search-box,.audit-toolbar select{max-width:none;width:100%}.recycle-actions{flex-direction:column}}

/* Marketing Tools Gallery v2026.08.07.60 */
.marketing-tools-panel{padding:22px}.marketing-tools-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.marketing-tools-heading h2{margin:3px 0 6px;font-size:1.45rem}.marketing-tools-heading p{max-width:760px;margin:0;color:var(--muted)}.marketing-tools-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.marketing-tools-stat{padding:12px 14px;background:#f8fafc;border:1px solid var(--line);border-radius:12px}.marketing-tools-stat span{display:block;color:var(--muted);font-size:.78rem}.marketing-tools-stat strong{display:block;margin-top:3px;font-size:1.15rem}.marketing-tools-toolbar{display:grid;grid-template-columns:minmax(240px,2fr) repeat(3,minmax(150px,1fr)) auto;gap:9px;align-items:center;margin-bottom:16px}.marketing-tools-search{display:flex;align-items:center;gap:8px;padding:0 11px;background:#fff;border:1px solid var(--line);border-radius:10px}.marketing-tools-search input{width:100%;min-width:0;padding:10px 0;border:0;outline:0;background:transparent}.marketing-tools-toolbar select{min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#fff}.marketing-tools-featured{margin:0 0 15px}.marketing-tools-featured:empty{display:none}.marketing-tools-featured-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.marketing-tools-featured-head strong{font-size:.92rem}.marketing-tools-featured-head span{color:var(--muted);font-size:.8rem}.marketing-tools-featured-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:3px}.marketing-tools-featured-item{flex:0 0 min(280px,82vw);display:flex;align-items:center;gap:10px;padding:10px 11px;background:#f8fafc;border:1px solid var(--line);border-radius:11px;cursor:pointer}.marketing-tools-featured-item:hover{border-color:#c8d2df;background:#fff}.marketing-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.marketing-tool-card{display:flex;flex-direction:column;min-width:0;padding:14px;background:#fff;border:1px solid var(--line);border-radius:13px}.marketing-tool-card-head{display:flex;align-items:flex-start;gap:11px}.marketing-tool-file-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;background:#eef2f7;border-radius:10px;color:#475569;font-size:1.2rem}.marketing-tool-card-title{min-width:0;flex:1}.marketing-tool-card-title strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.marketing-tool-card-title small{display:block;margin-top:3px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.marketing-tool-badges{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 8px}.marketing-tool-badge{display:inline-flex;align-items:center;padding:4px 7px;background:#f1f5f9;border-radius:999px;color:#475569;font-size:.72rem;font-weight:600}.marketing-tool-badge.is-current{background:#e9f7ef;color:#22733b}.marketing-tool-badge.is-archived{background:#fff4e5;color:#9a6400}.marketing-tool-description{min-height:38px;margin:0 0 11px;color:var(--muted);font-size:.84rem;line-height:1.45}.marketing-tool-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid #edf0f4;color:var(--muted);font-size:.76rem}.marketing-tool-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.marketing-tool-actions button,.marketing-tool-actions a{flex:1 1 auto;justify-content:center;text-decoration:none}.marketing-tool-actions .marketing-tool-more{flex:0 0 auto}.marketing-tools-dialog,.marketing-tools-preview-dialog,.wa-marketing-tools-dialog{border:0;padding:0;background:transparent;max-width:none}.marketing-tools-dialog::backdrop,.marketing-tools-preview-dialog::backdrop,.wa-marketing-tools-dialog::backdrop{background:rgba(15,23,42,.48)}.marketing-tools-dialog-shell,.marketing-tools-preview-shell,.wa-marketing-tools-shell{width:min(720px,94vw);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 26px 70px rgba(15,23,42,.28)}.marketing-tools-preview-shell{width:min(920px,95vw)}.wa-marketing-tools-shell{width:min(860px,95vw)}.marketing-tools-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:18px 20px;border-bottom:1px solid var(--line)}.marketing-tools-dialog-head h3{margin:3px 0 4px}.marketing-tools-dialog-head p{margin:0;color:var(--muted);font-size:.86rem}.marketing-tools-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 20px}.marketing-tools-form-grid label{display:flex;flex-direction:column;gap:6px}.marketing-tools-form-grid label>span{font-size:.82rem;font-weight:600}.marketing-tools-form-grid input,.marketing-tools-form-grid select,.marketing-tools-form-grid textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#fff}.marketing-tools-form-grid small{color:var(--muted);font-size:.76rem}.marketing-tools-wide{grid-column:1/-1}.marketing-tools-form-status{min-height:20px;margin:0;padding:0 20px;color:var(--muted);font-size:.82rem}.marketing-tools-form-status[data-status="error"]{color:#b42318}.marketing-tools-form-status[data-status="success"]{color:#22733b}.marketing-tools-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px 18px}.marketing-tools-preview-body{min-height:340px;max-height:66vh;overflow:auto;background:#f4f6f8}.marketing-tools-preview-body img,.marketing-tools-preview-body video{display:block;max-width:100%;max-height:62vh;margin:auto}.marketing-tools-preview-body iframe{display:block;width:100%;height:62vh;border:0;background:#fff}.marketing-tools-preview-fallback{display:grid;place-items:center;min-height:340px;padding:32px;text-align:center}.marketing-tools-preview-fallback i{font-size:3rem;color:#64748b}.marketing-tools-preview-fallback strong{display:block;margin-top:10px}.marketing-tools-preview-fallback span{display:block;margin-top:4px;color:var(--muted)}.wa-marketing-tools-toolbar{display:grid;grid-template-columns:minmax(0,2fr) minmax(150px,1fr);gap:8px;padding:13px 18px;border-bottom:1px solid var(--line)}.wa-marketing-tools-toolbar label{display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line);border-radius:10px}.wa-marketing-tools-toolbar input{width:100%;padding:9px 0;border:0;outline:0}.wa-marketing-tools-toolbar select{padding:9px 10px;border:1px solid var(--line);border-radius:10px}.wa-marketing-tools-recommended{padding:0 18px}.wa-marketing-tools-recommended:empty{display:none}.wa-marketing-tools-recommended .marketing-tools-featured-head{margin-top:12px}.wa-marketing-tools-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:14px 18px 18px;max-height:58vh;overflow:auto}.wa-marketing-tool-item{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:11px;background:#fff}.wa-marketing-tool-item.is-recommended{border-color:#b9d5ca;background:#f6fbf8}.wa-marketing-tool-copy{min-width:0;flex:1}.wa-marketing-tool-copy strong,.wa-marketing-tool-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wa-marketing-tool-copy small{margin-top:3px;color:var(--muted);font-size:.76rem}.wa-marketing-tool-actions{display:flex;gap:5px}.wa-marketing-tool-actions button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff}.wa-marketing-tool-actions button:hover{background:#f8fafc}.wa-marketing-tool-actions .is-send{color:#147a3b}.wa-marketing-tool-empty{grid-column:1/-1;padding:30px;text-align:center;color:var(--muted)}
@media(max-width:1100px){.marketing-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.marketing-tools-toolbar{grid-template-columns:minmax(220px,2fr) repeat(2,minmax(140px,1fr));}.marketing-tools-toolbar .ghost-button{grid-column:auto}.marketing-tools-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.marketing-tools-panel{padding:14px}.marketing-tools-heading{align-items:stretch;flex-direction:column}.marketing-tools-heading .primary-button{width:100%;justify-content:center}.marketing-tools-toolbar{grid-template-columns:1fr}.marketing-tools-grid{grid-template-columns:1fr}.marketing-tools-summary{grid-template-columns:1fr 1fr}.marketing-tools-form-grid{grid-template-columns:1fr}.marketing-tools-wide{grid-column:auto}.wa-marketing-tools-toolbar{grid-template-columns:1fr}.wa-marketing-tools-list{grid-template-columns:1fr;max-height:64vh}.marketing-tools-dialog-actions{flex-wrap:wrap}.marketing-tools-dialog-actions>*{flex:1 1 auto}}

/* ======================================================================
   Marketing Tools Gallery v2026.08.07.60.1
   Upload progress feedback + compact/responsive preview modal
   ====================================================================== */
.marketing-tools-dialog-shell{
  overscroll-behavior:contain;
}
#marketingToolFileField{
  padding:12px;
  border:1px dashed #cbd5e1;
  border-radius:12px;
  background:#f8fafc;
}
#marketingToolFileField>span{font-weight: 600}
#marketingToolFileField input[type="file"]{
  padding:7px;
  border:1px solid #dbe3ec;
  border-radius:9px;
  background:#fff;
}
#marketingToolFileField input[type="file"]::file-selector-button{
  margin-right:10px;
  padding:7px 10px;
  border:0;
  border-radius:7px;
  background:#eef3f8;
  color:#334155;
  font:inherit;
  font-weight: 600;
  cursor:pointer;
}
.marketing-tools-upload-feedback{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 20px 12px;
  padding:12px 13px;
  border:1px solid #dbe3ec;
  border-radius:12px;
  background:#f8fafc;
}
.marketing-tools-upload-feedback.hidden{display:none}
.marketing-tools-upload-feedback-icon{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:10px;
  background:#eaf2fb;
  color:#1769aa;
  font-size:1.05rem;
}
.marketing-tools-upload-feedback-copy{min-width:0;flex:1}
.marketing-tools-upload-feedback-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.marketing-tools-upload-feedback-head strong{font-size:.84rem;color:#24364b}
.marketing-tools-upload-feedback-head span{flex:0 0 auto;font-size:.78rem;font-weight: 600;color:#446078}
.marketing-tools-upload-feedback-copy>small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.75rem}
.marketing-tools-upload-progress{height:7px;margin-top:9px;overflow:hidden;border-radius:999px;background:#e5ebf1}
.marketing-tools-upload-progress>span{display:block;width:0;height:100%;border-radius:inherit;background:#1976c8;transition:width .18s ease}
.marketing-tools-upload-feedback[data-state="ready"] .marketing-tools-upload-feedback-icon{background:#eef3f8;color:#475569}
.marketing-tools-upload-feedback[data-state="success"]{border-color:#b9ddc7;background:#f3fbf6}
.marketing-tools-upload-feedback[data-state="success"] .marketing-tools-upload-feedback-icon{background:#dff3e6;color:#22733b}
.marketing-tools-upload-feedback[data-state="success"] .marketing-tools-upload-progress>span{background:#2f8b4b}
.marketing-tools-upload-feedback[data-state="error"]{border-color:#f1c0bc;background:#fff6f5}
.marketing-tools-upload-feedback[data-state="error"] .marketing-tools-upload-feedback-icon{background:#fee7e5;color:#b42318}
.marketing-tools-upload-feedback[data-state="error"] .marketing-tools-upload-progress>span{background:#c94135}
.marketing-tools-dialog-shell.is-uploading{cursor:progress}
.marketing-tools-dialog-shell.is-uploading .marketing-tools-dialog-head,
.marketing-tools-dialog-shell.is-uploading .marketing-tools-form-grid{user-select:none}
.marketing-tools-dialog-actions button:disabled,
.marketing-tools-dialog-head button:disabled{opacity:.55;cursor:not-allowed}
.marketing-tools-spin{animation:marketing-tools-spin .8s linear infinite}
@keyframes marketing-tools-spin{to{transform:rotate(360deg)}}

.marketing-tools-preview-shell{
  display:flex;
  flex-direction:column;
  width:min(980px,calc(100vw - 36px));
  height:min(760px,calc(100vh - 36px));
  max-height:calc(100vh - 36px);
  overflow:hidden;
  border-radius:16px;
}
.marketing-tools-preview-head{
  flex:0 0 auto;
  align-items:center;
  padding:14px 16px;
  background:#fff;
}
.marketing-tools-preview-heading{display:flex;align-items:center;min-width:0;gap:12px}
.marketing-tools-preview-heading>div{min-width:0}
.marketing-tools-preview-heading h3{max-width:min(680px,70vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:2px 0 5px}
.marketing-tools-preview-file-icon{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:11px;
  background:#eef3f8;
  color:#40566f;
  font-size:1.15rem;
}
.marketing-tools-preview-meta{display:flex;flex-wrap:wrap;gap:5px}
.marketing-tools-preview-meta span{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 7px;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-size:.7rem;
  font-weight: 600;
}
.marketing-tools-preview-body{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:hidden;
  padding:12px;
  background:#e9eef3;
}
.marketing-tools-pdf-preview,
.marketing-tools-image-preview,
.marketing-tools-video-preview{
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  border:1px solid #d7dee7;
  border-radius:10px;
  background:#fff;
}
.marketing-tools-pdf-preview iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  border:0;
  background:#fff;
}
.marketing-tools-image-preview,
.marketing-tools-video-preview{display:grid;place-items:center;background:#f7f9fb}
.marketing-tools-image-preview img,
.marketing-tools-video-preview video{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  margin:auto;
  object-fit:contain;
}
.marketing-tools-preview-shell>.marketing-tools-dialog-actions{
  flex:0 0 auto;
  align-items:center;
  padding:11px 16px;
  border-top:1px solid var(--line);
  background:#fff;
}
.marketing-tools-preview-shell>.marketing-tools-dialog-actions a,
.marketing-tools-preview-shell>.marketing-tools-dialog-actions button{min-height:38px}
.marketing-tools-preview-fallback{height:100%;min-height:0;border:1px solid #d7dee7;border-radius:10px;background:#fff}

@media(max-width:720px){
  .marketing-tools-upload-feedback{margin:0 14px 10px;padding:11px}
  .marketing-tools-upload-feedback-copy>small{white-space:normal}
  .marketing-tools-preview-shell{width:calc(100vw - 16px);height:calc(100vh - 20px);max-height:calc(100vh - 20px);border-radius:14px}
  .marketing-tools-preview-head{padding:11px 12px}
  .marketing-tools-preview-file-icon{display:none}
  .marketing-tools-preview-heading h3{max-width:calc(100vw - 86px)}
  .marketing-tools-preview-meta span:nth-child(3){display:none}
  .marketing-tools-preview-body{padding:7px}
  .marketing-tools-preview-shell>.marketing-tools-dialog-actions{padding:9px 12px}
}

/* ======================================================================
   Marketing Tools modal layout polish v2026.08.07.60.2
   Consistent centering, spacing, borders and responsive sizing.
   ====================================================================== */
.marketing-tools-dialog,
.marketing-tools-preview-dialog,
.wa-marketing-tools-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box;
}
.marketing-tools-dialog {
  width: min(720px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
}
.marketing-tools-preview-dialog {
  width: min(1040px, calc(100vw - 32px)) !important;
  height: min(780px, calc(100dvh - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
}
.wa-marketing-tools-dialog {
  width: min(900px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
}
.marketing-tools-dialog::backdrop,
.marketing-tools-preview-dialog::backdrop,
.wa-marketing-tools-dialog::backdrop {
  background: rgba(18, 37, 54, .52) !important;
  backdrop-filter: blur(4px);
}

.marketing-tools-dialog-shell,
.marketing-tools-preview-shell,
.wa-marketing-tools-shell {
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid #dbe3ec;
  border-radius: 16px !important;
  background: #fff;
  box-shadow: 0 24px 64px rgba(15, 35, 55, .24);
}
.marketing-tools-dialog-shell {
  max-height: calc(100dvh - 32px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}
.marketing-tools-preview-shell {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}
.wa-marketing-tools-shell {
  display: flex;
  flex-direction: column;
  max-height: min(760px, calc(100dvh - 32px)) !important;
  overflow: hidden !important;
}

.marketing-tools-dialog-head {
  min-width: 0;
  padding: 18px 22px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #fff !important;
}
.marketing-tools-dialog-head > div,
.marketing-tools-preview-heading,
.marketing-tools-preview-heading > div {
  min-width: 0;
}
.marketing-tools-dialog-head h3 {
  margin: 3px 0 5px;
  line-height: 1.3;
}
.marketing-tools-dialog-head p {
  margin: 0;
  line-height: 1.45;
}
.marketing-tools-dialog-head .wa-dialog-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #f8fafc;
}
.marketing-tools-dialog-head .wa-dialog-close:hover {
  background: #eef3f7;
}

.marketing-tools-form-grid {
  gap: 14px !important;
  padding: 20px 22px 16px !important;
}
.marketing-tools-form-grid label {
  gap: 7px !important;
  min-width: 0;
}
.marketing-tools-form-grid input,
.marketing-tools-form-grid select,
.marketing-tools-form-grid textarea {
  box-sizing: border-box;
  min-height: 42px;
  padding: 10px 12px !important;
  border: 1px solid #d6e0e8 !important;
  border-radius: 10px !important;
}
.marketing-tools-form-grid textarea {
  min-height: 92px;
  resize: vertical;
}
#marketingToolFileField {
  margin: 0;
  padding: 14px !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 12px !important;
}
.marketing-tools-upload-feedback {
  margin: 0 22px 14px !important;
  padding: 12px 14px !important;
}
.marketing-tools-form-status {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 22px 4px !important;
  line-height: 1.45;
}
.marketing-tools-form-status:empty {
  display: none;
}
.marketing-tools-dialog-actions {
  align-items: center;
  gap: 10px !important;
  margin: 0;
  padding: 14px 22px 18px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}
.marketing-tools-dialog-actions .ghost-button,
.marketing-tools-dialog-actions .primary-button,
.marketing-tools-dialog-actions a {
  min-height: 40px;
}

.marketing-tools-preview-head {
  padding: 15px 18px !important;
}
.marketing-tools-preview-heading {
  gap: 12px;
}
.marketing-tools-preview-heading h3 {
  max-width: min(720px, calc(100vw - 180px));
  margin: 2px 0 6px;
}
.marketing-tools-preview-body {
  padding: 14px !important;
  border: 0;
  background: #eef2f6 !important;
}
.marketing-tools-pdf-preview,
.marketing-tools-image-preview,
.marketing-tools-video-preview,
.marketing-tools-preview-fallback {
  border: 1px solid #d8e1e8 !important;
  border-radius: 12px !important;
  background: #fff;
}
.marketing-tools-preview-shell > .marketing-tools-dialog-actions {
  padding: 12px 18px !important;
}

.wa-marketing-tools-toolbar {
  flex: 0 0 auto;
  gap: 10px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #f8fafc;
}
.wa-marketing-tools-toolbar label,
.wa-marketing-tools-toolbar select {
  min-height: 42px;
  border-color: #d6e0e8 !important;
  border-radius: 10px !important;
  background: #fff;
}
.wa-marketing-tools-recommended {
  flex: 0 0 auto;
  padding: 0 20px !important;
}
.wa-marketing-tools-recommended .marketing-tools-featured-head {
  margin: 14px 0 0;
}
.wa-marketing-tools-list {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: min(58vh, 540px) !important;
  gap: 10px !important;
  padding: 14px 20px 20px !important;
  overflow: auto;
}
.wa-marketing-tool-item {
  padding: 12px !important;
  border-color: #dde5ec !important;
  border-radius: 12px !important;
}

@media (max-width: 720px) {
  .marketing-tools-dialog,
  .marketing-tools-preview-dialog,
  .wa-marketing-tools-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }
  .marketing-tools-preview-dialog {
    height: calc(100dvh - 20px) !important;
  }
  .marketing-tools-dialog-shell,
  .wa-marketing-tools-shell {
    max-height: calc(100dvh - 20px) !important;
  }
  .marketing-tools-dialog-shell,
  .marketing-tools-preview-shell,
  .wa-marketing-tools-shell {
    border-radius: 14px !important;
  }
  .marketing-tools-dialog-head,
  .marketing-tools-preview-head {
    padding: 15px 16px !important;
  }
  .marketing-tools-form-grid {
    padding: 16px !important;
  }
  .marketing-tools-upload-feedback {
    margin: 0 16px 12px !important;
  }
  .marketing-tools-form-status {
    padding: 0 16px 4px !important;
  }
  .marketing-tools-dialog-actions,
  .marketing-tools-preview-shell > .marketing-tools-dialog-actions {
    padding: 12px 16px 16px !important;
  }
  .marketing-tools-preview-heading h3 {
    max-width: calc(100vw - 96px);
  }
  .marketing-tools-preview-body {
    padding: 8px !important;
  }
  .wa-marketing-tools-toolbar {
    padding: 12px 16px !important;
  }
  .wa-marketing-tools-recommended {
    padding: 0 16px !important;
  }
  .wa-marketing-tools-list {
    min-height: 160px;
    max-height: 62vh !important;
    padding: 12px 16px 16px !important;
  }
}

/* ========================================================================== 
   GRIYA CRM — SIDEBAR NAVIGATION OVERFLOW UX HOTFIX v2026.08.07.60.3.1
   Keep long/expanded navigation inside its own scroll region so Settings
   never collides with the account/logout zone. Desktop only; compact/mobile
   navigation keeps its existing document-flow behavior.
   ========================================================================== */
@media (min-width: 981px) {
  .app-shell:not(.sidebar-collapsed) > .sidebar {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .sidebar-head {
    flex: 0 0 auto;
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .sidebar-section {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(132, 168, 197, .30) transparent;
    padding: 0 4px 14px 0;
    margin-right: -4px;
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .sidebar-section::-webkit-scrollbar {
    width: 5px;
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .sidebar-section::-webkit-scrollbar-track {
    background: transparent;
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .sidebar-section::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(132, 168, 197, .28);
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .sidebar-section::-webkit-scrollbar-thumb:hover {
    background: rgba(132, 168, 197, .45);
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .nav-tabs {
    flex: 0 0 auto;
    min-height: min-content;
    padding-bottom: 4px;
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .settings-dropdown {
    margin-top: 2px;
    padding-bottom: 2px;
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .settings-submenu {
    margin: 4px 6px 2px 13px;
    padding: 5px 0 5px 16px !important;
    gap: 2px !important;
    border-left: 1px solid rgba(132, 168, 197, .20);
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .settings-submenu-item {
    width: 100%;
    min-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    line-height: 1.25;
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .settings-submenu-item.active {
    border-color: rgba(120, 196, 255, .13) !important;
    background: rgba(10, 110, 209, .22) !important;
    color: #fff !important;
  }

  .app-shell:not(.sidebar-collapsed) > .sidebar .sidebar-account-zone {
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, .075);
    background: linear-gradient(180deg, rgba(6, 31, 55, .04), rgba(6, 31, 55, .42));
  }
}

/* =========================================================
   Dashboard compact command header
   v2026.08.07.60.3.2
   Removes the duplicated welcome/header layer and combines
   period/date controls into one efficient navigation bar.
   ========================================================= */
#dashboardView.dashboard-enterprise {
  gap: 10px !important;
}

.dashboard-command-bar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 12px;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(15, 48, 77, .035);
}

.dashboard-command-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.dashboard-command-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eaf3fc;
  color: #0a6ed1;
  font-size: 15px;
}

.dashboard-command-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.dashboard-command-copy small,
.dashboard-command-period > span,
.dashboard-command-date > span {
  color: #7c90a2;
  font-size: 8px !important;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dashboard-command-copy strong {
  max-width: 260px;
  overflow: hidden;
  color: #1b344a;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-command-time {
  flex: 0 0 auto;
  margin-left: 2px;
  padding: 4px 7px;
  border: 1px solid #e2eaf1;
  border-radius: 7px;
  background: #f7fafc;
  color: #6d8193;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.dashboard-command-controls {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-command-period,
.dashboard-command-date {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-command-period {
  width: 126px;
}

.dashboard-command-date {
  width: 158px;
}

.dashboard-command-period select,
.dashboard-command-date input {
  width: 100%;
  min-height: 34px !important;
  height: 34px;
  margin: 0 !important;
  border: 1px solid #dce6ee !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  color: #243f56;
  font-size: 10.5px !important;
  box-shadow: none !important;
}

.dashboard-command-period select {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.dashboard-command-date input {
  padding: 0 8px !important;
}

.dashboard-command-period select:focus,
.dashboard-command-date input:focus {
  border-color: #79aee0 !important;
  box-shadow: 0 0 0 3px rgba(10, 110, 209, .08) !important;
}

.dashboard-command-divider {
  width: 1px;
  height: 32px;
  align-self: flex-end;
  margin: 0 2px 1px;
  background: #e5ebf1;
}

.dashboard-command-reset {
  min-width: 78px;
  min-height: 34px !important;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px !important;
  border-radius: 8px !important;
  color: #506a80 !important;
  font-size: 10px !important;
  white-space: nowrap;
}

/* The former duplicated dashboard layers are intentionally retired. */
#dashboardView > .dashboard-welcome-bar,
#dashboardView > .dashboard-filter-bar {
  display: none !important;
}

@media (max-width: 1180px) {
  .dashboard-command-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .dashboard-command-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .dashboard-command-date {
    width: min(190px, 24vw);
  }
}

@media (max-width: 760px) {
  .dashboard-command-bar {
    padding: 10px;
  }

  .dashboard-command-context {
    width: 100%;
  }

  .dashboard-command-copy {
    flex: 1 1 auto;
  }

  .dashboard-command-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 8px;
  }

  .dashboard-command-period,
  .dashboard-command-date {
    width: 100%;
  }

  .dashboard-command-divider {
    display: none;
  }

  .dashboard-command-reset {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .dashboard-command-icon {
    width: 32px;
    height: 32px;
  }

  .dashboard-command-copy strong {
    max-width: none;
    white-space: normal;
  }

  .dashboard-command-time {
    margin-left: auto;
  }

  .dashboard-command-controls {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   GRIYA CRM — ENTERPRISE TYPOGRAPHY SYSTEM v2026.08.07.60.3.3
   Calm hierarchy: Regular 400 / Medium 500 / Semibold 600.
   Uses native system fonts: no external font request required.
   ============================================================ */
:root {
  --griya-font-enterprise: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
dialog,
table {
  font-family: var(--griya-font-enterprise);
}

body {
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Routine controls and navigation should feel calm, not bold. */
button,
input,
select,
textarea,
.app-shell .nav-tab,
.app-shell .settings-submenu-item,
.app-shell .sidebar-logout,
.app-shell .sidebar-profile,
.toolbar,
.date-toolbar,
.modal-actions button {
  font-weight: 500;
}

/* Small structural labels use medium weight; uppercase remains legible. */
.app-shell .sidebar-title,
.app-shell .topbar .eyebrow,
.panel-label,
.eyebrow,
label,
table th,
.metric span,
.kpi-card small,
.info-timebar span {
  font-weight: 500;
}

/* Headings and meaningful values use semibold instead of heavy bold. */
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
.app-shell .topbar h1,
.sidebar-brand-copy strong,
.metric strong,
.kpi-card strong,
.panel-head strong,
.panel-head h2,
.panel-head h3 {
  font-weight: 600;
}

/* Brand remains clear while staying restrained. */
.brand-mark,
.sidebar-brand-copy strong,
.login-premium-brand strong,
.login-mobile-brand strong {
  font-weight: 600;
}

/* Avoid overly condensed visual rhythm inherited from older heavy styles. */
.app-shell .topbar h1,
.sidebar-brand-copy strong,
h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

/* ============================================================
   GRIYACRM — ENTERPRISE UI CONSISTENCY SYSTEM v2026.08.07.60.3.4
   Product identity: GriyaCRM / Property Sales Platform.
   Restrained surfaces, consistent 8px controls / 10px cards / 12px modals,
   calm brand emphasis, and semantic color only where it adds meaning.
   ============================================================ */
:root {
  --griya-radius-control: 8px;
  --griya-radius-card: 10px;
  --griya-radius-modal: 12px;
  --griya-space-1: 4px;
  --griya-space-2: 8px;
  --griya-space-3: 12px;
  --griya-space-4: 16px;
  --griya-space-5: 24px;
  --griya-surface-subtle: #f7f9fb;
  --griya-border-enterprise: #dce4eb;
  --griya-border-strong: #cbd7e1;
  --griya-accent-enterprise: #0a6ed1;
  --griya-accent-hover: #075caf;
  --griya-accent-soft: #eaf3fc;
  --griya-shadow-enterprise: 0 1px 2px rgba(15, 48, 77, .035), 0 3px 10px rgba(15, 48, 77, .025);
}

.app-shell {
  --griya-border: var(--griya-border-enterprise);
  --griya-card-shadow: var(--griya-shadow-enterprise);
  --shadow: var(--griya-shadow-enterprise);
  --radius: var(--griya-radius-card);
}

/* Product and workspace are separate concepts: product in sidebar, tenant in topbar. */
.app-shell .sidebar-brand {
  cursor: pointer;
}

.app-shell .sidebar-brand .brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--griya-radius-control) !important;
  border-color: rgba(255,255,255,.14) !important;
  background: var(--griya-accent-enterprise) !important;
  box-shadow: none !important;
}

.app-shell .sidebar-brand-copy {
  gap: 2px !important;
}

.app-shell .sidebar-brand-copy strong {
  max-width: 150px !important;
  color: #fff !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}

.app-shell .sidebar-brand-copy small {
  max-width: 156px;
  overflow: hidden;
  color: #8fb0c8 !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  letter-spacing: .055em !important;
  text-overflow: ellipsis;
  text-transform: uppercase !important;
  white-space: nowrap;
}

/* Navigation: one calm active state instead of a full bright block. */
.app-shell .nav-tab {
  min-height: 42px !important;
  border-radius: var(--griya-radius-control) !important;
  font-weight: 500 !important;
}

.app-shell .nav-tab:hover {
  border-color: rgba(124, 188, 241, .09) !important;
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.app-shell .nav-tab.active {
  border-color: rgba(90, 163, 229, .14) !important;
  background: rgba(10, 110, 209, .15) !important;
  color: #fff !important;
  box-shadow: inset 2px 0 0 #5aa3e5 !important;
}

.app-shell .nav-tab.active i {
  color: #8ec5f5 !important;
}

.app-shell .settings-submenu-item {
  border-radius: 6px !important;
  font-weight: 500 !important;
}

.app-shell .settings-submenu-item.active {
  border-color: transparent !important;
  background: rgba(10, 110, 209, .12) !important;
  color: #eef7ff !important;
  box-shadow: inset 2px 0 0 rgba(120, 196, 255, .72);
}

.app-shell .sidebar-profile,
.app-shell .sidebar-logout,
.app-shell .sidebar-toggle {
  border-radius: var(--griya-radius-control) !important;
  box-shadow: none !important;
}

/* Topbar: contextual controls are supporting surfaces, not floating cards. */
.app-shell .topbar {
  min-height: 68px !important;
  border-bottom-color: #dde5ec !important;
  box-shadow: none !important;
}

.app-shell .topbar-title-block .eyebrow,
.app-shell .topbar .eyebrow {
  font-weight: 500 !important;
  letter-spacing: .10em !important;
}

.app-shell .topbar-title-block h1,
.app-shell .topbar h1 {
  font-weight: 600 !important;
}

.app-shell .topbar-workspace-identity,
.app-shell .topbar-network-status,
.app-shell .notification-button,
.app-shell .sidebar-open-button {
  border-radius: var(--griya-radius-control) !important;
  box-shadow: none !important;
}

.app-shell .topbar-workspace-identity {
  border-color: var(--griya-border-enterprise) !important;
  background: var(--griya-surface-subtle) !important;
}

/* Common surfaces: restrained shadow and one radius vocabulary. */
.app-shell .panel,
.app-shell .pipeline-column,
.app-shell .lead-card,
.app-shell .kpi-card,
.app-shell .metric,
.app-shell .info-timebar div,
.app-shell .toolbar,
.app-shell .date-toolbar,
.dashboard-command-bar,
.dashboard-kpi-card,
.dashboard-card,
.marketing-tools-card,
.wa-marketing-tools-card {
  border-color: var(--griya-border-enterprise) !important;
  border-radius: var(--griya-radius-card) !important;
  box-shadow: var(--griya-shadow-enterprise) !important;
}

.app-shell .section-heading {
  min-height: 64px !important;
  padding: 15px 18px !important;
  border-radius: var(--griya-radius-card) var(--griya-radius-card) 0 0 !important;
  background: #fff !important;
}

.app-shell .section-heading h2,
.app-shell .section-heading h3 {
  font-weight: 600 !important;
}

/* Controls: predictable 40px rhythm and quiet interaction chrome. */
.app-shell input,
.app-shell select,
.app-shell textarea {
  border-radius: var(--griya-radius-control) !important;
  border-color: var(--griya-border-enterprise) !important;
  background: #fff !important;
}

.app-shell input:not([type="checkbox"]):not([type="radio"]),
.app-shell select {
  min-height: 40px !important;
}

.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus {
  border-color: #76aee0 !important;
  box-shadow: 0 0 0 3px rgba(10, 110, 209, .08) !important;
}

.app-shell .primary-button,
.app-shell .ghost-button,
.app-shell .danger-button,
.app-shell .icon-button,
.app-shell .small-button,
.app-shell .action-button,
.app-shell .compact-button {
  border-radius: var(--griya-radius-control) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.app-shell .primary-button {
  min-height: 40px !important;
  border-color: var(--griya-accent-enterprise) !important;
  background: var(--griya-accent-enterprise) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.app-shell .primary-button:hover {
  border-color: var(--griya-accent-hover) !important;
  background: var(--griya-accent-hover) !important;
  box-shadow: none !important;
}

.app-shell .ghost-button,
.app-shell .icon-button {
  background: #fff !important;
}

/* Dashboard: neutral containers; color remains in icons/status, not every card edge. */
.dashboard-command-bar {
  min-height: 58px;
  border-radius: var(--griya-radius-card) !important;
  box-shadow: none !important;
}

.dashboard-command-copy strong,
.dashboard-command-time,
.dashboard-command-reset,
.dashboard-command-period select,
.dashboard-command-date input {
  font-weight: 500 !important;
}

.dashboard-command-copy strong {
  font-weight: 600 !important;
}

.dashboard-kpi-card {
  min-height: 116px;
  border-color: var(--griya-border-enterprise) !important;
  background: #fff !important;
  box-shadow: var(--griya-shadow-enterprise) !important;
}

.dashboard-kpi-card::after {
  display: none !important;
}

.dashboard-kpi-label,
.dashboard-card-kicker {
  font-weight: 500 !important;
}

.dashboard-kpi-card strong,
.dashboard-card-head h3,
.dashboard-task-main strong,
.dashboard-quick-grid button strong,
.dashboard-performance-name strong {
  font-weight: 600 !important;
}

.dashboard-link-button {
  color: #246b9f !important;
  font-weight: 500 !important;
}

.dashboard-link-button:hover {
  color: var(--griya-accent-enterprise) !important;
}

.dashboard-card-head {
  border-bottom-color: #e8edf2 !important;
  background: #fff !important;
}

.dashboard-quick-grid button,
.dashboard-task-action {
  border-radius: var(--griya-radius-control) !important;
  box-shadow: none !important;
}

/* Generic KPI cards also use neutral card chrome; semantic icon colors stay intact. */
.app-shell .metric,
.app-shell .metric-hot,
.app-shell .metric-warm,
.app-shell .metric-cold,
.app-shell .metric-visit {
  border-color: var(--griya-border-enterprise) !important;
  background: #fff !important;
}

.app-shell .metric strong {
  color: #16354a !important;
  font-weight: 600 !important;
}

/* Tables: one consistent enterprise header treatment. */
.app-shell table,
body > dialog table {
  border-color: var(--griya-border-enterprise);
}

.app-shell th,
body > dialog th {
  height: 44px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: var(--griya-surface-subtle) !important;
  color: #60768a !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
}

.app-shell td {
  border-bottom-color: #e9eef2 !important;
}

.app-shell .table tbody tr:hover > *,
.app-shell .clickable-row:hover td {
  background: #f5f9fc !important;
}

/* Modal language: 12px shell, aligned header/footer and no exaggerated floating effect. */
body > dialog {
  border: 1px solid var(--griya-border-enterprise) !important;
  border-radius: var(--griya-radius-modal) !important;
  box-shadow: 0 18px 55px rgba(8, 35, 51, .20) !important;
}

body > dialog::backdrop {
  background: rgba(8, 27, 41, .50) !important;
  backdrop-filter: blur(3px);
}

body > dialog .modal-heading {
  min-height: 62px;
  margin: 0 !important;
  padding: 14px 18px !important;
  border-bottom-color: var(--griya-border-enterprise) !important;
  background: #fff !important;
}

body > dialog .modal-heading h2,
body > dialog .modal-heading h3 {
  font-weight: 600 !important;
}

body > dialog .modal-actions {
  margin: 0 !important;
  padding: 12px 18px !important;
  border-top-color: var(--griya-border-enterprise) !important;
  background: #fafbfc !important;
}

body > dialog .modal-actions button,
body > dialog .icon-button,
body > dialog .ghost-button,
body > dialog .primary-button,
body > dialog .danger-button {
  border-radius: var(--griya-radius-control) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

body > dialog .primary-button {
  border-color: var(--griya-accent-enterprise) !important;
  background: var(--griya-accent-enterprise) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Focus treatment remains visible for keyboard users. */
.app-shell button:focus-visible,
.app-shell a:focus-visible,
body > dialog button:focus-visible,
body > dialog a:focus-visible {
  outline: 2px solid rgba(10, 110, 209, .55);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .app-shell .topbar {
    min-height: 64px !important;
  }

  .dashboard-command-bar,
  .dashboard-kpi-card,
  .dashboard-card,
  .app-shell .panel {
    border-radius: var(--griya-radius-card) !important;
  }
}

/* Compact dashboard controls intentionally use the compact 34px density. */
.dashboard-command-period select,
.dashboard-command-date input,
.dashboard-command-reset {
  min-height: 34px !important;
  height: 34px !important;
}

@media (min-width: 981px) {
  .app-shell:not(.sidebar-collapsed) > .sidebar .settings-submenu-item.active {
    border-color: transparent !important;
    background: rgba(10, 110, 209, .12) !important;
    color: #eef7ff !important;
    box-shadow: inset 2px 0 0 rgba(120, 196, 255, .72) !important;
  }
}

/* ========================================================================== 
   GriyaCRM v60.3.5 — Meta Ads compact enterprise workspace
   Keeps the global topbar as the single page header and moves Meta controls
   into a restrained command bar so performance data appears earlier.
   ========================================================================== */
#metaAdsView {
  --meta-compact-border: var(--griya-border-enterprise, #dce5ec);
  --meta-compact-muted: #667b8d;
  --meta-compact-ink: #17364d;
  --meta-compact-subtle: #f7f9fb;
  --meta-compact-accent: var(--griya-accent-enterprise, #0a6ed1);
}

#metaAdsView .meta-report-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--meta-compact-border);
  border-radius: var(--griya-radius-card, 10px);
  box-shadow: none;
}

#metaAdsView .meta-report-command-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#metaAdsView .meta-report-command-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #126d8b;
  background: #edf7fa;
  border: 1px solid #d8ebf0;
  border-radius: var(--griya-radius-control, 8px);
  font-size: 17px;
}

#metaAdsView .meta-report-command-copy {
  min-width: 0;
}

#metaAdsView .meta-report-command-label {
  display: block;
  margin-bottom: 2px;
  color: var(--meta-compact-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .015em;
}

/* JS replaces className on every status refresh; ancestry keeps it compact. */
#metaAdsView .meta-report-command-bar .meta-sync-status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  max-width: 760px;
  padding: 0;
  margin: 0;
  color: var(--meta-compact-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 11.5px;
  line-height: 1.35;
}

#metaAdsView .meta-report-command-bar .meta-sync-status i {
  flex: 0 0 auto;
  color: #6f8797;
}

#metaAdsView .meta-report-command-bar .meta-sync-status.is-connected,
#metaAdsView .meta-report-command-bar .meta-sync-status.is-error {
  background: transparent;
  border: 0;
}

#metaAdsView .meta-report-command-bar .meta-sync-status.is-connected {
  color: #3d726d;
}

#metaAdsView .meta-report-command-bar .meta-sync-status.is-connected i {
  color: #178679;
}

#metaAdsView .meta-report-command-bar .meta-sync-status.is-error {
  color: #9a4b49;
}

#metaAdsView .meta-report-command-bar .meta-sync-status.is-error i {
  color: #b04d49;
}

#metaAdsView .meta-report-command-bar .meta-report-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: none;
}

#metaAdsView .meta-report-command-bar .meta-report-actions .ghost-button,
#metaAdsView .meta-report-command-bar .meta-report-actions .primary-button {
  min-height: 36px !important;
  height: 36px;
  padding: 0 11px;
  color: #405a70 !important;
  background: #fff !important;
  border: 1px solid #cad7e2 !important;
  border-radius: var(--griya-radius-control, 8px) !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 500 !important;
  white-space: nowrap;
}

#metaAdsView .meta-report-command-bar .meta-report-actions .ghost-button:hover,
#metaAdsView .meta-report-command-bar .meta-report-actions .primary-button:hover {
  color: var(--meta-compact-accent) !important;
  background: #f2f7fc !important;
  border-color: #9fc3e4 !important;
}

/* Compact segmented navigation: descriptions remain in DOM for context but
   are hidden visually to reduce vertical consumption. */
#metaAdsView .meta-report-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(190px, auto));
  gap: 3px;
  width: auto;
  max-width: 100%;
  padding: 3px;
  margin-bottom: 12px;
  background: #eef3f7;
  border: 1px solid #dfe7ed;
  border-radius: var(--griya-radius-card, 10px);
  box-shadow: none;
}

#metaAdsView .meta-report-tab {
  gap: 8px;
  min-height: 38px;
  padding: 6px 11px;
  color: #5d7284;
  background: transparent;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
}

#metaAdsView .meta-report-tab > i {
  width: 26px;
  height: 26px;
  color: #55768b;
  background: transparent;
  border-radius: 6px;
  font-size: 14px;
}

#metaAdsView .meta-report-tab strong {
  margin: 0;
  color: #40596b;
  font-size: 12px;
  font-weight: 500;
}

#metaAdsView .meta-report-tab small {
  display: none;
}

#metaAdsView .meta-report-tab:hover {
  background: rgba(255, 255, 255, .65);
}

#metaAdsView .meta-report-tab.active {
  color: #173a57;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 3px rgba(21, 53, 76, .08);
}

#metaAdsView .meta-report-tab.active > i {
  color: var(--meta-compact-accent);
  background: #eef6fd;
}

#metaAdsView .meta-report-tab.active strong {
  color: #17456c;
  font-weight: 600;
}

/* Filter panel uses the same compact density as the dashboard command bar. */
#metaAdsView .meta-report-toolbar,
#metaAdsView .meta-report-toolbar-premium {
  gap: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--meta-compact-border);
  border-radius: var(--griya-radius-card, 10px);
  box-shadow: none;
}

#metaAdsView .meta-report-toolbar-premium {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

#metaAdsView .toolbar label > span {
  margin-bottom: 5px;
  color: #6a7f90;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .045em;
}

#metaAdsView .toolbar input,
#metaAdsView .toolbar select {
  min-height: 38px;
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  background: #fff;
  border-color: #d6e1e9;
  border-radius: var(--griya-radius-control, 8px);
  font-size: 12.5px;
}

#metaAdsView .meta-client-delete-button {
  min-height: 38px;
  height: 38px;
  border-radius: var(--griya-radius-control, 8px);
}

#metaAdsView .meta-report-toolbar-premium .meta-report-period-note {
  min-height: 0;
  padding-top: 0;
  margin-top: -1px;
  color: #758898;
  font-size: 10.5px;
  line-height: 1.4;
}

/* Bring the first actionable data surface closer to the top. */
#metaAdsView .meta-funnel-panel-priority {
  margin-top: 0;
}

#metaAdsView .meta-funnel-panel-priority .section-heading {
  padding-top: 14px;
  padding-bottom: 12px;
}

@media (max-width: 1120px) {
  #metaAdsView .meta-report-command-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  #metaAdsView .meta-report-command-bar .meta-report-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  #metaAdsView .meta-report-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  #metaAdsView .meta-report-toolbar-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #metaAdsView .meta-report-command-bar {
    padding: 10px;
  }

  #metaAdsView .meta-report-command-main {
    align-items: flex-start;
  }

  #metaAdsView .meta-report-command-bar .meta-report-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #metaAdsView .meta-report-command-bar .meta-report-actions .ghost-button,
  #metaAdsView .meta-report-command-bar .meta-report-actions .primary-button {
    width: 100%;
  }

  #metaAdsView .meta-report-tabs {
    grid-template-columns: 1fr;
  }

  #metaAdsView .meta-report-toolbar-premium {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   GriyaCRM v60.3.6 — Meta Ads compact text tabs
   Enterprise navigation: quiet, low-height, content-first.
   ============================================================ */
#metaAdsView .meta-report-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 34px;
  padding: 0 2px;
  margin: 0 0 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dfe7ed;
  border-radius: 0;
  box-shadow: none;
}

#metaAdsView .meta-report-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding: 0 2px 8px;
  color: #6a7f90;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

#metaAdsView .meta-report-tab span {
  display: inline;
  min-width: 0;
}

#metaAdsView .meta-report-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
  border-radius: 2px 2px 0 0;
}

#metaAdsView .meta-report-tab:hover {
  color: #294f6f;
  background: transparent !important;
}

#metaAdsView .meta-report-tab.active {
  color: #174f7d;
  background: transparent !important;
  font-weight: 600;
}

#metaAdsView .meta-report-tab.active::after {
  background: var(--meta-compact-accent, #1677c8);
}

#metaAdsView .meta-report-tab > i,
#metaAdsView .meta-report-tab strong,
#metaAdsView .meta-report-tab small {
  display: none !important;
}

@media (max-width: 820px) {
  #metaAdsView .meta-report-tabs {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #metaAdsView .meta-report-tabs::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 560px) {
  #metaAdsView .meta-report-tabs {
    gap: 14px;
    margin-bottom: 8px;
  }

  #metaAdsView .meta-report-tab {
    min-height: 32px;
    padding-bottom: 7px;
    font-size: 12px;
  }
}

/* ============================================================
   GriyaCRM v60.3.7 — Lead Detail Enterprise Workspace
   Compact header + Meta Ads-style tabs + readable information hierarchy.
   ============================================================ */
#leadDetailView .lead-detail-panel {
  overflow: visible;
  padding: 0;
  background: #fff;
}

#leadDetailView .lead-detail-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid #e2e9ef;
  background: #fff;
}

#leadDetailView .lead-detail-header-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

#leadDetailView .lead-detail-back {
  flex: 0 0 auto;
  min-height: 34px;
  margin: 0;
  padding-inline: 11px;
  font-size: 12.5px;
}

#leadDetailView .lead-detail-identity {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#leadDetailView .lead-detail-identity h2 {
  margin: 0;
  color: #153650;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

#leadDetailView .lead-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  min-height: 22px;
  color: #64798c;
  font-size: 12px;
  line-height: 1.35;
}

#leadDetailView .lead-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

#leadDetailView .lead-meta-item i {
  color: #159b8c;
  font-size: 13px;
}

#leadDetailView .lead-quality-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f8;
  color: #53697d;
  font-size: 10.5px;
  font-weight: 500;
}

#leadDetailView .lead-quality-chip.tone-success {
  background: #e8f7f1;
  color: #08755f;
}

#leadDetailView .lead-quality-chip.tone-warning {
  background: #fff4df;
  color: #9a5e08;
}

#leadDetailView .lead-detail-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

#leadDetailView .lead-detail-header-actions .ghost-button,
#leadDetailView .lead-detail-header-actions .primary-button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 12.5px;
}

#leadDetailView .lead-detail-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 40px;
  padding: 0 18px;
  border-bottom: 1px solid #dfe7ed;
  background: #fff;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

#leadDetailView .lead-detail-tabs::-webkit-scrollbar {
  display: none;
}

#leadDetailView .lead-detail-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 2px 1px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6a7f90;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

#leadDetailView .lead-detail-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
}

#leadDetailView .lead-detail-tab:hover {
  color: #294f6f;
}

#leadDetailView .lead-detail-tab.active {
  color: #174f7d;
  font-weight: 600;
}

#leadDetailView .lead-detail-tab.active::after {
  background: #1677c8;
}

#leadDetailView .lead-detail-tab:focus-visible {
  outline: 2px solid rgba(22, 119, 200, .3);
  outline-offset: -4px;
}

#leadDetailView .lead-detail-tab-panels {
  padding: 16px 18px 20px;
  background: #f6f8fa;
}

#leadDetailView .lead-detail-tab-panel {
  min-width: 0;
}

#leadDetailView .lead-detail-tab-panel[hidden] {
  display: none !important;
}

#leadDetailView .lead-detail-summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr);
  gap: 16px;
  align-items: start;
}

#leadDetailView .lead-detail-summary {
  position: static;
  display: grid;
  gap: 14px;
  max-height: none;
  overflow: visible;
  padding: 0;
}

#leadDetailView .lead-detail-summary-rail {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 82px;
  min-width: 0;
}

#leadDetailView .lead-summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #dfe7ed;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

#leadDetailView .lead-summary-metric {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 92px;
  padding: 14px 16px;
  border-right: 1px solid #e7edf2;
}

#leadDetailView .lead-summary-metric:last-child {
  border-right: 0;
}

#leadDetailView .lead-summary-metric > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #667c8f;
  font-size: 11px;
  font-weight: 500;
}

#leadDetailView .lead-summary-metric > span i {
  color: #5c7890;
}

#leadDetailView .lead-summary-metric > strong {
  color: #173650;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#leadDetailView .lead-summary-metric > strong.is-stage {
  color: #07836f;
}

#leadDetailView .lead-summary-metric > small {
  color: #8a9aa8;
  font-size: 10.5px;
}

#leadDetailView .lead-summary-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#leadDetailView .lead-info-card {
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid #dfe7ed;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

#leadDetailView .lead-info-card.is-wide {
  grid-column: 1 / -1;
}

#leadDetailView .lead-info-card-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  padding: 10px 14px;
  border-bottom: 1px solid #e7edf2;
}

#leadDetailView .lead-info-card-heading i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #eef6fd;
  color: #1677c8;
  font-size: 13px;
}

#leadDetailView .lead-info-card-heading h3 {
  margin: 0;
  color: #173650;
  font-size: 13.5px;
  font-weight: 600;
}

#leadDetailView .lead-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 6px 14px 10px;
}

#leadDetailView .lead-info-row {
  display: grid;
  grid-template-columns: minmax(112px, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: baseline;
  min-width: 0;
  padding: 9px 8px 9px 0;
  border-bottom: 1px solid #eef2f5;
}

#leadDetailView .lead-info-row:nth-last-child(-n+2) {
  border-bottom-color: transparent;
}

#leadDetailView .lead-info-row.is-full {
  grid-column: 1 / -1;
}

#leadDetailView .lead-info-row dt,
#leadDetailView .lead-info-row dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

#leadDetailView .lead-info-row dt {
  color: #6b8194;
  font-size: 11.5px;
  font-weight: 400;
}

#leadDetailView .lead-info-row dd {
  color: #223e57;
  font-size: 12.5px;
  font-weight: 500;
}

#leadDetailView .lead-info-row dd.is-muted {
  color: #98a6b2;
  font-weight: 400;
}

#leadDetailView .lead-additional-details {
  border: 1px solid #dfe7ed;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

#leadDetailView .lead-additional-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 11px 14px;
  color: #28465f;
  cursor: pointer;
  list-style: none;
}

#leadDetailView .lead-additional-details > summary::-webkit-details-marker {
  display: none;
}

#leadDetailView .lead-additional-details > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
}

#leadDetailView .lead-additional-details > summary i {
  color: #1677c8;
}

#leadDetailView .lead-additional-details > summary small {
  color: #8b9aa7;
  font-size: 10.5px;
}

#leadDetailView .lead-additional-details[open] > summary {
  border-bottom: 1px solid #e7edf2;
  background: #fbfcfd;
}

#leadDetailView .lead-info-list-additional {
  padding-top: 8px;
}

#leadDetailView .lead-detail-summary-rail .followup-guide-card {
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-color: #d6e8e5 !important;
  border-radius: 10px !important;
  background: #f7fbfa !important;
  box-shadow: none !important;
}

#leadDetailView .lead-detail-summary-rail .followup-guide-card > div:first-child > span {
  color: #07836f;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#leadDetailView .lead-detail-summary-rail .followup-guide-card h3 {
  margin: 4px 0 5px;
  color: #183e38;
  font-size: 16px;
}

#leadDetailView .lead-detail-summary-rail .followup-guide-card p,
#leadDetailView .lead-detail-summary-rail .followup-guide-card small {
  font-size: 12px;
  line-height: 1.55;
}

#leadDetailView .lead-detail-summary-rail .followup-guide-meta {
  justify-items: stretch;
  gap: 8px;
  text-align: left;
  padding-top: 12px;
  border-top: 1px solid #dcebe8;
}

#leadDetailView .lead-detail-summary-rail .followup-guide-meta > small,
#leadDetailView .lead-detail-summary-rail .followup-guide-meta > strong,
#leadDetailView .lead-detail-summary-rail .followup-guide-meta > span {
  display: none;
}

#leadDetailView .lead-detail-summary-rail .followup-guide-meta .primary-button,
#leadDetailView .lead-detail-summary-rail .followup-guide-meta .ghost-button {
  width: 100%;
  min-height: 36px;
  justify-content: center;
}

#leadDetailView .lead-workstream-card,
#leadDetailView .lead-activity-panel {
  border: 1px solid #dfe7ed !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#leadDetailView .lead-detail-timeline,
#leadDetailView .lead-comments-panel,
#leadDetailView .lead-activity-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

#leadDetailView .lead-workstream-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6edf2;
}

#leadDetailView .lead-workstream-heading-copy {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

#leadDetailView .lead-workstream-heading-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #edf8f6;
  color: #078a81;
  font-size: 14px;
}

#leadDetailView .lead-workstream-heading h2 {
  font-size: 14.5px;
  font-weight: 600;
}

#leadDetailView .lead-workstream-heading p {
  margin-top: 2px;
  font-size: 11.5px;
}

#leadDetailView .lead-section-helper {
  flex: 0 0 auto;
  color: #8a9aa8;
  font-size: 10.5px;
  white-space: nowrap;
}

#leadDetailView .detail-history-list {
  display: grid;
  gap: 9px;
  max-height: 58vh;
  padding: 0 5px 0 0;
}

#leadDetailView .detail-history-item {
  display: grid;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid #e5ebf0;
  border-radius: 9px;
  background: #fbfcfd;
}

#leadDetailView .detail-history-item .history-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#leadDetailView .detail-history-item .history-item-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#leadDetailView .detail-history-item .history-item-head strong {
  color: #27455e;
  font-size: 12.5px;
}

#leadDetailView .detail-history-item .history-item-head small {
  color: #96a4af;
  font-size: 10.5px;
}

#leadDetailView .detail-history-item p {
  margin: 0;
  color: #284157;
  font-size: 12.5px;
  line-height: 1.5;
}

#leadDetailView .detail-history-item > small {
  color: #7b8e9e;
  font-size: 10.5px;
}

#leadDetailView .lead-comments-panel {
  grid-template-rows: auto auto auto;
}

#leadDetailView .lead-comment-list {
  max-height: 48vh;
  padding-right: 5px;
}

#leadDetailView .lead-comment-form {
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid #e6edf2;
}

#leadDetailView .lead-activity-list {
  display: grid;
  gap: 0;
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 5px;
}

#leadDetailView .lead-activity-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 13px 4px;
  border-bottom: 1px solid #edf1f4;
}

#leadDetailView .lead-activity-item:last-child {
  border-bottom: 0;
}

#leadDetailView .lead-activity-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #eef5fb;
  color: #3778ae;
  font-size: 13px;
}

#leadDetailView .lead-activity-item.tone-followup .lead-activity-icon {
  background: #edf8f6;
  color: #078a81;
}

#leadDetailView .lead-activity-item.tone-comment .lead-activity-icon {
  background: #f3f0fb;
  color: #7258a8;
}

#leadDetailView .lead-activity-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#leadDetailView .lead-activity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#leadDetailView .lead-activity-head > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

#leadDetailView .lead-activity-head strong {
  color: #25445d;
  font-size: 12.5px;
  font-weight: 600;
}

#leadDetailView .lead-activity-head span,
#leadDetailView .lead-activity-head time,
#leadDetailView .lead-activity-meta small {
  color: #8394a2;
  font-size: 10.5px;
}

#leadDetailView .lead-activity-head time {
  flex: 0 0 auto;
  white-space: nowrap;
}

#leadDetailView .lead-activity-copy > p {
  margin: 0;
  color: #455f73;
  font-size: 12px;
  line-height: 1.5;
}

#leadDetailView .lead-activity-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

@media (max-width: 1180px) {
  #leadDetailView .lead-detail-summary-layout {
    grid-template-columns: 1fr;
  }

  #leadDetailView .lead-detail-summary-rail {
    position: static;
  }

  #leadDetailView .lead-detail-summary-rail .followup-guide-card {
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  }

  #leadDetailView .lead-detail-summary-rail .followup-guide-meta {
    padding-top: 0;
    padding-left: 14px;
    border-top: 0;
    border-left: 1px solid #dcebe8;
  }
}

@media (max-width: 900px) {
  #leadDetailView .lead-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #leadDetailView .lead-summary-metric:nth-child(2) {
    border-right: 0;
  }

  #leadDetailView .lead-summary-metric:nth-child(-n+2) {
    border-bottom: 1px solid #e7edf2;
  }

  #leadDetailView .lead-summary-card-grid {
    grid-template-columns: 1fr;
  }

  #leadDetailView .lead-info-card.is-wide {
    grid-column: auto;
  }

  #leadDetailView .lead-detail-summary-rail .followup-guide-card {
    grid-template-columns: 1fr;
  }

  #leadDetailView .lead-detail-summary-rail .followup-guide-meta {
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid #dcebe8;
    border-left: 0;
  }
}

@media (max-width: 720px) {
  #leadDetailView .lead-detail-page-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  #leadDetailView .lead-detail-header-main {
    align-items: flex-start;
  }

  #leadDetailView .lead-detail-identity h2 {
    font-size: 18px;
  }

  #leadDetailView .lead-detail-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #leadDetailView .lead-detail-header-actions button {
    width: 100%;
  }

  #leadDetailView .lead-detail-tabs {
    gap: 16px;
    padding-inline: 12px;
  }

  #leadDetailView .lead-detail-tab-panels {
    padding: 12px;
  }

  #leadDetailView .lead-summary-metrics {
    grid-template-columns: 1fr;
  }

  #leadDetailView .lead-summary-metric,
  #leadDetailView .lead-summary-metric:nth-child(2) {
    min-height: 72px;
    border-right: 0;
    border-bottom: 1px solid #e7edf2;
  }

  #leadDetailView .lead-summary-metric:last-child {
    border-bottom: 0;
  }

  #leadDetailView .lead-info-list,
  #leadDetailView .lead-info-list-additional {
    grid-template-columns: 1fr;
  }

  #leadDetailView .lead-info-row,
  #leadDetailView .lead-info-row:nth-last-child(-n+2) {
    grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr);
    border-bottom: 1px solid #eef2f5;
  }

  #leadDetailView .lead-info-row:last-child {
    border-bottom: 0;
  }

  #leadDetailView .lead-workstream-heading-row,
  #leadDetailView .lead-activity-head {
    align-items: flex-start;
  }

  #leadDetailView .lead-section-helper {
    display: none;
  }

  #leadDetailView .detail-history-list,
  #leadDetailView .lead-comment-list,
  #leadDetailView .lead-activity-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 460px) {
  #leadDetailView .lead-detail-header-main {
    display: grid;
    grid-template-columns: 1fr;
  }

  #leadDetailView .lead-detail-back {
    width: max-content;
  }

  #leadDetailView .lead-detail-header-actions {
    grid-template-columns: 1fr;
  }

  #leadDetailView .lead-info-row,
  #leadDetailView .lead-info-row:nth-last-child(-n+2) {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  #leadDetailView .lead-additional-details > summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}