/* ========================================
   SALES WORKSPACE SHELL
======================================== */

.sales-dashboard,
.sales-new-lead-page,
.sales-pipeline-page,
.sales-lead-details-page,
.sales-upcoming-page,
.sales-calendar-page,
.from-ai-page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  width: 100%;
  max-width: 1180px;
  margin: 0;
}

.sales-dashboard .workspace-card,
.sales-new-lead-page .workspace-card,
.sales-pipeline-page .workspace-card,
.sales-lead-details-page .workspace-card,
.sales-upcoming-page .workspace-card,
.sales-calendar-page .workspace-card,
.from-ai-page .workspace-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.sales-dashboard h1,
.sales-new-lead-page h1,
.sales-pipeline-page h1,
.sales-lead-details-page h1,
.sales-upcoming-page h1,
.sales-calendar-page h1,
.from-ai-page h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
}

.sales-dashboard h2,
.sales-new-lead-page h2,
.sales-pipeline-page h2,
.sales-lead-details-page h2,
.sales-upcoming-page h2,
.sales-calendar-page h2,
.from-ai-page h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.sales-dashboard h3,
.sales-new-lead-page h3,
.sales-pipeline-page h3,
.sales-lead-details-page h3,
.sales-upcoming-page h3,
.sales-calendar-page h3,
.from-ai-page h3 {
  margin: 0;
}

.sales-dashboard p,
.sales-new-lead-page p,
.sales-pipeline-page p,
.sales-lead-details-page p,
.sales-upcoming-page p,
.sales-calendar-page p,
.from-ai-page p {
  margin: 0;
  line-height: 1.5;
}


/* ========================================
   SALES DASHBOARD
======================================== */

#salesDashboardStats {
  width: 100%;
}

#salesDashboardStats .stats-grid,
.sales-kpi-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  gap: 16px;
  width: 100%;
}

#salesDashboardStats .stats-card,
.sales-kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 126px;
  padding: 20px;
  box-sizing: border-box;
}

#salesDashboardStats .stats-card h3,
.sales-kpi-card h3 {
  font-size: 15px;
  line-height: 1.35;
}

#salesDashboardStats .stats-card p,
.sales-kpi-card strong {
  display: block;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}


/* ========================================
   SALES NEW LEAD
======================================== */

.sales-new-lead-page {
  width:
    min(
      1380px,
      calc(
        100vw -
        320px
      )
    );
  max-width:
    1380px;
  margin:
    0 auto;
  padding:
    22px 0 80px;
}

.sales-new-lead-header {
  position:
    relative;
  display:
    flex;
  flex-direction:
    column;
  gap:
    10px;
  overflow:
    hidden;
  padding:
    26px 28px;
  border-radius:
    28px;
  background:
    radial-gradient(
      circle at top left,
      rgba(96, 165, 250, 0.22),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(51, 65, 85, 0.94),
      rgba(15, 23, 42, 0.9)
    );
  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.24
    );
  box-shadow:
    0 26px 70px
    rgba(
      0,
      0,
      0,
      0.28
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.06
    );
}

.sales-new-lead-header::after {
  content:
    "";
  position:
    absolute;
  right:
    -70px;
  bottom:
    -90px;
  width:
    230px;
  height:
    230px;
  border-radius:
    999px;
  background:
    rgba(
      59,
      130,
      246,
      0.16
    );
  filter:
    blur(
      4px
    );
  pointer-events:
    none;
}

.sales-new-lead-header > div {
  position:
    relative;
  z-index:
    1;
  display:
    grid;
  gap:
    8px;
}

.sales-new-lead-eyebrow {
  display:
    inline-flex;
  width:
    fit-content;
  padding:
    7px 11px;
  border-radius:
    999px;
  color:
    #dbeafe;
  background:
    rgba(
      37,
      99,
      235,
      0.18
    );
  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.28
    );
  font-size:
    11px;
  font-weight:
    900;
  line-height:
    1;
  text-transform:
    uppercase;
  letter-spacing:
    0.06em;
}

.sales-new-lead-header h2 {
  font-size:
    30px;
  letter-spacing:
    -0.04em;
}

.sales-new-lead-header p {
  max-width:
    720px;
  color:
    rgba(
      226,
      232,
      240,
      0.76
    );
}

.sales-new-lead-grid {
  display:
    grid;
  grid-template-columns:
    minmax(
      0,
      1.28fr
    )
    minmax(
      340px,
      0.72fr
    );
  align-items:
    start;
  gap:
    20px;
  width:
    100%;
}

.sales-section {
  display:
    flex;
  flex-direction:
    column;
  gap:
    20px;
  width:
    100%;
  min-width:
    0;
  padding:
    24px;
  border-radius:
    26px;
  box-sizing:
    border-box;
  background:
    linear-gradient(
      145deg,
      rgba(51, 65, 85, 0.9),
      rgba(15, 23, 42, 0.86)
    );
  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.22
    );
  box-shadow:
    0 24px 64px
    rgba(
      0,
      0,
      0,
      0.24
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.05
    );
}

.sales-section-header {
  display:
    flex;
  align-items:
    flex-start;
  justify-content:
    space-between;
  gap:
    18px;
  padding-bottom:
    18px;
  border-bottom:
    1px solid
    rgba(
      148,
      163,
      184,
      0.16
    );
}

.sales-section-header > div {
  display:
    grid;
  gap:
    6px;
}

.sales-section-header h3 {
  font-size:
    20px;
  letter-spacing:
    -0.03em;
}

.sales-section-header p {
  color:
    rgba(
      226,
      232,
      240,
      0.7
    );
  font-size:
    13px;
}

.sales-lead-form {
  display:
    flex;
  flex-direction:
    column;
  gap:
    22px;
  width:
    100%;
}

.sales-lead-destination {
  display:
    grid;
  gap:
    12px;
  padding:
    18px;
  border-radius:
    20px;
  background:
    rgba(
      15,
      23,
      42,
      0.26
    );
  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.16
    );
}

.sales-lead-destination-label {
  color:
    rgba(
      226,
      232,
      240,
      0.88
    );
  font-size:
    12px;
  font-weight:
    900;
  text-transform:
    uppercase;
  letter-spacing:
    0.06em;
}

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

.sales-lead-destination-card {
  position:
    relative;
  display:
    grid;
  grid-template-columns:
    44px
    minmax(
      0,
      1fr
    );
  align-items:
    center;
  gap:
    12px;
  min-height:
    88px;
  padding:
    15px;
  border-radius:
    18px;
  cursor:
    pointer;
  background:
    rgba(
      15,
      23,
      42,
      0.28
    );
  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.18
    );
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

.sales-lead-destination-card:hover {
  transform:
    translateY(
      -2px
    );
  border-color:
    rgba(
      147,
      197,
      253,
      0.42
    );
}

.sales-lead-destination-card.is-active[
  data-sales-destination-card="sales"
] {
  border-color:
    rgba(
      96,
      165,
      250,
      0.72
    );
  background:
    linear-gradient(
      135deg,
      rgba(
        37,
        99,
        235,
        0.28
      ),
      rgba(
        15,
        23,
        42,
        0.28
      )
    );
  box-shadow:
    0 14px 36px
    rgba(
      37,
      99,
      235,
      0.16
    );
}

.sales-lead-destination-card.is-active[
  data-sales-destination-card="hunter"
] {
  border-color:
    rgba(
      192,
      132,
      252,
      0.72
    );
  background:
    linear-gradient(
      135deg,
      rgba(
        126,
        34,
        206,
        0.28
      ),
      rgba(
        15,
        23,
        42,
        0.28
      )
    );
  box-shadow:
    0 14px 36px
    rgba(
      126,
      34,
      206,
      0.17
    );
}

.sales-lead-destination-card input {
  position:
    absolute;
  width:
    1px;
  height:
    1px;
  opacity:
    0;
  pointer-events:
    none;
}

.sales-lead-destination-icon {
  display:
    grid;
  place-items:
    center;
  width:
    44px;
  height:
    44px;
  border-radius:
    15px;
  color:
    #dbeafe;
  background:
    rgba(
      59,
      130,
      246,
      0.18
    );
  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.26
    );
  font-size:
    17px;
  font-weight:
    950;
}

[
  data-sales-destination-card="hunter"
]
.sales-lead-destination-card
.sales-lead-destination-icon {
  color:
    #f3e8ff;
  background:
    rgba(
      168,
      85,
      247,
      0.18
    );
  border-color:
    rgba(
      192,
      132,
      252,
      0.26
    );
}

.sales-lead-destination-copy {
  display:
    grid;
  gap:
    5px;
  min-width:
    0;
}

.sales-lead-destination-copy strong {
  color:
    #f8fafc;
  font-size:
    14px;
}

.sales-lead-destination-copy small {
  color:
    rgba(
      226,
      232,
      240,
      0.68
    );
  line-height:
    1.4;
}

.sales-lead-destination-message {
  padding:
    11px 13px;
  border-radius:
    13px;
  color:
    rgba(
      226,
      232,
      240,
      0.78
    );
  background:
    rgba(
      15,
      23,
      42,
      0.24
    );
  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.12
    );
  font-size:
    12px;
}

.sales-manual-fields {
  display:
    grid;
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );
  gap:
    14px;
}

.sales-form-field {
  display:
    grid;
  gap:
    7px;
  min-width:
    0;
}

.sales-form-field.is-full {
  grid-column:
    1 / -1;
}

.sales-form-field label {
  color:
    rgba(
      226,
      232,
      240,
      0.88
    );
  font-size:
    12px;
  font-weight:
    800;
}

.sales-lead-form input,
.sales-lead-form textarea,
.sales-lead-form select,
.sales-import-section textarea {
  width:
    100%;
  min-height:
    44px;
  padding:
    11px 13px;
  border-radius:
    14px;
  box-sizing:
    border-box;
  color:
    #f8fafc;
  background:
    rgba(
      15,
      23,
      42,
      0.3
    );
  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.2
    );
  box-shadow:
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.sales-lead-form input::placeholder,
.sales-lead-form textarea::placeholder,
.sales-import-section textarea::placeholder {
  color:
    rgba(
      226,
      232,
      240,
      0.42
    );
}

.sales-lead-form input:focus,
.sales-lead-form textarea:focus,
.sales-lead-form select:focus,
.sales-import-section textarea:focus {
  outline:
    none;
  border-color:
    rgba(
      96,
      165,
      250,
      0.76
    );
  box-shadow:
    0 0 0 4px
    rgba(
      37,
      99,
      235,
      0.16
    );
}

.sales-lead-form textarea {
  min-height:
    132px;
  resize:
    vertical;
  line-height:
    1.5;
}

.sales-new-lead-submit-bar {
  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;
  gap:
    18px;
  padding:
    18px;
  border-radius:
    20px;
  background:
    linear-gradient(
      135deg,
      rgba(
        37,
        99,
        235,
        0.2
      ),
      rgba(
        15,
        23,
        42,
        0.26
      )
    );
  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.22
    );
}

.sales-new-lead-submit-bar > div {
  display:
    grid;
  gap:
    4px;
}

.sales-new-lead-submit-bar strong {
  color:
    #f8fafc;
  font-size:
    14px;
}

.sales-new-lead-submit-bar span {
  color:
    rgba(
      226,
      232,
      240,
      0.66
    );
  font-size:
    12px;
}

.sales-new-lead-submit-bar .btn {
  flex-shrink:
    0;
  width:
    auto;
  min-width:
    170px;
  border-radius:
    999px;
  font-weight:
    900;
  box-shadow:
    0 16px 36px
    rgba(
      37,
      99,
      235,
      0.24
    );
}

.sales-new-lead-submit-bar .btn.is-hunter-action {
  background:
    linear-gradient(
      135deg,
      rgba(
        168,
        85,
        247,
        0.98
      ),
      rgba(
        126,
        34,
        206,
        0.98
      )
    );
  border-color:
    rgba(
      216,
      180,
      254,
      0.38
    );
  box-shadow:
    0 16px 38px
    rgba(
      126,
      34,
      206,
      0.3
    );
}

.sales-import-section {
  position:
    sticky;
  top:
    24px;
}

.sales-import-format-card {
  display:
    grid;
  gap:
    9px;
  padding:
    16px;
  border-radius:
    18px;
  background:
    rgba(
      15,
      23,
      42,
      0.26
    );
  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.16
    );
}

.sales-import-format-card > span {
  color:
    rgba(
      226,
      232,
      240,
      0.84
    );
  font-size:
    11px;
  font-weight:
    900;
  text-transform:
    uppercase;
  letter-spacing:
    0.06em;
}

.sales-import-order {
  color:
    #dbeafe;
  font-size:
    13px;
  font-weight:
    700;
  line-height:
    1.65;
  overflow-wrap:
    anywhere;
}

