@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap");

* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

:root {
  --agile-sidebar-width: 234px;
  --agile-mobile-nav-stack: 122px;
  --crm-brand-font: "Aptos Display", "Segoe UI Variable Display", "Trebuchet MS", system-ui, sans-serif;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #edf2ff;
  color: #1f2937;
  padding-top: 0;
  padding-left: var(--agile-sidebar-width);
}

.hidden {
  display: none !important;
}

.agile-logo-mini {
  position: absolute;
  left: 12px;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.agile-top-left,
.agile-top-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.agile-top-right {
  justify-content: flex-end;
}

.agile-cloud {
  font-size: 16px;
  opacity: 0.95;
}

.agile-icon {
  font-size: 12px;
  opacity: 0.85;
  color: #eef2ff;
  position: relative;
}

.agile-brand {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.agile-badge-dot {
  min-width: 20px;
  height: 14px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.agile-icon.with-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #84cc16;
  position: absolute;
  top: -3px;
  right: -4px;
}

.agile-mini-link {
  font-size: 12px;
  color: #f2f4ff;
}

.agile-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f8fafc;
  color: #3c4664;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.agile-nav {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #0b1636;
  color: #c7d2fe;
  border-right: 1px solid #223d7c;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--agile-sidebar-width);
  z-index: 1001;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.agile-brand-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px 14px;
  margin: 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.agile-brand-link:hover {
  background: rgba(30, 64, 175, 0.25);
  box-shadow: inset 0 -1px 0 rgba(99, 102, 241, 0.35);
}

.agile-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Diamond logo: crisp edge; subtle lift only (glow lives in the SVG) */
.agile-brand-logo svg,
.agile-brand-logo img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  overflow: visible;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}

@media (prefers-reduced-motion: reduce) {
  .agile-brand-logo svg,
  .agile-brand-logo img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  }
}

.agile-brand-text {
  font-family: var(--crm-brand-font);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #f1f5f9;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.agile-nav-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 11px 9px 14px;
  font-size: 13.5px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.agile-nav-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.agile-nav-inner .active {
  color: #ffffff;
  font-weight: 700;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 9px;
  padding: 8px 11px;
  box-shadow: 0 7px 18px rgba(79, 70, 229, 0.3);
  display: flex;
  align-items: center;
  gap: 9px;
}

.agile-nav-inner a {
  color: #dbeafe;
  text-decoration: none;
  border: 1px solid #2a4d95;
  border-radius: 9px;
  padding: 8px 11px;
  background: #142852;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}

.agile-nav-icon {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  opacity: 0.92;
  color: inherit;
  fill: currentColor;
}

.login-redirect-link {
  color: #c62828;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}

.login-redirect-link:hover,
.login-redirect-link:focus {
  color: #8b0000;
  text-decoration-thickness: 2px;
  outline: none;
}

.agile-nav-inner .agile-nav-link-placeholder {
  color: #dbeafe;
  text-decoration: none;
  border: 1px solid #2a4d95;
  border-radius: 9px;
  padding: 8px 11px;
  background: #142852;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}

.agile-nav-inner a:hover {
  color: #ffffff;
  border-color: #4f46e5;
  background: #1d3b78;
}

.container {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 12px 16px 20px;
  min-height: 0;
}

@media (max-width: 980px) {
  body {
    padding-left: 0;
    padding-top: var(--agile-mobile-nav-stack);
  }

  .agile-nav {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #223d7c;
  }

  .agile-brand-link {
    padding: 12px 12px 10px;
  }

  .agile-brand-text {
    font-size: 1.4rem;
    letter-spacing: 0.04em;
  }

  .agile-nav-inner {
    flex-direction: row;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    padding: 8px 9px 10px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .agile-nav-inner .active,
  .agile-nav-inner a {
    white-space: nowrap;
  }
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0;
}

.topbar h1 {
  font-size: 34px;
  font-weight: 300;
  margin: 0;
  color: #4b5563;
}

#settingsBackBtn,
#backToContactsBtn {
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

#settingsBackBtn:hover,
#backToContactsBtn:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

#backToSummaryBtn {
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  border-radius: 4px;
}

#backToSummaryBtn:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

#refreshBtn {
  width: auto;
  min-width: 64px;
  padding: 4px 8px;
  font-size: 11px;
  margin-top: 0;
}

.page-contacts-leads #refreshBtn {
  min-width: 78px;
  padding: 7px 14px;
  font-size: 13px;
}

#homeRefreshBtn {
  width: auto;
  min-width: 58px;
  padding: 3px 8px;
  font-size: 11px;
  margin-top: 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#homeRefreshBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.contact-topbar-actions,
.videos-topbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

#videosRefreshBtn {
  width: auto;
  min-width: 52px;
  padding: 3px 10px;
  font-size: 11px;
  margin-top: 0;
  line-height: 1.25;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#videosRefreshBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.forms-topbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.landing-topbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.contact-topbar-actions > *,
.videos-topbar-actions > *,
.forms-topbar-actions > *,
.landing-topbar-actions > * {
  flex: 0 0 auto;
}

#landingPagesRefreshBtn {
  width: auto;
  min-width: 52px;
  padding: 3px 10px;
  font-size: 11px;
  margin-top: 0;
  line-height: 1.25;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#landingPagesRefreshBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

#formsRefreshBtn {
  width: auto;
  min-width: 52px;
  padding: 3px 10px;
  font-size: 11px;
  margin-top: 0;
  line-height: 1.25;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#formsRefreshBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

#backToContactsBtn {
  width: auto;
  min-width: 130px;
  padding: 6px 10px;
  font-size: 12px;
  margin-top: 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#backToContactsBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.crm-logout-btn {
  width: auto !important;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 10px;
  margin-top: 0;
  border: 1px solid #9ca3af;
  background: #f3f4f6;
  color: #000000;
}

.crm-logout-btn:hover {
  background: #e5e7eb;
  border-color: #6b7280;
}

.panel {
  background: #ffffff;
  border-radius: 14px;
  padding: 10px;
  margin-top: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border: 1px solid #dbe4f6;
}

.compact-panel {
  background: #f3f5f9;
}

.filter-toolbar {
  justify-content: flex-end;
}

.page-contacts-leads .filter-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 6px;
}

.page-contacts-leads .filter-toolbar > * {
  flex: 0 0 auto;
}

.page-contacts-leads .filter-toolbar #searchInput {
  flex: 1 1 220px;
  min-width: 150px;
}

.filter-toolbar #searchInput {
  max-width: 280px;
}

.page-contacts-leads .filter-toolbar #searchInput {
  max-width: 240px;
  min-height: 42px;
  padding: 8px 12px;
  font-size: 15px;
  border-radius: 12px;
}

.page-contacts-leads .toolbar-label {
  font-size: 15px;
  font-weight: 700;
  padding-right: 2px;
}

.filter-toolbar #searchField {
  max-width: 190px;
}

.filter-toolbar #statusFilter,
.filter-toolbar #contactsFilterSelect {
  max-width: 145px;
  min-width: 118px;
  height: 36px;
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

.filter-toolbar #statusFilter {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

.filter-toolbar #contactsFilterSelect {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  border-color: #d97706;
}

.filter-toolbar #statusFilter option,
.filter-toolbar #contactsFilterSelect option {
  color: #0f172a;
  background: #ffffff;
}

#applyFiltersBtn,
#clearSearchBtn,
#addContactTopBtn,
#twilioTopBtn,
#dripTopBtn,
#downloadTemplateBtn,
#importCsvBtn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

.filter-toolbar #applyFiltersBtn,
.filter-toolbar #clearSearchBtn,
.filter-toolbar #addContactTopBtn,
.filter-toolbar #twilioTopBtn,
.filter-toolbar #dripTopBtn,
.filter-toolbar #downloadTemplateBtn,
.filter-toolbar #importCsvBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  margin-top: 4px;
  min-width: 76px;
  height: 32px;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.page-contacts-leads .filter-toolbar #applyFiltersBtn,
.page-contacts-leads .filter-toolbar #clearSearchBtn,
.page-contacts-leads .filter-toolbar #addContactTopBtn,
.page-contacts-leads .filter-toolbar #twilioTopBtn,
.page-contacts-leads .filter-toolbar #dripTopBtn,
.page-contacts-leads .filter-toolbar #downloadTemplateBtn,
.page-contacts-leads .filter-toolbar #importCsvBtn {
  min-width: 92px;
  height: 40px;
  padding: 7px 12px;
  font-size: 13px;
}

.page-contacts-leads .filter-toolbar #applyFiltersBtn {
  min-width: 94px;
}

.page-contacts-leads .filter-toolbar #addContactTopBtn {
  min-width: 128px;
}

.page-contacts-leads .filter-toolbar #downloadTemplateBtn {
  min-width: 122px;
}

.page-contacts-leads .filter-toolbar #statusFilter,
.page-contacts-leads .filter-toolbar #contactsFilterSelect {
  min-width: 126px;
  height: 40px;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 12px;
  margin-top: 4px;
}

@media (max-width: 1200px) {
  .page-contacts-leads .filter-toolbar {
    gap: 5px;
  }

  .page-contacts-leads .filter-toolbar #searchInput {
    flex-basis: 220px;
    min-width: 170px;
    max-width: 240px;
  }

  .page-contacts-leads .filter-toolbar #statusFilter,
  .page-contacts-leads .filter-toolbar #contactsFilterSelect {
    min-width: 112px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .page-contacts-leads .filter-toolbar #applyFiltersBtn,
  .page-contacts-leads .filter-toolbar #clearSearchBtn,
  .page-contacts-leads .filter-toolbar #addContactTopBtn,
  .page-contacts-leads .filter-toolbar #twilioTopBtn,
  .page-contacts-leads .filter-toolbar #dripTopBtn,
  .page-contacts-leads .filter-toolbar #downloadTemplateBtn,
  .page-contacts-leads .filter-toolbar #importCsvBtn {
    min-width: 84px;
    height: 36px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .page-contacts-leads .filter-toolbar #addContactTopBtn {
    min-width: 116px;
  }

  .page-contacts-leads .filter-toolbar #downloadTemplateBtn {
    min-width: 110px;
  }
}

@media (max-width: 1080px) {
  .page-contacts-leads .filter-toolbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
  }

  .page-contacts-leads .filter-toolbar > * {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .page-contacts-leads .toolbar-label {
    display: none;
  }

  .page-contacts-leads .filter-toolbar #searchInput {
    flex: 1 1 180px;
    min-width: 140px;
    max-width: 200px;
    min-height: 34px;
    padding: 5px 9px;
    font-size: 11px;
  }

  .page-contacts-leads .filter-toolbar #applyFiltersBtn,
  .page-contacts-leads .filter-toolbar #clearSearchBtn,
  .page-contacts-leads .filter-toolbar #statusFilter,
  .page-contacts-leads .filter-toolbar #contactsFilterSelect,
  .page-contacts-leads .filter-toolbar #addContactTopBtn,
  .page-contacts-leads .filter-toolbar #twilioTopBtn,
  .page-contacts-leads .filter-toolbar #dripTopBtn,
  .page-contacts-leads .filter-toolbar #downloadTemplateBtn,
  .page-contacts-leads .filter-toolbar #importCsvBtn {
    flex: 0 0 auto;
    min-width: 74px;
    height: 34px;
    padding: 5px 8px;
    font-size: 10px;
  }

  .page-contacts-leads .filter-toolbar #statusFilter,
  .page-contacts-leads .filter-toolbar #contactsFilterSelect {
    min-width: 100px;
    padding: 5px 8px;
    font-size: 10px;
  }

  .page-contacts-leads .filter-toolbar #addContactTopBtn {
    min-width: 102px;
  }

  .page-contacts-leads .filter-toolbar #downloadTemplateBtn {
    min-width: 98px;
  }
}

@media (max-width: 900px) {
  .page-contacts-leads .filter-toolbar {
    gap: 3px;
  }

  .page-contacts-leads .filter-toolbar #searchInput {
    flex-basis: 150px;
    min-width: 120px;
    max-width: 170px;
    height: 32px;
    min-height: 32px;
    padding: 4px 8px;
    font-size: 10px;
  }

  .page-contacts-leads .filter-toolbar #statusFilter,
  .page-contacts-leads .filter-toolbar #contactsFilterSelect {
    min-width: 86px;
    height: 32px;
    padding: 4px 7px;
    font-size: 10px;
  }

  .page-contacts-leads .filter-toolbar #applyFiltersBtn,
  .page-contacts-leads .filter-toolbar #clearSearchBtn,
  .page-contacts-leads .filter-toolbar #addContactTopBtn,
  .page-contacts-leads .filter-toolbar #twilioTopBtn,
  .page-contacts-leads .filter-toolbar #dripTopBtn,
  .page-contacts-leads .filter-toolbar #downloadTemplateBtn,
  .page-contacts-leads .filter-toolbar #importCsvBtn {
    min-width: 34px;
    width: 34px;
    height: 32px;
    padding: 0;
    font-size: 0;
    line-height: 1;
    gap: 0;
  }

  .page-contacts-leads .filter-toolbar #addContactTopBtn::before {
    margin: 0;
  }

  .page-contacts-leads .filter-toolbar #applyFiltersBtn::before,
  .page-contacts-leads .filter-toolbar #clearSearchBtn::before,
  .page-contacts-leads .filter-toolbar #twilioTopBtn::before,
  .page-contacts-leads .filter-toolbar #dripTopBtn::before {
    font-size: 12px;
  }

  .page-contacts-leads .filter-toolbar #downloadTemplateBtn::before {
    content: "⬇";
    font-size: 12px;
  }

  .page-contacts-leads .filter-toolbar #importCsvBtn::before {
    content: "⤴";
    font-size: 12px;
  }
}

.filter-toolbar #applyFiltersBtn::before {
  content: "🔍";
  font-size: 12px;
}

.filter-toolbar #clearSearchBtn::before {
  content: "✖";
  font-size: 11px;
}

.filter-toolbar #twilioTopBtn::before {
  content: "☎";
  font-size: 12px;
}

.filter-toolbar #dripTopBtn::before {
  content: "💧";
  font-size: 12px;
}

.filter-toolbar #downloadTemplateBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 108px;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  border: 1px solid #4338ca;
  border-radius: 10px;
  color: #ffffff;
  font-size: 11px;
}

.filter-toolbar #twilioTopBtn {
  min-width: 64px;
  background: linear-gradient(135deg, #0f766e, #0d9488);
  border-color: #0f766e;
}

.filter-toolbar #dripTopBtn {
  min-width: 64px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-color: #6d28d9;
}

.filter-toolbar #importCsvBtn {
  min-width: 86px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-color: #ea580c;
}

.filter-toolbar #applyFiltersBtn {
  min-width: 74px;
}

.filter-toolbar #clearSearchBtn {
  min-width: 68px;
  background: linear-gradient(135deg, #334155, #1f2937);
  border-color: #1f2937;
  color: #ffffff;
}

.filter-toolbar #clearSearchBtn:hover {
  color: #ffffff;
}

.filter-toolbar #addContactTopBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 124px;
  height: 34px;
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid #5b4bc4;
  background: linear-gradient(135deg, #6b5fe6 0%, #4f46cf 100%);
  box-shadow: 0 8px 18px rgba(79, 70, 207, 0.26);
  font-size: 12px;
  font-weight: 700;
}

