.activity-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 4px 0 40px;
  color: #0b1538;
}
.activity-heading {
  margin-bottom: 20px;
}
.activity-heading h1 {
  font-size: 34px;
  line-height: 1.05;
  margin: 0 0 7px;
}
.activity-heading p {
  margin: 0;
  color: #687086;
  font-size: 16px;
}
.activity-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}
.activity-search-row > label {
  height: 52px;
  border: 1px solid #d9dee8;
  border-radius: 15px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 15px;
  box-shadow: 0 3px 10px #13204a0a;
}
.activity-search-row svg {
  width: 21px;
  color: #667085;
}
.activity-search-row input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  font: inherit;
  color: #111936;
  background: transparent;
}
.activity-search-row label button {
  border: 0;
  background: none;
  color: #667085;
  padding: 5px;
}
.activity-search-row > [data-history-filters] {
  height: 52px;
  padding: 0 18px;
  border: 1px solid #a7e6d0;
  border-radius: 15px;
  background: #f4fffb;
  color: #059b6c;
  font: inherit;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.activity-search-row > [data-history-filters] b {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 99px;
  background: #06a873;
  color: #fff;
  font-size: 11px;
}
.activity-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 18px 1px 15px;
  scrollbar-width: none;
}
.activity-chips::-webkit-scrollbar {
  display: none;
}
.activity-chips button {
  flex: 0 0 auto;
  border: 1px solid #d9dee8;
  border-radius: 12px;
  background: #fff;
  color: #26304a;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
}
.activity-chips button.active {
  border-color: #0caf78;
  background: #effcf7;
  color: #07875e;
  font-weight: 700;
}
.activity-sort {
  border-top: 1px solid #e8ebf1;
  padding: 13px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #687086;
  font-size: 13px;
}
.activity-sort label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.activity-sort select {
  border: 0;
  background: transparent;
  color: #079568;
  font: inherit;
  font-weight: 700;
  outline: 0;
}
.activity-day {
  margin-top: 12px;
}
.activity-day > h2 {
  font-size: 13px;
  text-transform: capitalize;
  color: #6c7488;
  margin: 0 0 8px 4px;
}
.activity-day > div {
  display: grid;
  gap: 9px;
}
.activity-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 16px;
  gap: 12px;
  align-items: center;
  text-align: left;
  border: 1px solid #e2e6ed;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 4px 14px #1822440c;
  color: #111936;
}
.activity-card > .activity-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eefbf6;
  color: #079c6b;
}
.activity-card.tone-blue > .activity-icon {
  background: #eef5ff;
  color: #1674dd;
}
.activity-card.tone-purple > .activity-icon {
  background: #f5efff;
  color: #7c4bd9;
}
.activity-card.tone-orange > .activity-icon {
  background: #fff5e9;
  color: #e66b00;
}
.activity-card.tone-slate > .activity-icon {
  background: #f2f4f7;
  color: #475467;
}
.activity-icon svg {
  width: 22px;
}
.activity-copy {
  display: grid;
  min-width: 0;
}
.activity-copy em {
  width: max-content;
  max-width: 100%;
  font-style: normal;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
  color: #079c6b;
  background: #e8faf3;
  border-radius: 5px;
  padding: 3px 6px;
}
.activity-card.tone-blue .activity-copy em {
  color: #1469c7;
  background: #eaf3ff;
}
.activity-card.tone-purple .activity-copy em {
  color: #7545d2;
  background: #f1eaff;
}
.activity-card.tone-orange .activity-copy em {
  color: #d86600;
  background: #fff1df;
}
.activity-copy b {
  font-size: 15px;
  margin: 5px 0 2px;
  white-space: normal;
}
.activity-copy small {
  color: #7a8294;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-end {
  text-align: right;
  display: grid;
  justify-items: end;
  gap: 4px;
  white-space: nowrap;
}
.activity-end time {
  color: #7a8294;
  font-size: 11px;
}
.activity-value {
  color: #079c6b;
  font-size: 14px;
}
.activity-value.negative {
  color: #d92d3e;
}
.activity-status {
  font-size: 10px;
  font-style: normal;
  border-radius: 99px;
  padding: 3px 8px;
  background: #eafaf4;
  color: #07875e;
}
.activity-status.warning {
  background: #fff4df;
  color: #b85c00;
}
.activity-status.danger {
  background: #ffeaec;
  color: #c61e34;
}
.activity-status.info {
  background: #edf4ff;
  color: #175cd3;
}
.activity-card > svg {
  width: 16px;
  color: #98a0b1;
}
.activity-load-more {
  display: block;
  margin: 18px auto 0;
  border: 1px solid #cdd4df;
  background: #fff;
  border-radius: 12px;
  padding: 11px 18px;
  color: #26304a;
  font: inherit;
  font-weight: 700;
}
.activity-empty {
  padding: 50px 20px;
  text-align: center;
  border: 1px dashed #d3d9e3;
  border-radius: 18px;
  color: #687086;
}
.activity-empty svg {
  width: 34px;
  height: 34px;
  color: #0aa875;
}
.activity-empty h2 {
  font-size: 18px;
  color: #18213f;
  margin: 12px 0 5px;
}
.activity-empty p {
  margin: 0;
  line-height: 1.5;
}
.activity-filter-modal,
.activity-detail-modal {
  width: min(620px, calc(100vw - 24px));
  max-height: min(820px, calc(100dvh - 24px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.activity-filter-modal form,
.activity-detail-modal > .modal-body {
  min-height: 0;
  overflow: auto;
}
.activity-filter-modal fieldset {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
}
.activity-filter-modal legend {
  font-weight: 800;
  margin-bottom: 10px;
}
.activity-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.activity-filter-modal label:not(.mobile-check) {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 12px;
}
.activity-filter-modal input,
.activity-filter-modal select {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid #d7dde7;
  border-radius: 11px;
  background: #fff;
  padding: 0 11px;
  color: #101828;
  font: inherit;
}
.activity-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.activity-check-grid .mobile-check {
  min-width: 0;
}
.activity-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.activity-detail-title > span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #eafaf4;
  color: #079c6b;
  display: grid;
  place-items: center;
  flex: none;
}
.activity-detail-title small {
  display: block;
  color: #7a8294;
  margin-bottom: 2px;
}
.activity-detail-title h3 {
  margin: 0;
  font-size: 17px;
}
.activity-sale-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.activity-sale-summary div {
  background: #f7f9fb;
  border-radius: 11px;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.activity-sale-summary span,
.activity-detail-line span,
.activity-detail-total span {
  font-size: 11px;
  color: #7a8294;
}
.activity-sale-items {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  border-block: 1px solid #e5e8ee;
}
.activity-sale-items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
}
.activity-sale-items small {
  color: #7a8294;
}
.activity-detail-line,
.activity-detail-total {
  display: flex;
  justify-content: space-between;
  margin: 9px 0;
}
.activity-detail-total {
  font-size: 19px;
}
.activity-detail-note {
  background: #f7f9fb;
  border-radius: 11px;
  padding: 11px;
  color: #5e6679;
}
.activity-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 18px;
}
.activity-cancel-note {
  display: block;
  color: #7a8294;
  line-height: 1.4;
  margin-top: 8px;
}
.activity-detail-fields {
  margin: 0 0 18px;
}
.activity-detail-fields div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #edf0f4;
  padding: 10px 0;
}
.activity-detail-fields dt {
  color: #687086;
  text-transform: capitalize;
}
.activity-detail-fields dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.activity-detail-empty {
  text-align: center;
  color: #687086;
  padding: 24px;
}
.activity-detail-empty svg {
  color: #d92d3e;
}
.activity-detail-modal .modal-body > .mobile-button {
  width: 100%;
}
@media (max-width: 767px) {
  .activity-page {
    padding: 2px 12px calc(96px + env(safe-area-inset-bottom));
    margin: -4px -12px 0;
  }
  .activity-heading {
    margin: 0 2px 17px;
  }
  .activity-heading h1 {
    font-size: 28px;
  }
  .activity-heading p {
    font-size: 14px;
  }
  .activity-search-row {
    gap: 8px;
  }
  .activity-search-row > label {
    height: 48px;
    border-radius: 13px;
    padding: 0 12px;
  }
  .activity-search-row > [data-history-filters] {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 13px;
  }
  .activity-search-row > [data-history-filters] span {
    display: none;
  }
  .activity-search-row > [data-history-filters] b {
    position: absolute;
    right: -5px;
    top: -5px;
  }
  .activity-chips {
    margin-inline: -12px;
    padding-inline: 12px;
  }
  .activity-sort {
    font-size: 12px;
  }
  .activity-card {
    grid-template-columns: 42px minmax(0, 1fr) auto 13px;
    gap: 9px;
    padding: 12px 10px;
    border-radius: 14px;
  }
  .activity-card > .activity-icon {
    width: 42px;
    height: 42px;
  }
  .activity-copy b {
    font-size: 13px;
  }
  .activity-copy small {
    font-size: 11px;
  }
  .activity-end time {
    font-size: 10px;
  }
  .activity-value {
    font-size: 12px;
  }
  .activity-status {
    font-size: 9px;
    padding: 3px 6px;
  }
  .activity-filter-modal,
  .activity-detail-modal {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)));
    margin-top: auto;
    border-radius: 22px 22px 0 0;
  }
  .activity-filter-modal .modal-body,
  .activity-detail-modal .modal-body {
    padding: 16px;
  }
  .activity-filter-modal .modal-foot {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .activity-sale-summary {
    grid-template-columns: 1fr;
  }
  .activity-sale-summary div {
    display: flex;
    justify-content: space-between;
  }
  .activity-detail-actions {
    grid-template-columns: 1fr;
  }
  .activity-detail-fields div {
    font-size: 12px;
  }
}
@media (max-width: 359px) {
  .activity-page {
    padding-inline: 9px;
    margin-inline: -9px;
  }
  .activity-chips {
    margin-inline: -9px;
    padding-inline: 9px;
  }
  .activity-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 10px 8px;
  }
  .activity-card > .activity-icon {
    width: 38px;
    height: 38px;
  }
  .activity-card > svg {
    display: none;
  }
  .activity-end .activity-status {
    display: none;
  }
  .activity-check-grid,
  .activity-filter-grid {
    grid-template-columns: 1fr;
  }
  .activity-filter-modal .modal-head h3 {
    font-size: 16px;
  }
}