.sales-import-help {
  color:
    rgba(
      226,
      232,
      240,
      0.62
    );
  font-size:
    12px;
}

.sales-import-section textarea {
  min-height:
    300px;
  resize:
    vertical;
  line-height:
    1.5;
}

.sales-import-actions {
  display:
    flex;
  align-items:
    center;
  flex-wrap:
    wrap;
  gap:
    12px;
}

.sales-import-actions .btn {
  flex-shrink:
    0;
  border-radius:
    999px;
  font-weight:
    800;
}

#salesImportStatus {
  color:
    rgba(
      226,
      232,
      240,
      0.74
    );
  font-size:
    13px;
  line-height:
    1.4;
}

@media (
  max-width:
  1280px
) {

  .sales-new-lead-page {
    width:
      min(
        100%,
        calc(
          100vw -
          40px
        )
      );
  }

  .sales-new-lead-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        320px,
        0.72fr
      );
  }

}

@media (
  max-width:
  980px
) {

  .sales-new-lead-grid {
    grid-template-columns:
      1fr;
  }

  .sales-import-section {
    position:
      static;
  }

}

@media (
  max-width:
  680px
) {

  .sales-new-lead-page {
    width:
      100%;
    padding:
      12px 0 50px;
  }

  .sales-new-lead-header,
  .sales-section {
    padding:
      19px;
    border-radius:
      21px;
  }

  .sales-lead-destination-grid,
  .sales-manual-fields {
    grid-template-columns:
      1fr;
  }

  .sales-form-field.is-full {
    grid-column:
      auto;
  }

  .sales-new-lead-submit-bar {
    align-items:
      stretch;
    flex-direction:
      column;
  }

  .sales-new-lead-submit-bar .btn,
  .sales-import-actions .btn {
    width:
      100%;
  }

}


/* ========================================
   SALES PIPELINE
======================================== */

.sales-pipeline-page {
  max-width: 1180px;
}

.sales-pipeline-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sales-pipeline-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.sales-pipeline-stage-grid {
  display: grid;
  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );
  gap: 12px;
  width: 100%;
}

.sales-pipeline-stage-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 68px;
  padding: 15px 16px;
  border-radius: 14px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.sales-pipeline-stage-card:hover {
  transform: translateY(-2px);
}

.sales-pipeline-stage-card.is-active {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.12);
}

.sales-pipeline-stage-label {
  font-weight: 700;
  line-height: 1.25;
}

.sales-pipeline-stage-count {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 27px;
  min-height: 27px;
  padding: 3px 7px;
  border-radius: 999px;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1;
  background:
    rgba(255, 255, 255, 0.18);
}

.sales-pipeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-left:
    5px solid transparent;
}

.sales-pipeline-toolbar > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sales-pipeline-selected-label {
  opacity: 0.72;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#salesPipelineSearch {
  width: min(100%, 390px);
  min-height: 44px;
  padding: 11px 13px;
  box-sizing: border-box;
}

.sales-pipeline-lead-grid,
.from-ai-container {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.sales-pipeline-empty {
  padding: 20px;
}

.sales-lead-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 164px;
  padding: 18px;
  border-left:
    5px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.sales-lead-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08);
}

.sales-lead-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sales-lead-card h3 {
  font-size: 18px;
  line-height: 1.3;
}

.sales-lead-card p {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sales-lead-stage-badge {
  flex-shrink: 0;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.sales-lead-card-location {
  margin-top: auto !important;
  opacity: 0.78;
}


/* ========================================
   SALES PIPELINE STAGE COLORS
======================================== */

.sales-pipeline-stage-card.sales-stage-customer-ready {
  border:
    1px solid rgba(34, 197, 94, 0.7);
  background:
    rgba(34, 197, 94, 0.18);
}

.sales-pipeline-stage-card.sales-stage-a-lead {
  border:
    1px solid rgba(250, 204, 21, 0.78);
  background:
    rgba(250, 204, 21, 0.18);
}

.sales-pipeline-stage-card.sales-stage-b-lead {
  border:
    1px solid rgba(249, 115, 22, 0.78);
  background:
    rgba(249, 115, 22, 0.18);
}

.sales-pipeline-stage-card.sales-stage-c-lead {
  border:
    1px solid rgba(59, 130, 246, 0.78);
  background:
    rgba(59, 130, 246, 0.18);
}

.sales-pipeline-stage-card.sales-stage-rt-lead {
  border:
    1px solid rgba(168, 85, 247, 0.78);
  background:
    rgba(168, 85, 247, 0.18);
}

.sales-pipeline-stage-card.sales-stage-ib {
  border:
    1px solid rgba(239, 68, 68, 0.78);
  background:
    rgba(239, 68, 68, 0.18);
}

.sales-pipeline-toolbar.sales-stage-customer-ready,
.sales-lead-card.sales-stage-customer-ready {
  border-left-color:
    rgb(34, 197, 94);
}

.sales-pipeline-toolbar.sales-stage-a-lead,
.sales-lead-card.sales-stage-a-lead {
  border-left-color:
    rgb(250, 204, 21);
}

.sales-pipeline-toolbar.sales-stage-b-lead,
.sales-lead-card.sales-stage-b-lead {
  border-left-color:
    rgb(249, 115, 22);
}

.sales-pipeline-toolbar.sales-stage-c-lead,
.sales-lead-card.sales-stage-c-lead {
  border-left-color:
    rgb(59, 130, 246);
}

.sales-pipeline-toolbar.sales-stage-rt-lead,
.sales-lead-card.sales-stage-rt-lead {
  border-left-color:
    rgb(168, 85, 247);
}

.sales-pipeline-toolbar.sales-stage-ib,
.sales-lead-card.sales-stage-ib {
  border-left-color:
    rgb(239, 68, 68);
}

.sales-lead-stage-badge.sales-stage-customer-ready {
  color:
    rgb(187, 247, 208);
  background:
    rgba(34, 197, 94, 0.2);
}

.sales-lead-stage-badge.sales-stage-a-lead {
  color:
    rgb(254, 240, 138);
  background:
    rgba(250, 204, 21, 0.2);
}

.sales-lead-stage-badge.sales-stage-b-lead {
  color:
    rgb(254, 215, 170);
  background:
    rgba(249, 115, 22, 0.2);
}

.sales-lead-stage-badge.sales-stage-c-lead {
  color:
    rgb(191, 219, 254);
  background:
    rgba(59, 130, 246, 0.2);
}

.sales-lead-stage-badge.sales-stage-rt-lead {
  color:
    rgb(233, 213, 255);
  background:
    rgba(168, 85, 247, 0.2);
}

.sales-lead-stage-badge.sales-stage-ib {
  color:
    rgb(254, 202, 202);
  background:
    rgba(239, 68, 68, 0.2);
}


/* ========================================
   SALES DETAILS
======================================== */

.sales-details-back-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sales-details-back-row .btn {
  width: fit-content;
}

.sales-details-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sales-details-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sales-details-header > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sales-details-status {
  flex-shrink: 0;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.sales-details-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);
  gap: 18px;
  width: 100%;
}

.sales-details-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.sales-details-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sales-lead-details-page input,
.sales-lead-details-page textarea,
.sales-lead-details-page select {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  box-sizing: border-box;
}

.sales-lead-details-page textarea {
  min-height: 174px;
  resize: vertical;
  line-height: 1.5;
}

.sales-lead-details-page label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sales-details-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sales-details-message {
  line-height: 1.4;
}


/* ========================================
   SALES ACTIVITY LOG
======================================== */

.sales-activity-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sales-activity-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sales-activity-header > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sales-activity-form {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(180px, 0.34fr);
  align-items: end;
  gap: 14px;
}

.sales-activity-meeting-fields {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 14px;
  grid-column:
    1 / -1;
  width: 100%;
}

.sales-activity-meeting-location-field {
  grid-column:
    1 / -1;
}

.sales-activity-comment-field {
  grid-column:
    1 / -1;
}

.sales-activity-form .btn {
  width: fit-content;
  min-width: 154px;
}

@media (max-width: 760px) {
  .sales-activity-meeting-fields {
    grid-template-columns:
      1fr;
  }

  .sales-activity-meeting-location-field {
    grid-column:
      auto;
  }
}

.sales-activity-history {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top:
    1px solid rgba(255, 255, 255, 0.12);
}

#salesActivityHistory {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sales-activity-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  border-radius: 12px;
  border:
    1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.sales-activity-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sales-activity-item-header span {
  opacity: 0.74;
  font-size: 12px;
}

.sales-activity-empty {
  padding: 14px 0;
  opacity: 0.76;
}


/* ========================================
   UPCOMING ACTIVITIES
======================================== */

.sales-upcoming-page {
  width: 100%;
  max-width: 1180px;
}

.sales-upcoming-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px;
}

.sales-upcoming-toolbar .btn {
  width: auto;
  min-width: 132px;
}

.sales-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.sales-upcoming-activity-row {
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  border-left:
    5px solid transparent;
  text-align: left;
}

.sales-upcoming-activity-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sales-upcoming-activity-main > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sales-upcoming-date {
  opacity: 0.78;
  font-size: 13px;
  font-weight: 700;
}

.sales-upcoming-activity-row h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.sales-upcoming-status {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.sales-upcoming-status-overdue {
  color:
    rgb(254, 202, 202);
  background:
    rgba(239, 68, 68, 0.2);
}

.sales-upcoming-status-today {
  color:
    rgb(254, 240, 138);
  background:
    rgba(250, 204, 21, 0.2);
}

.sales-upcoming-status-future {
  color:
    rgb(191, 219, 254);
  background:
    rgba(59, 130, 246, 0.2);
}

.sales-upcoming-meta {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  gap: 12px;
  color:
    rgba(248, 250, 252, 0.86);
  font-size: 14px;
  line-height: 1.45;
}

.sales-upcoming-meta span {
  overflow-wrap: anywhere;
}

.sales-upcoming-activity-row.sales-stage-customer-ready {
  border-left-color:
    rgb(34, 197, 94);
}

.sales-upcoming-activity-row.sales-stage-a-lead {
  border-left-color:
    rgb(250, 204, 21);
}

.sales-upcoming-activity-row.sales-stage-b-lead {
  border-left-color:
    rgb(249, 115, 22);
}

.sales-upcoming-activity-row.sales-stage-c-lead {
  border-left-color:
    rgb(59, 130, 246);
}

.sales-upcoming-activity-row.sales-stage-rt-lead {
  border-left-color:
    rgb(168, 85, 247);
}

.sales-upcoming-activity-row.sales-stage-ib {
  border-left-color:
    rgb(239, 68, 68);
}


/* ========================================
   SALES CALENDAR
======================================== */

.sales-calendar-page {
  width: 100%;
  max-width: 1680px;
}

#salesCalendarContainer {
  width: 100%;
}

.sales-calendar-workspace-grid {
  display: grid;
  grid-template-columns:
    minmax(270px, 0.78fr)
    minmax(0, 2.42fr)
    minmax(240px, 0.8fr);
  align-items: start;
  gap: 16px;
  width: 100%;
}

.sales-calendar-editor-column,
.sales-calendar-main-column,
.sales-calendar-agenda-column {
  min-width: 0;
}

.sales-calendar-editor-column,
.sales-calendar-agenda-column {
  position: sticky;
  top: 24px;
}

.sales-calendar-form-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 17px;
}

.sales-calendar-form-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sales-calendar-form-header p {
  opacity: 0.78;
  font-size: 13px;
}

.sales-calendar-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sales-calendar-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sales-calendar-form label span {
  font-size: 13px;
  font-weight: 700;
}

.sales-calendar-form input,
.sales-calendar-form select,
.sales-calendar-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  box-sizing: border-box;
}

.sales-calendar-form textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

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

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

.sales-calendar-form-actions .btn {
  width: 100%;
}

.sales-calendar-month-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  overflow-x: auto;
}

.sales-calendar-month-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sales-calendar-month-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sales-calendar-month-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sales-calendar-month-navigation .btn {
  min-height: 38px;
  padding: 8px 12px;
}

.sales-calendar-month-grid {
  display: grid;
  grid-template-columns:
    repeat(
      7,
      minmax(108px, 1fr)
    );
  min-width: 756px;
  border-top:
    1px solid rgba(255, 255, 255, 0.14);
  border-left:
    1px solid rgba(255, 255, 255, 0.14);
}

.sales-calendar-month-weekday {
  padding: 9px 7px;
  border-right:
    1px solid rgba(255, 255, 255, 0.14);
  border-bottom:
    1px solid rgba(255, 255, 255, 0.14);
  color:
    rgba(248, 250, 252, 0.76);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sales-calendar-month-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 116px;
  padding: 7px;
  border-right:
    1px solid rgba(255, 255, 255, 0.14);
  border-bottom:
    1px solid rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
  background:
    rgba(255, 255, 255, 0.015);
}

