/* =========================================================
   ADMIN SALES OPERATIONS
   MODERN OPERATIONS WORKSPACE
========================================================= */

/* =========================================================
   PAGE
========================================================= */

#workspaceMain:has(
  .admin-sales-operations-page
) {
  max-width:
    1680px;
}

.admin-sales-operations-page {
  --aso-border:
    rgba(
      151,
      181,
      226,
      0.2
    );

  --aso-border-strong:
    rgba(
      105,
      158,
      255,
      0.42
    );

  --aso-surface:
    rgba(
      29,
      47,
      72,
      0.82
    );

  --aso-surface-strong:
    rgba(
      32,
      53,
      82,
      0.96
    );

  --aso-surface-soft:
    rgba(
      18,
      34,
      55,
      0.76
    );

  --aso-muted:
    rgba(
      219,
      230,
      246,
      0.7
    );

  --aso-blue:
    rgb(
      91,
      148,
      255
    );

  --aso-cyan:
    rgb(
      85,
      213,
      224
    );

  --aso-green:
    rgb(
      76,
      218,
      157
    );

  --aso-purple:
    rgb(
      151,
      105,
      255
    );

  --aso-yellow:
    rgb(
      244,
      204,
      91
    );

  --aso-red:
    rgb(
      255,
      104,
      126
    );

  width:
    100%;

  display:
    grid;

  gap:
    22px;

  padding-bottom:
    80px;
}

.admin-sales-operations-page,
.admin-sales-operations-page * {
  box-sizing:
    border-box;
}

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

.admin-sales-operations-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;

  margin:
    0;

  padding:
    6px 2px 2px;
}

.admin-sales-operations-header > div:first-child {
  display:
    grid;

  gap:
    7px;
}

.admin-sales-operations-header h1 {
  margin:
    0;

  font-size:
    clamp(
      32px,
      3vw,
      48px
    );

  line-height:
    1;

  letter-spacing:
    -0.04em;
}

.admin-sales-operations-header .lead-page-copy {
  max-width:
    760px;

  margin:
    0;

  color:
    var(
      --aso-muted
    );
}

.admin-sales-operations-header
[data-action="refresh-admin-sales-operations"] {
  min-width:
    116px;

  min-height:
    44px;

  border:
    1px solid
    var(
      --aso-border-strong
    );

  border-radius:
    14px;

  background:
    linear-gradient(
      135deg,
      rgba(
        74,
        122,
        198,
        0.3
      ),
      rgba(
        34,
        56,
        87,
        0.88
      )
    );

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

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.admin-sales-operations-header
[data-action="refresh-admin-sales-operations"]:hover {
  transform:
    translateY(
      -2px
    );

  border-color:
    rgba(
      109,
      168,
      255,
      0.75
    );

  box-shadow:
    0 18px 40px
    rgba(
      37,
      91,
      176,
      0.24
    );
}

/* =========================================================
   TABS
========================================================= */

.admin-sales-operations-tabs {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  padding:
    8px;

  overflow-x:
    auto;

  border:
    1px solid
    var(
      --aso-border
    );

  border-radius:
    17px;

  background:
    linear-gradient(
      180deg,
      rgba(
        14,
        30,
        51,
        0.95
      ),
      rgba(
        10,
        24,
        42,
        0.92
      )
    );

  box-shadow:
    0 16px 42px
    rgba(
      0,
      0,
      0,
      0.2
    );

  scrollbar-width:
    thin;
}

.admin-sales-operations-tab {
  min-height:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    10px 17px;

  white-space:
    nowrap;

  border:
    1px solid
    transparent;

  border-radius:
    12px;

  background:
    transparent;

  color:
    rgba(
      220,
      231,
      247,
      0.68
    );

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.admin-sales-operations-tab:hover {
  color:
    #ffffff;

  background:
    rgba(
      88,
      132,
      202,
      0.12
    );
}

.admin-sales-operations-tab.is-active {
  color:
    #ffffff;

  border-color:
    rgba(
      102,
      161,
      255,
      0.7
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        65,
        118,
        204,
        0.72
      ),
      rgba(
        47,
        82,
        138,
        0.72
      )
    );

  box-shadow:
    0 9px 24px
    rgba(
      46,
      100,
      193,
      0.32
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.12
    );

  transform:
    translateY(
      -1px
    );
}

.admin-sales-operations-tab strong {
  min-width:
    24px;

  height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 7px;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.1
    );

  font-size:
    11px;
}

/* =========================================================
   FILTER BAR
========================================================= */

