button {
  font-family: var(--font-family);
}

.dashboard-overview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.stat-item {
  padding: 8px 28px;
  min-width: 0;
}

.stat-item:first-child {
  padding-right: 0;
}

.stat-item:last-child {
  padding-left: 0;
}

.stat-item + .stat-item {
  border-right: 1px solid var(--border-color);
}

.stat-item .metric-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(26px, 2.2vw, 34px);
  color: var(--color-primary);
}

.stat-item .metric-value small {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.metric-value.is-loading {
  color: var(--text-muted);
}

.wallets-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.wallets-report {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.wallets-report .metric-card,
.wallets-metrics .metric-card {
  padding: 20px;
}

.wallets-report .metric-value,
.wallets-metrics .metric-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 24px;
}

.wallets-report .metric-value small,
.wallets-metrics .metric-value small {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.wallets-head {
  gap: 12px;
  flex-wrap: wrap;
}

.users-head {
  gap: 12px;
  flex-wrap: wrap;
}

.users-head .time-filter {
  flex-wrap: wrap;
}

.users-count {
  margin-right: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.user-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.user-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 20px 24px;
}

.user-summary-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: min(100%, 280px);
  flex: 1;
}

.user-summary-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--color-primary-subtle);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--border-color));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
}

.avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-detail-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.user-detail-badges {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.user-image-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.user-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(96px, 1fr));
  gap: 0;
  flex: 1.2;
  min-width: min(100%, 420px);
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
}

.user-detail-stats div {
  padding: 12px 16px;
}

.finance-strip div {
  padding: 12px 16px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.user-detail-stats div + div {
  border-inline-start: 1px solid var(--border-color);
}

.user-detail-stats span,
.finance-strip span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.user-detail-stats b,
.finance-strip b {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

.finance-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.user-detail-panel {
  padding-top: 18px;
}

.user-detail-panel .sp-tabs {
  margin: 0 0 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.user-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 4px;
}

.form-section {
  padding: 20px 0;
}

.form-section + .form-section {
  border-top: 1px solid var(--border-color);
}

.form-section-head {
  margin-bottom: 14px;
}

.form-section-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.form-section-head p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

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

.form-grid .field-wide {
  grid-column: 1 / -1;
}

.user-form .field input,
.user-form .field select,
.user-form .field textarea {
  width: 100%;
  min-width: 0;
  max-width: none;
  background: var(--bg-surface-secondary);
}

.user-form .field textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.6;
}

.user-form .field input:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.85;
}

.user-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--border-color);
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg-surface) 70%, transparent);
}

.field-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.field-row input {
  flex: 1;
  min-width: 0;
}

.danger-outline {
  color: var(--badge-danger-text);
  border-color: color-mix(in srgb, var(--badge-danger-text) 35%, white);
}

.page-hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.table-card .custom-table td[colspan] {
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 900px) {
  .users-head {
    flex-direction: column;
    align-items: stretch;
  }

  .users-head .time-filter {
    width: 100%;
  }

  .users-head .filter-btn {
    flex: 1 1 auto;
  }

  .user-summary {
    gap: 16px;
    padding: 16px;
  }

  .user-summary-main {
    min-width: 0;
    width: 100%;
  }

  .user-detail-stats {
    grid-template-columns: repeat(2, 1fr);
    min-width: 100%;
  }

  .user-detail-stats div + div {
    border-inline-start: 0;
  }

  .user-detail-stats div:nth-child(even) {
    border-inline-start: 1px solid var(--border-color);
  }

  .user-detail-stats div:nth-child(n + 3) {
    border-top: 1px solid var(--border-color);
  }

  .finance-strip,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .user-form-footer {
    flex-direction: column-reverse;
    justify-content: stretch;
  }

  .user-form-footer .btn-primary,
  .user-form-footer .btn-secondary {
    width: 100%;
    text-align: center;
  }

  .page-toolbar {
    flex-direction: column;
  }

  .page-toolbar .page-input,
  select.page-input,
  input.page-input[type='date'] {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .user-detail-panel .sp-tabs {
    gap: 6px;
  }

  .user-detail-panel .sp-tab {
    flex: 1 1 calc(50% - 6px);
  }

  .user-addresses .field-row {
    flex-direction: column;
    align-items: stretch;
  }

  .user-addresses .field-row .btn-table {
    width: 100%;
  }
}

.status-badge.neutral {
  background: var(--bg-main);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.page-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.page-input,
.field input,
.field select {
  height: 42px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-input);
  padding: 0 14px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  min-width: 180px;
}

select.page-input {
  min-width: 140px;
  max-width: 160px;
  flex: 0 0 auto;
  cursor: pointer;
}

input.page-input[type='date'] {
  min-width: 150px;
  max-width: 170px;
  flex: 0 0 auto;
}

.page-input {
  flex: 1;
  max-width: 280px;
}

.field textarea {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-input);
  padding: 10px 14px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  width: 100%;
  min-width: 0;
}

.page-input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.btn-table {
  padding: 7px 14px;
  font-size: 12px;
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.amount-credit {
  font-weight: 600;
  color: var(--color-primary);
}

.amount-debit {
  font-weight: 600;
  color: var(--badge-danger-text);
}

.wallets-page .custom-table td[colspan] {
  color: var(--text-muted);
  text-align: center;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-secondary);
}