.sales-calendar-month-day.is-outside-month {
  opacity: 0.38;
  background:
    rgba(0, 0, 0, 0.12);
}

.sales-calendar-month-day.is-today {
  background:
    rgba(59, 130, 246, 0.12);
  box-shadow:
    inset 0 0 0 2px rgba(59, 130, 246, 0.72);
}

.sales-calendar-month-day-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.sales-calendar-month-day.is-today
.sales-calendar-month-day-number {
  color:
    rgb(219, 234, 254);
  background:
    rgba(59, 130, 246, 0.38);
}

.sales-calendar-month-day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sales-calendar-month-event {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
  border:
    1px solid rgba(59, 130, 246, 0.42);
  border-radius: 6px;
  box-sizing: border-box;
  color:
    rgb(219, 234, 254);
  background:
    rgba(59, 130, 246, 0.18);
  cursor: pointer;
  text-align: left;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.sales-calendar-month-event.has-linked-lead {
  border-color:
    rgba(34, 197, 94, 0.52);
  background:
    rgba(34, 197, 94, 0.14);
}

.sales-calendar-month-event:hover {
  border-color:
    rgba(96, 165, 250, 0.82);
  background:
    rgba(59, 130, 246, 0.3);
  transform:
    translateY(-1px);
}

.sales-calendar-month-event.has-linked-lead:hover {
  border-color:
    rgba(74, 222, 128, 0.88);
  background:
    rgba(34, 197, 94, 0.24);
}

.sales-calendar-month-event-time {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.sales-calendar-month-event-type {
  display: none;
}

.sales-calendar-month-event-title {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-calendar-agenda-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height:
    calc(
      100vh -
      48px
    );
  padding: 14px;
  border-radius: 14px;
  box-sizing: border-box;
  background:
    rgba(255, 255, 255, 0.035);
  overflow-y: auto;
}

.sales-calendar-agenda-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sales-calendar-agenda-header h2 {
  font-size: 18px;
}

.sales-calendar-agenda-header p {
  opacity: 0.74;
  font-size: 12px;
}

.sales-calendar-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.sales-calendar-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sales-calendar-day h2 {
  margin: 0;
  padding-left: 2px;
  font-size: 14px;
}

.sales-calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sales-calendar-event-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  border-left:
    4px solid rgb(59, 130, 246);
  cursor: default;
}

.sales-calendar-event-card.has-linked-lead {
  border-left-color:
    rgb(34, 197, 94);
  cursor: pointer;
}

.sales-calendar-event-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sales-calendar-event-header > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sales-calendar-event-time {
  color:
    rgb(191, 219, 254);
  font-size: 11px;
  font-weight: 700;
}

.sales-calendar-event-card h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.3;
}

.sales-calendar-event-type {
  flex-shrink: 0;
  padding: 5px 7px;
  border-radius: 999px;
  color:
    rgb(191, 219, 254);
  background:
    rgba(59, 130, 246, 0.2);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.sales-calendar-event-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color:
    rgba(248, 250, 252, 0.82);
  font-size: 11px;
  line-height: 1.35;
}

.sales-calendar-event-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color:
    rgba(248, 250, 252, 0.88);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient:
    vertical;
  -webkit-line-clamp:
    3;
  line-clamp:
    3;
}

.sales-calendar-open-lead-hint {
  color:
    rgb(134, 239, 172);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.sales-calendar-event-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.sales-calendar-event-actions .btn {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11px;
}

.sales-calendar-agenda-empty {
  padding: 12px;
  font-size: 13px;
}

.sales-calendar-readonly {
  opacity: 0.7;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 1450px) {
  .sales-calendar-workspace-grid {
    grid-template-columns:
      minmax(250px, 0.74fr)
      minmax(0, 2.18fr)
      minmax(220px, 0.72fr);
    gap: 12px;
  }

  .sales-calendar-month-card {
    padding: 14px;
  }

  .sales-calendar-month-grid {
    grid-template-columns:
      repeat(
        7,
        minmax(100px, 1fr)
      );
    min-width: 700px;
  }
}

@media (max-width: 1120px) {
  .sales-calendar-workspace-grid {
    grid-template-columns:
      minmax(250px, 0.78fr)
      minmax(0, 1.72fr);
  }

  .sales-calendar-agenda-column {
    position: static;
    grid-column:
      1 / -1;
    max-height: none;
  }

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

@media (max-width: 820px) {
  .sales-calendar-workspace-grid {
    grid-template-columns:
      1fr;
  }

  .sales-calendar-editor-column,
  .sales-calendar-agenda-column {
    position: static;
  }

  .sales-calendar-agenda-column {
    grid-column:
      auto;
  }

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

  .sales-calendar-month-header {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-calendar-month-navigation {
    align-items: stretch;
  }

  .sales-calendar-month-navigation .btn {
    flex:
      1 1 100px;
  }
}

/* ========================================
   FROM AI
======================================== */

.from-ai-container .sales-lead-card {
  min-height: 188px;
}

.from-ai-lead-card {
  justify-content: space-between;
}

.from-ai-lead-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.from-ai-lead-header > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.from-ai-badge {
  flex-shrink: 0;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.from-ai-lead-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.4;
}

.from-ai-lead-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top:
    1px solid rgba(255, 255, 255, 0.12);
  font-weight: 600;
}


/* ========================================
   SALES BUTTON CONTROL
======================================== */

.sales-dashboard .btn,
.sales-new-lead-page .btn,
.sales-pipeline-page .btn,
.sales-lead-details-page .btn,
.sales-upcoming-page .btn,
.sales-calendar-page .btn,
.from-ai-page .btn {
  min-height: 42px;
  padding: 10px 16px;
  white-space: normal;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1100px) {
  .sales-dashboard,
  .sales-new-lead-page,
  .sales-pipeline-page,
  .sales-lead-details-page,
  .sales-upcoming-page,
  .sales-calendar-page,
  .from-ai-page {
    max-width: 100%;
  }

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

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

  .sales-pipeline-lead-grid,
  .from-ai-container {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 900px) {
  .sales-new-lead-grid,
  .sales-details-grid,
  .sales-calendar-grid {
    grid-template-columns:
      1fr;
  }

  .sales-calendar-form-card {
    position: static;
  }

  .sales-pipeline-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #salesPipelineSearch {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .sales-dashboard,
  .sales-new-lead-page,
  .sales-pipeline-page,
  .sales-lead-details-page,
  .sales-upcoming-page,
  .sales-calendar-page,
  .from-ai-page {
    gap: 18px;
  }

  #salesDashboardStats .stats-grid,
  .sales-kpi-grid,
  .sales-pipeline-stage-grid,
  .sales-pipeline-lead-grid,
  .from-ai-container,
  .sales-activity-form,
  .sales-upcoming-meta {
    grid-template-columns:
      1fr;
  }

  .sales-form-row,
  .sales-calendar-form-row {
    grid-template-columns:
      1fr;
  }

  .sales-calendar-month-header {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-calendar-month-navigation {
    align-items: stretch;
  }

  .sales-calendar-month-navigation .btn {
    flex:
      1 1 120px;
  }

  .sales-details-header,
  .from-ai-lead-header,
  .sales-activity-item-header,
  .sales-upcoming-activity-main {
    flex-direction: column;
  }

  .sales-import-actions,
  .sales-details-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-lead-form button,
  .sales-import-actions .btn,
  .sales-details-actions .btn,
  .sales-activity-form .btn,
  .sales-dashboard .btn,
  .sales-pipeline-page .btn,
  .sales-calendar-form-actions .btn,
  .from-ai-page .btn {
    width: 100%;
  }
}

/* ========================================
   SALES LEAD DETAILS — PREMIUM POLISH
======================================== */

.sales-lead-details-page {
  width: min(1180px, calc(100vw - 360px));
  margin: 0 auto;
  padding: 22px 0 80px;
}

.sales-details-back-row {
  margin-bottom: 14px;
}

.sales-details-back-row .btn {
  border-radius: 999px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(147, 197, 253, 0.22);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
}

.sales-details-card,
.sales-activity-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 28px;
  background:
    radial-gradient(
      circle at top left,
      rgba(96, 165, 250, 0.18),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(51, 65, 85, 0.92),
      rgba(15, 23, 42, 0.88)
    );
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sales-details-card::before,
.sales-activity-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(59, 130, 246, 0.28),
      transparent 32%,
      transparent 68%,
      rgba(16, 185, 129, 0.12)
    );
  opacity: 0.35;
}

.sales-details-header,
.sales-activity-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.sales-details-header h2,
.sales-activity-header h3 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.sales-details-header p,
.sales-activity-header p,
.sales-section-help {
  color: rgba(226, 232, 240, 0.76);
  line-height: 1.5;
}

.sales-details-status {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.26);
  white-space: nowrap;
}

.sales-details-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 22px;
  align-items: start;
}

.sales-details-section {
  padding: 20px;
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.sales-details-section h3 {
  margin: 0 0 16px;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.sales-details-section label,
.sales-activity-form label {
  display: grid;
  gap: 7px;
  margin-bottom: 13px;
}

.sales-details-section label span,
.sales-activity-form label span {
  font-size: 12px;
  font-weight: 800;
  color: rgba(226, 232, 240, 0.9);
}

.sales-details-section input,
.sales-details-section select,
.sales-details-section textarea,
.sales-activity-form input,
.sales-activity-form select,
.sales-activity-form textarea {
  min-height: 44px;
  border-radius: 15px;
  border: 1px solid rgba(148, 163, 184, 0.23);
  background: rgba(15, 23, 42, 0.22);
  color: #f8fafc;
  padding: 11px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sales-details-section textarea,
.sales-activity-form textarea {
  resize: vertical;
  min-height: 126px;
}

.sales-details-section input:focus,
.sales-details-section select:focus,
.sales-details-section textarea:focus,
.sales-activity-form input:focus,
.sales-activity-form select:focus,
.sales-activity-form textarea:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.78);
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

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

.sales-transfer-section {
  grid-column: 1 / -1;
  border-color: rgba(96, 165, 250, 0.28);
  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.20),
      rgba(15, 23, 42, 0.18)
    );
}

.sales-details-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.sales-details-actions .btn,
.sales-activity-form .btn,
.sales-transfer-section .btn {
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 800;
}

.sales-details-actions .btn-primary,
.sales-activity-form .btn-primary,
.sales-transfer-section .btn {
  background:
    linear-gradient(
      135deg,
      rgba(59, 130, 246, 0.96),
      rgba(37, 99, 235, 0.96)
    );
  border-color: rgba(147, 197, 253, 0.36);
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.28);
}

.sales-activity-card {
  margin-top: 22px;
}

.sales-activity-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 14px;
}

.sales-activity-comment-field,
.sales-activity-meeting-fields,
.sales-activity-form .btn,
.sales-activity-history {
  grid-column: 1 / -1;
}

.sales-activity-meeting-fields {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 1fr;
  gap: 14px;
}

.sales-activity-history {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.sales-activity-history h3 {
  margin: 0 0 14px;
}

.sales-activity-item {
  padding: 15px 16px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.16);
  margin-bottom: 10px;
}

.sales-activity-item-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.sales-activity-item-header strong {
  color: #dbeafe;
}

.sales-activity-item-header span {
  color: rgba(226, 232, 240, 0.58);
  font-size: 12px;
}

.sales-activity-item p {
  margin: 0;
  color: rgba(248, 250, 252, 0.88);
}

@media (max-width: 1180px) {
  .sales-lead-details-page {
    width: min(100%, calc(100vw - 40px));
  }

  .sales-details-grid,
  .sales-activity-form,
  .sales-activity-meeting-fields {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   SALES LEAD DETAILS — TWO COLUMN LAYOUT
======================================== */

#salesLeadDetailsContainer {
  display: grid;
  grid-template-columns: minmax(520px, 0.95fr) minmax(420px, 0.85fr);
  gap: 22px;
  align-items: start;
  width: min(1280px, calc(100vw - 340px));
  margin: 0 auto;
}

.sales-details-back-row {
  grid-column: 1 / -1;
}

.sales-details-card {
  grid-column: 1;
}

.sales-activity-card {
  grid-column: 2;
  margin-top: 0;
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 80px);
  overflow: auto;
}

.sales-details-grid {
  grid-template-columns: 1fr;
}

.sales-details-section {
  margin-bottom: 18px;
}

.sales-details-section:last-child {
  margin-bottom: 0;
}

.sales-details-actions {
  justify-content: flex-start;
}

/* ========================================
   SALES TRANSFER MODAL
======================================== */

.sales-transfer-modal[hidden] {
  display: none;
}

.sales-transfer-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
}