.admin-sales-operations-filter-bar {
  display:
    grid;

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

  gap:
    16px;

  padding:
    18px;

  border:
    1px solid
    var(
      --aso-border
    );

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(
        42,
        66,
        98,
        0.92
      ),
      rgba(
        25,
        43,
        67,
        0.92
      )
    );

  box-shadow:
    0 18px 45px
    rgba(
      0,
      0,
      0,
      0.17
    );
}

.admin-sales-operations-filter-bar
.field-group {
  display:
    grid;

  gap:
    7px;

  margin:
    0;
}

.admin-sales-operations-filter-bar
label {
  color:
    rgba(
      224,
      234,
      249,
      0.78
    );

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.admin-sales-operations-filter-bar
select,
.admin-sales-operations-filter-bar
input {
  width:
    100%;

  min-height:
    46px;

  padding:
    0 14px;

  border:
    1px solid
    rgba(
      161,
      189,
      228,
      0.22
    );

  border-radius:
    13px;

  outline:
    none;

  background:
    rgba(
      12,
      27,
      47,
      0.56
    );

  color:
    #ffffff;

  font:
    inherit;

  font-size:
    13px;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.admin-sales-operations-filter-bar
select:focus,
.admin-sales-operations-filter-bar
input:focus {
  border-color:
    rgba(
      99,
      160,
      255,
      0.76
    );

  background:
    rgba(
      15,
      33,
      57,
      0.82
    );

  box-shadow:
    0 0 0 4px
    rgba(
      75,
      133,
      225,
      0.12
    );
}

.admin-sales-operations-custom-date[hidden] {
  display:
    none !important;
}

/* =========================================================
   CONTENT
========================================================= */

.admin-sales-operations-content {
  min-height:
    360px;
}

.admin-sales-operations-tab-panel {
  display:
    grid;

  gap:
    18px;

  animation:
    adminSalesOperationsReveal
    220ms ease;
}

@keyframes adminSalesOperationsReveal {

  from {
    opacity:
      0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }

}

/* =========================================================
   SECTION HEADERS
========================================================= */

.admin-sales-operations-section-header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;
}

.admin-sales-operations-section-header > div:first-child {
  display:
    grid;

  gap:
    5px;
}

.admin-sales-operations-section-header h2 {
  margin:
    0;

  font-size:
    clamp(
      22px,
      2vw,
      30px
    );

  line-height:
    1.08;

  letter-spacing:
    -0.025em;
}

.admin-sales-operations-section-header p {
  max-width:
    760px;

  margin:
    0;

  color:
    var(
      --aso-muted
    );

  font-size:
    13px;
}

.admin-sales-operations-section-kicker,
.admin-sales-operations-card-kicker {
  color:
    rgba(
      139,
      181,
      255,
      0.92
    );

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}

.admin-sales-operations-section-trailing {
  color:
    var(
      --aso-muted
    );

  font-size:
    12px;

  text-align:
    right;
}

/* =========================================================
   SUMMARY GRID
========================================================= */

.admin-sales-operations-summary-grid {
  display:
    grid;

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

  gap:
    16px;
}

.admin-sales-operations-summary-card {
  position:
    relative;

  min-height:
    190px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    flex-start;

  gap:
    10px;

  overflow:
    hidden;

  padding:
    20px;

  border:
    1px solid
    var(
      --aso-border
    );

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(
        43,
        62,
        88,
        0.95
      ),
      rgba(
        27,
        43,
        65,
        0.96
      )
    );

  box-shadow:
    0 20px 50px
    rgba(
      0,
      0,
      0,
      0.16
    );

  isolation:
    isolate;
}

.admin-sales-operations-summary-card::before {
  content:
    "";

  position:
    absolute;

  width:
    170px;

  height:
    170px;

  right:
    -72px;

  bottom:
    -82px;

  border-radius:
    50%;

  background:
    rgba(
      89,
      147,
      255,
      0.18
    );

  filter:
    blur(
      22px
    );

  z-index:
    -1;
}

.admin-sales-operations-summary-card::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  border-radius:
    inherit;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.035
      ),
      transparent 55%
    );

  pointer-events:
    none;
}

.admin-sales-operations-summary-card h3 {
  margin:
    0;

  color:
    rgba(
      231,
      238,
      249,
      0.86
    );

  font-size:
    14px;

  line-height:
    1.25;
}

.admin-sales-operations-summary-card > strong {
  margin-top:
    auto;

  color:
    #ffffff;

  font-size:
    clamp(
      30px,
      3vw,
      44px
    );

  line-height:
    1;

  letter-spacing:
    -0.045em;
}

