* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #f5f7fb; color: #172033; display: flex; }
.sidebar {
  width: 230px;
  min-height: 100vh;
  background: #111827;
  color: white;
  padding: 22px;
  position: fixed;
  display: flex;
  flex-direction: column;
}
.sidebar-main-nav {
  display: flex;
  flex-direction: column;
}

.system-nav-block {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.system-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.system-submenu {
  display: grid;
  gap: 6px;
  padding: 2px 0 0 8px;
}

.system-nested-submenu {
  display: grid;
  gap: 6px;
  margin: 2px 0 8px 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.22);
}

.system-submenu-link {
  width: 100%;
  background: transparent;
  color: #cbd5e1;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.system-submenu-link:hover,
.system-submenu-link.active {
  background: rgba(37, 99, 235, 0.22);
  color: #ffffff;
}

.system-nested {
  font-size: 13px;
  padding-left: 14px;
  color: #94a3b8;
}

.system-caret {
  margin-left: auto;
  transition: transform 0.15s ease;
}

.system-nav-toggle.open .system-caret,
.system-submenu-toggle.open .system-caret {
  transform: rotate(180deg);
}

@media (max-width: 1000px) {
  .system-nav-block {
    margin-top: 18px;
  }
}
.sidebar h1 { font-size: 22px; margin: 0 0 26px; }
.nav { width: 100%; border: 0; padding: 12px 14px; margin-bottom: 8px; border-radius: 10px; background: transparent; color: #cbd5e1; text-align: left; cursor: pointer; }
.nav.active, .nav:hover { background: #2563eb; color: white; }
.app { margin-left: 230px; padding: 24px; width: calc(100% - 230px); }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.topbar h2 { margin: 0; font-size: 28px; }
.topbar p { margin: 4px 0 0; color: #64748b; }
button, .button { display: inline-block; text-decoration: none; background: #2563eb; color: white; border: 0; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 700; text-align: center; }
button.secondary, .button.secondary { background: #e2e8f0; color: #172033; }
button.danger { background: #dc2626; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.stat { background: white; padding: 16px; border-radius: 16px; box-shadow: 0 8px 25px rgba(15,23,42,.06); }
.stat span { color: #64748b; font-size: 13px; }
.stat strong { display: block; font-size: 28px; margin-top: 6px; }
.layout { display: grid; grid-template-columns: 350px 1fr; gap: 18px; align-items: start; }
.panel, .subpanel { background: white; border-radius: 18px; padding: 18px; box-shadow: 0 8px 25px rgba(15,23,42,.06); margin-bottom: 18px; }
.panel-header { margin-bottom: 14px; }
.panel-header h3 { margin: 0; }
.split, .profile-header, .action-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.action-row { justify-content: flex-end; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; }
input, select, textarea { width: 100%; border: 1px solid #d9e2ef; padding: 10px; border-radius: 10px; font: inherit; background: white; margin-top: 4px; }
label { display: block; color: #64748b; font-size: 13px; font-weight: 700; }
textarea { min-height: 82px; resize: vertical; }
.form-grid { display: grid; gap: 10px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid #edf2f7; text-align: left; font-size: 14px; }
th { color: #64748b; font-size: 12px; text-transform: uppercase; }
.lead-row { cursor: pointer; }
.lead-row:hover, .lead-row.selected { background: #f1f5ff; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #e0ecff; color: #1d4ed8; font-size: 12px; font-weight: 700; }
.badge-do_not_call, .badge-not_interested { background: #fee2e2; color: #991b1b; }
.badge-booked, .badge-qualified { background: #dcfce7; color: #166534; }
.badge-calling, .badge-queued { background: #fef3c7; color: #92400e; }
.priority { font-weight: 700; }
.priority.high { color: #dc2626; }
.priority.low { color: #64748b; }
.workspace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.workspace-grid.four {
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  align-items: start;
}

.email-composer .email-body {
  min-height: 180px;
}

.email-composer hr {
  border: 0;
  border-top: 1px solid #edf2f7;
  margin: 16px 0;
}
.action-row button {
  min-width: 100px;
}

@media (max-width: 1450px) {
  .workspace-grid.four {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1000px) {
  .workspace-grid.four {
    grid-template-columns: 1fr;
  }
}
.workspace-grid.three { grid-template-columns: 1.1fr 1fr 1fr; align-items: start; }
.full-width { width: 100%; }
.profile-header { border-bottom: 1px solid #edf2f7; padding-bottom: 16px; margin-bottom: 16px; }
.profile-header h3 { margin: 0; font-size: 26px; }
.profile-header p { margin: 4px 0; color: #64748b; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; color: #64748b; font-size: 12px; font-weight: 800; }
.quick-facts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
.quick-facts div { background: #f8fafc; border: 1px solid #e2e8f0; padding: 12px; border-radius: 14px; min-height: 72px; }
.quick-facts span { display: block; color: #64748b; font-size: 12px; margin-bottom: 6px; }
.quick-facts strong { word-break: break-word; }
.activity { border-left: 3px solid #2563eb; padding: 8px 0 8px 12px; margin: 8px 0; color: #334155; background: #f8fafc; border-radius: 0 10px 10px 0; }
.timeline { max-height: 360px; overflow: auto; padding-right: 6px; }
.small-list { max-height: 220px; }
.empty { color: #64748b; text-align: center; padding: 30px; }
@media (max-width: 1250px) { .workspace-grid.three, .quick-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) { .sidebar { position: static; width: 100%; min-height: auto; } body { display: block; } .app { margin-left: 0; width: 100%; } .layout, .workspace-grid, .workspace-grid.three, .stats, .quick-facts { grid-template-columns: 1fr; } .profile-header, .split { align-items: flex-start; flex-direction: column; } }

.alert { padding: 14px; border-radius: 14px; margin-top: 12px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.alert.success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.badge-draft { background: #e2e8f0; color: #334155; }
.badge-sent, .badge-viewed { background: #dbeafe; color: #1d4ed8; }
.badge-submitted, .badge-completed { background: #dcfce7; color: #166534; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
.public-contract-body { display: block; background: #f5f7fb; }
.public-contract-shell { max-width: 920px; margin: 0 auto; padding: 28px; }
.agreement-preview { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px; margin: 16px 0; line-height: 1.6; }
.contract-submit-form { border-top: 1px solid #edf2f7; padding-top: 16px; }
.checkbox-line { display: flex; gap: 10px; align-items: center; color: #334155; }
.checkbox-line input { width: auto; }
.success-state { text-align: center; padding: 50px 20px; }
.success-state h2 { margin: 0 0 10px; }

.scroll-select {
  min-width: 240px;
  height: 104px;
  overflow-y: auto;
}

.link-button {
  background: transparent;
  color: #2563eb;
  padding: 0;
  border-radius: 0;
  text-align: left;
  font-weight: 700;
}

.link-button:hover {
  text-decoration: underline;
}

.appointment-actions {
  justify-content: flex-start;
}

.appointment-actions button {
  padding: 8px 10px;
  font-size: 12px;
}

.badge-scheduled {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge-confirmed {
  background: #dcfce7;
  color: #166534;
}

.badge-no_show {
  background: #fef3c7;
  color: #92400e;
}

.signing-progress-box {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 16px;
}

#submitAgreementBtn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.contract-submit-form h4 {
  margin: 14px 0 4px;
}

@media (max-width: 700px) {
  .signing-progress-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .public-contract-shell {
    padding: 14px;
  }
}

#templateFieldsList {
  margin-top: 14px;
  max-height: 300px;
  overflow-y: auto;
}

#templateFieldsList .activity {
  border-left-color: #7c3aed;
}

.contract-field-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ede9fe;
  color: #5b21b6;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.contract-submit-form select,
.contract-submit-form input[type="email"],
.contract-submit-form input[type="text"] {
  margin-bottom: 8px;
}

.checkbox-line input[type="checkbox"] {
  margin-top: 0;
}

.recipient-row {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 12px;
  border-radius: 14px;
  margin-bottom: 10px;
}

.three-col {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  gap: 10px;
}

.recipient-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.badge-in_progress {
  background: #fef3c7;
  color: #92400e;
}

.badge-declined,
.badge-voided,
.badge-expired {
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 800px) {
  .three-col {
    grid-template-columns: 1fr;
  }
}

.audit-event {
  border-left: 4px solid #2563eb;
  background: #f8fafc;
  border-radius: 0 14px 14px 0;
  padding: 12px;
  margin-bottom: 10px;
}

.audit-event p {
  margin: 6px 0;
  color: #334155;
}

.audit-event small {
  color: #64748b;
}

.danger-text {
  color: #dc2626;
  font-weight: 700;
}

#contractDetailPanel .workspace-grid.three {
  margin-top: 16px;
}

#contractDetailPanel .subpanel {
  max-height: 460px;
  overflow-y: auto;
}


.builder-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: start;
}

.builder-sidebar {
  min-width: 0;
}

.template-builder-canvas {
  background: #e2e8f0;
  border-radius: 18px;
  padding: 18px;
  overflow: auto;
}

.template-page {
  width: 100%;
  min-height: 720px;
  background: white;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15,23,42,.12);
}

.template-page-content {
  padding: 36px;
  color: #334155;
  line-height: 1.7;
}

.builder-field {
  position: absolute;
  z-index: 5;
  background: #ede9fe;
  border: 2px solid #7c3aed;
  color: #4c1d95;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: move;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(76,29,149,.18);
}

.builder-field.active {
  background: #dbeafe;
  border-color: #2563eb;
  color: #1e3a8a;
}

.builder-field span {
  font-weight: 800;
  font-size: 12px;
  line-height: 1.1;
}

.builder-field small {
  font-size: 10px;
  opacity: .8;
}

.selected-builder-field {
  background: #eef2ff;
  border-left-color: #2563eb;
}

.inline-field {
  display: inline-block;
  min-width: 120px;
  padding: 4px 8px;
  margin: 0 3px;
  border: 1px dashed #7c3aed;
  background: #f5f3ff;
  color: #5b21b6;
  border-radius: 8px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .builder-layout {
    grid-template-columns: 1fr;
  }

  .template-page {
    min-height: 560px;
  }
}



.signing-document-page {
  position: relative;
  background: white;
  min-height: 760px;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  overflow: hidden;
}

.signing-document-content {
  padding: 36px;
  line-height: 1.7;
}

.signing-overlay-field {
  position: absolute;
  z-index: 10;
}

.signing-overlay-field input,
.signing-overlay-field select {
  width: 100%;
  margin: 0;
  border: 2px solid #2563eb;
  background: #eff6ff;
  font-weight: 700;
}

.overlay-checkbox {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #eff6ff;
  border: 2px solid #2563eb;
  padding: 8px;
  border-radius: 10px;
}

.overlay-checkbox input {
  width: auto;
}


.contract-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  z-index: 9999;
  padding: 28px;
  overflow-y: auto;
}

.contract-preview-dialog {
  max-width: 1200px;
  margin: 0 auto;
  background: #f5f7fb;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.contract-preview-dialog .agreement-preview {
  max-height: 650px;
  overflow-y: auto;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.signature-draw-box {
  border: 1px solid #d9e2ef;
  background: #f8fafc;
  border-radius: 14px;
  padding: 14px;
}

#drawnSignatureCanvas {
  width: 100%;
  height: 180px;
  background: white;
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  touch-action: none;
  cursor: crosshair;
}

.contract-preview-dialog .template-page-content,
.template-page-content {
  overflow-wrap: anywhere;
}

.badge-completion_sent {
  background: #dcfce7;
  color: #166534;
}

.badge-completion_failed {
  background: #fee2e2;
  color: #991b1b;
}

#contractEmailTemplateBody {
  min-height: 220px;
  font-family: Consolas, monospace;
}

#contractEmailTemplatesList .activity {
  border-left-color: #0f766e;
}

.badge-reminder_sent,
.badge-signing {
  background: #dbeafe;
  color: #1d4ed8;
}


.contract-topbar {
  background: linear-gradient(135deg, #ffffff, #eef4ff);
  border: 1px solid #dbeafe;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 8px 25px rgba(15,23,42,.06);
}

.contract-tabs {
  display: flex;
  gap: 10px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 8px;
  margin-bottom: 18px;
  box-shadow: 0 8px 25px rgba(15,23,42,.05);
  overflow-x: auto;
}

.contract-tabs button {
  background: transparent;
  color: #475569;
  border-radius: 12px;
  white-space: nowrap;
}

.contract-tabs button.active {
  background: #2563eb;
  color: white;
}

.contract-clean-panel,
.contract-form-panel {
  border: 1px solid #e2e8f0;
}

.muted {
  color: #64748b;
  margin-top: 4px;
}

.clean-two-column {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  align-items: start;
}

.clean-contract-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.form-section.full {
  grid-column: 1 / -1;
}

.form-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.large-list {
  max-height: 520px;
  overflow-y: auto;
}

.template-preview-panel {
  margin-top: 18px;
}

#contractTabContent .panel {
  animation: contractFadeIn .15s ease-out;
}

@keyframes contractFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#contractsTable td:last-child .action-row {
  justify-content: flex-start;
}

#contractsTable button {
  min-width: auto;
  padding: 8px 10px;
  font-size: 12px;
}

@media (max-width: 1200px) {
  .clean-two-column,
  .clean-contract-form {
    grid-template-columns: 1fr;
  }

  .form-footer {
    flex-direction: column;
    align-items: stretch;
  }
}


.pdf-template-page {
  width: 816px;
  min-height: 1056px;
  max-width: 100%;
}

.pdf-page-content {
  padding: 0;
  width: 100%;
  height: 1200px;
  overflow: visible;
}

.pdf-template-frame {
  width: 100%;
  height: 1200px;
  border: 0;
  display: block;
  background: white;
}

.template-page-content.pdf-page-content {
  overflow: visible;
}

.template-page-content.pdf-page-content {
  overflow: hidden;
}

.pdf-signing-content {
  padding: 0;
  width: 100%;
  height: 1056px;
}

.signing-document-page:has(.pdf-signing-content) {
  width: 816px;
  max-width: 100%;
  min-height: 1056px;
  margin: 0 auto;
}

.signing-document-page:has(.pdf-signing-content) .signing-overlay-field {
  z-index: 30;
}

.template-builder-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.pdf-rendered-page {
  width: auto;
  min-height: 0;
  overflow: hidden;
}

.pdf-render-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.pdf-page-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 30;
  background: rgba(15, 23, 42, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.pdf-rendered-page .builder-field {
  z-index: 40;
}



.badge-opener_queue {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge-closer_queue {
  background: #fef3c7;
  color: #92400e;
}

.badge-working {
  background: #ede9fe;
  color: #5b21b6;
}

.badge-won {
  background: #dcfce7;
  color: #166534;
}

.badge-lost {
  background: #fee2e2;
  color: #991b1b;
}

.docusign-shell {
  background: #fff;
  min-height: 100vh;
  color: #180038;
}

.docusign-topnav {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 28px;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.docusign-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
}

.docusign-mark {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #330066 50%, #ff3366 50%);
  display: inline-block;
  border-radius: 3px;
}

.docusign-nav {
  display: flex;
  gap: 22px;
  height: 100%;
}

.docusign-nav button {
  background: transparent;
  color: #180038;
  border-radius: 0;
  padding: 0 10px;
  border-bottom: 4px solid transparent;
}

.docusign-nav button.active {
  border-bottom-color: #180038;
}

.docusign-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.upgrade-btn {
  background: #2e005f;
  border-radius: 999px;
}

.avatar {
  background: #b8f3ff;
  color: #180038;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.docusign-alert {
  background: #ffe2bd;
  color: #b54800;
  padding: 16px;
  text-align: center;
}

.docusign-alert a {
  color: #246bfe;
}

.agreements-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: calc(100vh - 120px);
}

.agreements-sidebar {
  background: #f5f3f7;
  border-right: 1px solid #e6e1eb;
  padding: 20px 0;
}

.start-now-btn {
  width: calc(100% - 36px);
  margin: 0 18px 26px;
  background: #2e005f;
  border-radius: 4px;
  padding: 14px;
}

.sidebar-title {
  padding: 12px 34px;
  font-size: 13px;
  font-weight: 800;
  color: #4b3568;
}

.side-link {
  width: 100%;
  background: transparent;
  color: #4b3568;
  text-align: left;
  border-radius: 0;
  padding: 14px 56px;
  font-weight: 500;
}

.side-link.active {
  background: #dfdbe3;
  color: #180038;
  font-weight: 800;
}

.show-less {
  display: block;
  padding: 14px 92px;
  color: #180038;
  text-decoration: underline;
  font-size: 14px;
}

.folders {
  margin-top: 20px;
}

.agreements-main {
  padding: 42px 48px;
}

.agreements-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.agreements-heading h2 {
  font-size: 34px;
  margin: 0 0 32px;
  font-weight: 400;
}

.shared-access-btn,
.filter-btn,
.filter-chip,
.agreements-filters select,
.outline-action {
  background: #fff;
  color: #180038;
  border: 1px solid #8c7aa8;
  border-radius: 4px;
}

.agreements-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}

.agreement-search {
  width: 320px;
  display: flex;
  align-items: center;
  border: 1px solid #8c7aa8;
  border-radius: 4px;
  padding: 0 10px;
}

.agreement-search input {
  border: 0;
  margin: 0;
}

.agreements-table th,
.agreements-table td {
  padding: 18px 14px;
  border-bottom: 1px solid #e8e3ee;
  color: #180038;
}

.agreements-table th {
  text-transform: none;
  font-size: 13px;
  color: #180038;
}

.status-progress {
  width: 220px;
  height: 4px;
  background: linear-gradient(to right, #6b4eff 8%, #e5e1ea 8%);
  margin-bottom: 12px;
  border-radius: 999px;
}

.agreement-status-text {
  text-decoration: underline;
}

.outline-action {
  min-width: 110px;
  padding: 12px 18px;
}

.menu-dot {
  background: transparent;
  color: #180038;
  font-size: 26px;
  padding: 4px;
}

.agreements-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.agreements-pagination select {
  max-width: 150px;
}

.pagination-btn {
  background: transparent;
  color: #8c7aa8;
  min-width: auto;
}

@media (max-width: 1100px) {
  .agreements-layout {
    grid-template-columns: 1fr;
  }

  .agreements-sidebar {
    display: none;
  }

  .agreements-filters {
    flex-wrap: wrap;
  }
}

.contract-home-nav {
  margin-bottom: 22px;
}

.contract-hero {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  color: white;
  border-radius: 24px;
  padding: 34px;
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  box-shadow: 0 18px 40px rgba(109, 40, 217, .22);
}

.contract-hero h2 {
  margin: 4px 0 8px;
  font-size: 34px;
}

.contract-hero p {
  margin: 0;
  color: #ede9fe;
}

.contract-hero .eyebrow {
  color: #ddd6fe;
}

.contract-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.contract-hero-actions button {
  background: white;
  color: #5b21b6;
}

.contract-hero-actions button.secondary {
  background: rgba(255,255,255,.16);
  color: white;
  border: 1px solid rgba(255,255,255,.28);
}

.contract-home-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}

.contract-home-left {
  min-width: 0;
}

.contract-home-right {
  position: sticky;
  top: 24px;
}

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

.contract-task-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 14px;
  padding: 14px;
}

.contract-task-card span {
  display: block;
  color: #64748b;
  font-size: 13px;
  margin-top: 4px;
}

.contract-activity-feed {
  display: grid;
  gap: 10px;
}

.contract-activity-item {
  border-left: 4px solid #7c3aed;
  background: #f8fafc;
  border-radius: 0 14px 14px 0;
  padding: 12px;
}

.contract-activity-item span {
  display: block;
  color: #64748b;
  font-size: 13px;
  margin-top: 4px;
}

.contract-overview-panel {
  border: 1px solid #e9d5ff;
}

.contract-overview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #edf2f7;
}

.contract-overview-row:last-child {
  border-bottom: 0;
}

.contract-overview-row span {
  color: #64748b;
  font-weight: 700;
}

.contract-overview-row strong {
  font-size: 28px;
  color: #5b21b6;
}

@media (max-width: 1100px) {
  .contract-hero,
  .contract-home-grid {
    grid-template-columns: 1fr;
  }

  .contract-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .contract-home-right {
    position: static;
  }
}

.show-less {
  display: block;
  width: 100%;
  background: transparent;
  color: #180038;
  text-decoration: underline;
  text-align: left;
  padding: 14px 92px;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
}

.collapsed-menu {
  display: none !important;
}

.folders-menu {
  margin-top: 20px;
}

.folders-toggle {
  width: 100%;
  background: transparent;
  color: #4b3568;
  text-align: left;
  border-radius: 0;
  padding: 14px 34px;
  font-size: 13px;
  font-weight: 800;
}

.folders-toggle:hover {
  background: #ebe7ef;
}

.folders-list .side-link {
  padding-left: 56px;
}

.collapsed-menu {
  display: none;
}

.folder-row {
  position: relative;
  display: flex;
  align-items: center;
}

.folder-row .folder-link {
  flex: 1;
  padding-right: 12px;
}

.folder-options-wrap {
  position: relative;
  margin-right: 14px;
}

.folder-options-btn {
  background: transparent;
  color: #4b3568;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
  min-width: auto;
}

.folder-options-btn:hover {
  background: #dfdbe3;
}

.folder-options-menu {
  position: absolute;
  top: 32px;
  right: 0;
  width: 190px;
  background: white;
  border: 1px solid #e6e1eb;
  box-shadow: 0 14px 30px rgba(24, 0, 56, 0.18);
  border-radius: 10px;
  padding: 8px;
  z-index: 50;
}

.folder-options-menu button {
  width: 100%;
  background: transparent;
  color: #180038;
  text-align: left;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
}

.folder-options-menu button:hover {
  background: #f5f3f7;
}

.folder-collapse-btn {
  background: transparent;
  color: #4b3568;
  padding: 6px 4px 6px 18px;
  border-radius: 4px;
  min-width: 26px;
  font-size: 14px;
}

.folder-collapse-btn:hover {
  background: #dfdbe3;
}

.folder-collapse-btn.invisible {
  visibility: hidden;
}

.folder-row .folder-link {
  padding-left: 8px;
}

.date-filter-wrap {
  position: relative;
}

.date-filter-menu {
  position: absolute;
  top: 46px;
  left: 0;
  width: 230px;
  background: white;
  border: 1px solid #e6e1eb;
  box-shadow: 0 14px 30px rgba(24, 0, 56, 0.18);
  border-radius: 10px;
  padding: 8px;
  z-index: 80;
}

.date-filter-menu button,
.date-submenu button {
  width: 100%;
  background: transparent;
  color: #180038;
  text-align: left;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
}

.date-filter-menu button:hover,
.date-submenu button:hover {
  background: #f5f3f7;
}

.date-submenu-wrap {
  position: relative;
}

.date-submenu {
  position: absolute;
  top: 0;
  left: 214px;
  width: 220px;
  background: white;
  border: 1px solid #e6e1eb;
  box-shadow: 0 14px 30px rgba(24, 0, 56, 0.18);
  border-radius: 10px;
  padding: 8px;
  z-index: 90;
}


.agreement-date-picker-box {
  position: static;
  width: 100%;
  background: #f8f6fb;
  border: 1px solid #e6e1eb;
  box-shadow: none;
  border-radius: 10px;
  padding: 12px;
  margin: 8px 0;
  z-index: auto;
}
.agreement-date-picker-box input[type="date"] {
  margin-bottom: 12px;
}

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

.agreements-filters {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-bottom: 24px;
}

.date-filter-wrap {
  position: relative;
  display: inline-flex;
}

.date-filter-menu {
  top: 46px;
  left: 0;
}

.agreements-table-wrap {
  width: 100%;
  clear: both;
}

.agreement-date-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  margin-left: auto;

  border: 2px solid #d8dce3;
  border-radius: 8px;

  background: #ffffff;
  color: #495566;

  cursor: pointer;

  font-size: 14px;
  font-weight: 600;

  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.agreement-date-close-btn:hover {
  background: #f5f7fa;
  border-color: #bfc7d3;
}

.agreement-date-close-btn:active {
  background: #edf1f5;
}

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

.setup-envelope-shell {
  background: #f7f7f8;
  min-height: 100vh;
  color: #180038;
}

.setup-envelope-topbar {
  height: 72px;
  background: white;
  border-bottom: 1px solid #e6e1eb;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
}

.setup-close-btn {
  background: transparent;
  color: #180038;
  font-size: 28px;
}

.setup-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.setup-envelope-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 24px;
}

.setup-section {
  border-bottom: 1px solid #cfc8d8;
  margin-bottom: 18px;
}

.setup-section-header {
  width: 100%;
  background: transparent;
  color: #180038;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  padding: 22px 0;
}

.setup-section-body {
  padding: 20px 12px 32px;
}

.setup-upload-box {
  background: #f0eef3;
  min-height: 230px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
}

.upload-btn {
  background: #4b00ff;
  color: white;
  padding: 14px 24px;
  border-radius: 6px;
  cursor: pointer;
}

.setup-recipient-card {
  display: grid;
  grid-template-columns: 1fr 1fr 180px 90px auto;
  gap: 12px;
  background: white;
  border-left: 10px solid #98f1ff;
  padding: 18px;
  margin-top: 14px;
}

.setup-category-section {
  margin-top: 34px;
  max-width: 440px;
}

.setup-upload-box.drag-over {
  outline: 3px dashed #4b00ff;
  background: #ebe7ff;
}

.setup-file-list {
  width: 100%;
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.setup-file-card {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 14px;
  background: white;
  border: 1px solid #ded8e8;
  border-radius: 12px;
  padding: 12px;
  text-align: left;
}

.setup-file-preview {
  width: 76px;
  height: 96px;
  border: 1px solid #ded8e8;
  border-radius: 8px;
  overflow: hidden;
  background: #f7f5fa;
}

.setup-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-preview-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #6f6380;
  padding: 6px;
  text-align: center;
}

.setup-file-info small {
  display: block;
  color: #6f6380;
  margin-top: 4px;
}


.envelope-editor-shell {
  min-height: 100vh;
  background: #f7f7fb;
  color: #180038;
}

.envelope-editor-header {
  height: 66px;
  background: white;
  border-bottom: 1px solid #e7e2ef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
}

.editor-header-left,
.editor-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  background: transparent;
  color: #180038;
  font-size: 24px;
  padding: 6px 10px;
}

.editor-step-link {
  text-decoration: underline;
  color: #2e005f;
}

.envelope-editor-main {
  display: grid;
  grid-template-columns: 330px 1fr 260px;
  height: calc(100vh - 66px);
}

.editor-fields-panel {
  background: white;
  border-right: 1px solid #e7e2ef;
  padding: 18px;
  overflow-y: auto;
}

.editor-field-group {
  border-top: 1px solid #eee8f5;
  padding-top: 14px;
  margin-top: 18px;
}

.editor-field-group h4 {
  margin: 0 0 10px;
}

.editor-tool-btn {
  width: 48%;
  margin: 4px 1%;
  background: white;
  color: #180038;
  border: 1px solid #ded6ea;
  display: inline-flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.editor-tool-btn.active {
  border-color: #5f00ff;
  box-shadow: 0 0 0 3px rgba(95, 0, 255, .12);
}

.editor-document-area {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.editor-toolbar {
  height: 54px;
  background: white;
  border-bottom: 1px solid #e7e2ef;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.editor-toolbar select {
  width: 120px;
  margin: 0;
}

.editor-notice {
  background: #2e294e;
  color: white;
  padding: 14px 22px;
  margin: 14px auto;
  border-radius: 8px;
  width: min(900px, calc(100% - 40px));
}

.editor-document-canvas {
  flex: 1;
  overflow: auto;
  padding: 24px;
  display: grid;
  justify-content: center;
  gap: 24px;
}

.editor-page {
  position: relative;
  background: white;
  box-shadow: 0 8px 30px rgba(15, 23, 42, .18);
}

.editor-pdf-canvas {
  display: block;
}

.editor-text-page {
  width: 816px;
  min-height: 1056px;
}

.editor-placed-field {
  position: absolute;
  z-index: 20;
  background: #fff7b8;
  border: 2px solid #6b4eff;
  color: #180038;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: move;
  box-shadow: 0 6px 14px rgba(24, 0, 56, .16);
}

.editor-placed-field strong,
.editor-placed-field small {
  display: block;
  line-height: 1.1;
}

.editor-placed-field small {
  font-size: 10px;
  opacity: .75;
}

.editor-preview-panel {
  background: white;
  border-left: 1px solid #e7e2ef;
  padding: 16px;
  overflow-y: auto;
}

.editor-thumb {
  width: 100%;
  background: #f4f0f8;
  color: #180038;
  border: 2px solid transparent;
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 8px;
}

.editor-thumb.active {
  border-color: #5f00ff;
}

.editor-thumb canvas {
  max-width: 100%;
  display: block;
  margin: 0 auto 8px;
  background: white;
}

.editor-page-zoom-wrap {
  position: relative;
  transform-origin: top center;
  display: block;
}

.editor-page {
  transform-origin: top left;
}

.editor-placed-field {
  touch-action: none;
  user-select: none;
}

.editor-placed-field.dragging {
  opacity: 0.85;
  z-index: 999;
  cursor: grabbing;
}

.editor-send-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.editor-save-menu-btn {
  background: #2e005f;
  color: white;
  min-width: 44px;
  border-radius: 6px;
}

.editor-save-menu {
  position: absolute;
  right: 0;
  top: 48px;
  background: white;
  border: 1px solid #d8d2df;
  box-shadow: 0 14px 35px rgba(24, 0, 56, .18);
  border-radius: 8px;
  min-width: 160px;
  z-index: 1000;
  padding: 8px;
}

.editor-save-menu button {
  width: 100%;
  background: white;
  color: #180038;
  text-align: left;
}

.editor-save-menu button:hover {
  background: #f4f0f8;
}


.field-editor-exit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 99999;
  display: grid;
  place-items: center;
}

.field-editor-exit-dialog {
  width: min(460px, calc(100vw - 40px));
  background: white;
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 24px 80px rgba(24, 0, 56, 0.28);
  text-align: center;
  color: #180038;
}

.field-editor-exit-dialog h3 {
  margin: 0 0 10px;
  font-size: 24px;
}

.field-editor-exit-dialog p {
  margin: 0 0 22px;
  color: #64748b;
  line-height: 1.5;
}

.field-editor-exit-actions {
  display: grid;
  gap: 10px;
}

.editor-placed-field.selected {
  border-color: #4f00ff;
  box-shadow: 0 0 0 3px rgba(79, 0, 255, 0.18);
}

.editor-field-floating-toolbar {
  position: absolute;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid #e3ddec;
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: 0 12px 28px rgba(24, 0, 56, 0.18);
  transform: translateX(-10px);
}

.field-toolbar-recipient-wrap {
  position: relative;
}

.field-recipient-chip,
.mini-recipient-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #b8f3ff;
  color: #180038;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  padding: 0;
}

.field-recipient-chip {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.field-recipient-menu {
  position: absolute;
  top: 46px;
  left: 0;
  width: 220px;
  background: white;
  border: 1px solid #ded6ea;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(24, 0, 56, 0.2);
}

.field-recipient-menu p {
  margin: 0 0 8px;
  color: #6b5b83;
  font-size: 12px;
  font-weight: 700;
}

.field-recipient-menu button {
  width: 100%;
  background: white;
  color: #180038;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
}

.field-required-toggle {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #d8d2df;
  padding: 3px;
  min-width: 44px;
}

.field-required-toggle span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: white;
}

.field-required-toggle.on {
  background: #4f00ff;
}

.field-required-toggle.on span {
  margin-left: 17px;
}

.field-required-label {
  color: #180038;
  font-size: 14px;
  font-weight: 700;
}

.field-toolbar-icon {
  background: white;
  color: #180038;
  border-left: 1px solid #e8e2f0;
  border-radius: 0;
  padding: 6px 8px;
  min-width: auto;
}

.field-settings-panel {
  color: #180038;
}

.field-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.field-settings-header h3 {
  margin: 0;
  font-size: 24px;
}

.field-type-display {
  margin-top: 8px;
  background: #f2f0f5;
  border-radius: 8px;
  padding: 14px;
  color: #180038;
  display: flex;
  gap: 12px;
  align-items: center;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-toggle-row input {
  width: auto;
}

.field-settings-panel hr {
  border: 0;
  border-top: 1px solid #e8e2f0;
  margin: 22px 0;
}
.editor-placed-field.read-only {
  background: #e5e7eb;
  border-style: dashed;
}

.field-default-textarea {
  min-height: 76px;
}

.text-field-extra-formatting {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.text-field-extra-formatting .checkbox-line {
  justify-content: flex-start;
}

.fixed-width-signing-field {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-attribute-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}

.field-default-textarea {
  width: 100%;
  min-height: 120px;
}

.text-field-settings-section,
.text-attribute-stack,
.text-field-toggle-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.text-attribute-stack {
  gap: 14px;
}

.text-field-toggle-stack {
  gap: 12px;
  margin-top: 14px;
}

.text-field-toggle-stack .settings-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.field-default-textarea {
  width: 100%;
  min-height: 120px;
}
.number-field-settings-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin-top: 12px;
}

.number-field-settings-section h4 {
  margin: 0;
  color: #180038;
}

.number-validation-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  border-top: 1px solid #e8e2f0;
  padding-top: 16px;
  margin-top: 16px;
}

.number-validation-section h4 {
  margin: 0;
  color: #180038;
}

.number-validation-error {
  color: #d90452;
  font-size: 12px;
  font-weight: 700;
  margin-top: -4px;
}

.number-field-settings-section input.validation-invalid {
  border-color: #d90452;
}

.editor-placed-field.number-invalid {
  border-color: #ff2d55 !important;
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.18);
}

.editor-placed-field.choice-group-field {
  background: transparent;
  border: 2px dotted #6b35ff;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.choice-group-inner {
  position: relative;
  width: 100%;
  min-height: inherit;
}

.choice-item {
  position: absolute;
  width: 22px;
  height: 22px;
  cursor: move;
}

.choice-box,
.choice-mini-box {
  width: 18px;
  height: 18px;
  border: 2px solid #6b35ff;
  background: #d6f7ff;
  display: inline-block;
}

.choice-box.radio,
.choice-mini-box.radio {
  border-radius: 999px;
}

.choice-add-btn {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  background: #4f00ff;
  color: white;
  font-size: 18px;
  line-height: 18px;
}

.choice-settings-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.choice-value-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-value-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
}

.choice-value-row input {
  margin-top: 0;
}

.editor-choice-drag-ghost {
  position: fixed;
  top: -1000px;
  left: -1000px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
}

.editor-choice-drag-ghost .choice-box {
  width: 22px;
  height: 22px;
  border: 2px solid #6b35ff;
  background: #d6f7ff;
  display: inline-block;
}

.editor-choice-drag-ghost.radio .choice-box,
.editor-choice-drag-ghost .choice-box.radio {
  border-radius: 999px;
}


.public-contract-body {
  display: block;
  background: #180038;
  min-height: 100vh;
}

.public-contract-body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(24, 0, 56, 0.78);
  backdrop-filter: blur(7px);
  z-index: 0;
}

.public-contract-shell {
  position: relative;
  z-index: 1;
  max-width: 960px;
  padding-top: 90px;
}

.public-contract-shell .panel {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.permission-card {
  background: #fff;
  color: #180038;
  border-radius: 14px;
  padding: 34px 38px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}

.permission-brand {
  margin-bottom: 28px;
}

.permission-card h2 {
  font-size: 22px;
  margin-bottom: 28px;
  font-weight: 500;
}

.permission-message {
  min-height: 110px;
}

.permission-message p {
  margin-top: 10px;
}

.ersd-link {
  background: transparent;
  color: #180038;
  text-decoration: underline;
  padding: 0;
  border-radius: 0;
}

.permission-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #180038;
  margin-top: 14px;
}

.permission-check input {
  width: 22px;
  height: 22px;
  margin: 0;
}

.permission-check b {
  color: #c026d3;
}

.permission-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
}

.permission-lang {
  min-width: 160px;
}

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

.permission-options-wrap {
  position: relative;
}

.permission-options-menu {
  position: absolute;
  right: -45px;
  top: 48px;
  width: 225px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  padding: 8px 0;
  z-index: 20;
}

.permission-options-menu button {
  display: block;
  width: 100%;
  background: white;
  color: #3b2559;
  text-align: left;
  border-radius: 0;
  padding: 13px 22px;
  font-weight: 500;
}

.permission-options-menu button:hover {
  background: #f5f3f7;
}

#permissionContinueBtn {
  background: #2e005f;
}

#permissionContinueBtn:disabled {
  opacity: .45;
}

.ersd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 0, 35, .72);
  z-index: 9999;
  padding: 40px;
  overflow: auto;
}

.ersd-dialog {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  border-radius: 14px;
  padding: 28px;
  position: relative;
}

.ersd-close {
  position: absolute;
  right: 18px;
  top: 14px;
  background: transparent;
  color: #180038;
  font-size: 26px;
}

.ersd-content {
  color: #180038;
  line-height: 1.6;
}


.signing-view-body {
  background: #f4f3f5;
}

.signing-view-body::before {
  display: none;
}

.signing-view-body .public-contract-shell {
  max-width: none;
  padding: 0;
}

.signing-view-body .public-contract-shell .panel {
  padding: 0;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

.signing-view-header {
  height: 62px;
  background: #180038;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.signing-view-title {
  font-size: 22px;
  font-weight: 700;
}

.signing-view-actions {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.signing-view-actions button {
  background: #180038;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 0;
  min-width: auto;
}

.signing-view-actions #submitAgreementBtn {
  border-radius: 4px 0 0 4px;
  padding: 13px 24px;
}

.signing-header-menu-btn {
  padding: 13px 16px;
  font-size: 18px;
}

.signing-dropdown-menu {
  position: absolute;
  top: 50px;
  right: 52px;
  width: 245px;
  background: white;
  color: #2e164f;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  padding: 12px 0;
  z-index: 200;
}

.signing-more-menu {
  right: 0;
  width: 390px;
}

.signing-dropdown-menu p {
  margin: 8px 24px;
  font-size: 12px;
  font-weight: 800;
  color: #4b3568;
}

.signing-dropdown-menu button {
  display: block;
  width: 100%;
  background: white;
  color: #2e164f;
  border: 0;
  text-align: left;
  padding: 12px 24px;
  font-weight: 500;
}

.signing-dropdown-menu button:hover {
  background: #f5f3f7;
}

.signing-dropdown-menu hr {
  border: 0;
  border-top: 1px solid #eee;
  margin: 10px 0;
}

.signing-view-main {
  min-height: calc(100vh - 62px);
  display: grid;
  grid-template-columns: 1fr 86px;
  background: #f4f3f5;
}

.signing-document-scroll {
  overflow: auto;
  padding: 24px 40px 90px;
}

.signing-document-pages {
  display: grid;
  gap: 24px;
  justify-content: center;
}

.signing-document-page {
  position: relative;
  background: white;
  border: 1px solid #d6d1dc;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  overflow: hidden;
}

.signing-html-page {
  width: 816px;
  min-height: 1056px;
}

.signing-pdf-page {
  min-height: 0;
}

.signing-pdf-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.signing-document-content {
  padding: 44px;
  line-height: 1.6;
}

.signing-overlay-field {
  position: absolute;
  z-index: 20;
}

.signing-overlay-field input,
.signing-overlay-field select {
  width: 100%;
  height: 100%;
  min-height: 30px;
  margin: 0;
  border: 2px solid #5f00ff;
  border-radius: 3px;
  background: rgba(95, 0, 255, .08);
  color: #180038;
  font-weight: 700;
  padding: 4px 8px;
}

.signing-signature-field {
  background: #5f00ff !important;
  color: white !important;
  text-align: center;
  font-size: 18px;
}

.signing-initial-field {
  background: #31006f !important;
  color: white !important;
  text-align: center;
}

.signing-side-tools {
  background: white;
  border-left: 1px solid #e5e0eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 28px;
}

.signing-side-tools button {
  background: transparent;
  color: #180038;
  padding: 6px;
  border-radius: 4px;
  min-width: 0;
  display: grid;
  gap: 4px;
  place-items: center;
  font-size: 22px;
}

.signing-side-tools span {
  font-size: 11px;
  font-weight: 600;
}

.signing-bottom-submit {
  width: 816px;
  max-width: 100%;
  margin: 24px auto 0;
  background: white;
  border: 1px solid #e5e0eb;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.signing-bottom-submit button {
  background: #180038;
}

.signing-bottom-submit button:disabled,
.signing-view-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.signing-pdf-page {
  width: 816px;
  height: 1056px;
  background: white;
}

.signing-pdf-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: white;
}

.signing-overlay-field {
  position: absolute;
  z-index: 50;
}


.signing-pdf-page {
  position: relative;
  background: white;
  min-height: 0;
  overflow: hidden;
}

.signing-pdf-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.signing-overlay-field {
  position: absolute;
  z-index: 30;
}


.draw-mark-field {
  width: 100%;
  height: 100%;
  min-height: 34px;
  background: #5f00ff;
  color: white;
  border: 2px solid #5f00ff;
  border-radius: 4px;
  padding: 0;
  overflow: hidden;
}

.draw-mark-field img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
}

.draw-mark-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 0, 35, .72);
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
}

.draw-mark-dialog {
  width: min(720px, 96vw);
  background: white;
  border-radius: 16px;
  padding: 24px;
}

#drawMarkCanvas {
  width: 100%;
  height: 210px;
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  background: white;
  touch-action: none;
  cursor: crosshair;
}

.draw-mark-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.signing-choice-group {
  position: relative;
  width: 100%;
  min-height: inherit;
}

.signing-choice-item {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}

.signing-choice-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.signing-choice-box {
  width: 18px;
  height: 18px;
  border: 2px solid #2563eb;
  background: #eff6ff;
  display: inline-block;
}

.signing-choice-box.radio {
  border-radius: 999px;
}

.signing-choice-item input:checked + .signing-choice-box::after {
  content: "✓";
  display: block;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  font-weight: 900;
  color: #172033;
}

.signing-choice-item input[type="radio"]:checked + .signing-choice-box::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #172033;
  border-radius: 999px;
  margin: 3px;
}

.editor-standard-drag-ghost {
  width: 180px;
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 2px solid #7c3aed;
  background: #ede9fe;
  color: #4c1d95;
  border-radius: 10px;
  font-weight: 800;
}

.templates-page-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: calc(100vh - 72px);
  background: #fff;
  color: #180038;
}

.templates-left-nav {
  background: #f5f3f7;
  border-right: 1px solid #e6e1eb;
  padding: 20px 0;
}

.templates-create-btn {
  width: calc(100% - 36px);
  margin: 0 18px 26px;
  background: #2e005f;
  border-radius: 4px;
  padding: 14px;
}

.templates-side-section {
  margin-bottom: 22px;
}

.templates-side-title {
  padding: 12px 34px;
  font-size: 13px;
  font-weight: 800;
  color: #4b3568;
  text-transform: uppercase;
}

.templates-side-link {
  width: 100%;
  background: transparent;
  color: #4b3568;
  text-align: left;
  border-radius: 0;
  padding: 14px 56px;
  font-weight: 500;
}

.templates-side-link.active,
.templates-side-link:hover {
  background: #dfdbe3;
  color: #180038;
  font-weight: 800;
}

.templates-main {
  padding: 42px 48px;
  overflow: auto;
}

.templates-main h2 {
  font-size: 34px;
  font-weight: 400;
  margin: 0 0 28px;
}

.templates-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
}

.templates-search-box {
  width: 320px;
  display: flex;
  align-items: center;
  border: 1px solid #8c7aa8;
  border-radius: 4px;
  padding: 0 10px;
  background: white;
}

.templates-search-box input {
  border: 0;
  margin: 0;
  color: #180038;
}

.templates-filter-btn,
.templates-clear-btn {
  background: #fff;
  color: #180038;
  border: 1px solid #8c7aa8;
  border-radius: 4px;
  min-width: 90px;
}

.templates-clear-btn {
  background: #f2f0f4;
  border-color: transparent;
}

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

.templates-table th,
.templates-table td {
  padding: 16px 14px;
  border-bottom: 1px solid #e8e3ee;
  color: #180038;
  vertical-align: middle;
}

.templates-table th {
  text-transform: none;
  font-size: 13px;
  font-weight: 800;
}

.templates-table input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
}

.template-star-btn,
.template-menu-dot {
  background: transparent;
  color: #180038;
  padding: 4px;
  font-size: 24px;
  min-width: auto;
}

.template-name-link,
.template-folder-link {
  background: transparent;
  color: #180038;
  padding: 0;
  border-radius: 0;
  text-align: left;
  text-decoration: none;
}

.template-name-link:hover,
.template-folder-link:hover {
  text-decoration: underline;
}

.template-folder-link {
  color: #4b00ff;
  font-weight: 500;
}

.template-use-btn {
  background: #2e005f;
  border-radius: 4px;
  min-width: 92px;
  padding: 12px 18px;
}

.templates-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
}