.sales-transfer-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(10px);
}

.sales-transfer-modal-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  border-radius: 26px;
  padding: 24px;
  background:
    radial-gradient(
      circle at top left,
      rgba(96, 165, 250, 0.22),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(51, 65, 85, 0.96),
      rgba(15, 23, 42, 0.96)
    );
  border: 1px solid rgba(148, 163, 184, 0.26);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48);
}

.sales-transfer-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.sales-transfer-modal-header h3 {
  margin: 0 0 8px;
}

.sales-transfer-modal-header p {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.5;
}

.sales-transfer-modal-card label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.sales-transfer-modal-card label span {
  font-size: 12px;
  font-weight: 800;
  color: rgba(226, 232, 240, 0.9);
}

.sales-transfer-modal-card select,
.sales-transfer-modal-card textarea {
  width: 100%;
  border-radius: 15px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.28);
  color: #f8fafc;
  padding: 12px 14px;
}

.sales-transfer-modal-card textarea {
  min-height: 120px;
  resize: vertical;
}

@media (max-width: 1280px) {
  #salesLeadDetailsContainer {
    width: min(100%, calc(100vw - 40px));
    grid-template-columns: 1fr;
  }

  .sales-details-card,
  .sales-activity-card {
    grid-column: 1;
  }

  .sales-activity-card {
    position: relative;
    top: auto;
    max-height: none;
  }
}

/* ========================================
   SALES LEAD DETAILS — WIDTH + INNER GRID FIX
======================================== */

#salesLeadDetailsContainer {
  grid-template-columns: minmax(760px, 1.15fr) minmax(340px, 0.55fr);
  width: min(1420px, calc(100vw - 320px));
  gap: 22px;
}

.sales-details-card {
  min-width: 0;
}

.sales-activity-card {
  min-width: 340px;
}

.sales-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: 20px;
  align-items: start;
}

.sales-details-section {
  margin-bottom: 0;
}

.sales-details-section textarea#salesNotes {
  min-height: 190px;
}

.sales-details-actions {
  margin-top: 18px;
}

.sales-details-card {
  padding: 26px 28px;
}

.sales-details-section {
  padding: 18px;
}

@media (max-width: 1380px) {
  #salesLeadDetailsContainer {
    grid-template-columns: minmax(680px, 1fr) minmax(330px, 0.5fr);
    width: min(100%, calc(100vw - 310px));
  }

  .sales-details-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  }
}

@media (max-width: 1180px) {
  #salesLeadDetailsContainer {
    grid-template-columns: 1fr;
    width: min(100%, calc(100vw - 40px));
  }

  .sales-details-grid {
    grid-template-columns: 1fr;
  }

  .sales-activity-card {
    min-width: 0;
  }
}

/* ========================================
   SALES LEAD DETAILS — USE LEFT SPACE
======================================== */

#salesLeadDetailsContainer {
  width: min(1540px, calc(100vw - 260px));
  margin-left: 0;
  margin-right: auto;
  grid-template-columns: minmax(880px, 1.25fr) minmax(360px, 0.52fr);
}

.sales-lead-details-page {
  width: min(1540px, calc(100vw - 260px));
  margin-left: clamp(18px, 3vw, 54px);
  margin-right: auto;
}

.sales-details-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
}

.sales-details-card {
  width: 100%;
}

.sales-activity-card {
  width: 100%;
}

@media (max-width: 1380px) {
  #salesLeadDetailsContainer,
  .sales-lead-details-page {
    width: min(100%, calc(100vw - 300px));
    margin-left: 12px;
  }

  #salesLeadDetailsContainer {
    grid-template-columns: minmax(760px, 1fr) minmax(330px, 0.5fr);
  }

  .sales-details-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
  }
}

@media (max-width: 1180px) {
  #salesLeadDetailsContainer,
  .sales-lead-details-page {
    width: min(100%, calc(100vw - 40px));
    margin-left: auto;
    margin-right: auto;
  }

  #salesLeadDetailsContainer,
  .sales-details-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   SALES DASHBOARD — COMMAND CENTER
======================================== */

.sales-dashboard-page {
  width: min(1320px, calc(100vw - 340px));
  margin: 0 auto;
  padding: 22px 0 80px;
}

.sales-dashboard-header {
  margin-bottom: 22px;
}

.sales-dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.28);
}

.sales-dashboard-command {
  display: grid;
  gap: 22px;
}

.sales-dashboard-hero {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border-radius: 30px;
  background:
    radial-gradient(
      circle at top left,
      rgba(96, 165, 250, 0.24),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(51, 65, 85, 0.94),
      rgba(15, 23, 42, 0.88)
    );
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sales-dashboard-hero h2 {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.sales-dashboard-hero p {
  max-width: 640px;
  margin: 0;
  color: rgba(226, 232, 240, 0.76);
  line-height: 1.55;
}

.sales-dashboard-focus-pill {
  min-width: 190px;
  padding: 18px;
  border-radius: 24px;
  text-align: center;
  color: #fee2e2;
  background:
    linear-gradient(
      145deg,
      rgba(239, 68, 68, 0.18),
      rgba(15, 23, 42, 0.24)
    );
  border: 1px solid rgba(248, 113, 113, 0.28);
}

.sales-dashboard-focus-pill strong {
  display: block;
  margin-top: 6px;
  font-size: 34px;
  line-height: 1;
}

.sales-dashboard-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.sales-dashboard-card {
  position: relative;
  min-height: 178px;
  padding: 20px;
  overflow: hidden;
  text-align: left;
  border-radius: 26px;
  cursor: pointer;
  color: #f8fafc;
  background:
    linear-gradient(
      145deg,
      rgba(51, 65, 85, 0.9),
      rgba(15, 23, 42, 0.86)
    );
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.sales-dashboard-card::before {
  content: "";
  position: absolute;
  inset: auto -40px -60px auto;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  opacity: 0.55;
  background: rgba(96, 165, 250, 0.32);
  filter: blur(6px);
}

.sales-dashboard-card:hover {
  transform: translateY(-3px);
  border-color: rgba(147, 197, 253, 0.48);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(96, 165, 250, 0.16);
}

.sales-dashboard-card-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-bottom: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: rgba(226, 232, 240, 0.88);
  background: rgba(15, 23, 42, 0.26);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.sales-dashboard-card strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.sales-dashboard-card p {
  position: relative;
  z-index: 1;
  max-width: 210px;
  margin: 0;
  color: rgba(226, 232, 240, 0.7);
  line-height: 1.45;
}

.sales-dashboard-card em {
  position: absolute;
  right: 20px;
  bottom: 16px;
  z-index: 1;
  font-size: 42px;
  line-height: 1;
  font-style: normal;
  font-weight: 950;
  color: #ffffff;
}

.sales-dashboard-card-green::before {
  background: rgba(16, 185, 129, 0.36);
}

.sales-dashboard-card-yellow::before {
  background: rgba(234, 179, 8, 0.38);
}

.sales-dashboard-card-red::before {
  background: rgba(239, 68, 68, 0.38);
}

.sales-dashboard-card-purple::before {
  background: rgba(168, 85, 247, 0.38);
}

.sales-dashboard-card-orange::before {
  background: rgba(249, 115, 22, 0.38);
}

.sales-dashboard-card-cyan::before {
  background: rgba(34, 211, 238, 0.34);
}

/* ========================================
   SALES WORKLIST — COMPACT CARDS
======================================== */

.sales-worklist-page {
  width: min(1320px, calc(100vw - 340px));
  margin: 0 auto;
  padding: 22px 0 80px;
}

.sales-worklist-header {
  align-items: end;
  margin-bottom: 22px;
}

.sales-worklist-compact-grid {
  display: grid;
  gap: 14px;
}

.sales-worklist-compact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 22px;
  align-items: center;
  width: 100%;
  min-height: 120px;
  padding: 20px 22px;
  text-align: left;
  color: #f8fafc;
  border-radius: 24px;
  cursor: pointer;
  background:
    radial-gradient(
      circle at top left,
      rgba(96, 165, 250, 0.18),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(51, 65, 85, 0.88),
      rgba(15, 23, 42, 0.84)
    );
  border: 1px solid rgba(96, 165, 250, 0.26);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.sales-worklist-compact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(147, 197, 253, 0.54);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(96, 165, 250, 0.16);
}

.sales-worklist-compact-main {
  display: grid;
  gap: 8px;
}

.sales-worklist-compact-main strong {
  font-size: 18px;
  letter-spacing: -0.03em;
}

.sales-worklist-compact-main span {
  color: rgba(226, 232, 240, 0.76);
  font-size: 13px;
}

.sales-worklist-compact-side {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.sales-worklist-compact-side em {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.28);
}

.sales-worklist-compact-side small {
  color: rgba(226, 232, 240, 0.7);
}

.sales-worklist-empty {
  padding: 28px;
  border-radius: 26px;
  color: rgba(226, 232, 240, 0.76);
}

@media (max-width: 1280px) {
  .sales-dashboard-page,
  .sales-worklist-page {
    width: min(100%, calc(100vw - 40px));
  }

  .sales-dashboard-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 760px) {
  .sales-dashboard-card-grid,
  .sales-worklist-compact-card {
    grid-template-columns: 1fr;
  }

  .sales-worklist-compact-side {
    justify-items: start;
  }
}

/* ========================================
   SALES DASHBOARD — CARD RESPONSIVE FIX
======================================== */

.sales-dashboard-card-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(260px, 1fr)
  );
}

.sales-dashboard-card {
  min-height: 190px;
  padding: 22px;
}

.sales-dashboard-card strong {
  max-width: calc(100% - 72px);
  line-height: 1.15;
}

.sales-dashboard-card p {
  max-width: calc(100% - 76px);
  font-size: 13px;
}

.sales-dashboard-card em {
  right: 22px;
  bottom: 18px;
  font-size: clamp(34px, 4vw, 46px);
}

.sales-dashboard-card-kicker {
  max-width: calc(100% - 70px);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .sales-dashboard-card-grid {
    grid-template-columns: 1fr;
  }

  .sales-dashboard-card strong,
  .sales-dashboard-card p,
  .sales-dashboard-card-kicker {
    max-width: 100%;
  }

  .sales-dashboard-card em {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 18px;
    justify-self: start;
  }
}

/* ========================================
   SALES DASHBOARD — MONTHLY LEADERBOARD
======================================== */

.sales-leaderboard-card {
  margin-top: 26px;
  padding: 26px;
  border-radius: 28px;
  background:
    linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.96),
      rgba(30, 41, 59, 0.94)
    );
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow:
    0 24px 70px rgba(15, 23, 42, 0.18);
  color: #f8fafc;
}

.sales-leaderboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.sales-leaderboard-header h2 {
  margin: 6px 0 8px;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.04em;
}

.sales-leaderboard-header p {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  font-size: 14px;
}

.sales-leaderboard-header > strong {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.1);
  border: 1px solid rgba(248, 250, 252, 0.16);
  font-size: 13px;
  color: #e0f2fe;
}

.sales-leaderboard-list {
  display: grid;
  gap: 12px;
}

.sales-leaderboard-row {
  display: grid;
  grid-template-columns: 48px minmax(180px, 1fr) minmax(280px, 1.4fr);
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(248, 250, 252, 0.08);
  border: 1px solid rgba(248, 250, 252, 0.12);
}

.sales-leaderboard-rank {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(14, 165, 233, 0.18);
  border: 1px solid rgba(125, 211, 252, 0.28);
  color: #bae6fd;
  font-weight: 900;
  font-size: 18px;
}

.sales-leaderboard-user {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sales-leaderboard-user strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.sales-leaderboard-user span {
  color: rgba(226, 232, 240, 0.7);
  font-size: 13px;
}

.sales-leaderboard-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sales-leaderboard-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.34);
  border: 1px solid rgba(226, 232, 240, 0.12);
  color: rgba(241, 245, 249, 0.78);
  font-size: 12px;
  white-space: nowrap;
}

.sales-leaderboard-pill strong {
  color: #f8fafc;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .sales-leaderboard-row {
    grid-template-columns: 42px 1fr;
  }

  .sales-leaderboard-score-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .sales-leaderboard-card {
    padding: 20px;
    border-radius: 22px;
  }

  .sales-leaderboard-header {
    display: grid;
  }

  .sales-leaderboard-row {
    grid-template-columns: 1fr;
  }

  .sales-leaderboard-rank {
    width: 100%;
  }

  .sales-leaderboard-score-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   SALES DASHBOARD — LEADERBOARD COLOR BOOST
======================================== */