.admin-sales-operations-summary-card > p {
  margin:
    0;

  color:
    var(
      --aso-muted
    );

  font-size:
    12px;

  line-height:
    1.45;
}

.admin-sales-operations-tone-online::before {
  background:
    rgba(
      76,
      218,
      157,
      0.24
    );
}

.admin-sales-operations-tone-users::before {
  background:
    rgba(
      85,
      213,
      224,
      0.22
    );
}

.admin-sales-operations-tone-time::before {
  background:
    rgba(
      151,
      105,
      255,
      0.25
    );
}

.admin-sales-operations-tone-pipeline::before {
  background:
    rgba(
      91,
      148,
      255,
      0.26
    );
}

.admin-sales-operations-tone-warning {
  border-color:
    rgba(
      244,
      204,
      91,
      0.48
    ) !important;
}

.admin-sales-operations-tone-warning::before {
  background:
    rgba(
      244,
      204,
      91,
      0.24
    ) !important;
}

/* =========================================================
   OVERVIEW
========================================================= */

.admin-sales-operations-overview {
  gap:
    22px;
}

.admin-sales-operations-overview-grid {
  display:
    grid;

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

  gap:
    18px;
}

.admin-sales-operations-overview-section {
  display:
    grid;

  gap:
    18px;

  padding:
    20px;

  border:
    1px solid
    var(
      --aso-border
    );

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(
        34,
        54,
        81,
        0.9
      ),
      rgba(
        21,
        38,
        60,
        0.94
      )
    );

  box-shadow:
    0 20px 48px
    rgba(
      0,
      0,
      0,
      0.15
    );
}

.admin-sales-operations-overview-section
.admin-sales-operations-section-header h2 {
  font-size:
    20px;
}

.admin-sales-operations-overview-metrics {
  display:
    grid;

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

  gap:
    10px;
}

/* =========================================================
   METRICS
========================================================= */

.admin-sales-operations-metric-grid {
  display:
    grid;

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

  gap:
    15px;
}

.admin-sales-operations-metric {
  position:
    relative;

  min-height:
    128px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    12px;

  overflow:
    hidden;

  padding:
    17px;

  border:
    1px solid
    var(
      --aso-border
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(
        43,
        61,
        85,
        0.94
      ),
      rgba(
        27,
        43,
        64,
        0.96
      )
    );

  box-shadow:
    0 16px 40px
    rgba(
      0,
      0,
      0,
      0.14
    );

  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease;
}

.admin-sales-operations-metric::after {
  content:
    "";

  position:
    absolute;

  width:
    95px;

  height:
    95px;

  right:
    -42px;

  bottom:
    -48px;

  border-radius:
    50%;

  background:
    rgba(
      91,
      148,
      255,
      0.16
    );

  filter:
    blur(
      14px
    );
}