.templates-pagination select {
  max-width: 150px;
}

.hidden-template-upload-form {
  display: none;
}

.new-pill {
  float: right;
  background: #180038;
  color: white;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
}

.templates-empty-side {
  padding: 8px 56px;
  color: #64748b;
  margin: 0;
}

@media (max-width: 1100px) {
  .templates-page-shell {
    grid-template-columns: 1fr;
  }

  .templates-left-nav {
    display: none;
  }

  .templates-filter-row {
    flex-wrap: wrap;
  }
}

.template-meta-block {
  max-width: 1180px;
  margin: 70px auto 80px;
  display: grid;
  gap: 18px;
}

.template-meta-block label {
  color: #180038;
  font-weight: 800;
}

.template-meta-block input,
.template-meta-block textarea {
  border: 1px solid #8c7aa8;
  border-radius: 3px;
  color: #180038;
  font-size: 16px;
}

.template-meta-block textarea {
  min-height: 130px;
}

.required-star {
  color: #d10057;
}

.agreement-detail-page {
  background: #fff;
  min-height: calc(100vh - 72px);
  color: #180038;
}

.agreement-detail-hero {
  background: #f7f5f8;
  padding: 48px 15%;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid #eee;
}

.agreement-back-btn,
.copy-mini-btn,
.agreement-more-btn {
  background: transparent;
  color: #180038;
  border: 0;
  padding: 4px 8px;
  min-width: auto;
}