.sales-leaderboard-card {
  background:
    radial-gradient(
      circle at top left,
      rgba(59, 130, 246, 0.22),
      transparent 34%
    ),
    radial-gradient(
      circle at 86% 24%,
      rgba(168, 85, 247, 0.20),
      transparent 30%
    ),
    radial-gradient(
      circle at 76% 86%,
      rgba(14, 165, 233, 0.18),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.98),
      rgba(30, 41, 59, 0.96)
    );
  border: 1px solid rgba(125, 211, 252, 0.24);
  box-shadow:
    0 28px 90px rgba(15, 23, 42, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sales-leaderboard-header > strong {
  background:
    linear-gradient(
      135deg,
      rgba(59, 130, 246, 0.28),
      rgba(168, 85, 247, 0.22)
    );
  border-color: rgba(191, 219, 254, 0.32);
  box-shadow:
    0 0 28px rgba(59, 130, 246, 0.18);
}

.sales-leaderboard-row {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgba(248, 250, 252, 0.10),
      rgba(15, 23, 42, 0.28)
    );
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.sales-leaderboard-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(14, 165, 233, 0.18),
      transparent 26%
    );
  pointer-events: none;
}

.sales-leaderboard-row:first-child {
  border-color: rgba(250, 204, 21, 0.34);
  box-shadow:
    0 18px 50px rgba(250, 204, 21, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sales-leaderboard-row:first-child::before {
  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(250, 204, 21, 0.24),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 50%,
      rgba(168, 85, 247, 0.18),
      transparent 30%
    );
}

.sales-leaderboard-row:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 211, 252, 0.32);
  box-shadow:
    0 20px 55px rgba(15, 23, 42, 0.26);
}

.sales-leaderboard-rank {
  background:
    linear-gradient(
      135deg,
      rgba(14, 165, 233, 0.34),
      rgba(59, 130, 246, 0.20)
    );
  box-shadow:
    0 0 26px rgba(14, 165, 233, 0.22);
}

.sales-leaderboard-row:first-child .sales-leaderboard-rank {
  background:
    linear-gradient(
      135deg,
      rgba(250, 204, 21, 0.36),
      rgba(245, 158, 11, 0.24)
    );
  border-color: rgba(253, 224, 71, 0.40);
  color: #fef9c3;
  box-shadow:
    0 0 30px rgba(250, 204, 21, 0.22);
}

.sales-leaderboard-pill {
  background:
    rgba(15, 23, 42, 0.42);
  border-color: rgba(226, 232, 240, 0.14);
}

.sales-leaderboard-pill:nth-child(1) {
  background:
    linear-gradient(
      135deg,
      rgba(250, 204, 21, 0.16),
      rgba(15, 23, 42, 0.34)
    );
  border-color: rgba(250, 204, 21, 0.22);
}

.sales-leaderboard-pill:nth-child(2) {
  background:
    linear-gradient(
      135deg,
      rgba(34, 197, 94, 0.16),
      rgba(15, 23, 42, 0.34)
    );
  border-color: rgba(74, 222, 128, 0.22);
}

.sales-leaderboard-pill:nth-child(3) {
  background:
    linear-gradient(
      135deg,
      rgba(236, 72, 153, 0.16),
      rgba(15, 23, 42, 0.34)
    );
  border-color: rgba(244, 114, 182, 0.22);
}

.sales-leaderboard-pill:nth-child(4) {
  background:
    linear-gradient(
      135deg,
      rgba(168, 85, 247, 0.18),
      rgba(15, 23, 42, 0.34)
    );
  border-color: rgba(196, 181, 253, 0.24);
}

.sales-leaderboard-pill strong {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.10);
}

/* ========================================
   SALES LEADERBOARD — ACTIONS
======================================== */

.sales-leaderboard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.sales-leaderboard-actions > strong {
  padding: 10px 14px;
  border-radius: 999px;
  background:
    linear-gradient(
      135deg,
      rgba(59, 130, 246, 0.28),
      rgba(168, 85, 247, 0.22)
    );
  border: 1px solid rgba(191, 219, 254, 0.32);
  box-shadow:
    0 0 28px rgba(59, 130, 246, 0.18);
  font-size: 13px;
  color: #e0f2fe;
  white-space: nowrap;
}

.sales-leaderboard-actions .btn {
  min-height: 38px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.10);
  border: 1px solid rgba(248, 250, 252, 0.18);
  color: #f8fafc;
}

.sales-leaderboard-actions .btn:hover {
  background: rgba(248, 250, 252, 0.16);
  border-color: rgba(125, 211, 252, 0.32);
}