.form-ok,
.form-err {
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
}

.form-ok {
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
}

.form-err {
  background: var(--badge-danger-bg);
  color: var(--badge-danger-text);
}

.charge-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.charge-form .page-title {
  font-size: 20px;
}

.charge-form .field input,
.charge-form .field select {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.charge-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .wallets-metrics {
    grid-template-columns: 1fr;
  }

  .page-input {
    max-width: none;
  }

  .stat-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stat-item,
  .stat-item:first-child,
  .stat-item:last-child {
    padding: 0;
  }

  .stat-item + .stat-item {
    border-right: 0;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
  }
}

.status-badge.pending_payment,
.status-badge.pending,
.status-badge.paid,
.status-badge.failed_payment,
.status-badge.processing,
.status-badge.preparing,
.status-badge.ready_for_shipping,
.status-badge.shipped,
.status-badge.delivered,
.status-badge.cancelled,
.status-badge.returned,
.status-badge.rejected {
  gap: 6px;
}

.status-badge.pending_payment::before,
.status-badge.pending::before,
.status-badge.paid::before,
.status-badge.failed_payment::before,
.status-badge.processing::before,
.status-badge.preparing::before,
.status-badge.ready_for_shipping::before,
.status-badge.shipped::before,
.status-badge.delivered::before,
.status-badge.cancelled::before,
.status-badge.returned::before,
.status-badge.rejected::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-badge.pending_payment,
.status-badge.pending {
  background: #fff7ed;
  color: #c2410c;
}

.status-badge.paid {
  background: #ecfdf3;
  color: #067647;
}

.status-badge.processing,
.status-badge.preparing {
  background: #eff6ff;
  color: #1d4ed8;
}

.status-badge.ready_for_shipping {
  background: #ecfeff;
  color: #0e7490;
}

.status-badge.shipped {
  background: #eef2ff;
  color: #4338ca;
}

.status-badge.delivered {
  background: #f3f8e6;
  color: #4d7c0f;
}

.status-badge.failed_payment {
  background: #fef3f2;
  color: #b42318;
}

.status-badge.rejected {
  background: #fff1f2;
  color: #be123c;
}

.status-badge.cancelled {
  background: #f4f4f5;
  color: #52525b;
}

.status-badge.returned {
  background: #faf5ff;
  color: #7e22ce;
}

.sp-tab.tone-pending_payment:not(.active) i { background: #fff7ed; color: #c2410c; border-color: transparent; }
.sp-tab.tone-paid:not(.active) i { background: #ecfdf3; color: #067647; border-color: transparent; }
.sp-tab.tone-processing:not(.active) i { background: #eff6ff; color: #1d4ed8; border-color: transparent; }
.sp-tab.tone-shipped:not(.active) i { background: #eef2ff; color: #4338ca; border-color: transparent; }
.sp-tab.tone-delivered:not(.active) i { background: #f3f8e6; color: #4d7c0f; border-color: transparent; }
.sp-tab.tone-failed_payment:not(.active) i { background: #fef3f2; color: #b42318; border-color: transparent; }
.sp-tab.tone-cancelled:not(.active) i { background: #f4f4f5; color: #52525b; border-color: transparent; }
.sp-tab.tone-returned:not(.active) i { background: #faf5ff; color: #7e22ce; border-color: transparent; }

.sp-tab.tone-pending_payment.active { background: #c2410c; border-color: #c2410c; }
.sp-tab.tone-paid.active { background: #067647; border-color: #067647; }
.sp-tab.tone-processing.active { background: #1d4ed8; border-color: #1d4ed8; }
.sp-tab.tone-shipped.active { background: #4338ca; border-color: #4338ca; }
.sp-tab.tone-delivered.active { background: #4d7c0f; border-color: #4d7c0f; }
.sp-tab.tone-failed_payment.active { background: #b42318; border-color: #b42318; }
.sp-tab.tone-cancelled.active { background: #52525b; border-color: #52525b; }
.sp-tab.tone-returned.active { background: #7e22ce; border-color: #7e22ce; }

.ord-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.ord-facts span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.ord-facts b {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.ord-facts .wide {
  grid-column: 1 / -1;
}

.ord-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--border-color);
}

.ord-item img,
.ord-thumb {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-secondary);
  object-fit: cover;
}

.ord-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
}

.ord-item h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.ord-item p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

.ord-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 132px;
}

.ord-price {
  font-size: 14px;
  font-weight: 700;
}

.ord-item .ord-reason {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--badge-danger-text);
}

.ord-modal .sp-err {
  color: #b42318;
}

.ord-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ord-modal h2 {
  margin: 0;
  font-size: 18px;
}

.ord-modal p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.ord-modal label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.ord-modal .page-input,
.ord-modal textarea {
  width: 100%;
}

.ord-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 720px) {
  .ord-facts,
  .ord-item {
    grid-template-columns: 1fr;
  }

  .ord-side {
    align-items: stretch;
    min-width: 0;
  }
}