.agreement-status-pill {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #f1eff5;
  font-size: 13px;
}

.agreement-detail-hero h1 {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 14px;
}

.agreement-detail-hero p {
  margin: 0;
}

.agreement-detail-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.agreement-download-btn {
  background: white;
  color: #180038;
  border: 1px solid #8c7aa8;
  border-radius: 4px;
  padding: 12px 18px;
  text-decoration: none;
  font-weight: 700;
}

.agreement-more-wrap {
  position: relative;
}

.agreement-more-btn {
  font-size: 28px;
  background: #e1dce7;
  border-radius: 4px;
}

.agreement-more-menu {
  position: absolute;
  top: 48px;
  right: 0;
  width: 220px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
  padding: 10px 0;
  z-index: 50;
}

.agreement-more-menu button {
  width: 100%;
  background: transparent;
  color: #180038;
  text-align: left;
  border-radius: 0;
  padding: 11px 22px;
  font-weight: 500;
}

.agreement-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  max-width: 1240px;
  margin: 0 auto;
}

.agreement-detail-main {
  padding: 46px 56px;
}

.agreement-doc-sidebar {
  border-left: 1px solid #e6e1eb;
  padding: 46px 34px;
}

.agreement-detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e6e1eb;
  width: max-content;
  margin-bottom: 28px;
}