.filter-toolbar #addContactTopBtn::before {
  content: "+";
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.filter-toolbar #addContactTopBtn:hover {
  background: linear-gradient(135deg, #5d51de 0%, #4338ca 100%);
  border-color: #4c40b6;
  box-shadow: 0 10px 22px rgba(67, 56, 202, 0.34);
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.toolbar-label {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  padding-right: 4px;
}

input,
select,
textarea,
button {
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid #cdd8ee;
  border-radius: 10px;
  font-size: 12px;
}

button {
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: 1px solid #1d4ed8;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  transition:
    box-shadow 0.16s ease,
    transform 0.12s ease;
}

button:hover {
  box-shadow: 0 7px 14px rgba(15, 23, 42, 0.2);
  transform: translateY(-1px);
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  border-color: #1e40af;
}

button:active {
  transform: translateY(0);
}

/* Semantic button palette: neutral / primary / communication / campaign */
#clearSearchBtn,
.clear-filters-btn,
.inline-cancel,
#cancelEditBtn,
.agile-cancel-btn,
#backToSummaryBtn {
  background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
  color: #1f2937;
  border-color: #94a3b8;
}

#clearSearchBtn:hover,
.clear-filters-btn:hover,
.inline-cancel:hover,
#cancelEditBtn:hover,
.agile-cancel-btn:hover,
#backToSummaryBtn:hover {
  background: linear-gradient(135deg, #d1d5db, #94a3b8);
  color: #0f172a;
  border-color: #64748b;
}

#twilioTopBtn,
#twilioSmsPopupForm button[type="submit"],
#twilioModal .twilio-call-column .twilio-call-actions button[type="submit"],
#twilioCallPopupForm .twilio-call-actions button[type="submit"],
#contactSummaryCallBtn,
#contactPageCallBtn,
#contactSummarySmsBtn,
#contactPageSmsBtn {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  border-color: #0f766e;
  color: #ffffff;
}

#twilioTopBtn:hover,
#twilioSmsPopupForm button[type="submit"]:hover,
#twilioModal .twilio-call-column .twilio-call-actions button[type="submit"]:hover,
#twilioCallPopupForm .twilio-call-actions button[type="submit"]:hover,
#contactSummaryCallBtn:hover,
#contactPageCallBtn:hover,
#contactSummarySmsBtn:hover,
#contactPageSmsBtn:hover {
  background: linear-gradient(135deg, #0f766e, #0f766e);
  border-color: #115e59;
}

#dripTopBtn,
#addCampaignCategoryBtn,
#addCampaignCategorySidebarBtn,
#addTagRuleBtn,
#addStepBtn,
#contactSummaryAddCampaignBtn,
#contactPageAddCampaignBtn,
button.campaign-inline-edit {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-color: #6d28d9;
  color: #ffffff;
}

#dripTopBtn:hover,
#addCampaignCategoryBtn:hover,
#addCampaignCategorySidebarBtn:hover,
#addTagRuleBtn:hover,
#addStepBtn:hover,
#contactSummaryAddCampaignBtn:hover,
#contactPageAddCampaignBtn:hover,
button.campaign-inline-edit:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6);
  border-color: #5b21b6;
}

/* Keep navigation/back and editor utility controls neutral */
#backToContactsBtn,
#settingsBackBtn,
#emailCancelBtn,
#cancelTemplateEditBtn,
#landingPagesCancelEditBtn,
#contactHistoryActionPinBtn,
#contactHistoryActionStarBtn,
#prevPageBtn,
#nextPageBtn,
#emailBodyBoldBtn,
#emailBodyItalicBtn,
#emailBodyUnderlineBtn,
#emailBodyAlignLeftBtn,
#emailBodyAlignCenterBtn,
#emailBodyAlignRightBtn,
#emailBodyLinkBtn,
#emailBodyInsertPhotoBtn,
#emailBodyInsertGraphicUrlBtn,
#emailBodyClearFormatBtn,
#emailBodyAddImageUrlBtn,
#templateBodyBoldBtn,
#templateBodyItalicBtn,
#templateBodyUnderlineBtn,
#templateBodyAlignLeftBtn,
#templateBodyAlignCenterBtn,
#templateBodyAlignRightBtn,
#templateBodyLinkBtn,
#templateBodyInsert2ColBtn,
#templateBodyInsert3ColBtn,
#templateBodyInsertGridBtn,
#templateBodyInsertPhotoBtn,
#templateBodyInsertGraphicUrlBtn,
#templateBodyClearFormatBtn,
#templateBodyAddImageUrlBtn,
#signatureBoldBtn,
#signatureItalicBtn,
#signatureUnderlineBtn,
#signatureAlignLeftBtn,
#signatureAlignCenterBtn,
#signatureAlignRightBtn,
#signatureLinkBtn,
#signatureInsertPhotoBtn,
#signatureInsertGraphicUrlBtn,
#signatureClearFormatBtn,
#signatureAddImageUrlBtn {
  background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
  color: #1f2937;
  border-color: #94a3b8;
}

#backToContactsBtn:hover,
#settingsBackBtn:hover,
#emailCancelBtn:hover,
#cancelTemplateEditBtn:hover,
#landingPagesCancelEditBtn:hover,
#contactHistoryActionPinBtn:hover,
#contactHistoryActionStarBtn:hover,
#prevPageBtn:hover,
#nextPageBtn:hover,
#emailBodyBoldBtn:hover,
#emailBodyItalicBtn:hover,
#emailBodyUnderlineBtn:hover,
#emailBodyAlignLeftBtn:hover,
#emailBodyAlignCenterBtn:hover,
#emailBodyAlignRightBtn:hover,
#emailBodyLinkBtn:hover,
#emailBodyInsertPhotoBtn:hover,
#emailBodyInsertGraphicUrlBtn:hover,
#emailBodyClearFormatBtn:hover,
#emailBodyAddImageUrlBtn:hover,
#templateBodyBoldBtn:hover,
#templateBodyItalicBtn:hover,
#templateBodyUnderlineBtn:hover,
#templateBodyAlignLeftBtn:hover,
#templateBodyAlignCenterBtn:hover,
#templateBodyAlignRightBtn:hover,
#templateBodyLinkBtn:hover,
#templateBodyInsert2ColBtn:hover,
#templateBodyInsert3ColBtn:hover,
#templateBodyInsertGridBtn:hover,
#templateBodyInsertPhotoBtn:hover,
#templateBodyInsertGraphicUrlBtn:hover,
#templateBodyClearFormatBtn:hover,
#templateBodyAddImageUrlBtn:hover,
#signatureBoldBtn:hover,
#signatureItalicBtn:hover,
#signatureUnderlineBtn:hover,
#signatureAlignLeftBtn:hover,
#signatureAlignCenterBtn:hover,
#signatureAlignRightBtn:hover,
#signatureLinkBtn:hover,
#signatureInsertPhotoBtn:hover,
#signatureInsertGraphicUrlBtn:hover,
#signatureClearFormatBtn:hover,
#signatureAddImageUrlBtn:hover {
  background: linear-gradient(135deg, #d1d5db, #94a3b8);
  color: #0f172a;
  border-color: #64748b;
}

/* Communication actions not covered by Twilio popup selectors */
#contactModalSmsBtn,
#contactModalCallBtn,
#contactTwilioEndCallBtn {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  border-color: #0f766e;
  color: #ffffff;
}

#contactModalSmsBtn:hover,
#contactModalCallBtn:hover,
#contactTwilioEndCallBtn:hover {
  background: linear-gradient(135deg, #0f766e, #115e59);
  border-color: #115e59;
}

/* Preserve dark sidebar button style in drip dashboard */
.drip-sidebar #backToContactsBtn,
.drip-sidebar #backToContactsBtn:hover {
  background: #142852;
  color: #dbeafe;
  border-color: #2a4d95;
  box-shadow: none;
  transform: none;
}

.table-action-btn {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
}

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

.contacts-header h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 300;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crumb-sep {
  color: #98a2b3;
  margin: 0 4px;
}

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

.contacts-summary {
  color: #717b8e;
  font-size: 12px;
}

.contacts-quick-filter-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

.contacts-quick-filter-inline label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

#quickFilterField,
#quickFilterDropdown,
.tags-filter-term.tags-filter-value-box {
  margin-top: 0;
  padding: 6px 10px;
  font-size: 13px;
}

#statusHeaderDropdown,
#createdDateFrom,
#createdDateTo {
  margin-top: 0;
  padding: 4px 8px;
  font-size: 12px;
}

#quickFilterField,
#quickFilterDropdown {
  width: auto;
  min-width: 150px;
}

.contacts-quick-filter-inline .tags-filter-value-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

.tags-filter-value-box {
  /* Same minimum width as #quickFilterDropdown */
  min-width: 150px;
  max-width: 320px;
}

.tags-filter-term {
  width: auto;
  min-width: 150px;
  max-width: 320px;
  box-sizing: border-box;
}

#statusHeaderDropdown {
  width: auto;
  min-width: 150px;
}

.contacts-date-range-inline {
  gap: 4px;
}

.contacts-date-range-sep {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

#createdDateFrom,
#createdDateTo {
  width: auto;
  min-width: 140px;
}

.tags-filter-term:disabled {
  background: #e2e8f0;
  color: #64748b;
}

.contacts-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.active-filters-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  display: inline-block;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef3ff;
  color: #274690;
}

.clear-filters-btn {
  width: auto;
  margin-top: 0;
  padding: 6px 10px;
  background: #64748b;
  color: #fff;
}

.clear-filters-btn:hover {
  background: #475569;
  color: #fff;
}

.sort-meta {
  font-size: 12px;
  color: #6b7280;
}

.contacts-layout {
  display: block;
}

.contacts-main {
  min-width: 0;
}

/* Slightly larger typography in Contacts Workspace section */
.contacts-layout-panel .contacts-header h2 {
  font-size: 32px;
}

.contacts-layout-panel table {
  font-size: 14px;
}

.contacts-layout-panel thead th {
  font-size: 13px;
}

.contacts-sort-th {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.contacts-sort-th:hover {
  text-decoration: underline;
}

.contacts-sort-th .contacts-sort-arrow {
  font-size: 11px;
  opacity: 0.85;
  min-width: 0.9em;
  display: inline-block;
}

.contacts-sort-th.is-active {
  font-weight: 600;
}

.contacts-layout-panel .contact-name {
  font-size: 14px;
}

.contacts-layout-panel .contact-sub {
  font-size: 14px;
}

.contacts-layout-panel .avatar {
  font-size: 14px;
}

.contacts-layout-panel .tag-chip,
.contacts-layout-panel .status-pill,
.contacts-layout-panel .outcome-pill {
  font-size: 11px;
}

.contacts-layout-panel .contacts-summary,
.contacts-layout-panel .sort-meta,
.contacts-layout-panel .contacts-quick-filter-inline label {
  font-size: 14px;
}

.contacts-layout-panel #quickFilterDropdown,
.contacts-layout-panel #statusHeaderDropdown,
.contacts-layout-panel #createdDateFrom,
.contacts-layout-panel #createdDateTo {
  font-size: 14px;
}

.contacts-layout-panel .filter-chip {
  font-size: 13px;
}

.contacts-layout-panel .pagination-bar .hint {
  font-size: 14px;
}

.contacts-layout-panel .bulk-actions-label {
  font-size: 16px;
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  position: static;
  align-items: center;
  background: #1e5fbf;
  border: 1px solid #1a54a8;
  border-radius: 4px;
  padding: 8px 10px;
}

.bulk-actions button {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  background: #ffffff;
  color: #1e5fbf;
  border-color: #ffffff;
}

.bulk-actions button:hover {
  background: #eef3ff;
  color: #1e5fbf;
}

.bulk-actions-label {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  align-self: center;
}

.bulk-actions .hint,
.bulk-actions #selectedCount {
  color: rgba(255, 255, 255, 0.92);
}

#bulkActionSelect {
  width: auto;
  min-width: 220px;
  margin-top: 0;
  background: #ffffff;
  color: #1f2937;
  border-color: #ffffff;
  font-size: 15px;
  padding: 8px 10px;
}

#applyBulkActionBtn {
  width: auto;
  margin-top: 0;
  min-width: 92px;
  padding: 10px 18px;
  font-size: 14px;
}

button.danger {
  background: #b71c1c;
  color: #ffffff;
}

button.danger:hover {
  background: #8f1515;
}

.basic-info-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.clickable-contact {
  cursor: pointer;
}

#contactsBody tr {
  cursor: pointer;
}

#contactsBody tr input,
#contactsBody tr button,
#contactsBody tr a,
#contactsBody tr select {
  cursor: auto;
}

.clickable-contact:hover .contact-name {
  text-decoration: underline;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eefc;
  color: #1c3f95;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 34px;
}

.contact-name {
  font-weight: 700;
  margin-bottom: 1px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-sub {
  font-size: 12px;
  color: #8a93a6;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-chip {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #6b7280;
  margin: 2px 4px 2px 0;
}

.status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
}

/* Contact workspace status column — label shades */
.status-new {
  background: #dbeafe;
  color: #1d4ed8;
}

.status-approved {
  background: #dcfce7;
  color: #15803d;
}

.status-pending {
  background: #ede9fe;
  color: #6d28d9;
}

.status-aps {
  background: #ffedd5;
  color: #c2410c;
}

.status-referred {
  background: #fce7f3;
  color: #9f1239;
}

.status-declined {
  background: #fee2e2;
  color: #b91c1c;
}

.status-closed {
  background: #fee2e2;
  color: #b91c1c;
}

.status-sold {
  background: #eef2f7;
  color: #6b7280;
}

.status-quotem {
  background: #eef2f7;
  color: #6b7280;
}

.status-no-interest {
  background: #eef2f7;
  color: #6b7280;
}

/* Contacts workspace Outcome column — Call Back (yellow; moved from Status column) */
.outcome-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}

.outcome-pill.outcome-call-back {
  background: #fef9c3;
  color: #a16207;
}

.inline-edit {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.inline-edit .inline-status,
.inline-edit .inline-tags {
  margin-top: 0;
}

.inline-edit .inline-tags {
  min-width: 130px;
}

.inline-edit .inline-full-name {
  min-width: 160px;
}

.inline-edit .inline-email {
  min-width: 180px;
}

.inline-edit .inline-phone {
  min-width: 130px;
}

.inline-edit .inline-notes {
  min-width: 180px;
}

.inline-edit-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.inline-cancel {
  background: #64748b;
}

.inline-cancel:hover {
  background: #475569;
}

.pagination-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.pagination-bar button {
  width: 24px;
  min-width: 24px;
  height: 22px;
  margin-top: 0;
  padding: 0;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.page-contacts-leads .pagination-bar button {
  width: 30px;
  min-width: 30px;
  height: 28px;
  line-height: 26px;
  font-size: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

th,
td {
  border-bottom: 1px solid #eceff5;
  text-align: left;
  padding: 8px 8px;
  vertical-align: middle;
}

thead th {
  font-size: 11px;
  font-weight: 700;
  color: #7d8698;
  text-transform: none;
  letter-spacing: 0;
  background: #f6f8fc;
  height: 34px;
}

th:nth-child(1),
td:nth-child(1) {
  width: 26px;
}

th:nth-child(2),
td:nth-child(2) {
  width: 220px;
}

th:nth-child(3),
td:nth-child(3) {
  width: 84px;
}

th:nth-child(4),
td:nth-child(4) {
  width: 140px;
}

th:nth-child(5),
td:nth-child(5) {
  width: 92px;
}

th:nth-child(6),
td:nth-child(6) {
  width: 170px;
}

th:nth-child(7),
td:nth-child(7) {
  width: 58px;
}

th:nth-child(8),
td:nth-child(8) {
  width: 120px;
}

th:nth-child(9),
td:nth-child(9) {
  width: 40px;
}

.hint {
  color: #666;
  font-size: 13px;
}

.import-hint {
  margin: 8px 0 0;
}

.filters button[type="button"] {
  margin-top: 8px;
}

.contacts-main tbody tr:nth-child(odd) {
  background: #ffffff;
}

.contacts-main tbody tr:nth-child(even) {
  background: #f4f6fb;
}

.contacts-main tbody tr:hover {
  background: #e8eef6;
}

tbody tr {
  height: 52px;
}

tbody tr:hover {
  background: #fbfdff;
}

.contacts-main td:nth-child(4),
.contacts-main td:nth-child(5),
.contacts-main td:nth-child(6),
.contacts-main td:nth-child(7) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-btn {
  width: 28px;
  min-width: 28px;
  padding: 0;
  height: 24px;
  font-size: 18px;
  line-height: 20px;
  border: none;
  background: transparent;
  color: #6b7280;
}

.menu-btn:hover {
  background: #eef2f7;
}

.edit-btn {
  min-width: 48px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.25;
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  border-radius: 3px;
}

.page-contacts-leads .edit-btn {
  min-width: 56px;
  padding: 5px 12px;
  font-size: 12px;
}

.edit-btn:hover {
  background: #1a54a8;
  border-color: #174a94;
}

.row-actions {
  white-space: nowrap;
}

.contact-modal.hidden {
  display: none;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
}

.contact-modal-card {
  position: relative;
  width: min(920px, calc(100% - 24px));
  margin: 48px auto;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dbe2ef;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  padding: 14px;
}

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

.contact-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #334155;
}

.contact-modal-close {
  width: 30px;
  min-width: 30px;
  height: 28px;
  padding: 0;
  margin-top: 0;
  line-height: 24px;
}

.contact-modal-form {
  display: grid;
  gap: 8px;
  max-height: min(76vh, 760px);
  overflow: auto;
  padding-right: 2px;
}

.contact-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.contact-modal-form input,
.contact-modal-form select,
.contact-modal-form textarea {
  margin-top: 0;
}

#contactPageForm input,
#contactPageForm select,
#contactPageForm textarea,
#contactPageForm .contact-modal-field-label {
  font-size: 14px;
}

/* Let Contact Details extend further down than generic modal forms. */
#contactPageForm.contact-modal-form {
  max-height: calc(100vh - 170px);
  overflow: auto;
  padding-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#contactPageForm.contact-modal-form::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#contactPageDeleteBtn {
  color: #ffffff;
}