@media (max-width: 720px) {
  .sales-leaderboard-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-leaderboard-actions > strong,
  .sales-leaderboard-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   SALES DETAILS — FINAL COLUMN FLOW
======================================== */

#salesLeadDetailsContainer >
.sales-details-back-row {
  grid-column:
    1 / -1;
  grid-row:
    1;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(2) {
  grid-column:
    1;
  grid-row:
    2;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3) {
  grid-column:
    1;
  grid-row:
    3;
  padding:
    24px 26px;
  border-color:
    rgba(
      96,
      165,
      250,
      0.28
    );
  background:
    radial-gradient(
      circle at top left,
      rgba(
        59,
        130,
        246,
        0.18
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(
        51,
        65,
        85,
        0.9
      ),
      rgba(
        15,
        23,
        42,
        0.9
      )
    );
}

#salesLeadDetailsContainer >
.sales-activity-card {
  grid-column:
    2;
  grid-row:
    2 / span 2;
  align-self:
    start;
  position:
    sticky;
  top:
    18px;
  max-height:
    calc(
      100vh -
      36px
    );
  margin-top:
    0;
  overflow-x:
    hidden;
  overflow-y:
    auto;
  overscroll-behavior:
    contain;
  scrollbar-gutter:
    stable;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
.sales-details-header {
  margin-bottom:
    18px;
  padding-bottom:
    15px;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
.sales-details-header h2 {
  font-size:
    22px;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
.sales-details-section {
  gap:
    12px;
  padding:
    18px;
  border-radius:
    19px;
  background:
    rgba(
      15,
      23,
      42,
      0.3
    );
  border-color:
    rgba(
      148,
      163,
      184,
      0.18
    );
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
.sales-details-section +
.sales-details-section {
  margin-top:
    16px;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
.sales-details-section h3 {
  margin-bottom:
    8px;
  color:
    #dbeafe;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
.sales-details-section >
.sales-details-grid {
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );
  gap:
    12px 18px;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
.sales-details-section >
.sales-details-grid >
div {
  min-width:
    0;
  padding:
    11px 12px;
  border-radius:
    14px;
  background:
    rgba(
      15,
      23,
      42,
      0.24
    );
  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.12
    );
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
.sales-details-section strong {
  display:
    block;
  margin-bottom:
    5px;
  color:
    rgba(
      219,
      234,
      254,
      0.92
    );
  font-size:
    12px;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
.sales-details-section p,
#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
.sales-details-section div {
  overflow-wrap:
    anywhere;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
details {
  margin-top:
    10px;
  padding:
    12px 14px;
  border-radius:
    14px;
  background:
    rgba(
      15,
      23,
      42,
      0.24
    );
  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.14
    );
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
details summary {
  cursor:
    pointer;
  color:
    #dbeafe;
  font-size:
    12px;
  font-weight:
    800;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
pre {
  margin:
    12px 0 0;
  overflow:
    visible;
  color:
    rgba(
      248,
      250,
      252,
      0.84
    );
  font-family:
    inherit;
  font-size:
    12px;
  line-height:
    1.55;
  white-space:
    pre-wrap;
  overflow-wrap:
    anywhere;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
ul {
  margin:
    6px 0 0;
  padding-left:
    18px;
}

#salesLeadDetailsContainer >
.sales-details-card:nth-child(3)
li {
  margin-bottom:
    5px;
  line-height:
    1.45;
}

@media (
  max-width:
  1180px
) {

  #salesLeadDetailsContainer >
  .sales-details-card:nth-child(2),

  #salesLeadDetailsContainer >
  .sales-details-card:nth-child(3),

  #salesLeadDetailsContainer >
  .sales-activity-card {
    grid-column:
      1;
    grid-row:
      auto;
  }

  #salesLeadDetailsContainer >
  .sales-activity-card {
    position:
      relative;
    top:
      auto;
    max-height:
      none;
    overflow:
      visible;
  }

}

@media (
  max-width:
  760px
) {

  #salesLeadDetailsContainer >
  .sales-details-card:nth-child(3)
  .sales-details-section >
  .sales-details-grid {
    grid-template-columns:
      1fr;
  }

  #salesLeadDetailsContainer >
  .sales-details-card:nth-child(3) {
    padding:
      20px;
  }

}

/* ========================================
   SALES HANDOFF — FROM HUNTER
======================================== */

.sales-handoff-page {
  display:
    grid;

  gap:
    20px;

  width:
    min(
      1360px,
      calc(
        100vw -
        330px
      )
    );

  max-width:
    1360px;

  margin:
    0 auto;

  padding:
    22px 0 80px;
}

/* ========================================
   HANDOFF HEADER
======================================== */

.sales-handoff-header {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;

  overflow:
    hidden;

  padding:
    28px;

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.2
    );

  border-radius:
    28px;

  background:
    radial-gradient(
      circle at top left,
      rgba(
        96,
        165,
        250,
        0.22
      ),
      transparent 38%
    ),
    radial-gradient(
      circle at 92% 80%,
      rgba(
        139,
        92,
        246,
        0.14
      ),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(
        43,
        69,
        99,
        0.94
      ),
      rgba(
        13,
        31,
        53,
        0.94
      )
    );

  box-shadow:
    0 28px 74px
    rgba(
      0,
      0,
      0,
      0.28
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.055
    );
}

.sales-handoff-header::after {
  content:
    "";

  position:
    absolute;

  right:
    -90px;

  bottom:
    -120px;

  width:
    290px;

  height:
    290px;

  border-radius:
    999px;

  background:
    rgba(
      59,
      130,
      246,
      0.12
    );

  filter:
    blur(
      5px
    );

  pointer-events:
    none;
}

.sales-handoff-header-copy,
.sales-handoff-header-status {
  position:
    relative;

  z-index:
    1;
}

.sales-handoff-header-copy {
  display:
    grid;

  gap:
    9px;

  min-width:
    0;
}

.sales-handoff-header-copy h1 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      2rem,
      3vw,
      2.8rem
    );

  font-weight:
    950;

  line-height:
    1;

  letter-spacing:
    -0.055em;
}

.sales-handoff-header-copy p {
  max-width:
    720px;

  margin:
    0;

  color:
    rgba(
      226,
      232,
      240,
      0.74
    );

  font-size:
    0.9rem;

  line-height:
    1.55;
}

.sales-handoff-header-status {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  flex-shrink:
    0;

  min-width:
    190px;

  padding:
    14px 16px;

  border:
    1px solid
    rgba(
      52,
      211,
      153,
      0.22
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(
        16,
        185,
        129,
        0.12
      ),
      rgba(
        15,
        23,
        42,
        0.22
      )
    );

  box-shadow:
    0 14px 34px
    rgba(
      0,
      0,
      0,
      0.16
    );
}

.sales-handoff-header-dot {
  width:
    10px;

  height:
    10px;

  flex-shrink:
    0;

  border-radius:
    999px;

  background:
    #34d399;

  box-shadow:
    0 0 0 5px
    rgba(
      52,
      211,
      153,
      0.1
    ),
    0 0 18px
    rgba(
      52,
      211,
      153,
      0.48
    );
}

.sales-handoff-header-status div {
  display:
    grid;

  gap:
    3px;
}

.sales-handoff-header-status small {
  color:
    rgba(
      167,
      243,
      208,
      0.68
    );

  font-size:
    0.68rem;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.065em;
}

.sales-handoff-header-status strong {
  color:
    #d1fae5;

  font-size:
    0.92rem;

  font-weight:
    900;
}

/* ========================================
   HANDOFF STATS
======================================== */

.sales-handoff-stats {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    14px;
}

.sales-handoff-stat-card {
  position:
    relative;

  display:
    grid;

  gap:
    9px;

  min-width:
    0;

  min-height:
    150px;

  overflow:
    hidden;

  padding:
    20px;

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.16
    );

  border-radius:
    23px;

  background:
    linear-gradient(
      145deg,
      rgba(
        40,
        64,
        92,
        0.9
      ),
      rgba(
        16,
        35,
        59,
        0.92
      )
    );

  box-shadow:
    0 20px 48px
    rgba(
      0,
      0,
      0,
      0.22
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.04
    );
}

.sales-handoff-stat-card::after {
  content:
    "";

  position:
    absolute;

  right:
    -50px;

  bottom:
    -70px;

  width:
    155px;

  height:
    155px;

  border-radius:
    999px;

  background:
    rgba(
      59,
      130,
      246,
      0.18
    );

  filter:
    blur(
      4px
    );

  pointer-events:
    none;
}

.sales-handoff-stat-selected::after {
  background:
    rgba(
      139,
      92,
      246,
      0.2
    );
}

.sales-handoff-stat-office::after {
  background:
    rgba(
      16,
      185,
      129,
      0.17
    );
}

.sales-handoff-stat-top {
  position:
    relative;

  z-index:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}

.sales-handoff-stat-label {
  color:
    #cbd5e1;

  font-size:
    0.75rem;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.055em;
}

.sales-handoff-stat-icon {
  display:
    grid;

  place-items:
    center;

  width:
    30px;

  height:
    30px;

  flex-shrink:
    0;

  border:
    1px solid
    rgba(
      147,
      197,
      253,
      0.22
    );

  border-radius:
    10px;

  background:
    rgba(
      59,
      130,
      246,
      0.13
    );

  color:
    #bfdbfe;

  font-size:
    0.74rem;

  font-weight:
    950;
}

.sales-handoff-stat-value {
  position:
    relative;

  z-index:
    1;

  display:
    block;

  overflow-wrap:
    anywhere;

  color:
    #ffffff;

  font-size:
    clamp(
      2rem,
      3vw,
      2.8rem
    );

  font-weight:
    950;

  line-height:
    1;

  letter-spacing:
    -0.055em;
}

.sales-handoff-stat-office-value {
  font-size:
    clamp(
      1.5rem,
      2.3vw,
      2.2rem
    );
}

.sales-handoff-stat-card small {
  position:
    relative;

  z-index:
    1;

  color:
    rgba(
      203,
      213,
      225,
      0.62
    );

  font-size:
    0.75rem;
}

/* ========================================
   HANDOFF ACTION PANEL
======================================== */

.sales-handoff-action-panel {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    21px 23px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.18
    );

  border-radius:
    23px;

  background:
    linear-gradient(
      135deg,
      rgba(
        37,
        99,
        235,
        0.11
      ),
      rgba(
        15,
        33,
        55,
        0.76
      )
    );

  box-shadow:
    0 18px 44px
    rgba(
      0,
      0,
      0,
      0.18
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.sales-handoff-action-copy {
  display:
    grid;

  gap:
    6px;
}

.sales-handoff-panel-kicker {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  min-height:
    24px;

  padding:
    5px 9px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.24
    );

  border-radius:
    999px;

  background:
    rgba(
      59,
      130,
      246,
      0.1
    );

  color:
    #93c5fd;

  font-size:
    0.64rem;

  font-weight:
    950;

  text-transform:
    uppercase;

  letter-spacing:
    0.07em;
}

.sales-handoff-action-copy strong {
  color:
    #ffffff;

  font-size:
    1.15rem;

  font-weight:
    950;
}

.sales-handoff-action-copy p {
  margin:
    0;

  color:
    rgba(
      203,
      213,
      225,
      0.68
    );

  font-size:
    0.82rem;
}

.sales-handoff-action-buttons {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    10px;
}

.sales-handoff-action-buttons .btn {
  width:
    auto;

  min-width:
    130px;

  border-radius:
    13px;

  font-weight:
    850;
}

.sales-handoff-action-buttons
[data-action="accept-from-hunter"] {
  background:
    linear-gradient(
      135deg,
      #3b82f6,
      #2563eb
    );

  border-color:
    rgba(
      147,
      197,
      253,
      0.32
    );

  box-shadow:
    0 13px 30px
    rgba(
      37,
      99,
      235,
      0.24
    );
}

/* ========================================
   HANDOFF LIST PANEL
======================================== */

.sales-handoff-list-panel {
  display:
    grid;

  gap:
    18px;

  padding:
    22px;

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.15
    );

  border-radius:
    25px;

  background:
    linear-gradient(
      145deg,
      rgba(
        20,
        42,
        69,
        0.82
      ),
      rgba(
        9,
        25,
        43,
        0.86
      )
    );

  box-shadow:
    0 22px 58px
    rgba(
      0,
      0,
      0,
      0.22
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.sales-handoff-list-header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;

  padding-bottom:
    16px;

  border-bottom:
    1px solid
    rgba(
      148,
      184,
      226,
      0.1
    );
}

.sales-handoff-list-header > div {
  display:
    grid;

  gap:
    7px;
}

.sales-handoff-list-header h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    1.3rem;

  font-weight:
    950;

  letter-spacing:
    -0.035em;
}

.sales-handoff-list-header p {
  max-width:
    680px;

  margin:
    0;

  color:
    rgba(
      203,
      213,
      225,
      0.65
    );

  font-size:
    0.8rem;

  line-height:
    1.5;
}

.sales-handoff-list-count {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  flex-shrink:
    0;

  padding:
    9px 12px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.2
    );

  border-radius:
    999px;

  background:
    rgba(
      59,
      130,
      246,
      0.09
    );

  color:
    rgba(
      191,
      219,
      254,
      0.72
    );

  font-size:
    0.75rem;

  font-weight:
    800;
}

.sales-handoff-list-count strong {
  color:
    #dbeafe;

  font-size:
    0.92rem;
}

/* ========================================
   HANDOFF LEAD CARDS
======================================== */

.sales-handoff-lead-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  align-items:
    start;

  gap:
    14px;
}

.sales-handoff-lead-card {
  position:
    relative;

  display:
    grid;

  gap:
    16px;

  min-width:
    0;

  overflow:
    hidden;

  padding:
    19px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.18
    );

  border-radius:
    21px;

  background:
    radial-gradient(
      circle at top left,
      rgba(
        59,
        130,
        246,
        0.14
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(
        39,
        64,
        94,
        0.86
      ),
      rgba(
        15,
        34,
        58,
        0.9
      )
    );

  box-shadow:
    0 17px 42px
    rgba(
      0,
      0,
      0,
      0.2
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.04
    );

  transition:
    transform 0.17s ease,
    border-color 0.17s ease,
    box-shadow 0.17s ease;
}

.sales-handoff-lead-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  bottom:
    0;

  width:
    4px;

  background:
    linear-gradient(
      180deg,
      #60a5fa,
      #2563eb
    );
}

.sales-handoff-lead-card:hover {
  transform:
    translateY(
      -2px
    );

  border-color:
    rgba(
      96,
      165,
      250,
      0.38
    );

  box-shadow:
    0 23px 54px
    rgba(
      0,
      0,
      0,
      0.27
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.05
    );
}

.sales-handoff-lead-card.is-selected {
  border-color:
    rgba(
      52,
      211,
      153,
      0.45
    );

  background:
    radial-gradient(
      circle at top left,
      rgba(
        16,
        185,
        129,
        0.14
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(
        36,
        67,
        82,
        0.88
      ),
      rgba(
        13,
        37,
        52,
        0.92
      )
    );

  box-shadow:
    0 21px 48px
    rgba(
      5,
      150,
      105,
      0.12
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.05
    );
}

.sales-handoff-lead-card.is-selected::before {
  background:
    linear-gradient(
      180deg,
      #34d399,
      #059669
    );
}

.sales-handoff-lead-card.is-open {
  grid-column:
    1 / -1;
}

.sales-handoff-lead-card-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}

.sales-handoff-select-control {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  width:
    fit-content;

  cursor:
    pointer;

  color:
    rgba(
      219,
      234,
      254,
      0.82
    );

  font-size:
    0.76rem;

  font-weight:
    850;
}

.sales-handoff-select-control input {
  width:
    17px;

  height:
    17px;

  margin:
    0;

  accent-color:
    #3b82f6;

  cursor:
    pointer;
}

.sales-handoff-origin-badge,
.sales-handoff-source-badge {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(
      167,
      139,
      250,
      0.23
    );

  border-radius:
    999px;

  background:
    rgba(
      139,
      92,
      246,
      0.1
    );

  color:
    #ddd6fe;

  font-size:
    0.67rem;

  font-weight:
    900;
}

.sales-handoff-lead-identity {
  display:
    grid;

  gap:
    6px;
}

.sales-handoff-lead-identity h3 {
  margin:
    0;

  overflow-wrap:
    anywhere;

  color:
    #ffffff;

  font-size:
    1.12rem;

  font-weight:
    950;

  letter-spacing:
    -0.025em;
}

.sales-handoff-lead-identity p {
  margin:
    0;

  color:
    rgba(
      191,
      219,
      254,
      0.65
    );

  font-size:
    0.77rem;
}

.sales-handoff-lead-meta {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    9px;
}

.sales-handoff-lead-meta > div,
.sales-handoff-detail-item {
  display:
    grid;

  gap:
    5px;

  min-width:
    0;

  padding:
    11px 12px;

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.1
    );

  border-radius:
    13px;

  background:
    rgba(
      5,
      19,
      34,
      0.2
    );
}

.sales-handoff-lead-meta span,
.sales-handoff-detail-item span {
  color:
    rgba(
      148,
      184,
      226,
      0.58
    );

  font-size:
    0.62rem;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.055em;
}

.sales-handoff-lead-meta strong,
.sales-handoff-detail-item strong {
  min-width:
    0;

  overflow-wrap:
    anywhere;

  color:
    rgba(
      241,
      245,
      249,
      0.9
    );

  font-size:
    0.79rem;

  font-weight:
    800;
}

.sales-handoff-lead-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding-top:
    14px;

  border-top:
    1px solid
    rgba(
      148,
      184,
      226,
      0.1
    );
}

.sales-handoff-lead-footer small {
  color:
    rgba(
      203,
      213,
      225,
      0.58
    );

  font-size:
    0.72rem;
}

.sales-handoff-lead-footer .btn {
  width:
    auto;

  min-width:
    130px;

  min-height:
    38px;

  padding:
    8px 13px;

  border-radius:
    11px;

  font-size:
    0.75rem;

  font-weight:
    850;
}

/* ========================================
   HANDOFF LEAD DETAILS
======================================== */

.sales-handoff-lead-details {
  display:
    grid;

  gap:
    15px;

  margin-top:
    3px;

  padding:
    17px;

  border:
    1px solid
    rgba(
      167,
      139,
      250,
      0.16
    );

  border-radius:
    18px;

  background:
    rgba(
      7,
      21,
      38,
      0.42
    );
}

.sales-handoff-details-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  padding-bottom:
    13px;

  border-bottom:
    1px solid
    rgba(
      148,
      184,
      226,
      0.09
    );
}

.sales-handoff-details-header > div {
  display:
    grid;

  gap:
    6px;
}

.sales-handoff-details-header h4 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    1rem;

  font-weight:
    900;
}

.sales-handoff-details-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    9px;
}

.sales-handoff-detail-text {
  display:
    grid;

  gap:
    7px;
}

.sales-handoff-detail-text label {
  color:
    rgba(
      219,
      234,
      254,
      0.78
    );

  font-size:
    0.72rem;

  font-weight:
    850;
}

.sales-handoff-detail-text textarea {
  width:
    100%;

  min-height:
    120px;

  resize:
    vertical;

  padding:
    12px;

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.15
    );

  border-radius:
    13px;

  background:
    rgba(
      3,
      14,
      27,
      0.42
    );

  color:
    rgba(
      241,
      245,
      249,
      0.85
    );

  font-family:
    inherit;

  font-size:
    0.78rem;

  line-height:
    1.5;
}

/* ========================================
   HANDOFF EMPTY STATE
======================================== */

.sales-handoff-empty-state {
  display:
    grid;

  justify-items:
    center;

  gap:
    9px;

  min-height:
    230px;

  padding:
    36px 22px;

  border:
    1px dashed
    rgba(
      96,
      165,
      250,
      0.2
    );

  border-radius:
    20px;

  background:
    radial-gradient(
      circle at center,
      rgba(
        59,
        130,
        246,
        0.09
      ),
      transparent 54%
    ),
    rgba(
      5,
      19,
      34,
      0.22
    );

  text-align:
    center;
}

.sales-handoff-empty-state.is-error {
  border-color:
    rgba(
      248,
      113,
      113,
      0.24
    );
}

.sales-handoff-empty-icon {
  display:
    grid;

  place-items:
    center;

  width:
    48px;

  height:
    48px;

  margin-bottom:
    3px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.25
    );

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      rgba(
        59,
        130,
        246,
        0.2
      ),
      rgba(
        37,
        99,
        235,
        0.08
      )
    );

  color:
    #bfdbfe;

  font-weight:
    950;

  box-shadow:
    0 12px 28px
    rgba(
      37,
      99,
      235,
      0.14
    );
}

.sales-handoff-empty-state strong {
  color:
    #ffffff;

  font-size:
    1rem;
}

.sales-handoff-empty-state p {
  max-width:
    480px;

  margin:
    0;

  color:
    rgba(
      203,
      213,
      225,
      0.66
    );

  font-size:
    0.82rem;

  line-height:
    1.5;
}

