/* v2.4.0 — Admin UI refresh: unified spacing, surfaces and custom filter selects */
:root {
  --dashboard-section-gap-v240: 18px;
  --dashboard-surface-radius-v240: 16px;
  --dashboard-select-menu-max-height-v240: 280px;
}

#dashboardWorkspace[hidden],
#returnsWorkspace[hidden] {
  display: none !important;
}

#dashboardWorkspace:not([hidden]),
#returnsWorkspace:not([hidden]) {
  display: grid;
  gap: var(--dashboard-section-gap-v240);
  align-content: start;
}

#dashboardWorkspace > *,
#returnsWorkspace > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.operations-workspace-tabs,
.dashboard-view-bar,
.return-view-bar {
  position: relative;
  border: 1px solid var(--p-border-subdued, var(--border-color, #e3e7ef));
  border-radius: var(--dashboard-surface-radius-v240);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.operations-workspace-tabs {
  gap: 8px;
  padding: 7px;
  margin: 0;
}

.operations-workspace-tabs button,
.dashboard-view-tab,
.return-view-chip > button:first-child,
.dashboard-save-view-button {
  min-height: 38px;
  border-radius: 10px;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.operations-workspace-tabs button {
  min-width: 132px;
  padding: 10px 18px;
}

.operations-workspace-tabs button:hover,
.dashboard-view-tab:hover,
.return-view-chip > button:first-child:hover {
  transform: translateY(-1px);
}

.dashboard-view-bar,
.return-view-bar {
  min-height: 56px;
  padding: 8px;
  gap: 12px;
}

.dashboard-view-scroll,
.return-view-list {
  gap: 8px;
}

.dashboard-view-tab,
.return-view-chip > button:first-child {
  padding: 0 13px;
  font-weight: 650;
}

.dashboard-view-tab.active,
.return-view-chip.active > button:first-child {
  box-shadow: 0 6px 18px rgba(51, 71, 255, .12);
}

.dashboard-save-view-button {
  border-style: solid;
  padding: 0 12px;
}

.return-save-view {
  gap: 10px;
}

.return-save-view input {
  min-height: 38px;
  border-radius: 10px;
  box-shadow: var(--p-shadow-xs);
}

.dashboard-filter-surface,
.dashboard-panel,
.dashboard-table-panel {
  border-radius: var(--dashboard-surface-radius-v240);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.dashboard-filter-surface {
  padding: 20px 20px 18px;
}

.dashboard-panel-header,
.dashboard-filter-header,
.dashboard-table-toolbar {
  gap: 18px;
}

.dashboard-filter-grid,
.return-filter-grid {
  gap: 14px;
  margin-top: 18px;
}

.dashboard-filter-field {
  gap: 7px;
}

.dashboard-filter-field input,
.dashboard-modal-field input,
.return-save-view input {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
}

.dashboard-input-with-icon input {
  padding-left: 35px;
}

.dashboard-filter-footer,
.return-filter-footer {
  margin-top: 16px;
  gap: 16px;
}

.dashboard-quick-ranges {
  gap: 8px;
}

.dashboard-range-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
}

.dashboard-kpi-grid,
.return-kpi-grid,
.return-analytics-grid {
  gap: 18px;
}

.return-trend-panel,
.dashboard-footer {
  margin-top: 0;
}

.dashboard-kpi-card {
  min-height: 156px;
  padding: 18px 18px 16px;
}

.dashboard-table-panel {
  padding: 18px;
}

.return-trend-panel,
.return-reason-panel,
.return-other-panel {
  padding: 20px;
}

.dashboard-table-meta {
  margin-top: 14px;
  margin-bottom: 14px;
}

.dashboard-footer {
  padding: 0 2px 8px;
}

.return-checkbox-field {
  min-height: 40px;
  align-self: end;
  padding-bottom: 10px;
}

.return-checkbox-field input {
  margin: 0;
}

/* Custom select shell v2.4.0 */
.dashboard-filter-field > select.dashboard-native-select-hidden,
.return-save-view > select.dashboard-native-select-hidden,
.dashboard-chart-controls > select.dashboard-native-select-hidden,
.dashboard-table-toolbar select.dashboard-native-select-hidden {
  display: none !important;
}

.dashboard-select-shell {
  position: relative;
  width: 100%;
}

.dashboard-select-trigger {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--p-border-strong, #cfd6e4);
  border-radius: 10px;
  background: var(--p-bg-surface, #fff);
  box-shadow: var(--p-shadow-xs);
  color: var(--p-text, #101828);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.dashboard-select-trigger:hover {
  background: var(--p-bg-surface-hover, #f8fafc);
  transform: translateY(-1px);
}

.dashboard-select-shell.open .dashboard-select-trigger,
.dashboard-select-trigger:focus-visible {
  outline: none;
  border-color: var(--p-focus, #3347ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-focus, #3347ff) 18%, transparent), var(--p-shadow-xs);
}

.dashboard-select-trigger:disabled {
  cursor: not-allowed;
  opacity: .6;
  transform: none;
}

.dashboard-select-trigger-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-select-trigger-text.placeholder {
  color: var(--p-text-subdued, #667085);
}

.dashboard-select-chevron {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--p-icon-subdued, #667085);
  transition: transform .16s ease;
}

.dashboard-select-shell.open .dashboard-select-chevron {
  transform: rotate(180deg);
}

.dashboard-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 420;
  max-height: var(--dashboard-select-menu-max-height-v240);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--p-border-subdued, #dbe2ec);
  border-radius: 12px;
  background: var(--p-bg-surface, #fff);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .14);
}

.dashboard-select-menu[hidden] {
  display: none !important;
}

.dashboard-select-shell.opens-upward .dashboard-select-menu {
  top: auto;
  bottom: calc(100% + 8px);
}

.dashboard-select-option {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--p-text, #101828);
  font: inherit;
  font-size: 12px;
  font-weight: 560;
  text-align: left;
  cursor: pointer;
}

.dashboard-select-option:hover,
.dashboard-select-option:focus-visible {
  outline: none;
  background: var(--p-bg-fill, #f3f4f8);
}

.dashboard-select-option.selected {
  background: var(--p-shopline-blue-soft, rgba(51, 71, 255, .09));
  color: var(--p-primary, #3347ff);
  font-weight: 650;
}

.dashboard-select-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.dashboard-select-option-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-select-option-check {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.dashboard-select-option.selected .dashboard-select-option-check {
  opacity: 1;
}

@media (max-width: 1100px) {
  #dashboardWorkspace:not([hidden]),
  #returnsWorkspace:not([hidden]) {
    gap: 16px;
  }

  .dashboard-kpi-grid,
  .return-kpi-grid,
  .return-analytics-grid {
    gap: 16px;
  }
}

@media (max-width: 720px) {
  .operations-workspace-tabs,
  .dashboard-view-bar,
  .return-view-bar,
  .dashboard-filter-surface,
  .dashboard-table-panel {
    border-radius: 14px;
  }

  .dashboard-view-bar,
  .return-view-bar {
    padding: 8px;
  }

  .dashboard-table-panel,
  .return-reason-panel,
  .return-other-panel,
  .return-trend-panel {
    padding: 16px;
  }

  .dashboard-select-menu {
    max-height: 240px;
  }
}