#contactPageForm .contact-modal-field-label {
  font-size: 16px;
  background: #eef3ff;
  color: #274690;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

#contactPageForm .contact-status-box .contact-modal-field-label {
  background: #fee2e2;
  color: #b91c1c;
}

#contactPageForm .contact-modal-field-label[for="lead_source"] {
  background: #eef3ff;
  color: #274690;
}

#contactPageForm .contact-modal-field-label[for="income"] {
  background: #eef3ff;
  color: #274690;
}

#contactPageForm .contact-modal-field-label[for="quote"] {
  background: #1e5fbf;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

#contactPageForm input#quote {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 10px 12px;
}

#contactPageForm .contact-modal-field-label[for="vcall"] {
  background: #dcfce7;
  color: #166534;
}

#contactPageForm .contact-modal-field-label[for="first_name"],
#contactPageForm .contact-modal-field-label[for="last_name"] {
  background: #1e5fbf;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#contactPageForm input#first_name,
#contactPageForm input#last_name {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 14px 16px;
}

#contactPageForm input#commission,
#contactModalForm input[name="commission"] {
  font-size: 15px;
}

#contactPageForm .contact-modal-field-label[for="bank_routing"],
#contactPageForm .contact-modal-field-label[for="bank_account"] {
  background: #eef3ff;
  color: #274690;
}

#contactPageForm .contact-modal-field-label[for="notes"] {
  background: #ffedd5;
  color: #c2410c;
}

#tags {
  min-height: 44px;
  font-size: 16px;
}

#contactTwilioFromSelect {
  width: 260px;
  max-width: 100%;
  font-size: 16px;
}

#contactPageSaveBtn,
#contactPageSmsBtn,
#contactPageEmailBtn,
#contactPageCallBtn {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#contactPageSaveBtn {
  font-size: 16px;
  padding: 10px 14px;
}

#contactPageSaveBtn:hover,
#contactPageSmsBtn:hover,
#contactPageEmailBtn:hover,
#contactPageCallBtn:hover {
  background: #1a54a8;
}

#contactPageCallBtn {
  background: #16a34a;
  border-color: #15803d;
}

#contactPageCallBtn:hover {
  background: #15803d;
}

.contact-modal-field-label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  align-self: flex-start;
}

.contact-field-box {
  display: grid;
  gap: 6px;
}

.contact-field-box .contact-modal-field-label {
  margin: 0;
}

.crm-password-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.crm-password-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.75rem;
}

.crm-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  line-height: 0;
}

.crm-password-toggle:hover {
  color: #1e293b;
  background: rgba(148, 163, 184, 0.18);
}

.crm-password-toggle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.crm-password-toggle-icon {
  flex-shrink: 0;
}

.contact-status-box {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #d9dee9;
  border-radius: 4px;
  background: #f8fafc;
}

.contact-status-box .contact-modal-field-label {
  margin: 0;
}

.contact-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.contact-modal-grid textarea[name="notes"] {
  grid-column: 1 / -1;
  min-height: 72px;
}

.contact-modal-actions button {
  width: auto;
  margin-top: 0;
}

#addContactPopupForm .contact-modal-actions button[type="submit"] {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

#addContactPopupForm .contact-modal-actions button[type="submit"]:hover {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}

#landingPagesForm .contact-modal-actions button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#landingPagesForm .contact-modal-actions button[type="submit"]:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

#videosForm .contact-modal-actions button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#videosForm .contact-modal-actions button[type="submit"]:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

#formsForm .contact-modal-actions button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#formsForm .contact-modal-actions button[type="submit"]:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

.contact-details-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.contact-summary-panel h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

.contact-summary-open-full-action {
  margin-bottom: 16px;
}

.contact-summary-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.contact-summary-actions .contact-modal-actions button {
  width: auto;
  margin-top: 0;
}

.contact-summary-actions .contact-modal-actions,
#contactPageForm > .contact-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-summary-actions .contact-modal-actions button,
#contactPageForm > .contact-modal-actions button {
  width: auto;
  flex: 0 0 auto;
}

#contactSummaryPanel .contact-modal-actions button {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.25;
  min-height: 32px;
  margin-top: 0;
}


#contactSummarySmsBtn,
#contactSummaryEmailBtn,
#openFullDetailsBtn {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#openFullDetailsBtn {
  padding: 11px 18px;
  font-size: 15px;
  min-height: 44px;
}

#contactSummaryAddCampaignBtn,
#contactPageAddCampaignBtn {
  background: #7c3aed;
  color: #ffffff;
  border-color: #6d28d9;
}

#contactSummarySmsBtn:hover,
#contactSummaryEmailBtn:hover,
#openFullDetailsBtn:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

#contactSummaryAddCampaignBtn:hover,
#contactPageAddCampaignBtn:hover {
  background: #6d28d9;
  color: #ffffff;
  border-color: #5b21b6;
}

#contactSummaryCallBtn {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

#contactSummaryCallBtn:hover {
  background: #15803d;
  color: #ffffff;
  border-color: #166534;
}

.contact-summary-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.contact-summary-initials {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.contact-summary-initials--approved {
  background: linear-gradient(135deg, #16a34a, #15803d);
}

.contact-summary-initials--pending {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.contact-summary-initials--declined {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.contact-summary-initials--referred {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.contact-summary-initials--aps {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.contact-summary-name-wrap {
  min-width: 0;
}

.contact-summary-name {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  word-break: break-word;
}

.contact-summary-age-row {
  margin-top: 2px;
  margin-bottom: 6px;
  font-size: 14px;
  color: #475569;
}

.contact-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #334155;
}

.contact-summary-quote {
  font-size: 22px;
  font-weight: 700;
  color: #1e3a8a;
}

.contact-summary-label--sold {
  color: #15803d;
  font-weight: 700;
}

.contact-summary-label--declined {
  color: #b91c1c;
  font-weight: 700;
}

.contact-summary-mode .contact-history-list {
  max-height: calc(100vh - 180px);
}

.contact-full-mode .contact-details-layout {
  grid-template-columns: 1fr;
}

.contact-full-mode .contact-history-panel {
  display: none;
}

.contact-details-form-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 12px;
  align-items: start;
}

#contactPageForm .contact-details-quote-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #8b5cf6;
  border-radius: 6px;
  background: #f5f3ff;
}

#contactPageForm .contact-details-quote-notes textarea#notes {
  min-height: 140px;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

#contactPageForm .contact-details-quote-notes input#quote {
  width: 100%;
  box-sizing: border-box;
}

#contactPageForm .contact-details-quote-notes textarea#tags {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

.contact-follow-up-section {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #dbe2ef;
}

.contact-follow-up-heading {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: #1e5fbf;
  border: 1px solid #1a54a8;
  border-radius: 4px;
  padding: 6px 10px;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

#contactPageForm .contact-follow-up-section input[type="date"],
#contactPageForm .contact-follow-up-section input[type="time"] {
  width: 100%;
  box-sizing: border-box;
}

.contact-follow-up-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.contact-tasks-section {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #dbe2ef;
}

.contact-tasks-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

#contactTaskNewBtn {
  width: auto;
  margin-top: 0;
  padding: 5px 10px;
  font-size: 12px;
}

.contact-task-form {
  margin-top: 8px;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #ffffff;
}

.contact-tasks-list {
  margin-top: 8px;
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
  padding-right: 2px;
}

.contact-task-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
  background: #f8fafc;
}

.contact-task-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.contact-task-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #475569;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.contact-task-condition {
  font-size: 11px;
  font-weight: 700;
}

.contact-task-footer {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.contact-task-complete-btn {
  border: 1px solid #86efac;
  background: #f0fdf4;
  color: #166534;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.contact-task-complete-btn:hover:not(:disabled) {
  background: #dcfce7;
  border-color: #4ade80;
}

.contact-task-complete-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.contact-task-condition-yet-to-start {
  color: #9a3412;
}

.contact-task-condition-in-progress {
  color: #1e40af;
}

.contact-task-condition-completed {
  color: #166534;
}

.contact-modal-follow-up-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
}

.contact-modal-follow-up-section .contact-follow-up-heading {
  grid-column: 1 / -1;
  margin: 0 0 4px;
}

.contact-modal-follow-up-section .contact-follow-up-hint {
  grid-column: 1 / -1;
  margin: 0;
}

.contact-tags-trigger-hint {
  margin: 6px 0 0;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .contact-details-form-split {
    grid-template-columns: 1fr;
  }
}

.settings-reminders-panel .settings-reminder-status-list {
  margin: 10px 0 12px;
  padding-left: 22px;
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
}

.settings-reminders-panel .settings-reminder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0 4px;
}

.settings-reminders-panel code {
  font-size: 12px;
}

.settings-reminders-panel .settings-reminder-actions button.settings-reminder-btn {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

.settings-reminders-panel .settings-reminder-actions button.settings-reminder-btn:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

/* Settings — Runtime config (General + Social Marketing) */
.settings-runtime-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.settings-runtime-section {
  margin-top: 22px;
}

.settings-runtime-section:first-child {
  margin-top: 0;
}

/* Settings page: runtime subsections (General / Social Marketing) match panel section headings */
.page-settings .panel > h3,
.page-settings .settings-runtime-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #334155;
  line-height: 1.35;
  letter-spacing: 0;
}

.settings-runtime-section-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.settings-runtime-section-lead {
  margin: -4px 0 14px;
  max-width: 62ch;
  line-height: 1.45;
}

.settings-social-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
  padding: 16px 18px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.settings-social-card-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}

.settings-social-webhooks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
}

@media (max-width: 920px) {
  .settings-social-webhooks-grid {
    grid-template-columns: 1fr;
  }
}

.settings-social-additional {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.settings-social-additional .hint:last-child {
  margin-bottom: 0;
}

.settings-social-extra-webhooks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 14px;
  align-items: start;
}

@media (max-width: 720px) {
  .settings-social-extra-webhooks-grid {
    grid-template-columns: 1fr;
  }
}

.settings-social-extra-placeholder {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.settings-social-extra-placeholder[hidden] {
  display: none !important;
}

.settings-runtime-form > .contact-modal-actions {
  margin-top: 22px;
  padding-top: 4px;
}

/* Social Marketing — library upload row + media thumbnails */
.social-library-upload-form button,
.social-library-upload-form .social-library-pick-btn {
  width: auto;
  max-width: none;
  margin-top: 0;
  flex: 0 0 auto;
}

.social-library-upload-form .social-library-file-label {
  flex: 1 1 140px;
  min-width: 0;
  margin-top: 0;
  padding: 6px 10px;
  font-size: 12px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.social-media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.social-media-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.social-media-card-thumb {
  aspect-ratio: 16 / 10;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.social-media-thumb-img,
.social-media-thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-media-thumb-fallback {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px;
  text-align: center;
}

.social-media-card-body {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.social-media-card-name {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.social-media-card-meta {
  font-size: 11px;
  color: #64748b;
}

.social-media-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}

.social-media-card-open {
  font-size: 12px;
  font-weight: 600;
}

.social-media-use-in-post-btn {
  width: auto !important;
  margin-top: 0 !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 600;
}

.social-post-body-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 8px;
}

.social-post-media-thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #0f172a;
}

.social-post-media-thumb img,
.social-post-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-post-body-main {
  flex: 1;
  min-width: 0;
}

@media (max-width: 520px) {
  .social-post-body-row {
    flex-direction: column;
  }

  .social-post-media-thumb {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 200px;
  }
}

#resetEmailOpenAlertsBtn {
  width: auto;
  margin-top: 0;
  padding: 5px 10px;
  font-size: 12px;
  min-height: 30px;
  white-space: nowrap;
}

#twilioNumbersSection {
  padding: 14px 16px;
}

#twilioNumbersSection h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

#twilioNumbersSection > p.hint {
  font-size: 12px;
  margin: 0 0 8px;
}

#twilioNumbersSection .contact-modal-form {
  gap: 8px;
}

#twilioNumbersSection .contact-modal-grid {
  gap: 8px 12px;
}

#twilioNumbersSection .contact-modal-field-label {
  font-size: 12px;
  margin-bottom: 2px;
}

#twilioNumbersSection input[type="text"],
#twilioNumbersSection input[type="password"],
#twilioNumbersSection input:not([type]) {
  padding: 6px 9px;
  font-size: 13px;
  min-height: 30px;
}

#twilioNumbersSection .contact-modal-actions {
  margin-top: 4px;
}

#twilioNumbersSection .contact-modal-actions button {
  padding: 5px 11px;
  font-size: 12.5px;
  min-height: 30px;
}

#twilioNumbersSection #twilioNumberMessage {
  font-size: 12px;
}

#twilioNumbersSection .campaign-category-child {
  font-size: 14px;
  font-weight: 600;
  padding: 5px 8px;
}

#twilioNumbersSection .campaign-category-child-wrap {
  margin-bottom: 4px;
}

#twilioNumbersSection .campaign-category-inline-actions {
  gap: 6px;
}

#twilioNumbersSection .campaign-category-inline-actions button {
  width: auto;
  margin-top: 0;
  padding: 3px 8px;
  font-size: 11.5px;
  line-height: 1.15;
  border-radius: 6px;
}

#twilioConfigForm {
  margin-bottom: 12px;
}

.contact-history-panel h2 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 600;
  color: #334155;
}

.contact-history-panel {
  border-color: #8b5cf6;
  background: #f5f3ff;
}

.contact-history-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 230px);
  overflow: auto;
  padding-right: 2px;
}

.contact-history-load-more-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

#contactHistoryLoadMoreBtn {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
}

.contact-history-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  padding: 8px;
  cursor: pointer;
  position: relative;
}

.contact-history-item:hover {
  border-color: #93c5fd;
}

.contact-history-item:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.contact-history-item-sold-change {
  background: #dcfce7;
  border-color: #86efac;
}