.sales-handoff-empty-state small {
  color:
    rgba(
      148,
      163,
      184,
      0.58
    );

  font-size:
    0.72rem;
}

/* ========================================
   HANDOFF RESPONSIVE
======================================== */

@media (
  max-width:
  1280px
) {

  .sales-handoff-page {
    width:
      min(
        100%,
        calc(
          100vw -
          40px
        )
      );
  }

}

@media (
  max-width:
  960px
) {

  .sales-handoff-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .sales-handoff-header-status {
    width:
      100%;

    box-sizing:
      border-box;
  }

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

  .sales-handoff-stat-office {
    grid-column:
      1 / -1;
  }

  .sales-handoff-action-panel {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .sales-handoff-action-buttons {
    width:
      100%;

    justify-content:
      flex-start;
  }

  .sales-handoff-lead-grid {
    grid-template-columns:
      1fr;
  }

  .sales-handoff-lead-card.is-open {
    grid-column:
      auto;
  }

  .sales-handoff-details-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}

@media (
  max-width:
  620px
) {

  .sales-handoff-page {
    gap:
      15px;

    width:
      100%;

    padding:
      12px 0 50px;
  }

  .sales-handoff-header,
  .sales-handoff-list-panel {
    padding:
      17px;

    border-radius:
      21px;
  }

  .sales-handoff-header-copy h1 {
    font-size:
      1.85rem;
  }

  .sales-handoff-stats {
    grid-template-columns:
      1fr;
  }

  .sales-handoff-stat-office {
    grid-column:
      auto;
  }

  .sales-handoff-stat-card {
    min-height:
      125px;
  }

  .sales-handoff-action-panel {
    padding:
      17px;
  }

  .sales-handoff-action-buttons {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .sales-handoff-action-buttons .btn {
    width:
      100%;
  }

  .sales-handoff-list-header,
  .sales-handoff-lead-footer,
  .sales-handoff-details-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .sales-handoff-list-count {
    width:
      fit-content;
  }

  .sales-handoff-lead-card {
    padding:
      16px;
  }

  .sales-handoff-lead-meta,
  .sales-handoff-details-grid {
    grid-template-columns:
      1fr;
  }

  .sales-handoff-lead-footer .btn {
    width:
      100%;
  }

}

/* ========================================
   SALES HANDOFF — FROM AI IDENTITY
======================================== */

.sales-from-ai-page
.from-ai-handoff-header {
  border-color:
    rgba(
      192,
      132,
      252,
      0.24
    );

  background:
    radial-gradient(
      circle at top left,
      rgba(
        168,
        85,
        247,
        0.25
      ),
      transparent 39%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(
        236,
        72,
        153,
        0.15
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(
        54,
        48,
        91,
        0.96
      ),
      rgba(
        18,
        25,
        48,
        0.95
      )
    );

  box-shadow:
    0 28px 74px
    rgba(
      30,
      12,
      55,
      0.34
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.06
    );
}

.sales-from-ai-page
.from-ai-handoff-header::after {
  background:
    rgba(
      168,
      85,
      247,
      0.18
    );
}

/* ========================================
   FROM AI MANUAL STATUS
======================================== */

.sales-from-ai-page
.from-ai-header-status {
  border-color:
    rgba(
      192,
      132,
      252,
      0.3
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        168,
        85,
        247,
        0.17
      ),
      rgba(
        15,
        23,
        42,
        0.3
      )
    );

  box-shadow:
    0 14px 34px
    rgba(
      88,
      28,
      135,
      0.17
    );
}

.sales-from-ai-page
.from-ai-header-status
.sales-handoff-header-dot {
  background:
    #c084fc;

  box-shadow:
    0 0 0 5px
    rgba(
      192,
      132,
      252,
      0.12
    ),
    0 0 20px
    rgba(
      192,
      132,
      252,
      0.55
    );
}

.sales-from-ai-page
.from-ai-header-status small {
  color:
    rgba(
      233,
      213,
      255,
      0.7
    );
}

.sales-from-ai-page
.from-ai-header-status strong {
  color:
    #f3e8ff;
}

/* ========================================
   FROM AI STAT CARDS
======================================== */

.sales-from-ai-page
.from-ai-stat-card {
  border-color:
    rgba(
      192,
      132,
      252,
      0.2
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        58,
        51,
        91,
        0.9
      ),
      rgba(
        18,
        31,
        55,
        0.94
      )
    );
}

.sales-from-ai-page
.from-ai-stat-card:nth-child(1)::after {
  background:
    rgba(
      168,
      85,
      247,
      0.24
    );
}

.sales-from-ai-page
.from-ai-stat-card:nth-child(2)::after {
  background:
    rgba(
      236,
      72,
      153,
      0.2
    );
}

.sales-from-ai-page
.from-ai-stat-card:nth-child(3)::after {
  background:
    rgba(
      59,
      130,
      246,
      0.2
    );
}

.sales-from-ai-page
.from-ai-stat-card
.sales-handoff-stat-icon {
  border-color:
    rgba(
      216,
      180,
      254,
      0.28
    );

  background:
    rgba(
      168,
      85,
      247,
      0.15
    );

  color:
    #e9d5ff;
}

/* ========================================
   FROM AI LIST PANEL
======================================== */

.sales-from-ai-page
.from-ai-list-panel {
  border-color:
    rgba(
      192,
      132,
      252,
      0.17
    );

  background:
    radial-gradient(
      circle at top right,
      rgba(
        168,
        85,
        247,
        0.09
      ),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(
        27,
        38,
        68,
        0.88
      ),
      rgba(
        11,
        24,
        43,
        0.9
      )
    );
}

.sales-from-ai-page
.sales-handoff-panel-kicker {
  border-color:
    rgba(
      192,
      132,
      252,
      0.28
    );

  background:
    rgba(
      168,
      85,
      247,
      0.12
    );

  color:
    #d8b4fe;
}

.sales-from-ai-page
.sales-handoff-list-count {
  border-color:
    rgba(
      192,
      132,
      252,
      0.25
    );

  background:
    rgba(
      168,
      85,
      247,
      0.1
    );

  color:
    rgba(
      233,
      213,
      255,
      0.75
    );
}

.sales-from-ai-page
.sales-handoff-list-count strong {
  color:
    #f3e8ff;
}

/* ========================================
   FROM AI LEAD CARDS
======================================== */

.sales-from-ai-page
.sales-ai-handoff-lead-card {
  cursor:
    pointer;

  border-color:
    rgba(
      192,
      132,
      252,
      0.24
    );

  background:
    radial-gradient(
      circle at top left,
      rgba(
        168,
        85,
        247,
        0.18
      ),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(
        50,
        51,
        86,
        0.9
      ),
      rgba(
        17,
        32,
        57,
        0.94
      )
    );

  box-shadow:
    0 18px 46px
    rgba(
      36,
      16,
      63,
      0.25
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.045
    );
}

.sales-from-ai-page
.sales-ai-handoff-lead-card::before {
  background:
    linear-gradient(
      180deg,
      #c084fc,
      #7c3aed
    );
}

.sales-from-ai-page
.sales-ai-handoff-lead-card:hover {
  border-color:
    rgba(
      216,
      180,
      254,
      0.48
    );

  box-shadow:
    0 25px 58px
    rgba(
      76,
      29,
      149,
      0.2
    ),
    0 0 0 1px
    rgba(
      192,
      132,
      252,
      0.1
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.055
    );
}

/* ========================================
   FROM AI BADGES
======================================== */

.from-ai-signal-badge {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  padding:
    6px 10px;

  border:
    1px solid
    rgba(
      244,
      114,
      182,
      0.27
    );

  border-radius:
    999px;

  background:
    rgba(
      236,
      72,
      153,
      0.11
    );

  color:
    #fbcfe8;

  font-size:
    0.67rem;

  font-weight:
    900;
}

.sales-from-ai-page
.from-ai-badge {
  border-color:
    rgba(
      192,
      132,
      252,
      0.3
    );

  background:
    rgba(
      168,
      85,
      247,
      0.14
    );

  color:
    #e9d5ff;
}

/* ========================================
   FROM AI OPEN HINT
======================================== */

.from-ai-open-hint {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #d8b4fe;

  font-size:
    0.75rem;

  font-weight:
    900;

  transition:
    color 0.16s ease,
    transform 0.16s ease;
}

.from-ai-open-hint strong {
  font-size:
    1rem;

  line-height:
    1;
}

.sales-ai-handoff-lead-card:hover
.from-ai-open-hint {
  color:
    #f3e8ff;

  transform:
    translateX(
      3px
    );
}

/* ========================================
   FROM AI EMPTY STATE
======================================== */

.sales-from-ai-page
.from-ai-empty-state {
  border-color:
    rgba(
      192,
      132,
      252,
      0.24
    );

  background:
    radial-gradient(
      circle at center,
      rgba(
        168,
        85,
        247,
        0.12
      ),
      transparent 56%
    ),
    rgba(
      10,
      20,
      38,
      0.3
    );
}

.sales-from-ai-page
.from-ai-empty-state
.sales-handoff-empty-icon {
  border-color:
    rgba(
      192,
      132,
      252,
      0.3
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        168,
        85,
        247,
        0.23
      ),
      rgba(
        126,
        34,
        206,
        0.1
      )
    );

  color:
    #e9d5ff;

  box-shadow:
    0 13px 30px
    rgba(
      126,
      34,
      206,
      0.18
    );
}

/* ========================================
   SALES SMART IMPORT
======================================== */

.sales-smart-import-page {
  display:
    grid;

  gap:
    20px;

  width:
    min(
      1360px,
      calc(
        100vw -
        330px
      )
    );

  max-width:
    1360px;

  margin:
    0 auto;

  padding:
    22px 0 80px;
}

/* ========================================
   SMART IMPORT HEADER
======================================== */

.sales-smart-import-header {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;

  overflow:
    hidden;

  padding:
    28px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.24
    );

  border-radius:
    28px;

  background:
    radial-gradient(
      circle at top left,
      rgba(
        59,
        130,
        246,
        0.25
      ),
      transparent 38%
    ),
    radial-gradient(
      circle at 90% 82%,
      rgba(
        34,
        211,
        238,
        0.13
      ),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      rgba(
        41,
        68,
        102,
        0.96
      ),
      rgba(
        13,
        30,
        52,
        0.95
      )
    );

  box-shadow:
    0 28px 74px
    rgba(
      0,
      0,
      0,
      0.28
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.06
    );
}

.sales-smart-import-header::after {
  content:
    "";

  position:
    absolute;

  right:
    -80px;

  bottom:
    -120px;

  width:
    280px;

  height:
    280px;

  border-radius:
    999px;

  background:
    rgba(
      14,
      165,
      233,
      0.13
    );

  filter:
    blur(
      5px
    );

  pointer-events:
    none;
}

.sales-smart-import-header-copy,
.sales-smart-import-header-status {
  position:
    relative;

  z-index:
    1;
}

.sales-smart-import-header-copy {
  display:
    grid;

  gap:
    9px;

  min-width:
    0;
}

.sales-smart-import-header-copy h1 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      2rem,
      3vw,
      2.8rem
    );

  font-weight:
    950;

  line-height:
    1;

  letter-spacing:
    -0.055em;
}

.sales-smart-import-header-copy p {
  max-width:
    720px;

  margin:
    0;

  color:
    rgba(
      226,
      232,
      240,
      0.74
    );

  font-size:
    0.9rem;

  line-height:
    1.55;
}

.sales-smart-import-header-status {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  flex-shrink:
    0;

  min-width:
    180px;

  padding:
    14px 16px;

  border:
    1px solid
    rgba(
      34,
      211,
      238,
      0.25
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(
        14,
        165,
        233,
        0.15
      ),
      rgba(
        15,
        23,
        42,
        0.25
      )
    );

  box-shadow:
    0 14px 34px
    rgba(
      3,
      105,
      161,
      0.13
    );
}

.sales-smart-import-header-icon {
  display:
    grid;

  place-items:
    center;

  width:
    42px;

  height:
    42px;

  flex-shrink:
    0;

  border:
    1px solid
    rgba(
      125,
      211,
      252,
      0.3
    );

  border-radius:
    14px;

  background:
    rgba(
      14,
      165,
      233,
      0.17
    );

  color:
    #bae6fd;

  font-size:
    0.76rem;

  font-weight:
    950;

  box-shadow:
    0 0 24px
    rgba(
      14,
      165,
      233,
      0.16
    );
}

.sales-smart-import-header-status div {
  display:
    grid;

  gap:
    3px;
}

.sales-smart-import-header-status small {
  color:
    rgba(
      186,
      230,
      253,
      0.7
    );

  font-size:
    0.68rem;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.065em;
}