.admin-sales-operations-metric:hover {
  transform:
    translateY(
      -2px
    );

  border-color:
    rgba(
      112,
      165,
      247,
      0.42
    );

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

.admin-sales-operations-metric > span {
  color:
    rgba(
      227,
      236,
      249,
      0.78
    );

  font-size:
    12px;

  font-weight:
    750;
}

.admin-sales-operations-metric > strong {
  position:
    relative;

  z-index:
    1;

  color:
    #ffffff;

  font-size:
    clamp(
      25px,
      2.5vw,
      36px
    );

  line-height:
    1;

  letter-spacing:
    -0.035em;
}

.admin-sales-operations-metric > p {
  position:
    relative;

  z-index:
    1;

  margin:
    0;

  color:
    var(
      --aso-muted
    );

  font-size:
    11px;

  line-height:
    1.4;
}

.admin-sales-operations-overview-metrics
.admin-sales-operations-metric {
  min-height:
    102px;

  padding:
    14px;
}

.admin-sales-operations-overview-metrics
.admin-sales-operations-metric > strong {
  font-size:
    27px;
}

/* =========================================================
   USERS
========================================================= */

.admin-sales-operations-user-list {
  display:
    grid;

  gap:
    13px;
}

.admin-sales-operations-user-row {
  display:
    grid;

  gap:
    16px;

  padding:
    18px;

  border:
    1px solid
    var(
      --aso-border
    );

  border-left:
    4px solid
    rgba(
      127,
      151,
      187,
      0.44
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(
        41,
        59,
        82,
        0.94
      ),
      rgba(
        25,
        41,
        62,
        0.96
      )
    );

  box-shadow:
    0 15px 40px
    rgba(
      0,
      0,
      0,
      0.14
    );
}

.admin-sales-operations-user-row.is-online {
  border-left-color:
    var(
      --aso-green
    );

  box-shadow:
    0 16px 42px
    rgba(
      35,
      143,
      101,
      0.11
    );
}

.admin-sales-operations-user-main {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}

.admin-sales-operations-user-identity {
  min-width:
    220px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}

.admin-sales-operations-user-identity > div {
  display:
    grid;

  gap:
    4px;
}

.admin-sales-operations-user-identity
strong {
  color:
    #ffffff;

  font-size:
    15px;
}

.admin-sales-operations-user-identity
p {
  margin:
    0;

  color:
    var(
      --aso-muted
    );

  font-size:
    12px;
}

.admin-sales-operations-presence {
  min-width:
    67px;

  min-height:
    27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 9px;

  border:
    1px solid
    rgba(
      157,
      179,
      208,
      0.25
    );

  border-radius:
    999px;

  background:
    rgba(
      111,
      128,
      153,
      0.12
    );

  color:
    rgba(
      222,
      231,
      244,
      0.72
    );

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.admin-sales-operations-presence.is-online {
  border-color:
    rgba(
      76,
      218,
      157,
      0.48
    );

  background:
    rgba(
      76,
      218,
      157,
      0.12
    );

  color:
    rgb(
      145,
      246,
      201
    );
}

.admin-sales-operations-user-primary-stats {
  display:
    grid;

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

  gap:
    9px;

  width:
    min(
      680px,
      100%
    );
}

.admin-sales-operations-user-primary-stats
span {
  display:
    grid;

  gap:
    5px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(
      156,
      182,
      219,
      0.14
    );

  border-radius:
    12px;

  background:
    rgba(
      11,
      26,
      45,
      0.32
    );

  color:
    var(
      --aso-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  text-transform:
    uppercase;
}

.admin-sales-operations-user-primary-stats
strong {
  color:
    #ffffff;

  font-size:
    16px;

  text-transform:
    none;
}

.admin-sales-operations-user-details {
  display:
    grid;

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

  gap:
    10px;

  padding-top:
    14px;

  border-top:
    1px solid
    rgba(
      158,
      181,
      213,
      0.13
    );
}

.admin-sales-operations-user-details
span {
  color:
    var(
      --aso-muted
    );

  font-size:
    11px;

  line-height:
    1.45;
}

.admin-sales-operations-user-details
strong {
  color:
    rgba(
      239,
      244,
      252,
      0.9
    );
}

/* =========================================================
   LOADING / ERROR
========================================================= */

.admin-sales-operations-loading {
  min-height:
    170px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    var(
      --aso-border
    );

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(
        38,
        59,
        86,
        0.88
      ),
      rgba(
        22,
        39,
        62,
        0.9
      )
    );

  color:
    var(
      --aso-muted
    );
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (
  min-width:
    1500px
) {

  .admin-sales-operations-page {
    gap:
      24px;
  }

  .admin-sales-operations-summary-card {
    min-height:
      205px;
  }

  .admin-sales-operations-metric-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }

}

/* =========================================================
   TABLET
========================================================= */

@media (
  max-width:
    1180px
) {

  .admin-sales-operations-summary-grid,
  .admin-sales-operations-metric-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .admin-sales-operations-filter-bar {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .admin-sales-operations-user-main {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .admin-sales-operations-user-primary-stats {
    width:
      100%;
  }

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

}

/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width:
    760px
) {

  .admin-sales-operations-page {
    gap:
      16px;

    padding-bottom:
      50px;
  }

  .admin-sales-operations-header {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .admin-sales-operations-header
  [data-action="refresh-admin-sales-operations"] {
    width:
      100%;
  }

  .admin-sales-operations-tabs {
    justify-content:
      flex-start;
  }

  .admin-sales-operations-filter-bar,
  .admin-sales-operations-summary-grid,
  .admin-sales-operations-overview-grid,
  .admin-sales-operations-metric-grid,
  .admin-sales-operations-overview-metrics {
    grid-template-columns:
      1fr;
  }

  .admin-sales-operations-summary-card {
    min-height:
      155px;
  }

  .admin-sales-operations-section-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .admin-sales-operations-section-trailing {
    text-align:
      left;
  }

  .admin-sales-operations-user-identity {
    min-width:
      0;

    align-items:
      flex-start;

    flex-direction:
      column;
  }

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

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

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {

  .admin-sales-operations-tab-panel,
  .admin-sales-operations-tab,
  .admin-sales-operations-metric,
  .admin-sales-operations-header
  [data-action="refresh-admin-sales-operations"] {
    animation:
      none;

    transition:
      none;
  }

}