.contact-history-item-follow-up {
  background: #e8f4fc;
  border-color: #bae6fd;
}

.contact-history-item-follow-up.contact-history-item-sold-change {
  background: #dcfce7;
  border-color: #86efac;
}

.contact-history-item-status-pending {
  background: #fef9c3;
  border-color: #facc15;
}

.contact-history-item-status-declined {
  background: #fee2e2;
  border-color: #fca5a5;
}

.contact-history-item-status-aps {
  background: #ede9fe;
  border-color: #c4b5fd;
}

.contact-history-item-status-referred {
  background: #fce7f3;
  border-color: #f9a8d4;
}

.contact-history-item-pinned {
  border-left: 4px solid #1d4ed8;
}

.contact-history-item-starred {
  box-shadow: inset 0 0 0 1px #f59e0b;
}

.contact-history-type-follow-up-date,
.contact-history-type-follow-up-time {
  color: #1e40af;
  background: #dbeafe;
}

.contact-history-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.contact-history-type {
  font-size: 13px;
  font-weight: 700;
  color: #1e3a8a;
  background: #dbeafe;
  border-radius: 999px;
  padding: 3px 10px;
}

.contact-history-type-detail-change {
  color: #7c2d12;
  background: #ffedd5;
}

.contact-history-type-outcome,
.contact-history-type-status {
  color: #b91c1c;
  background: #fee2e2;
}

.contact-history-type-vcall {
  color: #166534;
  background: #dcfce7;
}

.contact-history-type-tags,
.contact-history-type-notes {
  color: #c2410c;
  background: #ffedd5;
}

.contact-history-type-call-back-notes {
  color: #c2410c;
  background: #ffedd5;
}

.contact-history-type-sms {
  color: #0f766e;
  background: #ccfbf1;
}

.contact-history-type-call {
  color: #1d4ed8;
  background: #dbeafe;
}

.contact-history-type-email {
  color: #6d28d9;
  background: #ede9fe;
}

.contact-history-type-campaign {
  color: #166534;
  background: #dcfce7;
}

.contact-history-type-event {
  color: #475569;
  background: #e2e8f0;
}

.contact-history-date {
  font-size: 13px;
  color: #64748b;
}

.contact-history-detail {
  font-size: 15px;
  color: #334155;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.contact-history-sms-detail {
  display: block;
}

.contact-history-sms-body {
  font-size: 15px;
  line-height: 1.45;
  color: #0f172a;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.contact-history-detail-field {
  color: #7c2d12;
  font-weight: 700;
}

.contact-history-detail-before {
  color: #64748b;
}

.contact-history-detail-arrow {
  color: #7c2d12;
  font-weight: 700;
}

.contact-history-detail-after {
  color: #065f46;
  font-weight: 600;
}

.contact-history-email-detail {
  display: grid;
  gap: 4px;
}

.contact-history-email-title {
  font-weight: 700;
  color: #1e3a8a;
}

.contact-history-email-meta {
  display: grid;
  gap: 2px;
  font-size: 13px;
  color: #475569;
}

.contact-history-email-key {
  color: #334155;
  font-weight: 700;
}

.contact-history-email-value {
  color: #475569;
}

.contact-history-email-body-label {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #dbe2ef;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.contact-history-email-body {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-history-email-heading-preview-iframe {
  width: 100%;
  min-height: 32px;
  max-height: 200px;
  display: block;
  margin: 0 0 -1px 0;
  border: 1px solid #e2e8f0;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #ffffff;
  box-sizing: border-box;
}

.contact-history-email-body--after-heading {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.contact-history-email-body-html {
  white-space: normal;
}

.contact-history-email-body-html img {
  max-width: 100%;
  height: auto;
}

.contact-history-email-body-iframe {
  width: 100%;
  min-height: 120px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #ffffff;
  display: block;
}

.contact-history-email-body-preview-iframe {
  min-height: 0;
  height: 70px;
  max-height: 90px;
  margin: 0;
  border: 1px solid #e2e8f0;
}

.contact-history-email-actions {
  margin-top: 0;
  padding-top: 0;
}

.contact-history-email-show-more {
  appearance: none;
  margin: 0;
  padding: 4px 10px;
  width: auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: #2563eb;
  border: 1px solid #1d4ed8;
  border-radius: 6px;
  cursor: pointer;
}

.contact-history-email-show-more:hover {
  background: #1d4ed8;
  border-color: #1e40af;
}

.contact-history-email-show-more:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.contact-history-email-modal-meta {
  display: grid;
  gap: 3px;
  font-size: 13px;
  color: #334155;
  margin-bottom: 10px;
}

.contact-history-email-modal-frame {
  width: 100%;
  height: min(70vh, 680px);
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #ffffff;
}

.contact-history-empty {
  font-size: 15px;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 10px;
  background: #f8fafc;
}

.contact-history-markers {
  position: absolute;
  right: 8px;
  bottom: 7px;
  display: flex;
  gap: 6px;
  font-size: 13px;
  color: #1e3a8a;
}

.contact-history-marker {
  line-height: 1;
}

.contact-history-action-menu {
  position: absolute;
  z-index: 40;
  display: grid;
  gap: 6px;
  min-width: 160px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.2);
}

.contact-history-action-menu button {
  width: 100%;
}

#message {
  margin-top: 12px;
  font-weight: bold;
}

#message.is-success {
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 6px;
  padding: 8px 10px;
}

#message.is-error {
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 8px 10px;
}

#homeMessage {
  margin-top: 12px;
  font-weight: bold;
}

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

.home-stat-card {
  margin-top: 0;
  border-width: 1px;
  border-style: solid;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
}

.home-stat-label {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.home-stat-value {
  margin: 6px 0 0;
  font-size: 34px;
  color: #ffffff;
  font-weight: 700;
}

.home-stat-card-activities {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
}

.home-stat-card-touched {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  border-color: #4338ca;
}

.home-stat-card-24h {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border-color: #0f766e;
}

.home-stat-card-7d {
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-color: #ea580c;
}

.home-stat-card-sold {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #15803d;
}

.home-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.home-panel-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  color: #334155;
}

.home-categories {
  display: grid;
  gap: 10px;
}

.home-category-row {
  display: grid;
  gap: 6px;
}

.home-category-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #334155;
}

.home-category-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.home-category-fill {
  height: 100%;
  border-radius: 999px;
}

.home-distribution-wrap {
  display: flex;
  gap: 14px;
  align-items: center;
}

.home-donut {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: relative;
  flex: 0 0 180px;
}

.home-donut::after {
  content: "";
  position: absolute;
  width: 94px;
  height: 94px;
  background: #ffffff;
  border-radius: 50%;
  inset: 0;
  margin: auto;
}

.home-donut-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-size: 24px;
  font-weight: 700;
  color: #1e3a8a;
}

.home-donut-legend {
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.home-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
}

.home-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.home-trend-bars {
  height: 230px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border-bottom: 1px solid #dbe2ef;
  padding: 6px 4px 0;
}

.home-trend-bar-wrap {
  flex: 1 1 0;
  display: grid;
  justify-items: center;
  align-items: end;
  height: 100%;
}

.home-trend-bar {
  width: 100%;
  max-width: 20px;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  border-radius: 5px 5px 0 0;
}

.home-trend-count {
  font-size: 11px;
  color: #475569;
  margin-top: 4px;
}

.home-trend-label {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.home-upcoming-list {
  display: grid;
  gap: 8px;
  max-height: 230px;
  overflow: auto;
  padding-right: 2px;
}

.home-upcoming-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  padding: 8px;
}

.home-upcoming-item.home-upcoming-item-call {
  border-color: #86efac;
  background: #f0fdf4;
}

.home-upcoming-item.home-upcoming-item-text {
  border-color: #93c5fd;
  background: #eff6ff;
}

.home-upcoming-item.home-upcoming-item-email {
  border-color: #c4b5fd;
  background: #f5f3ff;
}

.home-upcoming-item.home-upcoming-item-other {
  border-color: #f9a8d4;
  background: #fdf2f8;
}

.home-upcoming-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.home-upcoming-item-link:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.home-upcoming-item-link.home-upcoming-item-call:hover {
  border-color: #4ade80;
  background: #dcfce7;
}

.home-upcoming-item-link.home-upcoming-item-text:hover {
  border-color: #60a5fa;
  background: #dbeafe;
}

.home-upcoming-item-link.home-upcoming-item-email:hover {
  border-color: #a78bfa;
  background: #ede9fe;
}

.home-upcoming-item-link.home-upcoming-item-other:hover {
  border-color: #f472b6;
  background: #fce7f3;
}

.home-upcoming-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.home-upcoming-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.home-upcoming-action {
  font-size: 11px;
  color: #1e40af;
  font-weight: 700;
}

.home-upcoming-contact {
  margin-top: 4px;
  font-size: 12px;
  color: #334155;
}

.home-upcoming-when {
  margin-top: 3px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.home-recent-list {
  display: grid;
  gap: 8px;
  max-height: 230px;
  overflow: auto;
  padding-right: 2px;
}

.home-recent-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  padding: 8px;
}

.home-recent-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.home-recent-item-link:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.home-recent-item-content {
  display: block;
}

.home-recent-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.home-recent-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 28px;
}

.home-recent-main {
  min-width: 0;
  flex: 1 1 auto;
}

.home-recent-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.home-recent-type {
  font-size: 12px;
  color: #1e3a8a;
  font-weight: 700;
}

.home-recent-time {
  font-size: 11px;
  color: #64748b;
}

.home-recent-contact {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.home-recent-detail {
  margin-top: 2px;
  font-size: 13px;
  color: #475569;
}

.home-empty {
  font-size: 13px;
  color: #64748b;
}

.twilio-popup-status {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #1b5e20;
  min-height: 18px;
  display: flex;
}

.twilio-popup-status.align-right {
  text-align: right;
  justify-content: flex-end;
}

.twilio-popup-status.align-left {
  text-align: left;
  justify-content: flex-start;
}

.twilio-popup-status.is-error {
  color: #b91c1c;
}

.twilio-popup-status.is-success {
  color: #16a34a;
}

.twilio-headset-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  margin-top: 8px;
  line-height: 1.35;
  grid-column: 1 / -1;
}

.twilio-headset-opt input {
  margin-top: 2px;
}

.contact-modal-headset-opt {
  margin: 0 0 10px;
  padding: 0 4px;
}

.twilio-call-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
}

.twilio-call-column .panel {
  margin-top: 0;
}

.twilio-dialpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.twilio-dialpad button {
  margin-top: 0;
  min-height: 34px;
  padding: 6px 0;
  font-size: 14px;
}

.twilio-call-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  position: relative;
  z-index: 2;
}

.twilio-call-actions button {
  width: auto;
  margin-top: 0;
  flex: 1 1 0;
  min-width: 0;
}

.twilio-from-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 4px;
}

#twilioSmsPopupForm select[name="twilioFrom"],
#twilioCallPopupForm select[name="twilioFrom"] {
  width: 100%;
  margin-top: 4px;
}

#twilioSmsPopupForm,
#twilioCallPopupForm {
  font-size: 15px;
}

#twilioSmsPopupForm input,
#twilioSmsPopupForm select,
#twilioSmsPopupForm textarea,
#twilioSmsPopupForm button,
#twilioCallPopupForm input,
#twilioCallPopupForm select,
#twilioCallPopupForm textarea,
#twilioCallPopupForm button {
  font-size: 15px;
}

.add-contact-continue-btn {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

.add-contact-continue-btn:hover {
  background: #1a54a8;
}

.is-hidden {
  display: none;
}

#twilioModal .twilio-call-column .twilio-call-actions button[type="submit"],
#twilioCallPopupForm .twilio-call-actions button[type="submit"] {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

#contactTwilioCallForm .twilio-call-actions button[type="submit"] {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

#callForm .twilio-call-actions button[type="submit"] {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

#twilioModal .twilio-call-column .twilio-call-actions button[type="submit"]:hover,
#twilioCallPopupForm .twilio-call-actions button[type="submit"]:hover {
  background: #15803d;
}

#contactTwilioCallForm .twilio-call-actions button[type="submit"]:hover {
  background: #15803d;
}

#callForm .twilio-call-actions button[type="submit"]:hover {
  background: #15803d;
}

#twilioEndCallBtn {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}

#contactTwilioEndCallBtn {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}

#toolsEndCallBtn {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}

#twilioEndCallBtn:hover {
  background: #b91c1c;
}

#contactTwilioEndCallBtn:hover {
  background: #b91c1c;
}

#toolsEndCallBtn:hover {
  background: #b91c1c;
}

.twilio-sms-bulk-banner {
  margin: 0 0 10px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

#twilioSmsPopupForm button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
}

#twilioSmsPopupForm button[type="submit"]:hover {
  background: #1a54a8;
}

#contactTwilioSmsForm button[type="submit"] {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 0;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

#contactTwilioSmsForm button[type="submit"]:hover {
  background: #15803d;
}

#contactTwilioSmsForm .contact-field-box {
  grid-column: 1 / -1;
}

#contactTwilioCallForm .contact-field-box {
  grid-column: 1 / -1;
}

#contactTwilioCallForm input[name="contactName"] {
  grid-column: 1;
  grid-row: 2;
}

#contactTwilioCallForm input[name="phone"] {
  grid-column: 1;
  grid-row: 3;
}

#contactTwilioCallForm input[name="twimlUrl"] {
  grid-column: 2;
  grid-row: 2 / span 2;
}

#contactTwilioSmsForm .contact-twilio-sms-grid textarea[name="body"] {
  grid-column: 1;
  grid-row: 2 / span 2;
  min-height: 110px;
}

#contactTwilioSmsForm .contact-twilio-sms-grid input[name="contactName"] {
  grid-column: 2;
  grid-row: 2;
}

#contactTwilioSmsForm .contact-twilio-sms-grid input[name="phone"] {
  grid-column: 2;
  grid-row: 3;
}

#contactTwilioSmsForm input[name="contactName"],
#contactTwilioSmsForm input[name="phone"],
#contactTwilioCallForm input[name="contactName"],
#contactTwilioCallForm input[name="phone"] {
  font-size: 16px;
  color: #1e3a8a;
  background: #eaf2ff;
  border-color: #bcd0f5;
}

#contactTwilioSmsFrom,
#contactTwilioCallFrom {
  font-size: 16px;
}

code {
  font-size: 12px;
  background: #f0f2f7;
  padding: 2px 6px;
  border-radius: 4px;
}

.drip-panel h3 {
  margin-top: 20px;
  margin-bottom: 8px;
}

.drip-setup {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
}

.pill.ok {
  background: #e8f5e9;
  color: #1b5e20;
}

.pill.bad {
  background: #ffebee;
  color: #b71c1c;
}

.drip-queue {
  margin-top: 8px;
}

.drip-dashboard {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
}

.drip-sidebar {
  background: #0b1636;
  border-radius: 16px;
  padding: 14px;
  color: #e8eeff;
  box-shadow: inset 0 0 0 1px #1f3a7b;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 760px;
}

.drip-sidebar h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #c9d8ff;
}

.drip-sidebar-link {
  width: 100%;
  text-align: left;
  border: 1px solid #2b4e95;
  background: #12254e;
  color: #dbe7ff;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drip-sidebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #8fb4ff;
  box-shadow: 0 0 0 3px rgba(143, 180, 255, 0.22);
  flex: 0 0 auto;
}

.drip-sidebar-link.is-active {
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
  border-color: #7c3aed;
  color: #ffffff;
}

.drip-content {
  display: grid;
  gap: 12px;
}

.drip-content-head {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #d9e1f4;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drip-content-head h1 {
  margin: 0;
  font-size: 25px;
  color: #172554;
}

.drip-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