.sales-smart-import-header-status strong {
  color:
    #e0f2fe;

  font-size:
    0.92rem;

  font-weight:
    900;
}

/* ========================================
   SMART IMPORT CARDS
======================================== */

.sales-smart-import-guide-card,
.sales-smart-import-input-card,
.sales-smart-import-result >
.workspace-card {
  display:
    grid;

  gap:
    20px;

  width:
    100%;

  padding:
    24px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.17
    );

  border-radius:
    25px;

  background:
    radial-gradient(
      circle at top left,
      rgba(
        59,
        130,
        246,
        0.09
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(
        35,
        58,
        86,
        0.88
      ),
      rgba(
        12,
        29,
        49,
        0.9
      )
    );

  box-shadow:
    0 22px 58px
    rgba(
      0,
      0,
      0,
      0.22
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.04
    );
}

.sales-smart-import-section-header {
  display:
    grid;

  grid-template-columns:
    46px
    minmax(
      0,
      1fr
    );

  align-items:
    start;

  gap:
    14px;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
    rgba(
      148,
      184,
      226,
      0.11
    );
}

.sales-smart-import-section-header > div:last-child {
  display:
    grid;

  gap:
    7px;

  min-width:
    0;
}

.sales-smart-import-section-header h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    1.28rem;

  font-weight:
    950;

  letter-spacing:
    -0.035em;
}

.sales-smart-import-section-header p {
  max-width:
    760px;

  margin:
    0;

  color:
    rgba(
      203,
      213,
      225,
      0.67
    );

  font-size:
    0.82rem;

  line-height:
    1.5;
}

.sales-smart-import-section-icon {
  display:
    grid;

  place-items:
    center;

  width:
    46px;

  height:
    46px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.27
    );

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      rgba(
        59,
        130,
        246,
        0.2
      ),
      rgba(
        37,
        99,
        235,
        0.08
      )
    );

  color:
    #bfdbfe;

  font-size:
    1rem;

  font-weight:
    950;

  box-shadow:
    0 12px 28px
    rgba(
      37,
      99,
      235,
      0.13
    );
}

.sales-smart-import-kicker {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  padding:
    5px 9px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.24
    );

  border-radius:
    999px;

  background:
    rgba(
      59,
      130,
      246,
      0.1
    );

  color:
    #93c5fd;

  font-size:
    0.64rem;

  font-weight:
    950;

  text-transform:
    uppercase;

  letter-spacing:
    0.07em;
}

/* ========================================
   SMART IMPORT COLUMNS
======================================== */

.sales-smart-import-columns {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap:
    9px;
}

.sales-smart-import-column {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    0;

  min-height:
    42px;

  padding:
    9px 10px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.17
    );

  border-radius:
    13px;

  background:
    rgba(
      5,
      19,
      34,
      0.24
    );

  color:
    rgba(
      219,
      234,
      254,
      0.85
    );

  font-size:
    0.72rem;

  font-weight:
    850;

  text-align:
    center;

  overflow-wrap:
    anywhere;
}

/* ========================================
   SMART IMPORT TEXTAREA
======================================== */

.sales-smart-import-textarea-wrap {
  display:
    grid;

  gap:
    9px;
}

.sales-smart-import-textarea-wrap label {
  color:
    rgba(
      226,
      232,
      240,
      0.9
    );

  font-size:
    0.75rem;

  font-weight:
    850;
}

#salesSmartImportTextarea {
  width:
    100%;

  min-height:
    280px;

  resize:
    vertical;

  padding:
    16px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.2
    );

  border-radius:
    18px;

  outline:
    none;

  background:
    linear-gradient(
      145deg,
      rgba(
        5,
        18,
        34,
        0.5
      ),
      rgba(
        13,
        30,
        50,
        0.44
      )
    );

  color:
    #f8fafc;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    0.8rem;

  line-height:
    1.65;

  box-shadow:
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.035
    );

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

#salesSmartImportTextarea::placeholder {
  color:
    rgba(
      148,
      163,
      184,
      0.52
    );
}

#salesSmartImportTextarea:focus {
  border-color:
    rgba(
      96,
      165,
      250,
      0.72
    );

  box-shadow:
    0 0 0 4px
    rgba(
      37,
      99,
      235,
      0.15
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.05
    );
}

/* ========================================
   SMART IMPORT ACTION BAR
======================================== */

.sales-smart-import-action-bar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    22px;

  padding:
    17px 18px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.17
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      135deg,
      rgba(
        37,
        99,
        235,
        0.11
      ),
      rgba(
        15,
        23,
        42,
        0.22
      )
    );
}

.sales-smart-import-action-bar > div:first-child {
  display:
    grid;

  gap:
    5px;
}

.sales-smart-import-action-bar strong {
  color:
    #ffffff;

  font-size:
    0.9rem;

  font-weight:
    900;
}

.sales-smart-import-action-bar span {
  color:
    rgba(
      203,
      213,
      225,
      0.65
    );

  font-size:
    0.75rem;

  line-height:
    1.4;
}

.sales-smart-import-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    10px;
}

.sales-smart-import-actions .btn {
  width:
    auto;

  min-width:
    130px;

  min-height:
    42px;

  border-radius:
    13px;

  font-weight:
    850;
}

.sales-smart-import-actions
.btn-primary {
  background:
    linear-gradient(
      135deg,
      #3b82f6,
      #2563eb
    );

  border-color:
    rgba(
      147,
      197,
      253,
      0.32
    );

  box-shadow:
    0 13px 30px
    rgba(
      37,
      99,
      235,
      0.24
    );
}

/* ========================================
   SMART IMPORT RESULT
======================================== */

.sales-smart-import-result {
  display:
    grid;

  gap:
    18px;

  min-width:
    0;
}

.sales-smart-import-summary {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    14px;
}

.sales-smart-import-summary
.workspace-card {
  position:
    relative;

  display:
    grid;

  gap:
    9px;

  min-height:
    130px;

  overflow:
    hidden;

  padding:
    19px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.17
    );

  border-radius:
    21px;

  background:
    linear-gradient(
      145deg,
      rgba(
        39,
        63,
        92,
        0.88
      ),
      rgba(
        14,
        32,
        54,
        0.92
      )
    );

  box-shadow:
    0 18px 44px
    rgba(
      0,
      0,
      0,
      0.2
    );
}

.sales-smart-import-summary
.workspace-card::after {
  content:
    "";

  position:
    absolute;

  right:
    -45px;

  bottom:
    -65px;

  width:
    140px;

  height:
    140px;

  border-radius:
    999px;

  background:
    rgba(
      59,
      130,
      246,
      0.17
    );

  pointer-events:
    none;
}

.sales-smart-import-summary
.workspace-card:nth-child(2)::after {
  background:
    rgba(
      245,
      158,
      11,
      0.18
    );
}

.sales-smart-import-summary
.workspace-card:nth-child(3)::after {
  background:
    rgba(
      16,
      185,
      129,
      0.16
    );
}

.sales-smart-import-summary h3 {
  position:
    relative;

  z-index:
    1;

  margin:
    0;

  color:
    rgba(
      203,
      213,
      225,
      0.75
    );

  font-size:
    0.76rem;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.055em;
}

.sales-smart-import-summary p {
  position:
    relative;

  z-index:
    1;

  margin:
    auto 0 0;

  color:
    #ffffff;

  font-size:
    2.3rem;

  font-weight:
    950;

  line-height:
    1;

  letter-spacing:
    -0.05em;
}

/* ========================================
   SMART IMPORT PREVIEW
======================================== */

.sales-smart-import-preview-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
    rgba(
      148,
      184,
      226,
      0.11
    );
}

.sales-smart-import-preview-header > div {
  display:
    grid;

  gap:
    6px;
}

.sales-smart-import-preview-header h3 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    1.22rem;

  font-weight:
    950;
}

.sales-smart-import-preview-header p {
  margin:
    0;

  color:
    rgba(
      203,
      213,
      225,
      0.65
    );

  font-size:
    0.8rem;
}

.sales-smart-import-preview-header .btn {
  width:
    auto;

  min-width:
    190px;

  flex-shrink:
    0;

  border-radius:
    13px;

  font-weight:
    850;
}

/* ========================================
   SMART IMPORT TABLE
======================================== */

.sales-smart-import-table-wrap {
  width:
    100%;

  overflow-x:
    auto;

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.13
    );

  border-radius:
    17px;

  background:
    rgba(
      5,
      18,
      33,
      0.28
    );
}

.sales-smart-import-table {
  width:
    100%;

  min-width:
    1050px;

  border-collapse:
    collapse;

  color:
    rgba(
      241,
      245,
      249,
      0.88
    );

  font-size:
    0.76rem;
}

.sales-smart-import-table th {
  padding:
    13px 12px;

  border-bottom:
    1px solid
    rgba(
      148,
      184,
      226,
      0.16
    );

  background:
    rgba(
      15,
      35,
      59,
      0.76
    );

  color:
    rgba(
      191,
      219,
      254,
      0.8
    );

  font-size:
    0.66rem;

  font-weight:
    900;

  text-align:
    left;

  text-transform:
    uppercase;

  letter-spacing:
    0.055em;

  white-space:
    nowrap;
}

.sales-smart-import-table td {
  padding:
    13px 12px;

  border-bottom:
    1px solid
    rgba(
      148,
      184,
      226,
      0.09
    );

  vertical-align:
    top;

  line-height:
    1.45;

  overflow-wrap:
    anywhere;
}

.sales-smart-import-table tbody tr:last-child td {
  border-bottom:
    0;
}

.sales-smart-import-table tbody tr {
  transition:
    background-color 0.15s ease;
}

.sales-smart-import-table tbody tr:hover {
  background:
    rgba(
      59,
      130,
      246,
      0.07
    );
}

.sales-smart-import-table input[type="checkbox"] {
  width:
    17px;

  height:
    17px;

  margin:
    0;

  accent-color:
    #3b82f6;

  cursor:
    pointer;
}

.sales-smart-import-duplicate-row {
  background:
    rgba(
      245,
      158,
      11,
      0.06
    );
}

.sales-smart-import-duplicate-row:hover {
  background:
    rgba(
      245,
      158,
      11,
      0.1
    ) !important;
}

/* ========================================
   SMART IMPORT STATUS
======================================== */

.sales-smart-import-ok {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(
      52,
      211,
      153,
      0.24
    );

  border-radius:
    999px;

  background:
    rgba(
      16,
      185,
      129,
      0.1
    );

  color:
    #a7f3d0;

  font-size:
    0.67rem;

  font-weight:
    900;
}

.sales-smart-import-warning {
  display:
    grid;

  gap:
    6px;

  min-width:
    190px;

  padding:
    10px;

  border:
    1px solid
    rgba(
      251,
      191,
      36,
      0.2
    );

  border-radius:
    12px;

  background:
    rgba(
      245,
      158,
      11,
      0.08
    );
}

.sales-smart-import-warning strong {
  color:
    #fde68a;

  font-size:
    0.72rem;
}

.sales-smart-import-warning ul {
  margin:
    0;

  padding-left:
    17px;

  color:
    rgba(
      254,
      243,
      199,
      0.76
    );

  font-size:
    0.68rem;

  line-height:
    1.45;
}

.sales-smart-import-warning li + li {
  margin-top:
    4px;
}

/* ========================================
   SMART IMPORT RESPONSIVE
======================================== */

@media (
  max-width:
  1280px
) {

  .sales-smart-import-page {
    width:
      min(
        100%,
        calc(
          100vw -
          40px
        )
      );
  }

}

@media (
  max-width:
  900px
) {

  .sales-smart-import-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .sales-smart-import-header-status {
    width:
      100%;

    box-sizing:
      border-box;
  }

  .sales-smart-import-columns {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .sales-smart-import-summary {
    grid-template-columns:
      1fr;
  }

  .sales-smart-import-action-bar,
  .sales-smart-import-preview-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .sales-smart-import-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }

}

@media (
  max-width:
  620px
) {

  .sales-smart-import-page {
    gap:
      15px;

    width:
      100%;

    padding:
      12px 0 50px;
  }

  .sales-smart-import-header,
  .sales-smart-import-guide-card,
  .sales-smart-import-input-card,
  .sales-smart-import-result >
  .workspace-card {
    padding:
      17px;

    border-radius:
      21px;
  }

  .sales-smart-import-header-copy h1 {
    font-size:
      1.85rem;
  }

  .sales-smart-import-section-header {
    grid-template-columns:
      1fr;
  }

  .sales-smart-import-columns {
    grid-template-columns:
      1fr;
  }

  #salesSmartImportTextarea {
    min-height:
      230px;
  }

  .sales-smart-import-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .sales-smart-import-actions .btn,
  .sales-smart-import-preview-header .btn {
    width:
      100%;

    min-width:
      0;
  }

}