.agreement-detail-tabs button {
  background: transparent;
  color: #4b3568;
  border-radius: 0;
  padding: 12px 22px;
  border-bottom: 2px solid transparent;
}

.agreement-detail-tabs button.active {
  color: #180038;
  border-bottom-color: #180038;
}

.signing-order-btn {
  background: #f0edf4;
  color: #180038;
  border-radius: 4px;
  margin-bottom: 28px;
}

.agreement-recipient-row {
  display: grid;
  grid-template-columns: 40px minmax(220px, 1fr) 280px;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
}

.recipient-check {
  color: #008a5c;
  font-size: 28px;
}

.recipient-person strong,
.recipient-person span,
.recipient-status-block strong,
.recipient-status-block span {
  display: block;
}

.recipient-status-block {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.recipient-status-block a {
  display: block;
  margin-top: 4px;
}

.agreement-details-list {
  max-width: 720px;
}

.agreement-details-list label {
  color: #4b3568;
  font-size: 13px;
  margin-top: 22px;
}

.agreement-details-list p {
  font-size: 18px;
  line-height: 1.45;
  margin: 8px 0 16px;
}

.agreement-document-card {
  width: 260px;
  border: 1px solid #e6e1eb;
  border-radius: 6px;
  padding: 14px;
}

.agreement-document-thumb {
  height: 180px;
  background: #f1eff5;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 12px;
}

.agreement-document-thumb canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

.agreement-document-card strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agreement-document-card p {
  color: #6b5a7d;
  margin: 6px 0 0;
}

.thumb-file-icon {
  font-size: 42px;
}

@media (max-width: 1000px) {
  .agreement-detail-hero {
    padding: 28px;
    flex-direction: column;
  }

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

  .agreement-doc-sidebar {
    border-left: 0;
    border-top: 1px solid #e6e1eb;
  }

  .agreement-recipient-row {
    grid-template-columns: 36px 1fr;
  }

  .recipient-status-block {
    grid-column: 2;
  }
}

.agreement-document-thumb-button {
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.agreement-document-thumb-button:hover {
  outline: 2px solid #2563eb;
}

.agreement-pdf-viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.72);
  padding: 24px;
}

.agreement-pdf-viewer-dialog {
  height: calc(100vh - 48px);
  background: white;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.agreement-pdf-viewer-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.agreement-pdf-viewer-frame {
  width: 100%;
  flex: 1;
  border: 0;
}

.template-actions-cell {
  position: relative;
  width: 48px;
}

.template-action-menu {
  position: absolute;
  top: 42px;
  right: 8px;
  width: 210px;
  background: #fff;
  border: 1px solid #eee8f4;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(24, 0, 56, 0.16);
  padding: 10px 0;
  z-index: 1000;
}

.template-action-menu button {
  width: 100%;
  background: transparent;
  color: #2e174d;
  border: 0;
  border-radius: 0;
  padding: 11px 20px;
  text-align: left;
  font-weight: 500;
}

.template-action-menu button:hover {
  background: #f5f3f7;
}

.template-actions-cell {
  position: relative;
  overflow: visible;
}

.template-action-menu {
  top: 42px;
  bottom: auto;
}

.template-action-menu.open-up {
  top: auto;
  bottom: 42px;
}
.agreement-menu-wrap {
  position: relative;
  display: inline-block;
}

.agreement-action-menu {
  position: absolute;
  top: 38px;
  right: 0;
  width: 190px;
  background: #fff;
  border: 1px solid #eee8f4;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(24, 0, 56, 0.16);
  padding: 8px 0;
  z-index: 3000;
}

.agreement-action-menu.open-up {
  top: auto;
  bottom: 38px;
}

.agreement-action-menu button {
  width: 100%;
  background: transparent;
  color: #2e174d;
  border: 0;
  border-radius: 0;
  padding: 10px 18px;
  text-align: left;
  font-weight: 500;
}

.agreement-action-menu button:hover {
  background: #f5f3f7;
}

.envelope-history-page {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #fff;
  color: #180038;
  display: flex;
  flex-direction: column;
}

.envelope-history-header {
  height: 72px;
  border-bottom: 1px solid #e8e3ee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}

.envelope-history-header h2 {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
}

.envelope-history-close {
  background: transparent;
  color: #180038;
  font-size: 34px;
  line-height: 1;
  padding: 4px 10px;
  min-width: auto;
  border-radius: 0;
}

.envelope-history-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 48px 72px 96px;
}

.envelope-history-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  max-width: 1260px;
  margin-bottom: 48px;
}