#refreshDripQueueBtn {
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 5px 10px;
  font-size: 11px;
  line-height: 1.2;
}

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

.drip-metric-card {
  border-radius: 14px;
  padding: 12px 14px;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(20, 30, 80, 0.2);
}

.drip-metric-card--sms {
  background: linear-gradient(135deg, #0f172a, #1e293b);
}

.drip-metric-card--sent {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}

.drip-metric-card--failed {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
}

.drip-metric-card--campaigns {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.drip-metric-label {
  display: block;
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.drip-metric-card strong {
  font-size: 24px;
  line-height: 1;
}

.drip-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.drip-dashboard .drip-panel {
  border-radius: 14px;
  border: 1px solid #d9e1f4;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.drip-dashboard .drip-panel h3 {
  margin-top: 0;
  color: #1e3a8a;
}

.drip-campaign-blocks {
  display: grid;
  gap: 10px;
}

.drip-campaign-block {
  border: 1px solid #dbe4fb;
  border-radius: 14px;
  background: #f8fbff;
  padding: 12px;
}

.drip-campaign-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.drip-campaign-head h4 {
  margin: 0;
  font-size: 15px;
  color: #172554;
}

.drip-campaign-head p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #5b6b97;
}

.drip-campaign-badge {
  background: #e0e7ff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.drip-campaign-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.drip-campaign-stat {
  border-radius: 10px;
  padding: 9px 10px;
  color: #ffffff;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.drip-campaign-stat span {
  font-size: 11px;
  opacity: 0.92;
}

.drip-campaign-stat strong {
  margin-top: 2px;
  font-size: 18px;
  line-height: 1;
}

.drip-campaign-stat--dark {
  background: linear-gradient(135deg, #0b1025, #1e293b);
}

.drip-campaign-stat--blue {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}

.drip-campaign-stat--purple {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
}

.drip-campaign-stat--teal {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.drip-campaign-footnote {
  margin: 10px 2px 0;
  font-size: 12px;
  color: #475569;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drip-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #dbe4fb;
  background: #ffffff;
}

.drip-enrolled-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
}

.contact-enrolled-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  vertical-align: middle;
}

.contact-enrolled-badge--live,
.drip-enrolled-badge--live {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.contact-enrolled-badge--completed,
.drip-enrolled-badge--completed {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}

.contact-summary-enrolled-wrap {
  margin-top: 4px;
}

@media (max-width: 1080px) {
  .drip-dashboard {
    grid-template-columns: 1fr;
  }

  .drip-sidebar {
    min-height: 0;
  }

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

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

  .drip-campaign-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pipeline-page {
  padding: 14px;
}

.pipeline-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.pipeline-kpi {
  color: #fff;
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pipeline-kpi span {
  font-size: 11px;
  opacity: 0.92;
}

.pipeline-kpi strong {
  font-size: 20px;
  line-height: 1;
}

.pipeline-kpi--blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.pipeline-kpi--indigo { background: linear-gradient(135deg, #4f46e5, #4338ca); }
.pipeline-kpi--amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.pipeline-kpi--orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.pipeline-kpi--teal { background: linear-gradient(135deg, #0d9488, #0f766e); }
.pipeline-kpi--red { background: linear-gradient(135deg, #ef4444, #dc2626); }

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.pipeline-column {
  background: #f8fbff;
  border: 1px solid #dbe4f6;
  border-radius: 10px;
  min-height: 360px;
  padding: 8px;
}

.pipeline-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 8px;
}

.pipeline-column > header span {
  background: #dbeafe;
  color: #1e3a8a;
  border-radius: 999px;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.pipeline-card {
  background: #ffffff;
  border: 1px solid #dbe4f6;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}

.pipeline-card--clickable {
  cursor: pointer;
}

.pipeline-card--clickable:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(30, 95, 191, 0.14);
}

.pipeline-card h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: #1f2937;
}

.pipeline-card p {
  margin: 0 0 4px;
  font-size: 11px;
  color: #475569;
}

.pipeline-card small {
  color: #64748b;
  font-size: 10px;
}

@media (max-width: 1200px) {
  .pipeline-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pipeline-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .pipeline-kpi-row,
  .pipeline-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.campaign-grid {
  grid-template-columns: 1.2fr 1fr 1fr;
}

.campaign-top-input-grid {
  max-width: 960px;
  width: 100%;
  padding: 14px;
  border: 2px solid #bfdbfe;
  border-radius: 10px;
  background: #f8fbff;
  display: grid;
  gap: 12px;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.campaign-name-only {
  grid-template-columns: 1fr;
  max-width: 320px;
  width: 100%;
}

.campaign-name-row {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
  max-width: 920px;
  width: 100%;
}

.campaign-category-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.campaign-category-controls select {
  min-width: 180px;
  color: #0f172a;
  background: #ffffff;
}

#campaignCategorySelect option {
  color: #0f172a;
  background: #ffffff;
}

.campaign-twilio-from-box select {
  width: 100%;
}

.campaign-email-from-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  max-width: 920px;
  width: 100%;
  margin-top: 4px;
}

.campaign-email-from-row select {
  width: 100%;
}

.campaign-signature-toggle {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #dbe2ef;
  border-radius: 8px;
  background: #f8fafc;
}

.campaign-signature-toggle .document-attach {
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.campaign-signature-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

#campaignForm select {
  font-size: 15px;
}

#campaignForm .contact-modal-field-label[for="campaignCategorySelect"],
#campaignForm .contact-modal-field-label[for="campaignTwilioFrom"] {
  font-size: 16px;
  font-weight: 700;
}

.campaign-name-only input[name="name"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.campaign-name-row input[name="name"] {
  font-size: 17px;
}

.campaign-step-offset-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-self: start;
}

.campaign-step-offset-group label {
  font-size: 11px;
  color: #64748b;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.campaign-step-offset-group label span {
  font-weight: 600;
}

.campaign-step-offset-group input {
  width: 100%;
  margin: 0;
}

#campaignForm .campaign-drip-start-immediate {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #dbe2ef;
  border-radius: 8px;
  background: #f8fafc;
}

#campaignForm .campaign-drip-start-immediate .document-attach {
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
}

#campaignForm .campaign-drip-start-immediate .document-attach input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

#campaignForm .campaign-drip-start-immediate__hint {
  margin: 8px 0 0;
  padding-left: 36px;
  font-size: 15px;
  line-height: 1.45;
  color: #475569;
}

.campaign-card-sched {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: fit-content;
  font-size: 10px;
  line-height: 1.1;
  color: #475569;
  margin-bottom: 4px;
  padding: 2px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
}

.campaign-tag-rules-section {
  margin-top: 12px;
}

.campaign-tag-rules-header {
  align-items: flex-start;
}

.campaign-tag-rule-row {
  margin-top: 8px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  padding: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr minmax(220px, 1.2fr);
  align-items: center;
}

.campaign-tag-rule-row .tag-rule-name {
  width: 100%;
  max-width: 360px;
  font-size: 17px;
}

.campaign-tag-rule-row .tag-rule-function {
  font-size: 16px;
}

.campaign-tag-name-label {
  font-size: 16px;
}

.campaign-tag-name-value {
  font-size: 18px;
}

.campaign-step-row .step-remove {
  box-sizing: border-box;
  width: 62px;
  height: 22px;
  min-width: 62px;
  max-width: 62px;
  min-height: 22px;
  max-height: 22px;
  margin-top: 0;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.campaign-card-tags {
  margin: 6px 0 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.campaign-tag-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8eef7;
  color: #1a365d;
}

.campaign-steps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.campaign-steps-header button {
  width: auto;
  margin-top: 0;
}

.campaign-add-step-after {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-step-row {
  margin-top: 12px;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1.65fr) minmax(120px, 1fr) minmax(120px, 1fr) 62px;
  align-items: start;
}

.campaign-step-control-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  min-width: 0;
}

.campaign-step-offset-group {
  flex: 1 1 200px;
  min-width: 168px;
}

.campaign-step-channel-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 220px;
}

.campaign-step-channel-col .step-channel-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.step-twilio-from-wrap .step-twilio-from-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.03em;
  margin: 0 0 4px;
}

.campaign-step-row .step-twilio-from {
  width: 100%;
  min-width: 0;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  box-sizing: border-box;
}

.campaign-step-number {
  grid-column: 1 / -1;
  padding: 8px 12px;
  border-radius: 8px;
  background: #e0ecff;
  color: #1e3a8a;
  font-size: 18px;
  font-weight: 800;
}

.campaign-step-row .step-channel {
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
}

.campaign-step-row .step-channel:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* SMS steps: calmer card, violet accents, readable compose area */
.campaign-step-row--sms {
  border-color: #c4b5fd;
  background: linear-gradient(165deg, #fafbff 0%, #f5f3ff 38%, #fafafa 100%);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);
  padding: 14px 16px;
}

.campaign-step-row--sms .campaign-step-number {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #7c3aed 100%);
  color: #ffffff;
  border: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
}

.campaign-step-row--sms .campaign-step-control-strip {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #e9e5ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.campaign-step-row--sms .campaign-step-channel-col--sms .step-twilio-from-wrap {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed #d4d4f8;
}

.campaign-step-row--sms .step-channel {
  background: #ffffff;
  color: #312e81;
  border: 2px solid #6366f1;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.08);
}

.campaign-step-row--sms .step-channel:focus {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

.campaign-step-row--sms .step-plain-compose .step-body-plain-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.campaign-step-row--sms .step-plain-compose .step-body-plain {
  border-radius: 14px;
  border: 1px solid #c7d2fe;
  background: #ffffff;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.05);
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 16px;
  min-height: 128px;
}

.campaign-step-row--sms .step-plain-compose .step-body-plain:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22), inset 0 1px 3px rgba(15, 23, 42, 0.05);
}

.campaign-step-row--email {
  border-color: #38bdf8;
  background: linear-gradient(165deg, #f0f9ff 0%, #e0f2fe 38%, #fafafa 100%);
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.09);
  padding: 14px 16px;
}

.campaign-step-row--email .campaign-step-number {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%);
  color: #ffffff;
  border: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.campaign-step-row--email .campaign-step-control-strip {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #bae6fd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.campaign-step-row--email .campaign-step-channel-col--email .step-email-from-wrap {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed #7dd3fc;
}

.step-email-from-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0369a1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.campaign-step-row .step-email-from {
  width: 100%;
  min-width: 0;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #bae6fd;
  background: #ffffff;
  box-sizing: border-box;
  color: #0c4a6e;
}

.step-email-from-hint-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #0c4a6e;
}

.step-email-from-hint-text a {
  color: #0369a1;
  text-decoration: underline;
}

.campaign-step-row--email .step-channel {
  background: #ffffff;
  color: #0c4a6e;
  border: 2px solid #0ea5e9;
  box-shadow: 0 1px 2px rgba(14, 165, 233, 0.12);
}

.campaign-step-row--email .step-channel:focus {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

.step-email-meta {
  grid-column: 1 / -2;
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) minmax(160px, 1fr);
  gap: 14px;
  align-items: end;
}

.step-email-meta[hidden],
.step-email-compose[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .step-email-meta {
    grid-template-columns: 1fr;
  }
}

.step-email-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0369a1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.step-email-subject-field .step-subject,
.step-email-template-field .step-email-template {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 14px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #bae6fd;
  background: #ffffff;
  color: #0f172a;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.step-email-subject-field .step-subject:focus,
.step-email-template-field .step-email-template:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22), inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.step-email-template-field .step-email-template {
  font-size: 14px;
  cursor: pointer;
}

.step-email-compose {
  grid-column: 1 / -2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-email-compose-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #0369a1;
  letter-spacing: 0.02em;
}

.step-email-compose-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #0c4a6e;
}

.step-email-compose-hint code {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #075985;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.campaign-step-row--email .step-email-editor-wrap {
  border-radius: 14px;
  border: 1px solid #bae6fd;
  background: #ffffff;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04);
}

.campaign-step-row--email .step-email-toolbar {
  margin: 0;
  border: none;
  border-bottom: 1px solid #e0f2fe;
  border-radius: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 100%);
  padding: 8px 10px;
}

.campaign-step-row--email .step-body-rich {
  min-height: 180px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.55;
  border: none;
  border-radius: 0;
}

.campaign-step-row--email .step-body-rich:focus {
  outline: none;
}

.campaign-step-row--call {
  border-color: #f59e0b;
  background: linear-gradient(165deg, #fffbeb 0%, #fff7ed 40%, #fafaf9 100%);
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.1);
  padding: 14px 16px;
}

.campaign-step-row--call .campaign-step-number {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  color: #ffffff;
  border: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.campaign-step-row--call .campaign-step-control-strip {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #fde68a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.campaign-step-row--call .campaign-step-channel-col--call .step-twilio-from-wrap {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed #fcd34d;
}

.campaign-step-row--call .step-twilio-from-label {
  color: #92400e;
}

.campaign-step-row--call .step-twilio-from {
  border-color: #fcd34d;
  color: #78350f;
}

.campaign-step-row--call .step-channel {
  background: #ffffff;
  color: #78350f;
  border: 2px solid #f59e0b;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.12);
}

.campaign-step-row--call .step-channel:focus {
  outline: 2px solid #fcd34d;
  outline-offset: 2px;
}

.step-call-compose {
  grid-column: 1 / -2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #fde68a;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 2px rgba(255, 251, 235, 0.9);
}

.step-call-compose-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  letter-spacing: 0.02em;
}

.step-call-compose-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #92400e;
}

.campaign-step-row--call .step-twiml {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.4;
  border-radius: 12px;
  border: 1px solid #fcd34d;
  background: #ffffff;
  color: #0f172a;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.05);
}

.campaign-step-row--call .step-twiml::placeholder {
  color: #94a3b8;
}

.campaign-step-row--call .step-twiml:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28), inset 0 1px 3px rgba(15, 23, 42, 0.05);
}

.campaign-step-row .step-body-stack {
  grid-column: 1 / -2;
  min-height: 72px;
}

.step-plain-compose {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.campaign-step-row .step-body-plain {
  width: 100%;
  margin-top: 0;
  min-height: 88px;
  resize: vertical;
}

.campaign-step-row .step-email-editor-wrap {
  margin-top: 0;
}

.campaign-step-row .step-email-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
}

.campaign-step-row .step-email-toolbar button {
  width: auto;
  margin-top: 0;
  padding: 4px 10px;
  min-width: 0;
  font-size: 12px;
}

.campaign-step-row .step-email-img-btn {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

.campaign-step-row .step-email-img-btn:hover {
  background: #1a54a8;
}

.campaign-step-row .step-email-toolbar .step-email-fontsize {
  width: auto;
  margin-top: 0;
  min-width: 88px;
  padding: 4px 6px;
  font-size: 12px;
}

.campaign-step-row .step-email-color-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #475569;
}

.campaign-step-row .step-email-color {
  width: 32px;
  height: 28px;
  padding: 2px;
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
}

.campaign-step-row .step-body-rich {
  min-height: 120px;
  max-height: 320px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  color: #111827;
}

.campaign-step-row .step-body-rich:focus {
  outline: 2px solid #1e5fbf;
  outline-offset: 1px;
}

.campaign-step-row .step-body-rich img {
  max-width: 320px;
  width: auto;
  height: auto;
  display: block;
  margin-bottom: 10px;
  vertical-align: middle;
}

/* Injected email signature: cap graphics even when HTML has width/height attrs or inline width (fixed in campaigns.js too). */
.campaign-step-row .step-body-rich .campaign-email-signature-block img {
  max-width: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  box-sizing: border-box;
}

/* Table layout from pasted signatures (Outlook/Gmail) otherwise stays full viewport width. */
.campaign-step-row .step-body-rich .campaign-email-signature-block table {
  max-width: 100% !important;
  width: auto !important;
  table-layout: auto !important;
}

.campaign-step-row .step-body-rich .campaign-email-signature-block td,
.campaign-step-row .step-body-rich .campaign-email-signature-block th {
  max-width: 100% !important;
}

.campaign-step-row .step-email-image-wrap {
  display: inline-block;
  resize: both;
  overflow: auto;
  max-width: 100%;
  min-width: 48px;
  min-height: 28px;
  margin-top: 6px;
  border: 1px dashed #cbd5e1;
  background: #ffffff;
}

.campaign-step-row .step-email-image-wrap img {
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
}

/* Legacy campaign email bodies may wrap signature photos in resizable wrappers.
   Keep those signature images from stretching full-width in the editor. */
.campaign-step-row .step-email-image-wrap img[alt="Signature image"] {
  width: auto !important;
  max-width: 220px !important;
}

.campaign-step-row .step-email-image-wrap:has(img[alt="Signature image"]) {
  max-width: 220px;
  box-sizing: border-box;
}

.journey-email-html-preview {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  max-height: 280px;
  overflow: auto;
  /* Do not inherit muted dl/dt slate (#334155) — default email text should read as near-black. */
  color: #0f172a;
}

.journey-email-html-preview a {
  color: #1d4ed8;
}

.journey-email-html-preview img {
  max-width: 100%;
  height: auto;
}

.journey-email-html-preview .campaign-email-signature-block img {
  max-width: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.journey-email-html-preview .campaign-email-signature-block table {
  max-width: 100% !important;
  width: auto !important;
  table-layout: auto !important;
}

.journey-email-html-preview .campaign-email-signature-block td,
.journey-email-html-preview .campaign-email-signature-block th {
  max-width: 100% !important;
}

/* Also handle older saved HTML that lacks .campaign-email-signature-block wrapper. */
.journey-email-html-preview img[alt="Signature image"] {
  max-width: 220px;
  width: auto;
}

.campaign-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.campaign-list-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.campaign-list-header-actions > * {
  flex: 0 0 auto;
}

.contact-topbar-actions button,
.videos-topbar-actions button,
.forms-topbar-actions button,
.landing-topbar-actions button,
.drip-topbar-actions button,
.campaign-list-header-actions button {
  width: auto;
  min-width: 0;
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .contact-topbar-actions button,
  .videos-topbar-actions button,
  .forms-topbar-actions button,
  .landing-topbar-actions button,
  .drip-topbar-actions button,
  .campaign-list-header-actions button {
    padding: 4px 9px;
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  .contact-topbar-actions button,
  .videos-topbar-actions button,
  .forms-topbar-actions button,
  .landing-topbar-actions button,
  .drip-topbar-actions button,
  .campaign-list-header-actions button {
    padding: 3px 7px;
    font-size: 10px;
  }
}

.campaigns-page {
  display: flex;
  flex-direction: column;
}

.campaigns-page #savedCampaignsSection {
  order: 1;
}

.campaigns-page #createCampaignSection {
  order: 2;
}

.campaign-saved-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.campaign-category-sidebar {
  border: 1px solid #dbe2ef;
  background: #f8fafc;
  border-radius: 6px;
  padding: 10px;
}

.campaign-category-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.campaign-category-sidebar-head strong {
  font-size: 17px;
}

.campaign-category-sidebar-head button {
  width: auto;
  margin-top: 0;
  padding: 6px 10px;
  font-size: 14px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  border-color: #6d28d9;
}

#addCampaignCategoryBtn {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  border-color: #6d28d9;
  font-size: 16px;
}

.campaign-category-sidebar-head button:hover,
#addCampaignCategoryBtn:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6);
  color: #ffffff;
  border-color: #5b21b6;
}

.campaign-category-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

.campaign-category-quick-filters {
  display: contents;
}

.campaign-category-quick-btn {
  width: 100%;
  min-height: 0;
  margin-top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  padding: 9px 10px;
  font-size: 11px;
}

.campaign-category-quick-btn.is-active {
  border-color: #4338ca;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff;
}

.campaign-category-quick-btn strong {
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}

.campaign-category-group {
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 1) {
  border-color: #1d4ed8;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 2) {
  border-color: #4338ca;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 3) {
  border-color: #d97706;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 4) {
  border-color: #ea580c;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 5) {
  border-color: #0f766e;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 6) {
  border-color: #dc2626;
}

.campaign-category-group summary {
  list-style: none;
}

.campaign-category-group summary::-webkit-details-marker {
  display: none;
}

.campaign-category-item {
  width: 100%;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 9px 10px;
  font-size: 15px;
  cursor: pointer;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 1) .campaign-category-item {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 2) .campaign-category-item {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 3) .campaign-category-item {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 4) .campaign-category-item {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 5) .campaign-category-item {
  background: linear-gradient(135deg, #0d9488, #0f766e);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 6) .campaign-category-item {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.campaign-category-item::before {
  content: "▸";
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.campaign-category-group[open] .campaign-category-item::before {
  content: "▾";
}

.campaign-category-item.is-active {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 1) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 2) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #4338ca, #312e81);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 3) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #d97706, #b45309);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 4) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #ea580c, #c2410c);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 5) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #0f766e, #115e59);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 6) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.campaign-category-item strong {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
}

.campaign-category-children {
  border-top: 1px solid #e2e8f0;
  padding: 6px;
  display: grid;
  gap: 6px;
  background: #f8fafc;
}

.campaign-category-child {
  width: 100%;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  padding: 7px 9px;
  font-size: 13px;
}

.campaign-category-group[open] .campaign-category-children {
  background: #ffffff;
}

.campaign-category-group[open] .campaign-category-child {
  background: #ffffff;
  border-color: #94a3b8;
  color: #0f172a;
}

.campaign-category-group[open] .campaign-category-child-name {
  color: #0f172a;
  font-size: 15px;
  font-weight: 400;
}

.campaign-category-group[open] .campaign-category-child-badge {
  color: #1e293b;
  border-color: #94a3b8;
  background: #e2e8f0;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 1)[open] .campaign-category-children {
  background: #dbeafe;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 1)[open] .campaign-category-child {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #60a5fa;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 2)[open] .campaign-category-children {
  background: #e0e7ff;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 2)[open] .campaign-category-child {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border-color: #818cf8;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 3)[open] .campaign-category-children {
  background: #fef3c7;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 3)[open] .campaign-category-child {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: #f59e0b;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 4)[open] .campaign-category-children {
  background: #ffedd5;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 4)[open] .campaign-category-child {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: #fb923c;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 5)[open] .campaign-category-children {
  background: #ccfbf1;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 5)[open] .campaign-category-child {
  background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
  border-color: #2dd4bf;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 6)[open] .campaign-category-children {
  background: #fee2e2;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 6)[open] .campaign-category-child {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border-color: #f87171;
}

.campaign-category-child.is-active {
  border-color: #4f46e5;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.campaign-category-child.is-active .campaign-category-child-name {
  color: #ffffff;
  font-weight: 600;
}

.campaign-category-group[open] .campaign-category-child.is-active {
  color: #0f172a;
}

.campaign-category-group[open] .campaign-category-child.is-active .campaign-category-child-name {
  color: #0f172a;
  font-weight: 400;
}

.campaign-category-child-name {
  text-align: left;
}

.campaign-category-child-badge {
  font-size: 11px;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 1px 6px;
  background: #f8fafc;
  white-space: nowrap;
}

.campaign-category-child-details {
  border: 1px solid #dbe2ef;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #ffffff;
  padding: 8px;
  margin-top: -6px;
}

.campaign-category-child-details:not(.is-active) {
  display: none;
}

.campaign-category-inline-actions {
  margin-bottom: 6px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.campaign-category-empty {
  font-size: 12px;
  color: #64748b;
  padding: 4px 6px;
}

.campaign-list-header button {
  width: auto;
  margin-top: 0;
}

.campaign-list {
  display: none;
}

.campaign-card {
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px;
}

.campaign-card-selected {
  border-color: #1e5fbf;
  box-shadow: 0 0 0 2px rgba(30, 95, 191, 0.2);
  background: #eef4ff;
}

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

.campaign-card-top button {
  width: auto;
  margin-top: 0;
}

.campaign-card-actions {
  display: inline-flex;
  gap: 8px;
}

.campaign-inline-rename-form {
  margin: 8px 0 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.campaign-inline-rename-input {
  min-width: 240px;
  width: min(360px, 100%);
  margin: 0;
}

button.campaign-inline-rename-save,
button.campaign-inline-rename-cancel {
  width: auto;
  min-width: 54px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 0;
  border-radius: 3px;
  cursor: pointer;
  box-sizing: border-box;
}

button.campaign-inline-rename-save {
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
}

button.campaign-inline-rename-save:hover {
  background: #1a54a8;
  border-color: #174a94;
}

button.campaign-inline-rename-cancel {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
}

button.campaign-inline-rename-cancel:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* Smaller blue “Edit” / inline action buttons (Campaigns, Landing Pages, Forms open-link) */
button.campaign-inline-edit,
button.campaign-inline-duplicate,
button.campaign-inline-rename,
button.landing-edit-btn {
  width: auto;
  min-width: 54px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 0;
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  border-radius: 3px;
  cursor: pointer;
  box-sizing: border-box;
}

button.campaign-inline-edit:hover,
button.campaign-inline-duplicate:hover,
button.campaign-inline-rename:hover,
button.landing-edit-btn:hover {
  background: #1a54a8;
  border-color: #174a94;
}

/* Same footprint as Edit — paired Delete on Campaigns, Landing Pages, Forms, Videos, Documents */
button.danger.campaign-inline-delete,
button.danger.landing-delete-btn,
button.danger.form-delete-btn,
button.danger.video-delete-btn,
button.danger.document-delete {
  width: auto;
  min-width: 54px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 0;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #8f1515;
  box-sizing: border-box;
}

button.danger.campaign-inline-delete:hover,
button.danger.landing-delete-btn:hover,
button.danger.form-delete-btn:hover,
button.danger.video-delete-btn:hover,
button.danger.document-delete:hover {
  background: #8f1515;
  border-color: #7a1212;
}

/* Actions column — space between Edit / Delete */
.landing-pages-table tbody td:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Platform — label and values (e.g. Wix) centered under the column */
.landing-pages-table th:nth-child(3),
.landing-pages-table td:nth-child(3) {
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
}

/* Website URL — slight indent from Preview */
.landing-pages-table th:nth-child(4),
.landing-pages-table td:nth-child(4) {
  padding-left: 14px;
}

.landing-page-preview-cell {
  vertical-align: middle;
  width: 200px;
  text-align: right;
  padding-right: 4px;
}

.landing-page-snapshot-link {
  display: inline-block;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #dbe2ef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.landing-page-snapshot-link:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(30, 95, 191, 0.15);
}

.landing-page-snapshot {
  display: block;
  width: 160px;
  height: 100px;
  object-fit: cover;
  object-position: top center;
  background: #f1f5f9;
}

.landing-page-snapshot-empty {
  color: #94a3b8;
  font-size: 13px;
}

.campaign-card-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.campaign-timeline-wrap {
  margin-top: 8px;
}

.campaign-timeline-wrap h4 {
  margin: 0 0 8px;
}

.campaign-timeline-preview {
  display: grid;
  gap: 6px;
}

.campaign-timeline-row {
  border: 1px solid #dbe2ef;
  border-radius: 4px;
  background: #ffffff;
  padding: 6px 8px;
  font-size: 12px;
  color: #334155;
}

.campaign-timeline-row--sms {
  border-color: #c4b5fd;
  border-left: 3px solid #7c3aed;
  background: linear-gradient(180deg, #fafbff 0%, #f5f3ff 100%);
}

.campaign-timeline-row--email {
  border-color: #7dd3fc;
  border-left: 3px solid #0ea5e9;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
}

.campaign-timeline-row--call {
  border-color: #fde68a;
  border-left: 3px solid #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
}

.campaign-timeline-row--unknown {
  border-left: 3px solid #94a3b8;
}

.campaign-journey-wrap {
  margin-top: 8px;
}

.campaign-journey-wrap h4 {
  margin: 0 0 8px;
}

.campaign-journey-chart {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.journey-node {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 220px;
  border: 2px solid #dbe2ef;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.journey-node--sms {
  border-color: #c4b5fd;
  background: linear-gradient(180deg, #fafbff 0%, #f5f3ff 100%);
}

.journey-node--sms:hover {
  border-color: #a78bfa;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.journey-node--sms:focus-visible {
  outline-color: #7c3aed;
}

.journey-node--sms .journey-node-title {
  color: #4338ca;
}

.journey-node--email {
  border-color: #e0f2fe;
  background: linear-gradient(180deg, #feffff 0%, #f4fbff 50%, #eff8ff 100%);
}

.journey-node--email:hover {
  border-color: #dbeafe;
  box-shadow: 0 2px 12px rgba(186, 230, 253, 0.45);
}

.journey-node--email:focus-visible {
  outline-color: #bae6fd;
}

.journey-node--email .journey-node-title {
  color: #0e7490;
}

.journey-node--call {
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
}

.journey-node--call:hover {
  border-color: #fbbf24;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.22);
}

.journey-node--call:focus-visible {
  outline-color: #d97706;
}

.journey-node--call .journey-node-title {
  color: #92400e;
}

.journey-node--unknown:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.18);
}

.journey-node--unknown:focus-visible {
  outline-color: #64748b;
}

.journey-node:focus {
  outline: none;
}

.journey-node:focus-visible {
  outline: 2px solid #1e5fbf;
  outline-offset: 2px;
}

.journey-node-title {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  text-align: center;
}

.journey-node-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #334155;
  text-align: center;
}

.journey-node-time {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}

/* Align with Schedule Preview rows / saved campaign step density — compact cards, narrow default Step 1. */
.campaign-journey-chart .journey-node {
  min-width: 148px;
  max-width: 200px;
  padding: 6px 8px;
  border-radius: 48px;
}

.campaign-journey-chart .journey-node-title {
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.campaign-journey-chart .journey-node-meta {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.25;
}

.campaign-journey-chart .journey-node-time {
  margin-top: 4px;
  font-size: 11px;
}

.campaign-journey-chart .journey-node--email .journey-node-title {
  color: #0d9488;
}

.campaign-journey-chart .journey-node--email:hover {
  border-color: #e0f2fe;
  box-shadow: 0 2px 14px rgba(224, 242, 254, 0.85);
}

.campaign-journey-chart .journey-arrow::before {
  background: #94a3b8;
}

.campaign-journey-chart .journey-arrow::after {
  border-left-color: #94a3b8;
}

.journey-arrow {
  display: inline-flex;
  align-items: center;
  width: 34px;
  min-width: 34px;
  justify-content: center;
  position: relative;
}

.journey-arrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: #1e5fbf;
  border-radius: 1px;
}

.journey-arrow::after {
  content: "";
  position: absolute;
  right: 3px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #1e5fbf;
}

.journey-step-dialog {
  max-width: min(640px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #dbe2ef;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
}

/* Opened with show() so Save/Update stays clickable; center like a modal without document inert. */
.journey-step-dialog[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-height: min(76vh, 620px);
  overflow: auto;
  z-index: 1200;
}

.journey-step-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.journey-step-dialog-inner {
  padding: 16px 40px 16px 16px;
  position: relative;
}

.journey-step-dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

.journey-step-dialog-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.journey-step-dialog-heading {
  margin: 0 0 12px;
  font-size: 16px;
  color: #1e3a8a;
}

.journey-step-detail-list {
  margin: 0;
  display: grid;
  gap: 10px 0;
  font-size: 13px;
  color: #334155;
}

.journey-step-detail-list dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.journey-step-detail-list dd {
  margin: 2px 0 0;
}

.journey-step-plain-body {
  max-height: min(48vh, 360px);
  overflow: auto;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

.journey-step-break-url {
  word-break: break-all;
  font-size: 12px;
}

.campaign-category-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #dbe2ef;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
}

.campaign-category-dialog[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1200;
}

.campaign-category-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.campaign-category-dialog-inner {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.campaign-category-dialog-inner h3 {
  margin: 0;
  font-size: 18px;
  color: #1e3a8a;
}

.journey-detail-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  font-size: 13px;
  color: #334155;
}

.journey-detail-list dt {
  margin: 0;
  font-weight: 600;
  color: #475569;
}

.journey-detail-list dd {
  margin: 0;
}

.journey-detail-pre {
  margin: 4px 0 0;
  padding: 10px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  max-height: 240px;
  overflow: auto;
}

.journey-detail-footnote {
  margin: 12px 0 0;
  font-size: 12px;
  color: #64748b;
}

#campaignForm button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#campaignForm button[type="submit"]:hover {
  background: #1a54a8;
}

#campaignForm #addTagRuleBtn,
#campaignForm #addStepBtn {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
  padding: 6px 12px;
  font-size: 12px;
}

#campaignForm #addTagRuleBtn:hover,
#campaignForm #addStepBtn:hover {
  background: #1a54a8;
}

/* Campaign builder should show full form without inner scrollbar */
#campaignForm.contact-modal-form {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* Send Email signature form should not show inner right scrollbar */
#emailSignatureForm.contact-modal-form {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

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

.documents-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  overflow: visible;
}