.envelope-history-summary h4 {
  font-size: 17px;
  margin: 0 0 18px;
  font-weight: 700;
}

.envelope-history-summary p {
  margin: 0 0 30px;
  font-size: 14px;
  line-height: 1.5;
}

.envelope-history-activities h3 {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 16px;
}

.envelope-history-table {
  width: 100%;
  border-collapse: collapse;
}

.envelope-history-table th {
  color: #180038;
  text-transform: none;
  font-size: 14px;
  padding: 12px 18px;
  border-bottom: 0;
}

.envelope-history-table td {
  color: #180038;
  font-size: 14px;
  vertical-align: top;
  padding: 12px 18px;
  border-bottom: 1px solid #e8e3ee;
}

.envelope-history-table small {
  color: #6f6382;
}

.envelope-history-footer {
  position: fixed;
  right: 28px;
  bottom: 0;
  left: 230px;
  height: 72px;
  background: #fff;
  border-top: 1px solid #e8e3ee;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 28px;
  z-index: 9001;
}

.envelope-history-footer button {
  border-radius: 4px;
  padding: 12px 24px;
}

.envelope-history-footer button:not(.secondary) {
  background: #2e005f;
}

@media (max-width: 900px) {
  .envelope-history-scroll {
    padding: 28px 22px 96px;
  }

  .envelope-history-summary {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .envelope-history-footer {
    left: 0;
  }
}

.template-history-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(24, 0, 56, 0.78);
  backdrop-filter: blur(7px);
  display: grid;
  place-items: center;
}

.template-history-modal {
  width: 940px;
  max-width: calc(100vw - 48px);
  height: 820px;
  max-height: calc(100vh - 80px);
  background: #fff;
  color: #180038;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.template-history-header {
  height: 86px;
  padding: 0 36px;
  border-bottom: 1px solid #e8e3ee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.template-history-header h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
}

.template-history-header button {
  background: transparent;
  color: #180038;
  font-size: 34px;
  padding: 0;
  min-width: auto;
}

.template-history-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 36px 32px;
}

.template-history-body h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 22px 0 18px;
}

.template-history-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
}

.template-history-details h4 {
  margin: 18px 0 8px;
  font-size: 13px;
  text-transform: uppercase;
}

.template-history-details p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.template-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.template-history-table th,
.template-history-table td {
  border: 1px solid #e8e3ee;
  padding: 12px 18px;
  color: #180038;
  text-align: left;
  vertical-align: top;
}

.template-history-table th {
  font-size: 13px;
  text-transform: none;
  font-weight: 700;
}

.template-history-table small {
  color: #6f6382;
}

.template-history-footer {
  height: 94px;
  border-top: 1px solid #e8e3ee;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 54px;
}

.template-history-footer button {
  background: #fff;
  color: #180038;
  border: 1px solid #8c7aa8;
  border-radius: 4px;
  padding: 12px 28px;
}

.sidebar-session-user {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.24);
  display: grid;
  gap: 5px;
}

.sidebar-session-user span,
.sidebar-session-user small {
  color: #94a3b8;
  font-size: 12px;
}

.sidebar-session-user strong {
  color: #ffffff;
  font-size: 14px;
  word-break: break-word;
}

.sidebar-session-user button {
  margin-top: 8px;
}

.login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.28), transparent 32%),
    linear-gradient(135deg, #0f172a, #111827);
}

.login-shell {
  width: min(92vw, 440px);
}

.login-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.login-brand h1 {
  margin: 0;
  font-size: 28px;
}

.login-brand p {
  margin: 4px 0 0;
  color: #64748b;
}

.login-logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #2563eb;
  color: #ffffff;
  font-weight: 900;
  font-size: 18px;
}

.lead-nav-block {
  margin-bottom: 8px;
}

.lead-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lead-submenu {
  display: grid;
  gap: 5px;
  padding: 2px 0 8px 8px;
}

.lead-nested-submenu {
  display: grid;
  gap: 4px;
  margin: 2px 0 8px 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.24);
}

.leads-submenu-link,
.pipeline-status-link {
  width: 100%;
  background: transparent;
  color: #cbd5e1;
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pipeline-status-link {
  color: #94a3b8;
  font-size: 13px;
  padding-left: 14px;
}

.leads-submenu-link:hover,
.leads-submenu-link.active,
.pipeline-status-link:hover,
.pipeline-status-link.active {
  background: rgba(37, 99, 235, 0.22);
  color: #ffffff;
}

.lead-caret {
  margin-left: auto;
  transition: transform 0.15s ease;
}

.lead-nav-toggle.open .lead-caret,
.leads-submenu-toggle.open .lead-caret {
  transform: rotate(180deg);
}

.leads-page-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.leads-table-name {
  color: #2563eb;
  font-weight: 800;
  cursor: pointer;
}

.leads-table-name:hover {
  text-decoration: underline;
}

.lead-mini-meta {
  color: #64748b;
  font-size: 12px;
  margin-top: 3px;
}

.badge-appointment_missed,
.badge-bad_number,
.badge-disqualified,
.badge-do_not_contact,
.badge-not_a_business {
  background: #fee2e2;
  color: #991b1b;
}

.badge-appointment_set,
.badge-closed {
  background: #dcfce7;
  color: #166534;
}

.badge-attempting_contact,
.badge-pitched {
  background: #fef3c7;
  color: #92400e;
}

.badge-contacted,
.badge-keeping_providers {
  background: #dbeafe;
  color: #1d4ed8;
}

.reassign-row-select {
  min-width: 220px;
}

/* Cleaner Create Lead screen */
.lead-create-top {
  margin-bottom: 18px;
}

.lead-create-top h2 {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 500;
  color: #334155;
}

.lead-create-top h2 span {
  font-size: 17px;
  color: #64748b;
  font-weight: 400;
}

.lead-breadcrumb {
  background: #4b4038;
  color: #e5e7eb;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 2px;
  margin: -4px -2px 18px;
}

.lead-breadcrumb span {
  color: #ffffff;
  font-weight: 700;
}

.lead-create-card {
  background: #ffffff;
  border: 1px solid #cfd8e3;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  max-width: 1120px;
}

.lead-create-card-header {
  height: 42px;
  background: linear-gradient(#7f972f, #6f8528);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 14px;
}

.lead-create-card-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lead-create-header-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
}

.lead-create-header-actions {
  display: flex;
  gap: 14px;
  opacity: 0.85;
  font-weight: 800;
}

.lead-create-form {
  padding: 22px 18px 16px;
  display: grid;
  gap: 14px;
  background: #fbfcfd;
}

.lead-form-row {
  display: grid;
  gap: 28px;
  align-items: center;
}

.lead-form-row-three {
  grid-template-columns: 1fr 1fr 1fr;
}

.lead-form-row-two {
  grid-template-columns: 1fr 1fr;
}

.lead-form-row-address {
  grid-template-columns: 2fr 0.9fr;
}

.lead-form-row-city {
  grid-template-columns: 1fr 1.25fr 0.75fr;
}

.lead-form-row-bottom {
  max-width: 760px;
}

.lead-field {
  position: relative;
  display: block;
  margin: 0;
}

.lead-field input,
.lead-field select {
  height: 34px;
  margin: 0;
  border-radius: 0;
  border: 1px solid #d5dde7;
  background: #ffffff;
  padding: 7px 10px 7px 39px;
  font-size: 13px;
  color: #334155;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.lead-field select {
  appearance: auto;
}

.lead-field input::placeholder {
  color: #7b8794;
}

.lead-input-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 34px;
  border-right: 1px solid #d5dde7;
  background: #f2f4f7;
  color: #8a94a3;
  display: grid;
  place-items: center;
  font-size: 13px;
  z-index: 2;
}

.lead-create-notes {
  min-height: 74px;
  border-radius: 0;
  margin: 0;
  border: 1px solid #d5dde7;
  font-size: 13px;
}

.lead-create-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.lead-create-footer button {
  border-radius: 3px;
  padding: 9px 18px;
  background: #2563eb;
}

@media (max-width: 1050px) {
  .lead-form-row-three,
  .lead-form-row-two,
  .lead-form-row-address,
  .lead-form-row-city {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lead-create-card {
    max-width: 100%;
  }
}

.lead-detail-window-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, 0.42);
  padding: 22px;
  overflow: auto;
}

.lead-detail-window {
  width: min(1480px, 100%);
  min-height: calc(100vh - 44px);
  margin: 0 auto;
  background: #f7f7fb;
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  border: 1px solid #d8dbe5;
}

.lead-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.lead-detail-topbar h2 {
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 500;
  color: #2f3542;
}

.lead-detail-topbar h2 span {
  color: #64748b;
  font-weight: 400;
}

.lead-detail-breadcrumb {
  color: #64748b;
  font-size: 13px;
}

.lead-detail-top-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.lead-overview-card {
  margin: 18px 24px;
  background: #ffffff;
  border: 1px solid #d9dce7;
}

.lead-overview-title {
  background: #f1c40f;
  color: #ffffff;
  padding: 10px 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lead-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 14px;
}

.lead-detail-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 36px;
  border-bottom: 1px solid #edf0f7;
}

.lead-detail-label {
  background: #eef0f7;
  color: #455064;
  font-weight: 800;
  padding: 10px;
}

.lead-detail-value {
  background: #ffffff;
  padding: 10px;
  color: #334155;
  overflow-wrap: anywhere;
}

.lead-empty-value {
  color: #c0392b;
  font-style: italic;
  border-bottom: 1px dashed #c0392b;
}

.lead-detail-tabs {
  margin: 0 24px;
  display: flex;
  align-items: center;
  gap: 0;
  background: #f4f5f8;
  border: 1px solid #e1e5ee;
  overflow-x: auto;
}