.documents-category-btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 220px;
  margin-top: 0;
  padding: 9px 10px;
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #ffffff;
}

.documents-category-btn.is-active {
  border-color: #4338ca;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.documents-category-btn:nth-of-type(6n + 1) {
  border-color: #1d4ed8;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.documents-category-btn:nth-of-type(6n + 2) {
  border-color: #4338ca;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.documents-category-btn:nth-of-type(6n + 3) {
  border-color: #d97706;
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.documents-category-btn:nth-of-type(6n + 4) {
  border-color: #ea580c;
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.documents-category-btn:nth-of-type(6n + 5) {
  border-color: #0f766e;
  background: linear-gradient(135deg, #0d9488, #0f766e);
}

.documents-category-btn:nth-of-type(6n + 6) {
  border-color: #dc2626;
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.documents-category-btn strong {
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}

.document-row {
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px;
}

.document-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
}

#documentsList .document-attach input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  flex-shrink: 0;
}

.document-name {
  margin-top: 6px;
  font-weight: 700;
  color: #1e3a8a;
}

.document-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

.document-item-actions {
  margin-top: 8px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Forms — saved list: thumbnail (URL uses mshots like Landing Pages; files use image or type badge) */
.form-document-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px;
}

.form-document-main-col {
  flex: 1;
  min-width: 0;
}

.form-thumb-cell {
  flex-shrink: 0;
}

.form-thumb-link {
  display: inline-block;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #dbe2ef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.form-thumb-link:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(30, 95, 191, 0.15);
}

.form-thumb-img {
  display: block;
  width: 160px;
  height: 100px;
  object-fit: cover;
  object-position: top center;
  background: #f1f5f9;
}

.form-thumb-badge-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.form-thumb-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 160px;
  height: 100px;
  border-radius: 6px;
  border: 1px solid #dbe2ef;
  background: linear-gradient(160deg, #f8fafc 0%, #e2e8f0 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.form-thumb-badge-link:hover .form-thumb-badge {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(30, 95, 191, 0.12);
}

.form-thumb-badge-ext {
  font-size: 18px;
  font-weight: 800;
  color: #1e3a8a;
  letter-spacing: 0.02em;
}

.form-thumb-badge-hint {
  font-size: 11px;
  color: #64748b;
}

.form-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 100px;
  border-radius: 6px;
  border: 1px dashed #cbd5e1;
  color: #94a3b8;
  font-size: 13px;
  background: #f8fafc;
}

.document-actions {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.document-actions a {
  color: #1e5fbf;
  text-decoration: none;
}

.document-actions button {
  width: auto;
  margin-top: 0;
}

#documentUploadForm button[type="submit"] {
  width: auto;
  margin-top: 0;
  padding: 9px 14px;
  font-size: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
  border-radius: 10px;
}

#documentUploadForm button[type="submit"]:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

#addDocumentCategoryBtn,
#deleteDocumentCategoryBtn {
  width: auto;
  margin-top: 0;
  padding: 5px 10px;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 8px;
}

#documentFileInput {
  font-size: 14px;
  margin-top: 0;
}

#documentCategorySelect {
  width: auto;
  min-width: 190px;
  height: 40px;
  margin-top: 0;
  padding: 7px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff;
  border-color: #4338ca;
  font-size: 13px;
  font-weight: 700;
}

#documentCategorySelect option {
  color: #0f172a;
  background: #ffffff;
}

#documentFileInput::file-selector-button,
#documentFileInput::-webkit-file-upload-button {
  border: 1px solid #0f766e;
  border-radius: 10px;
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  margin-right: 10px;
  cursor: pointer;
}

.page-send-email .topbar h1 {
  font-size: 28px;
}

.page-send-email main .panel > h3 {
  font-size: 15px;
  font-weight: 600;
}

.page-send-email #message,
.page-send-email .email-page-message {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 10px;
  min-height: 1.2em;
}

.page-send-email .email-page-status-bottom {
  margin-top: 16px;
  margin-bottom: 28px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
}

.page-send-email .email-page-status-bottom:empty {
  display: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  background: transparent;
}

.page-send-email .quick-send-top-status {
  position: sticky;
  top: 8px;
  z-index: 30;
  font-weight: 700;
  background: #ecfdf3;
  border-color: #86efac;
}

.page-send-email .quick-send-top-status[hidden] {
  display: none !important;
}

.email-signature-save-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.email-template-save-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.email-template-save-actions .signature-save-feedback {
  margin: 0;
}

.signature-save-feedback {
  font-size: 14px;
  font-weight: 600;
  color: #1b5e20;
  min-height: 1.2em;
}

.signature-save-feedback.signature-save-feedback--error {
  color: #c62828;
}

/* Attachment Options (nested under form); smaller than Template / Signature panels */
.page-send-email h3.email-page-section-heading {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 14px;
  color: #111827;
}

/* Save New Template & Email Signature — direct children of section.panel */
.page-send-email section.panel > h3.email-page-section-heading {
  font-size: 24px;
}

#sendEmailForm,
#saveTemplateForm {
  font-size: 14px;
}

#sendEmailForm .contact-modal-field-label,
#saveTemplateForm .contact-modal-field-label {
  font-size: 14px;
}

#sendEmailForm input,
#sendEmailForm select,
#sendEmailForm textarea,
#sendEmailForm button,
#saveTemplateForm input,
#saveTemplateForm select,
#saveTemplateForm textarea,
#saveTemplateForm button {
  font-size: 14px;
}

#sendEmailForm .contact-modal-actions button,
#saveTemplateForm .contact-modal-actions button {
  padding: 9px 12px;
}

#sendEmailForm .contact-modal-actions button[type="submit"],
#saveTemplateForm .contact-modal-actions button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#sendEmailForm .contact-modal-actions button[type="submit"]:hover,
#saveTemplateForm .contact-modal-actions button[type="submit"]:hover {
  background: #1a54a8;
}

#emailAttachmentList .document-attach,
#emailAttachmentList .document-name,
#emailAttachmentList .document-meta {
  font-size: 11px;
}

#emailAttachmentList.documents-list {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 4px;
  align-items: stretch;
  max-height: min(32vh, 220px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

#emailAttachmentList .document-row {
  padding: 4px 6px;
  border-radius: 4px;
}

#emailAttachmentList .email-attach-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  min-height: 0;
  box-sizing: border-box;
}

#emailAttachmentList .document-attach {
  width: 100%;
  align-items: flex-start;
  gap: 5px;
  font-size: 11px;
}

#emailAttachmentList .document-attach input[type="checkbox"],
#emailAttachmentList .email-attach-checkbox {
  flex-shrink: 0;
  margin-top: 1px;
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
}

#emailAttachmentList .email-attach-filename {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  line-height: 1.25;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}

/* Computer / local files — checkbox + stacked text; Remove below */
#emailAttachmentList .email-local-tile-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

#emailAttachmentList .email-local-attach-inner {
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
}

#emailAttachmentList .email-local-text-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

#emailAttachmentList .email-local-attach-badge {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1e40af;
  background: #dbeafe;
  border-radius: 3px;
  padding: 1px 4px;
}

#emailAttachmentList .email-local-meta {
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
}

#emailAttachmentList .email-local-remove-btn {
  margin-top: 4px;
  width: 100%;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  cursor: pointer;
}

#emailAttachmentList .email-local-remove-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

#emailAttachmentList .email-local-remove-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Library docs on Send Email — same compact tile + Remove (deletes server copy) */
#emailAttachmentList .email-library-tile-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

#emailAttachmentList .email-library-attach-tile .document-attach {
  align-items: flex-start;
  gap: 6px;
}

#emailAttachmentList .email-library-remove-btn {
  width: 100%;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  cursor: pointer;
}

#emailAttachmentList .email-library-remove-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

#emailAttachmentList .email-library-remove-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.email-attachments-wrap input[type="file"] {
  font-size: 13px;
}

.email-attachments-wrap input[type="file"]::file-selector-button,
.email-attachments-wrap input[type="file"]::-webkit-file-upload-button {
  font-size: 12px;
  padding: 5px 10px;
  margin-right: 8px;
}

#sendEmailForm .email-subject-box,
#sendEmailForm .email-body-box {
  grid-column: 1 / -1;
}

#emailSignatureForm textarea {
  min-height: 120px;
}

.email-signature-editor {
  min-height: 140px;
  border: 1px solid #d9dee9;
  border-radius: 4px;
  padding: 10px;
  background: #ffffff;
  line-height: 1.4;
  font-size: 14px;
  overflow: auto;
  resize: both;
}

.email-signature-toolbar,
.email-rich-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.email-signature-toolbar button,
.email-signature-toolbar select,
.email-rich-toolbar button,
.email-rich-toolbar select {
  width: auto;
  margin-top: 0;
  padding: 5px 10px;
  font-size: 13px;
}

#signatureInsertPhotoBtn,
#signatureInsertGraphicUrlBtn {
  background: #eef4ff;
  border: 1px solid #c7d7f7;
  color: #1f3f7a;
}

#signatureInlineFontSize {
  padding: 3px 6px;
  font-size: 11px;
}

#signatureInlineColor {
  width: 34px;
  min-width: 34px;
  height: 28px;
  padding: 2px;
}

#signatureUnderlineBtn {
  padding: 3px 7px;
  font-size: 11px;
}

.page-send-email #emailBodyInsertPhotoBtn,
.page-send-email #emailBodyInsertGraphicUrlBtn,
.page-send-email #templateBodyInsertPhotoBtn,
.page-send-email #templateBodyInsertGraphicUrlBtn {
  background: #eef4ff;
  border: 1px solid #c7d7f7;
  color: #1f3f7a;
}

.page-send-email #emailBodyInlineFontSize,
.page-send-email #templateBodyInlineFontSize {
  padding: 3px 6px;
  font-size: 11px;
}

.page-send-email #emailBodyInlineColor,
.page-send-email #templateBodyInlineColor {
  width: 34px;
  min-width: 34px;
  height: 28px;
  padding: 2px;
}

.page-send-email .email-rich-image-url {
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid #d9dee9;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
}

/* Agile CRM–style compose layout */
.agile-email-compose-panel {
  margin-bottom: 24px;
  max-width: 1080px;
  margin-inline: auto;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(79, 70, 229, 0.14);
  border: 1px solid #ddd6fe;
  background: linear-gradient(180deg, #faf8ff 0%, #ffffff 70%);
  padding: 18px 20px;
}

.agile-email-section-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}

.agile-email-field-row {
  display: grid;
  grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 8px;
}

.agile-email-field-row select,
.agile-email-field-row input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.agile-label-required::after {
  content: " *";
  color: #c62828;
}

.agile-to-cc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 8px;
  align-items: end;
}

.agile-to-cc-item {
  min-width: 0;
}

.agile-to-cc-item .contact-modal-field-label {
  margin-bottom: 4px;
}

.agile-email-template-row {
  display: grid;
  grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 8px;
}

.agile-template-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.agile-template-controls select {
  flex: 1;
  min-width: 180px;
}

.agile-link-action {
  white-space: nowrap;
  font-size: 14px;
  color: #ffffff;
  text-decoration: underline;
}

.agile-link-action:hover {
  color: #e2e8f0;
}

#bulkTagsModal .contact-modal-card {
  width: min(460px, calc(100% - 24px));
  margin: 72px auto;
  padding: 10px 12px;
}

#bulkTagsModal .contact-modal-header {
  margin-bottom: 6px;
}

#bulkTagsModal .contact-modal-header h3 {
  font-size: 20px;
}

#bulkTagsModal .contact-modal-form {
  max-height: none;
  overflow: visible;
  gap: 6px;
  padding-right: 0;
}

#bulkTagsModal .contact-modal-field-label {
  font-size: 15px;
}

#bulkTagsModal input,
#bulkTagsModal button {
  font-size: 15px;
}

.agile-email-message-box .agile-email-rich-toolbar {
  margin-bottom: 8px;
  position: sticky;
  top: 10px;
  z-index: 20;
  background: #ffffff;
  border: 1px solid #d9dee9;
  border-radius: 8px;
  padding: 8px;
}

.agile-toolbar-select {
  min-width: 110px;
}

.page-send-email #emailToolbarAttachBtn {
  background: #eef4ff;
  border: 1px solid #c7d7f7;
  color: #1f3f7a;
}

.page-send-email #emailToolbarAttachBtn:hover {
  background: #e3edff;
}

.agile-email-compose-panel .email-attachments-wrap {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

#sendEmailForm #emailBodyEditor {
  min-height: 180px;
  max-height: 340px;
  color: #0f172a;
}

#sendEmailForm #emailBodyEditor .signature-image-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.agile-email-footer-meta {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e8ecf4;
}

.agile-tracking-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  cursor: default;
}

.agile-tracking-row input[disabled] {
  cursor: not-allowed;
}

.agile-email-send-actions {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 12px;
}

.agile-email-send-actions .email-send-inline-status {
  margin-left: auto;
  align-self: center;
  font-size: 14px;
  font-weight: 600;
  color: #1b5e20;
  min-height: 20px;
}

.agile-email-send-actions #message {
  margin-top: 0;
  margin-bottom: 0;
}

#sendEmailForm.agile-email-form .agile-cancel-btn {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
}

#sendEmailForm.agile-email-form .agile-cancel-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #1e293b;
}

.page-send-email .email-rich-image-actions button {
  width: auto;
  margin-top: 6px;
}

.page-send-email .email-body-image-file-field {
  margin-top: 8px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-send-email .email-body-image-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.page-send-email .email-body-image-file-label {
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  margin: 0;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  background: #f8fafc;
  color: #1e293b;
  line-height: 1.3;
  user-select: none;
}

.page-send-email .email-body-image-file-label:hover {
  background: #e2e8f0;
  border-color: #64748b;
}

.page-send-email .email-body-image-file-field:focus-within .email-body-image-file-label {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.page-send-email .email-template-body-box {
  grid-column: 1 / -1;
}

.email-templates-groups {
  display: block;
}

.email-templates-page {
  display: flex;
  flex-direction: column;
}

.email-templates-page #savedEmailTemplatesSection {
  order: 1;
}

.email-templates-page #createEmailTemplateSection {
  order: 2;
}