.lead-detail-tab {
  background: transparent;
  color: #475569;
  border-radius: 0;
  border-right: 1px solid #e1e5ee;
  padding: 13px 16px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lead-detail-tab.active {
  background: #ffffff;
  color: #172033;
  border-top: 3px solid #2563eb;
}

.lead-detail-body {
  padding: 14px 24px 32px;
}

.lead-section-card {
  background: #ffffff;
  border: 1px solid #dfe4ee;
  margin-bottom: 18px;
}

.lead-section-title {
  color: #ffffff;
  padding: 10px 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lead-section-title button {
  margin-left: auto;
  padding: 7px 10px;
  font-size: 12px;
}

.lead-section-slate {
  background: #34495e;
}

.lead-section-purple {
  background: linear-gradient(90deg, #7b1fa2, #8e44ad);
}

.lead-section-orange {
  background: #d98c00;
}

.lead-section-green {
  background: #1f7a35;
}

.lead-section-blue {
  background: #2563eb;
}

.lead-basic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 18px;
}

.lead-info-table {
  border: 1px solid #edf0f7;
}

.lead-detail-edit-form,
.lead-document-uploader,
.lead-note-composer,
.lead-message-composer {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.lead-detail-edit-form .three-col {
  grid-template-columns: 1fr 1fr 1fr;
}

.lead-window-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.lead-assignment-wrap {
  padding: 18px;
}

.lead-assignment-wrap .subpanel {
  box-shadow: none;
  border: 1px solid #e2e8f0;
}

.lead-table-tools {
  padding: 14px;
  max-width: 320px;
}

.lead-table-wrap {
  overflow-x: auto;
  padding: 0 14px 14px;
}

.lead-inner-table th,
.lead-inner-table td {
  border-bottom: 1px solid #e9edf5;
  padding: 12px;
  vertical-align: top;
}

.lead-inner-table th {
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
}

.lead-message-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  padding: 18px;
}

.lead-message-composer {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 14px;
}

.lead-message-composer h4 {
  margin: 0;
}

.lead-message-composer hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
  width: 100%;
  margin: 8px 0;
}

@media (max-width: 1100px) {
  .lead-detail-window-overlay {
    padding: 10px;
  }

  .lead-detail-window {
    min-height: calc(100vh - 20px);
  }

  .lead-detail-topbar,
  .lead-overview-grid,
  .lead-basic-grid,
  .lead-message-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

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

  .lead-detail-edit-form .three-col {
    grid-template-columns: 1fr;
  }
}

.lead-editable-row .lead-detail-value {
  padding: 0;
}

.lead-inline-display {
  width: 100%;
  min-height: 36px;
  background: #ffffff;
  color: #334155;
  border: 0;
  border-radius: 0;
  padding: 10px;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
}

.lead-inline-display:hover {
  background: #eff6ff;
  color: #1d4ed8;
  text-decoration: underline;
}

.lead-inline-editor {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  background: #f8fafc;
}

.lead-inline-editor textarea.lead-inline-input {
  min-height: 70px;
}

.lead-inline-input {
  margin: 0;
  border-radius: 4px;
}

.lead-inline-editor button {
  border-radius: 4px;
  padding: 8px 10px;
  min-width: auto;
}

.lead-address-main-row {
  border-top: 1px solid #edf0f7;
}

.lead-address-main-value {
  padding: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  background: #ffffff;
}

.lead-address-line {
  border-bottom: 1px solid #edf0f7;
}

.lead-address-city-state-zip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.lead-address-city-state-zip .lead-address-inline-field:not(:last-child) {
  border-right: 1px solid #edf0f7;
}

.lead-address-inline-field {
  min-width: 0;
}

.lead-address-inline-button {
  min-height: 36px;
  border-radius: 0;
  padding: 10px;
}

.lead-address-inline-button .lead-empty-value {
  color: #c0392b;
  font-style: italic;
  border-bottom: 1px dashed #c0392b;
}

.lead-address-bottom-grid .lead-detail-row:not(:last-child) {
  border-right: 1px solid #edf0f7;
}

.lead-compliance-toggle {
  width: 100%;
  min-height: 36px;
  background: #ffffff;
  color: #475569;
  border: 0;
  border-radius: 0;
  padding: 10px;
  text-align: left;
  display: flex;
  gap: 8px;
  align-items: center;
}

.lead-compliance-toggle:hover {
  background: #fff7ed;
  color: #c2410c;
}

.lead-compliance-toggle.active {
  background: #fee2e2;
  color: #991b1b;
  font-weight: 800;
}

@media (max-width: 900px) {
  .lead-address-city-state-zip {
  grid-template-columns: 1fr;
}

.lead-address-city-state-zip .lead-address-inline-field:not(:last-child) {
  border-right: 0;
  border-bottom: 1px solid #edf0f7;
}

.lead-address-main-row {
  grid-template-columns: 1fr;
}

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

/* Calendly-style Appointments Module */

.appointments-topbar {
  background: linear-gradient(135deg, #ffffff, #eef4ff);
  border: 1px solid #dbeafe;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 8px 25px rgba(15,23,42,.06);
}

.appointments-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  border-radius: 26px;
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 20px 45px rgba(37, 99, 235, .22);
}

.appointments-hero h2 {
  margin: 4px 0 8px;
  font-size: 34px;
}

.appointments-hero p {
  margin: 0;
  color: rgba(255,255,255,.86);
  max-width: 780px;
}

.appointments-hero .eyebrow {
  color: rgba(255,255,255,.75);
}

.appointments-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.appointments-hero-actions button {
  background: white;
  color: #1d4ed8;
}

.appointments-hero-actions button.secondary {
  background: rgba(255,255,255,.16);
  color: white;
  border: 1px solid rgba(255,255,255,.32);
}

.appointment-stat-grid {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.appointment-stat {
  border: 1px solid #e2e8f0;
}

.appointment-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.appointment-main-column,
.appointment-side-column {
  min-width: 0;
}

.appointment-side-column {
  position: sticky;
  top: 24px;
}

.appointment-calendar-controls,
.appointment-filter-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.appointment-filter-grid {
  justify-content: flex-end;
}

.appointment-filter-grid select,
.appointment-filter-grid input {
  width: auto;
  min-width: 150px;
  margin-top: 0;
}

.appointment-calendar-grid {
  display: grid;
  gap: 10px;
}

.appointment-calendar-week,
.appointment-calendar-month {
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.appointment-calendar-day {
  min-height: 160px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px;
}

.appointment-calendar-day.today {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.appointment-calendar-day-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #334155;
  margin-bottom: 10px;
}

.appointment-calendar-day-head span {
  color: #64748b;
  font-size: 13px;
}

.appointment-calendar-events {
  display: grid;
  gap: 7px;
}

.appointment-calendar-event {
  width: 100%;
  text-align: left;
  background: white;
  color: #172033;
  border: 1px solid #dbeafe;
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  padding: 8px;
  box-shadow: none;
}

.appointment-calendar-event span {
  display: block;
  color: #64748b;
  font-size: 12px;
}

.appointment-calendar-event strong {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-calendar-empty {
  color: #94a3b8;
  font-size: 12px;
  padding: 10px 0;
}

.appointments-table td {
  vertical-align: top;
}

.appointment-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.appointment-row-actions button {
  min-width: auto;
  padding: 7px 9px;
  font-size: 12px;
}

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

.appointment-mini-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
}

.appointment-mini-card strong,
.appointment-mini-card span,
.appointment-mini-card small {
  display: block;
}

.appointment-mini-card span,
.appointment-mini-card small {
  color: #64748b;
  font-size: 13px;
  margin-top: 4px;
}

.appointment-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, .62);
  padding: 28px;
  overflow-y: auto;
}

.appointment-modal {
  max-width: 1040px;
  margin: 0 auto;
  background: #f5f7fb;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
}

.appointment-detail-modal {
  max-width: 860px;
}

.appointment-settings-modal {
  max-width: 1180px;
}

.appointment-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.appointment-modal-header h3 {
  margin: 4px 0 0;
  font-size: 26px;
}

.appointment-book-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}

.appointment-book-form,
.appointment-slot-picker,
.appointment-settings-form,
.appointment-settings-list,
.appointment-availability-body {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 25px rgba(15,23,42,.05);
}

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

.booking-date-list,
.booking-slot-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.booking-date-list button,
.booking-slot-list button {
  background: white;
  color: #172033;
  border: 1px solid #d9e2ef;
  border-radius: 14px;
  padding: 12px;
  text-align: left;
}

.booking-date-list button.active,
.booking-slot-list button.active {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

.booking-date-list button span {
  display: block;
  color: inherit;
  opacity: .78;
  font-size: 12px;
  margin-top: 4px;
}

.appointment-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.appointment-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.appointment-detail-grid div,
.appointment-detail-notes {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
}

.appointment-detail-grid span,
.appointment-detail-notes span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.appointment-detail-grid strong {
  display: block;
  color: #172033;
}

.appointment-detail-notes {
  margin-top: 12px;
}

.appointment-detail-notes p {
  margin: 0;
  color: #334155;
}

.appointment-settings-tabs {
  display: flex;
  gap: 8px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 8px;
  margin-bottom: 18px;
}

.appointment-settings-tabs button {
  background: transparent;
  color: #475569;
}

.appointment-settings-tabs button.active {
  background: #2563eb;
  color: white;
}

.appointment-settings-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  align-items: start;
}

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

.appointment-settings-list {
  max-height: 680px;
  overflow-y: auto;
}

.appointment-settings-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}

.appointment-settings-row.inactive {
  opacity: .62;
}

.appointment-settings-row strong,
.appointment-settings-row span,
.appointment-settings-row small {
  display: block;
}

.appointment-settings-row span,
.appointment-settings-row small {
  color: #64748b;
  font-size: 13px;
  margin-top: 4px;
}

.appointment-settings-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.appointment-settings-row-actions button {
  min-width: auto;
  padding: 8px 10px;
  font-size: 12px;
}

.appointment-availability-tools {
  max-width: 420px;
  margin-bottom: 16px;
}

.availability-week-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.availability-day-row {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 10px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
}

.availability-day-row input {
  margin-top: 0;
}

.availability-override-editor {
  display: grid;
  grid-template-columns: 150px 180px 130px 130px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.availability-override-editor input {
  margin-top: 0;
}

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

.availability-override-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
}

.availability-override-row strong,
.availability-override-row span,
.availability-override-row small {
  display: block;
}

.availability-override-row span,
.availability-override-row small {
  color: #64748b;
  font-size: 13px;
  margin-top: 4px;
}

.public-schedule-body {
  display: block;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 34%),
    linear-gradient(135deg, #f8fafc, #eef2ff);
}

.public-schedule-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 18px;
}

.public-schedule-card {
  background: white;
  border: 1px solid #dbeafe;
  border-radius: 28px;
  padding: 26px;
  box-shadow: 0 26px 70px rgba(15,23,42,.14);
}

.public-schedule-brand {
  font-weight: 900;
  color: #1d4ed8;
  margin-bottom: 22px;
}

.public-schedule-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
}

.public-schedule-info {
  border-right: 1px solid #e2e8f0;
  padding-right: 24px;
}

.public-schedule-info h1 {
  margin: 8px 0;
  font-size: 34px;
  color: #172033;
}

.public-schedule-info p {
  color: #64748b;
  line-height: 1.6;
}

.public-schedule-fact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  margin-top: 12px;
}

.public-schedule-fact strong,
.public-schedule-fact span {
  display: block;
}

.public-schedule-fact span {
  color: #64748b;
  margin-top: 4px;
}

.public-schedule-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.public-date-list,
.public-time-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 6px;
}

.public-date-list button,
.public-time-list button {
  background: white;
  color: #172033;
  border: 1px solid #d9e2ef;
  border-radius: 14px;
  padding: 13px;
  text-align: left;
}

.public-date-list button.active,
.public-time-list button.active {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

.public-date-list span {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  opacity: .75;
}

.public-booking-form {
  margin-top: 22px;
  display: grid;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 18px;
}

.public-booking-form h3 {
  margin: 0;
}

@media (max-width: 1180px) {
  .appointment-workspace,
  .appointment-book-grid,
  .appointment-settings-grid,
  .public-schedule-grid {
    grid-template-columns: 1fr;
  }

  .appointment-side-column {
    position: static;
  }

  .public-schedule-info {
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
    padding-right: 0;
    padding-bottom: 18px;
  }
}

@media (max-width: 900px) {
  .appointments-hero,
  .appointment-modal-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .appointment-calendar-week,
  .appointment-calendar-month,
  .appointment-stat-grid,
  .appointment-detail-grid,
  .public-schedule-picker {
    grid-template-columns: 1fr;
  }

  .appointment-filter-grid,
  .appointment-filter-grid select,
  .appointment-filter-grid input {
    width: 100%;
  }

  .availability-day-row,
  .availability-override-editor {
    grid-template-columns: 1fr;
  }

  .appointment-modal-backdrop {
    padding: 12px;
  }

  .appointment-modal {
    padding: 16px;
  }
}

/* =========================================================
   Calendly-style Appointments / Scheduling
   Add to bottom of styles.css
========================================================= */

.appointments-topbar {
  background: linear-gradient(135deg, #ffffff, #eef4ff);
  border: 1px solid #dbeafe;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 8px 25px rgba(15,23,42,.06);
}

.appointments-hero {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #ffffff;
  border-radius: 26px;
  padding: 30px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  box-shadow: 0 20px 45px rgba(37, 99, 235, 0.24);
}

.appointments-hero h2 {
  margin: 6px 0 8px;
  font-size: 32px;
}

.appointments-hero p {
  margin: 0;
  color: #dbeafe;
  max-width: 820px;
}

.appointments-hero .eyebrow {
  color: #bfdbfe;
}

.appointments-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.appointments-hero-actions button {
  background: #ffffff;
  color: #1d4ed8;
}

.appointments-hero-actions button.secondary {
  background: rgba(255,255,255,.16);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.28);
}

.appointment-stat-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.appointment-stat {
  border: 1px solid #e2e8f0;
}

.appointment-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.appointment-main-column,
.appointment-side-column {
  min-width: 0;
}

.appointment-side-column {
  position: sticky;
  top: 24px;
}

.appointment-calendar-controls,
.appointment-filter-grid {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.appointment-filter-grid {
  justify-content: flex-end;
}

.appointment-filter-grid select,
.appointment-filter-grid input {
  width: auto;
  min-width: 150px;
  margin-top: 0;
}

.appointment-calendar-panel {
  overflow: hidden;
}

.appointment-calendar-grid {
  display: grid;
  gap: 10px;
}

.appointment-calendar-week {
  grid-template-columns: repeat(7, minmax(130px, 1fr));
}

.appointment-calendar-day {
  min-height: 170px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 12px;
}

.appointment-calendar-day.today {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  background: #eff6ff;
}

.appointment-calendar-date {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.appointment-calendar-date strong {
  color: #172033;
}

.appointment-calendar-date span {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.appointment-calendar-events {
  display: grid;
  gap: 7px;
}

.appointment-calendar-event {
  background: #ffffff;
  color: #172033;
  border: 1px solid #dbeafe;
  box-shadow: none;
  padding: 8px;
  border-radius: 12px;
  text-align: left;
  min-width: 0;
}

.appointment-calendar-event strong,
.appointment-calendar-event span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-calendar-event span {
  color: #64748b;
  font-size: 12px;
  margin-top: 2px;
}

.appointment-calendar-empty {
  color: #94a3b8;
  font-size: 13px;
}

.appointments-table td {
  vertical-align: top;
}

.appointment-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 260px;
}

.appointment-row-actions button {
  padding: 8px 10px;
  font-size: 12px;
  min-width: auto;
}

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

.appointment-mini-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 13px;
}

.appointment-mini-card strong,
.appointment-mini-card span {
  display: block;
}

.appointment-mini-card span {
  color: #64748b;
  font-size: 13px;
  margin-top: 4px;
}

.appointment-mini-card .link-button {
  margin-top: 8px;
}

.appointment-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.64);
  z-index: 9999;
  padding: 24px;
  overflow-y: auto;
}

.appointment-modal {
  max-width: 1040px;
  margin: 0 auto;
  background: #f5f7fb;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.appointment-settings-modal {
  max-width: 1180px;
}

.appointment-detail-modal {
  max-width: 860px;
}

.appointment-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.appointment-modal-header h3 {
  margin: 4px 0 0;
  font-size: 28px;
}

.appointment-book-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}

.appointment-book-form,
.appointment-slot-picker,
.appointment-settings-form,
.appointment-settings-list,
.appointment-availability-body {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 25px rgba(15,23,42,.05);
}

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

.booking-date-list,
.booking-slot-list {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.booking-date-list button,
.booking-slot-list button,
.public-date-list button,
.public-time-list button {
  background: #ffffff;
  color: #172033;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  text-align: left;
}

.booking-date-list button.active,
.booking-slot-list button.active,
.public-date-list button.active,
.public-time-list button.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.appointment-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

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

.appointment-detail-grid div,
.appointment-detail-notes {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
}

.appointment-detail-grid span,
.appointment-detail-notes span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.appointment-detail-grid strong {
  word-break: break-word;
}

.appointment-detail-notes {
  margin-top: 12px;
}

.appointment-detail-notes p {
  margin: 0;
  color: #334155;
  white-space: pre-wrap;
}

.appointment-settings-tabs {
  display: flex;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 8px;
  margin-bottom: 18px;
}

.appointment-settings-tabs button {
  background: transparent;
  color: #475569;
  border-radius: 12px;
}

.appointment-settings-tabs button.active {
  background: #2563eb;
  color: #ffffff;
}

.appointment-settings-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  align-items: start;
}

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

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

.event-type-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
}

.event-type-card.inactive {
  opacity: .65;
}

.event-type-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.event-type-card p {
  color: #64748b;
  margin: 8px 0;
}

.event-type-card small {
  color: #64748b;
}

.event-type-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.event-type-actions button {
  padding: 8px 10px;
  font-size: 12px;
}

.appointment-availability-tools {
  margin-bottom: 14px;
}

.appointment-availability-tools select {
  max-width: 360px;
}

.availability-week-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.availability-day-row {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 10px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px;
}

.availability-day-row input {
  margin-top: 0;
}

.availability-override-editor {
  display: grid;
  grid-template-columns: 160px 190px 130px 130px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.availability-override-editor input {
  margin-top: 0;
}

.availability-override-list {
  display: grid;
  gap: 8px;
}

.availability-override-card {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
}

.availability-override-card span {
  color: #64748b;
  display: block;
  font-size: 13px;
  margin-top: 3px;
}

.public-schedule-body {
  display: block;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 36%),
    radial-gradient(circle at bottom right, rgba(124,58,237,.16), transparent 34%),
    #f5f7fb;
  min-height: 100vh;
}

.public-schedule-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px;
}

.public-schedule-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  box-shadow: 0 26px 80px rgba(15,23,42,.16);
  overflow: hidden;
}

.public-schedule-brand {
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 900;
  color: #1d4ed8;
}

.public-schedule-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 640px;
}

.public-schedule-info {
  padding: 34px;
  background: linear-gradient(135deg, #111827, #1e3a8a);
  color: #ffffff;
}

.public-schedule-info h1 {
  margin: 8px 0 12px;
  font-size: 34px;
}

.public-schedule-info p {
  color: #dbeafe;
  line-height: 1.6;
}

.public-schedule-info .eyebrow {
  color: #bfdbfe;
}

.public-schedule-fact {
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}

.public-schedule-fact strong,
.public-schedule-fact span {
  display: block;
}

.public-schedule-fact span {
  color: #dbeafe;
  margin-top: 4px;
}

.public-schedule-booker {
  padding: 28px;
}

.public-schedule-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.public-date-list,
.public-time-list {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.public-booking-form {
  margin-top: 22px;
  border-top: 1px solid #e2e8f0;
  padding-top: 18px;
  display: grid;
  gap: 10px;
}

.public-booking-form input,
.public-booking-form textarea {
  margin-top: 0;
}

.public-booking-form button {
  margin-top: 8px;
}

@media (max-width: 1200px) {
  .appointment-workspace {
    grid-template-columns: 1fr;
  }

  .appointment-side-column {
    position: static;
  }

  .appointment-calendar-week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appointment-settings-grid,
  .appointment-book-grid,
  .public-schedule-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .appointments-hero,
  .appointment-modal-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .appointment-stat-grid,
  .appointment-detail-grid,
  .public-schedule-picker {
    grid-template-columns: 1fr;
  }

  .appointment-calendar-week,
  .appointment-calendar-month,
  .appointment-calendar-day {
    grid-template-columns: 1fr;
  }

  .appointment-filter-grid {
    justify-content: flex-start;
  }

  .appointment-filter-grid select,
  .appointment-filter-grid input {
    width: 100%;
  }

  .availability-day-row,
  .availability-override-editor {
    grid-template-columns: 1fr;
  }

  .appointment-modal-backdrop {
    padding: 10px;
  }

  .appointment-modal {
    border-radius: 18px;
    padding: 14px;
  }

  .public-schedule-shell {
    padding: 14px;
  }
}

/* =========================================================
   APPOINTMENTS SIDEBAR MENU
   ========================================================= */

.appointments-nav-block {
  width: 100%;
}

.appointments-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.appointments-caret {
  margin-left: auto;
  transition: transform 0.15s ease;
}

.appointments-nav-toggle.open .appointments-caret {
  transform: rotate(180deg);
}

.appointments-submenu {
  display: grid;
  gap: 6px;
  padding: 2px 0 8px 8px;
}

.appointments-submenu-link {
  width: 100%;
  background: transparent;
  color: #cbd5e1;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px 10px 18px;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.appointments-submenu-link:hover,
.appointments-submenu-link.active {
  background: rgba(37, 99, 235, 0.22);
  color: #ffffff;
}

/* Automations placeholder */

.appointment-automation-placeholder {
  max-width: 1050px;
}

.appointment-automation-placeholder h3 {
  margin: 6px 0 8px;
  font-size: 26px;
}

.appointment-automation-placeholder > p {
  color: #64748b;
  max-width: 720px;
  line-height: 1.6;
}

.appointment-automation-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.appointment-automation-preview-card {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 16px;
  padding: 18px;
}

.appointment-automation-preview-card h4 {
  margin: 0 0 8px;
}

.appointment-automation-preview-card p {
  margin: 0;
  color: #64748b;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .appointment-automation-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SLEEK CRM CALENDAR
   ========================================================= */

.crm-calendar-page {
  min-height: 100vh;
  margin: -24px;
  background: #ffffff;
  color: #172033;
  overflow: hidden;
}

.crm-calendar-toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 10px 18px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.crm-calendar-brand {
  width: 232px;
  flex: 0 0 232px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.crm-calendar-brand-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #93c5fd 0%,
      #3b82f6 55%,
      #2563eb 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 14px rgba(37, 99, 235, 0.2);
}

.crm-calendar-brand-icon span {
  font-size: 20px;
  font-weight: 800;
}

.crm-calendar-brand-text {
  display: flex;
  flex-direction: column;
}

.crm-calendar-brand-text strong {
  color: #111827;
  font-size: 20px;
  font-weight: 700;
}

.crm-calendar-brand-text span {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.crm-calendar-navigation {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-calendar-navigation h2 {
  min-width: 220px;
  margin: 0 0 0 12px;
  color: #111827;
  font-size: 23px;
  font-weight: 500;
  white-space: nowrap;
}

.crm-calendar-toolbar button {
  min-width: auto;
  margin: 0;
  box-shadow: none;
}

.crm-calendar-today-btn {
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 10px 20px;
}

.crm-calendar-today-btn:hover {
  background: #f8fafc;
}

.crm-calendar-icon-btn {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: #475569;
  border: 0;
  border-radius: 999px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.crm-calendar-icon-btn:hover {
  background: #f1f5f9;
  color: #111827;
}

.crm-calendar-toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-calendar-view-select {
  width: auto;
  min-width: 112px;
  height: 42px;
  margin: 0;
  padding: 8px 34px 8px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background-color: #ffffff;
  color: #1f2937;
  font-weight: 700;
}

.crm-calendar-new-btn {
  background: #e8f0fe;
  color: #174ea6;
  border-radius: 999px;
  padding: 11px 18px;
}

.crm-calendar-new-btn:hover {
  background: #dbeafe;
}

.crm-calendar-user-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-left: 4px;
  border: 2px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
}

.crm-calendar-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}

.crm-calendar-sidebar-panel {
  padding: 14px 16px 22px;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
}

.crm-calendar-create-btn {
  min-width: 154px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  margin-bottom: 28px;
  padding: 14px 20px;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  border-radius: 17px;
  box-shadow:
    0 2px 5px rgba(15, 23, 42, 0.1),
    0 6px 16px rgba(15, 23, 42, 0.08);
}

.crm-calendar-create-btn:hover {
  background: #f8fafc;
  box-shadow:
    0 3px 7px rgba(15, 23, 42, 0.12),
    0 8px 20px rgba(15, 23, 42, 0.09);
}

.crm-calendar-create-plus {
  color: #2563eb;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}

.crm-mini-calendar-section {
  margin-bottom: 22px;
}

.crm-mini-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
  padding: 0 4px;
}

.crm-mini-calendar-header strong {
  color: #111827;
  font-size: 14px;
}

.crm-mini-calendar-header div {
  display: flex;
  gap: 2px;
}

.crm-mini-calendar-header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  color: #475569;
  border-radius: 999px;
  font-size: 20px;
}

.crm-mini-calendar-header button:hover {
  background: #f1f5f9;
}

.crm-mini-calendar-weekdays,
.crm-mini-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.crm-mini-calendar-weekdays {
  margin-bottom: 4px;
}

.crm-mini-calendar-weekdays span {
  display: grid;
  place-items: center;
  height: 24px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.crm-mini-calendar-grid button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  justify-self: center;
  padding: 0;
  background: transparent;
  color: #334155;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.crm-mini-calendar-grid button:hover {
  background: #e2e8f0;
}

.crm-mini-calendar-grid button.outside-month {
  color: #cbd5e1;
}

.crm-mini-calendar-grid button.today {
  color: #1d4ed8;
  font-weight: 900;
}

.crm-mini-calendar-grid button.selected {
  background: #2563eb;
  color: #ffffff;
}

.crm-calendar-rep-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 15px;
  padding: 9px 12px;
  background: #f1f5f9;
  border-radius: 8px;
}

.crm-calendar-rep-search span {
  color: #64748b;
  font-size: 18px;
}

.crm-calendar-rep-search input {
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  color: #334155;
  font-size: 13px;
}

.crm-calendar-sidebar-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 18px;
  padding: 11px 3px;
  background: transparent;
  color: #172033;
  text-align: left;
}

.crm-calendar-sidebar-link:hover {
  background: transparent;
  color: #2563eb;
}

.crm-calendar-sidebar-link strong {
  color: #64748b;
  font-size: 22px;
  font-weight: 400;
}

.crm-calendar-filter-section {
  margin-top: 16px;
}

.crm-calendar-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 3px;
}

.crm-calendar-filter-heading strong {
  color: #172033;
  font-size: 14px;
}

.crm-calendar-filter-heading span {
  color: #64748b;
}

.crm-calendar-filter-row {
  display: grid;
  grid-template-columns: 17px 10px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 3px;
  cursor: pointer;
}

.crm-calendar-filter-row:hover {
  background: #f8fafc;
  border-radius: 8px;
}

.crm-calendar-filter-row input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
}

.crm-calendar-filter-color {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.crm-calendar-filter-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.crm-calendar-filter-name small {
  margin-top: 1px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 500;
}

.crm-calendar-filter-empty {
  padding: 12px 3px;
  color: #94a3b8;
  font-size: 12px;
}

.crm-calendar-status-key {
  display: grid;
  gap: 9px;
  padding: 4px 3px;
}

.crm-calendar-status-key span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
}

.calendar-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.calendar-status-dot.scheduled {
  background: #2563eb;
}

.calendar-status-dot.confirmed {
  background: #059669;
}

.calendar-status-dot.completed {
  background: #7c3aed;
}

.calendar-status-dot.no-show {
  background: #ea580c;
}

.calendar-status-dot.cancelled {
  background: #94a3b8;
}

.crm-calendar-content {
  min-width: 0;
  overflow: auto;
  background: #ffffff;
}

.crm-calendar-canvas {
  min-width: 0;
  padding: 0 18px 18px 0;
}

/* Month view */

.sleek-month-calendar {
  min-width: 900px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 28px 28px 0 0;
}

.sleek-calendar-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 46px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.sleek-calendar-weekday-row div {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 9px 8px;
  color: #475569;
  border-right: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.sleek-calendar-weekday-row div:last-child {
  border-right: 0;
}

.sleek-calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(126px, 1fr));
  min-height: calc(100vh - 120px);
}