.email-templates-browser {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.email-template-categories {
  border: none;
  border-radius: 10px;
  background: #f8fafc;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.email-template-table-pane {
  grid-column: 1 / -1;
}

.email-template-category-btn {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 12px 14px;
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: #ffffff;
}

.email-template-category-btn.is-active {
  border-color: #4338ca;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff;
  font-weight: 700;
}

.email-template-category-btn strong {
  font-size: 24px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}

.email-template-category-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 1) {
  border-color: #1d4ed8;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 2) {
  border-color: #4338ca;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 3) {
  border-color: #d97706;
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 4) {
  border-color: #ea580c;
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 5) {
  border-color: #0f766e;
  background: linear-gradient(135deg, #0d9488, #0f766e);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 6) {
  border-color: #dc2626;
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 1).is-active {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 2).is-active {
  background: linear-gradient(135deg, #4338ca, #312e81);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 3).is-active {
  background: linear-gradient(135deg, #d97706, #b45309);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 4).is-active {
  background: linear-gradient(135deg, #ea580c, #c2410c);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 5).is-active {
  background: linear-gradient(135deg, #0f766e, #115e59);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 6).is-active {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.email-template-table-pane {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.email-template-table-head {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 14px;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-template-search-input {
  width: 280px;
  max-width: 100%;
  margin-top: 0;
  font-size: 13px;
  padding: 6px 8px;
}

.email-template-group-table-wrap {
  overflow-x: auto;
}

.email-template-group-table {
  width: 100%;
  border-collapse: collapse;
}

.email-template-group-table th,
.email-template-group-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
  text-align: left;
  vertical-align: top;
}

.email-template-group-table th {
  font-weight: 700;
  color: #334155;
  background: #f8fafc;
}

.email-template-group-table tbody tr:last-child td {
  border-bottom: none;
}

.email-template-list-action-cell {
  width: 90px;
  text-align: right;
}

.email-template-list-edit-btn {
  width: auto;
  margin-top: 0;
  padding: 4px 10px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .email-templates-browser {
    grid-template-columns: 1fr;
  }
}

.email-rich-editor.email-signature-editor {
  margin-top: 10px;
  min-height: 160px;
}

.email-templates-page .email-template-body-box .email-rich-toolbar {
  position: sticky;
  top: 10px;
  z-index: 15;
  background: #ffffff;
  border: 1px solid #d9dee9;
  border-radius: 8px;
  padding: 8px;
}

.email-rich-toolbar-grid-cluster {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.email-templates-page .email-rich-toolbar-grid-color-label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}

.email-templates-page #templateBodyGridColor {
  width: 34px;
  min-width: 34px;
  height: 28px;
  padding: 2px;
  flex-shrink: 0;
}

.email-templates-page #saveTemplateForm.contact-modal-form {
  max-height: none;
  overflow: visible;
}

.email-templates-page #templateBodyEditor {
  max-height: 420px;
  overflow-y: auto;
  color: #0f172a;
}

.email-templates-page #templateBodyEditor ul,
.email-templates-page #templateBodyEditor ol {
  margin: 8px 0;
  padding-left: 1.5em;
}

.email-templates-page #templateBodyEditor li {
  margin: 2px 0;
}

/* Full-width row for inserted images so width:100% / max-width caps match the editor (inline-block shrink-wrap was keeping images narrow). */
.email-templates-page #templateBodyEditor .signature-image-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.email-signature-editor:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}

.email-signature-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 6px;
}

.signature-image-wrap {
  display: inline-block;
  resize: both;
  overflow: auto;
  max-width: 100%;
  min-width: 50px;
  min-height: 30px;
  border: 1px dashed #cbd5e1;
  margin-top: 6px;
  cursor: move;
}

.signature-image-wrap.is-dragging {
  opacity: 0.6;
}

.signature-image-wrap img {
  /* Override inline width:auto from editor HTML so resizing the wrapper also resizes image. */
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  max-height: none;
  margin-top: 0;
}

#emailSignatureForm .contact-modal-grid input,
#emailSignatureForm .contact-modal-grid select,
#emailSignatureForm .document-attach,
#emailSignatureForm .contact-modal-actions button {
  font-size: 14px;
}

#emailSignatureForm .contact-modal-actions button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#emailSignatureForm .contact-modal-actions button[type="submit"]:hover {
  background: #1a54a8;
}

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

  .contacts-layout {
    grid-template-columns: 1fr;
  }

  .quick-filters {
    position: static;
  }

  .active-filters-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-details-layout {
    grid-template-columns: 1fr;
  }

  .contact-history-list {
    max-height: none;
  }

  .home-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-main-grid {
    grid-template-columns: 1fr;
  }

  .home-distribution-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .campaign-saved-layout {
    grid-template-columns: 1fr;
  }
}

#addContactForm button[type="submit"],
#smsForm button[type="submit"] {
  width: auto;
  justify-self: start;
  padding: 4px 10px;
  font-size: 12px;
}

.journey-page .journey-board-panel {
  overflow: hidden;
}

.journey-board {
  position: relative;
  width: 100%;
  min-height: 560px;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  overflow: hidden;
}

.journey-board-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Draw above node cards so links stay visible when a node overlaps the arrow;
     pointer-events none lets clicks reach nodes; paths use pointer-events: stroke. */
  z-index: 3;
  pointer-events: none;
}

.journey-link-path {
  fill: none;
  stroke: #4f46e5;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: pointer;
}

.journey-link-path--drag-preview {
  pointer-events: none;
  stroke-dasharray: 7 5;
  opacity: 0.9;
  stroke: #6366f1;
}

.journey-board.is-link-dragging {
  cursor: crosshair;
}

.journey-link-label {
  fill: #4338ca;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

.journey-node-card {
  position: absolute;
  width: 190px;
  min-height: 74px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.76);
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 56%, #e2e8f0 100%);
  box-shadow:
    0 14px 24px rgba(15, 23, 42, 0.2),
    0 4px 0 rgba(100, 116, 139, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(148, 163, 184, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 32px 10px 10px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  z-index: 2;
  transform: translateY(0);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    filter 140ms ease;
}

.journey-node-card:hover {
  filter: saturate(1.04);
  transform: translateY(-3px);
  box-shadow:
    0 18px 30px rgba(15, 23, 42, 0.24),
    0 7px 0 rgba(100, 116, 139, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(148, 163, 184, 0.18);
}

.journey-node-card.is-dragging {
  cursor: grabbing;
  transform: translateY(-5px) scale(1.015);
  box-shadow:
    0 24px 36px rgba(15, 23, 42, 0.3),
    0 8px 0 rgba(100, 116, 139, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  will-change: left, top;
  /* Above connection layer so the card stays readable while dragging. */
  z-index: 5;
}

.journey-node-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  background: #e2e8f0;
  color: #1e293b;
  flex: 0 0 30px;
}

.journey-node-text {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
  min-height: 18px;
}

.journey-node-body {
  display: grid;
  gap: 6px;
  width: 100%;
}

.journey-node-text[contenteditable="true"] {
  outline: none;
  border-radius: 6px;
  padding: 2px 4px;
}

.journey-node-text[contenteditable="true"]:focus {
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px #93c5fd;
}

.journey-node-type {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2937;
  font-size: 12px;
  padding: 3px 6px;
}

.journey-node-view-content {
  width: 100%;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  color: #3730a3;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.journey-node-view-content:hover {
  border-color: #818cf8;
  color: #312e81;
}

.journey-node-view-content:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.journey-node-connector-out {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 2px solid #6366f1;
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
  cursor: crosshair;
  flex-shrink: 0;
  z-index: 4;
  touch-action: none;
}

.journey-node-connector-out:hover {
  border-color: #4f46e5;
  background: #c7d2fe;
}

.journey-node-connector-out:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.journey-context-menu {
  position: fixed;
  z-index: 3000;
  min-width: 170px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.2);
  padding: 6px;
  display: grid;
  gap: 4px;
}

.journey-context-menu button {
  width: 100%;
  text-align: left;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
  color: #1e293b;
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
}

.journey-context-menu button:hover:not(:disabled) {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.journey-context-menu button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.journey-context-menu button.danger {
  color: #991b1b;
  border-color: #fecaca;
  background: #fff1f2;
}

.journey-board.is-connecting {
  box-shadow: inset 0 0 0 2px #c7d2fe;
}

.journey-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 3200;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.3);
}

.journey-toast--success {
  background: #166534;
}

.journey-toast--danger {
  background: #991b1b;
}

.journey-campaign-picker-panel {
  margin-bottom: 12px;
}

.journey-campaign-subtitle {
  margin-top: 6px;
  font-weight: 600;
  color: #334155;
}

.journey-campaign-hint-col {
  margin: 0;
  padding: 12px 14px;
  align-self: start;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  background: #ffffff;
}

.journey-node-card--start {
  border-color: #86efac;
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 54%, #bbf7d0 100%);
}
.journey-node-card--start .journey-node-icon {
  background: linear-gradient(145deg, #f0fdf4 0%, #bbf7d0 100%);
  color: #166534;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(22, 101, 52, 0.18);
}

.journey-node-card--email {
  border-color: #7dd3fc;
  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 54%, #bae6fd 100%);
}
.journey-node-card--email .journey-node-icon {
  background: linear-gradient(145deg, #f0f9ff 0%, #bae6fd 100%);
  color: #0369a1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(3, 105, 161, 0.18);
}

.journey-node-card--sms {
  border-color: #c4b5fd;
  background: linear-gradient(145deg, #ffffff 0%, #f5f3ff 54%, #ddd6fe 100%);
}
.journey-node-card--sms .journey-node-icon {
  background: linear-gradient(145deg, #f5f3ff 0%, #ddd6fe 100%);
  color: #5b21b6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(91, 33, 182, 0.18);
}

.journey-node-card--call {
  border-color: #fde68a;
  background: linear-gradient(145deg, #ffffff 0%, #fffbeb 54%, #fde68a 100%);
}
.journey-node-card--call .journey-node-icon {
  background: linear-gradient(145deg, #fffbeb 0%, #fde68a 100%);
  color: #b45309;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(180, 83, 9, 0.18);
}

.journey-node-card--success {
  border-color: #86efac;
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 54%, #bbf7d0 100%);
}
.journey-node-card--success .journey-node-icon {
  background: linear-gradient(145deg, #f0fdf4 0%, #bbf7d0 100%);
  color: #166534;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(22, 101, 52, 0.18);
}

#journeyResetLayoutBtn {
  width: auto;
  min-width: 0;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
}

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

#journeySaveCampaignBtn {
  width: auto;
  min-width: 0;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  background: #166534;
  color: #ffffff;
  border: 1px solid #15803d;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

#journeySaveCampaignBtn:hover:not(:disabled) {
  background: #15803d;
}

#journeySaveCampaignBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

.calendar-month-label {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  min-width: 160px;
  text-align: center;
}

.calendar-btn-primary,
.calendar-btn-secondary,
.calendar-btn-danger {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.calendar-btn-primary {
  background: #2563eb;
  color: #ffffff;
  border-color: #1e40af;
}

.calendar-btn-primary:hover:not(:disabled) {
  background: #1d4ed8;
}

.calendar-btn-secondary {
  background: #ffffff;
  color: #1e293b;
  border-color: #cbd5e1;
}

.calendar-btn-secondary:hover:not(:disabled) {
  border-color: #94a3b8;
  background: #f1f5f9;
}

.calendar-btn-danger {
  background: #dc2626;
  color: #ffffff;
  border-color: #991b1b;
}

.calendar-btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

.calendar-google-banner {
  margin-bottom: 12px;
  padding: 14px 16px;
  border-left: 4px solid #16a34a;
}

.calendar-google-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.calendar-google-banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-panel {
  padding: 14px 16px 18px;
}

.calendar-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: #475569;
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #2563eb;
  display: inline-block;
}

.calendar-legend-swatch.calendar-legend-event {
  background: #2563eb;
}

.calendar-legend-swatch.calendar-legend-google {
  background: #16a34a;
}

.calendar-legend-swatch.calendar-legend-task {
  background: #f59e0b;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  background: transparent;
  padding: 4px 2px 2px;
}

.calendar-day-header {
  background: transparent;
  padding: 6px 6px 4px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
}

.calendar-day-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 110px;
  width: auto;
  margin: 0;
  padding: 7px 8px 9px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5fb 100%);
  border: 1px solid #c7d3ea;
  border-radius: 12px;
  text-align: left;
  color: #1e293b;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 8px -2px rgba(15, 23, 42, 0.10),
    0 2px 0 rgba(180, 195, 220, 0.55);
  transition: background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.calendar-day-cell:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e7eefc 100%);
  border-color: #6f9bf0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(15, 23, 42, 0.08),
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 8px 16px -4px rgba(37, 99, 235, 0.22),
    0 3px 0 rgba(150, 175, 220, 0.6);
  transform: translateY(-2px);
}

.calendar-day-cell:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(15, 23, 42, 0.10),
    0 1px 2px rgba(15, 23, 42, 0.05);
}

.calendar-day-cell--other {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #d8dee8;
  color: #94a3b8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 1px rgba(15, 23, 42, 0.03),
    0 1px 0 rgba(180, 195, 220, 0.35);
}

.calendar-day-cell--other:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e8eef8 100%);
  border-color: #b8c4dc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 2px 0 rgba(170, 185, 210, 0.45);
  transform: translateY(-1px);
}

.calendar-day-cell--other .calendar-day-number {
  color: #94a3b8;
}

.calendar-day-cell--today {
  background: linear-gradient(180deg, #dbeafe 0%, #93c5fd 100%);
  border-color: #3b82f6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(30, 58, 138, 0.18),
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 6px 12px -2px rgba(37, 99, 235, 0.28),
    0 3px 0 rgba(120, 155, 220, 0.55);
}

.calendar-day-cell--today:hover {
  background: linear-gradient(180deg, #cfe1fd 0%, #7eb1f9 100%);
  border-color: #2563eb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(30, 58, 138, 0.22),
    0 2px 4px rgba(15, 23, 42, 0.10),
    0 10px 20px -4px rgba(37, 99, 235, 0.36),
    0 4px 0 rgba(110, 145, 215, 0.6);
}

.calendar-day-cell--today .calendar-day-number {
  background: #2563eb;
  color: #ffffff;
}

.calendar-day-number {
  align-self: flex-start;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 2px 7px;
  border-radius: 999px;
  color: inherit;
  margin-bottom: 4px;
}

.calendar-day-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.calendar-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  border-left: 3px solid #2563eb;
  background: #eff6ff;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-chip:hover {
  filter: brightness(0.95);
}

.calendar-chip--google {
  background: #ecfdf5;
  border-left-color: #16a34a;
}

.calendar-chip--task {
  background: #fffbeb;
  border-left-color: #f59e0b;
  color: #78350f;
}

.calendar-chip-time {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.7rem;
  color: #475569;
}

.calendar-chip--task .calendar-chip-time {
  color: #92400e;
}

.calendar-chip-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

#calendarEventModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#calendarEventModal.hidden {
  display: none;
}

.calendar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.calendar-modal-card {
  position: relative;
  width: min(640px, 92vw);
  max-height: 90vh;
  overflow: auto;
  padding: 18px 22px 20px;
  border-radius: 12px;
  z-index: 1;
}

.calendar-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-modal-header h2 {
  margin: 0;
}

.calendar-modal-close {
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #475569;
  cursor: pointer;
  padding: 4px 8px;
}

.calendar-modal-close:hover {
  color: #0f172a;
}

.calendar-modal-actions-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  flex-wrap: wrap;
}

.calendar-modal-actions-row #calendarEventDeleteBtn {
  margin-right: auto;
}

@media (max-width: 720px) {
  .calendar-day-cell {
    min-height: 88px;
  }
  .calendar-chip {
    font-size: 0.68rem;
  }
  .calendar-month-label {
    font-size: 0.95rem;
    min-width: 120px;
  }
}