.sleek-calendar-month-day {
  min-width: 0;
  padding: 5px 7px 8px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  overflow: hidden;
}

.sleek-calendar-month-day:nth-child(7n) {
  border-right: 0;
}

.sleek-calendar-month-day.outside-month {
  background: #fbfdff;
}

.sleek-calendar-month-day.selected {
  background: #f8fbff;
}

.sleek-calendar-date-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 0 5px;
  padding: 2px;
  background: transparent;
  color: #172033;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
}

.sleek-calendar-date-btn:hover {
  background: transparent;
}

.sleek-calendar-date-btn span {
  min-width: 27px;
  min-height: 27px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
}

.sleek-calendar-month-day.outside-month
.sleek-calendar-date-btn {
  color: #94a3b8;
}

.sleek-calendar-month-day.today
.sleek-calendar-date-btn span {
  background: #2563eb;
  color: #ffffff;
}

.sleek-calendar-events {
  display: grid;
  gap: 3px;
}

.sleek-calendar-event {
  --calendar-event-color: #2563eb;
  --calendar-event-background: #eff6ff;

  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 7px auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  background: var(--calendar-event-background);
  color: #334155;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  text-align: left;
}

.sleek-calendar-event:hover {
  filter: brightness(0.97);
}

.sleek-calendar-event-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--calendar-event-color);
}

.sleek-calendar-event-time {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.sleek-calendar-event-title {
  min-width: 0;
  overflow: hidden;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sleek-calendar-event.status-cancelled {
  opacity: 0.55;
}

.sleek-calendar-event.status-cancelled
.sleek-calendar-event-title {
  text-decoration: line-through;
}

.sleek-calendar-event.status-completed {
  opacity: 0.72;
}

.sleek-calendar-more-btn {
  width: 100%;
  padding: 3px 6px;
  background: transparent;
  color: #2563eb;
  border-radius: 4px;
  text-align: left;
  font-size: 11px;
}

.sleek-calendar-more-btn:hover {
  background: #eff6ff;
}

/* Week view */

.sleek-week-calendar {
  min-width: 900px;
  min-height: calc(100vh - 90px);
  display: grid;
  grid-template-columns: repeat(7, minmax(128px, 1fr));
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 28px 28px 0 0;
}

.sleek-week-column {
  min-width: 0;
  border-right: 1px solid #e2e8f0;
}

.sleek-week-column:last-child {
  border-right: 0;
}

.sleek-week-column.today {
  background: #f8fbff;
}

.sleek-week-column-header {
  width: 100%;
  min-height: 76px;
  display: grid;
  place-items: center;
  gap: 4px;
  background: #ffffff;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
}

.sleek-week-column-header span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.sleek-week-column-header strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 17px;
}

.sleek-week-column.today
.sleek-week-column-header strong {
  background: #2563eb;
  color: #ffffff;
}

.sleek-week-events {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 8px;
}

.sleek-calendar-day-empty {
  padding: 18px 5px;
  color: #cbd5e1;
  font-size: 11px;
  text-align: center;
}

/* Day view */

.sleek-day-calendar {
  min-height: calc(100vh - 90px);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 28px 28px 0 0;
  background: #ffffff;
}

.sleek-day-calendar-header {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
}

.sleek-day-calendar-header > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sleek-day-calendar-header span {
  color: #64748b;
  font-size: 16px;
}

.sleek-day-calendar-header strong {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  font-size: 20px;
}

.sleek-day-calendar-header button {
  background: #e8f0fe;
  color: #174ea6;
  border-radius: 999px;
}

.sleek-day-agenda {
  display: grid;
  gap: 8px;
  padding: 20px 24px;
}

.sleek-day-agenda-event {
  --calendar-event-color: #2563eb;
  --calendar-event-background: #eff6ff;

  width: 100%;
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: var(--calendar-event-background);
  color: #172033;
  border: 0;
  border-left: 5px solid var(--calendar-event-color);
  border-radius: 10px;
  text-align: left;
}

.sleek-day-agenda-time {
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}

.sleek-day-agenda-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sleek-day-agenda-details strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sleek-day-agenda-details span,
.sleek-day-agenda-details small {
  margin-top: 3px;
  color: #64748b;
}

.sleek-day-agenda-event.status-cancelled {
  opacity: 0.55;
}

.sleek-day-empty-state {
  min-height: 360px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  color: #64748b;
  text-align: center;
}

.sleek-day-empty-state strong {
  color: #334155;
  font-size: 18px;
}

.sleek-day-empty-state button {
  margin-top: 8px;
}

/* Responsive layout */

@media (max-width: 1300px) {
  .crm-calendar-brand {
    width: 190px;
    flex-basis: 190px;
  }

  .crm-calendar-navigation h2 {
    min-width: 170px;
    font-size: 20px;
  }

  .crm-calendar-new-btn {
    display: none;
  }
}

@media (max-width: 1050px) {
  .crm-calendar-layout {
    grid-template-columns: 215px minmax(0, 1fr);
  }

  .crm-calendar-brand {
    width: auto;
    flex-basis: auto;
  }

  .crm-calendar-brand-text span {
    display: none;
  }

  .crm-calendar-toolbar {
    gap: 14px;
  }
}

@media (max-width: 850px) {
  .crm-calendar-page {
    margin: -24px;
  }

  .crm-calendar-sidebar-panel {
    display: none;
  }

  .crm-calendar-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-calendar-toolbar {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .crm-calendar-brand-text {
    display: none;
  }

  .crm-calendar-navigation {
    flex: 1;
  }

  .crm-calendar-navigation h2 {
    min-width: 0;
    font-size: 18px;
  }

  .crm-calendar-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .crm-calendar-canvas {
    padding-right: 0;
  }

  .sleek-month-calendar,
  .sleek-week-calendar {
    border-radius: 0;
  }
}

/* =========================================================
   APPOINTMENT DETAIL STATUS ACTIONS
   ========================================================= */

.appointment-detail-status-panel {
  margin-top: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

.appointment-detail-status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.appointment-detail-status-heading > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.appointment-detail-status-heading > div > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.appointment-detail-status-heading > div > strong {
  color: #172033;
  font-size: 15px;
}

.appointment-detail-status-actions {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.appointment-detail-status-button {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 8px;
  background: #ffffff;
  color: #334155;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  box-shadow: none;
}

.appointment-detail-status-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 7px 18px rgba(15, 23, 42, 0.09);
}

.appointment-status-button-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
}

.appointment-detail-status-button.confirm {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.appointment-detail-status-button.confirm
.appointment-status-button-icon {
  background: #2563eb;
  color: #ffffff;
}

.appointment-detail-status-button.complete {
  color: #166534;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.appointment-detail-status-button.complete
.appointment-status-button-icon {
  background: #16a34a;
  color: #ffffff;
}

.appointment-detail-status-button.no-show {
  color: #92400e;
  border-color: #fde68a;
  background: #fffbeb;
}

.appointment-detail-status-button.no-show
.appointment-status-button-icon {
  background: #d97706;
  color: #ffffff;
}

.appointment-detail-status-button.cancel {
  color: #991b1b;
  border-color: #fecaca;
  background: #fef2f2;
}

.appointment-detail-status-button.cancel
.appointment-status-button-icon {
  background: #dc2626;
  color: #ffffff;
}

.appointment-detail-status-button.active,
.appointment-detail-status-button:disabled {
  cursor: default;
  opacity: 1;
  box-shadow:
    inset 0 0 0 2px currentColor;
  transform: none;
}

@media (max-width: 760px) {
  .appointment-detail-status-actions {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .appointment-detail-status-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 440px) {
  .appointment-detail-status-actions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TIMED DAY AND WEEK CALENDAR
   ========================================================= */

.calendar-timeline-shell {
  --calendar-hour-height: 72px;
  --calendar-half-hour-height: 36px;
  --calendar-day-height: 1728px;

  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 28px 28px 0 0;
}

.calendar-timeline-scroll {
  width: 100%;
  max-height: calc(100vh - 150px);
  overflow: auto;
  background: #ffffff;
}

/* Week timeline */

.calendar-week-timeline-inner {
  min-width: 980px;
}

.calendar-week-timeline-header,
.calendar-week-timeline-body {
  display: grid;
  grid-template-columns:
    64px
    repeat(7, minmax(130px, 1fr));
}

.calendar-week-timeline-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 76px;
  background: #ffffff;
  border-bottom: 1px solid #dbe3ef;
}

.calendar-time-gutter {
  position: sticky;
  left: 0;
  z-index: 35;
  background: #ffffff;
  border-right: 1px solid #dbe3ef;
}

.calendar-timezone-label {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 8px 10px;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.calendar-day-heading {
  min-width: 0;
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  margin: 0;
  padding: 8px;
  background: #ffffff;
  color: #334155;
  border-right: 1px solid #dbe3ef;
  border-radius: 0;
  box-shadow: none;
}

.calendar-day-heading:last-child {
  border-right: 0;
}

.calendar-day-heading:hover {
  background: #f8fafc;
}

.calendar-day-heading span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.calendar-day-heading strong {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 19px;
}

.calendar-day-heading.today strong {
  background: #2563eb;
  color: #ffffff;
}

.calendar-week-timeline-body {
  position: relative;
  height: var(--calendar-day-height);
  background: #ffffff;
}

/* Day timeline */

.calendar-day-timeline .calendar-timeline-scroll {
  max-height: calc(100vh - 245px);
}

.calendar-day-timeline-inner {
  min-width: 650px;
}

.calendar-day-timeline-body {
  display: grid;
  grid-template-columns:
    64px
    minmax(0, 1fr);
  height: var(--calendar-day-height);
}

/* Time labels */

.calendar-time-axis {
  position: sticky;
  left: 0;
  z-index: 15;
  height: var(--calendar-day-height);
  background: #ffffff;
  border-right: 1px solid #dbe3ef;
}

.calendar-time-label {
  position: absolute;
  right: 8px;
  z-index: 2;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-50%);
}

.calendar-time-label:first-child {
  transform: translateY(4px);
}

/* Individual day tracks */

.calendar-day-track {
  position: relative;
  min-width: 0;
  height: var(--calendar-day-height);
  overflow: hidden;
  border-right: 1px solid #dbe3ef;
  background-color: #ffffff;

  /*
   * First layer: stronger hourly line.
   * Second layer: lighter half-hour line.
   */
  background-image:
    repeating-linear-gradient(
      to bottom,
      #dbe3ef 0,
      #dbe3ef 1px,
      transparent 1px,
      transparent var(--calendar-hour-height)
    ),
    repeating-linear-gradient(
      to bottom,
      #edf2f7 0,
      #edf2f7 1px,
      transparent 1px,
      transparent var(--calendar-half-hour-height)
    );
}

.calendar-day-track:last-child {
  border-right: 0;
}

.calendar-day-track.today {
  background-color: #fbfdff;
}

.calendar-track-events {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* Timed appointment blocks */

.calendar-timed-event {
  --calendar-event-color: #2563eb;

  position: absolute;
  z-index: 6;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  margin: 0;
  padding: 5px 6px;
  overflow: hidden;
  background: var(--calendar-event-color);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-left: 4px solid rgba(255, 255, 255, 0.88);
  border-radius: 5px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.18);
  text-align: left;
}

.calendar-timed-event:hover {
  z-index: 12;
  filter: brightness(0.94);
  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.24);
}

.calendar-timed-event strong,
.calendar-timed-event span,
.calendar-timed-event small {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-timed-event strong {
  font-size: 11px;
  font-weight: 800;
}

.calendar-timed-event span {
  font-size: 10px;
  font-weight: 700;
}

.calendar-timed-event small {
  margin-top: 2px;
  font-size: 9px;
  opacity: 0.9;
}

.calendar-timed-event-day {
  padding: 7px 9px;
}

.calendar-timed-event-day strong {
  font-size: 13px;
}

.calendar-timed-event-day span {
  font-size: 11px;
}

.calendar-timed-event-day small {
  font-size: 10px;
}

.calendar-timed-event.is-compact {
  padding-top: 3px;
  padding-bottom: 3px;
}

.calendar-timed-event.is-compact small {
  display: none;
}

.calendar-timed-event.is-tiny span,
.calendar-timed-event.is-tiny small {
  display: none;
}

.calendar-timed-event.status-cancelled {
  opacity: 0.48;
}

.calendar-timed-event.status-cancelled strong {
  text-decoration: line-through;
}

.calendar-timed-event.status-completed {
  opacity: 0.72;
}

.calendar-timed-event.status-no_show {
  filter: saturate(0.7);
}

@media (max-width: 850px) {
  .calendar-week-timeline-inner {
    min-width: 1050px;
  }

  .calendar-day-timeline-inner {
    min-width: 620px;
  }

  .calendar-timeline-scroll {
    max-height: calc(100vh - 180px);
  }

  .calendar-day-timeline
  .calendar-timeline-scroll {
    max-height: calc(100vh - 285px);
  }
}

.booking-requested-time {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.booking-requested-time.available {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.booking-requested-time.unavailable {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
}