dtm_vue/src/assets/styles/order-dashboard.scss

.order-dashboard-page {
  min-height: calc(100vh - 84px);
  padding: 24px !important;
  background: #eef3fb !important;
  color: #17243b;
}

.order-dashboard-page .page-header {
  margin-bottom: 18px !important;
  padding: 24px 28px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: linear-gradient(110deg, #ffffff 0%, #f7f9ff 56%, #eaf0ff 100%) !important;
  box-shadow: 0 20px 45px rgba(42, 61, 115, 0.08) !important;
}

.order-dashboard-page .main-title,
.order-dashboard-page .page-title {
  margin: 0 !important;
  color: #101b33 !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.2;
}

.order-dashboard-page .subtitle,
.order-dashboard-page .page-subtitle,
.order-dashboard-page .page-description {
  margin: 10px 0 0 !important;
  color: #7b8498 !important;
  font-size: 14px !important;
  line-height: 1.7;
}

.order-dashboard-page .order-date-filter {
  margin-bottom: 18px;
  padding: 16px 18px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(38, 51, 96, 0.06);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

.order-dashboard-page .order-date-filter .el-form-item {
  height: 38px;
  margin: 0;
  padding: 3px;
  border-radius: 15px;
  background: #f6f8ff;
  display: flex;
  align-items: center;
}

.order-dashboard-page .order-date-filter .el-form-item:first-child {
  grid-column: 1 / -1;
  justify-self: start;
}

.order-dashboard-page .order-date-filter .el-form-item__label {
  height: 32px;
  padding: 0 10px 0 8px;
  color: #5d667a;
  font-size: 13px;
  font-weight: 700;
  line-height: 32px;
}

.order-dashboard-page .order-date-filter .el-form-item__content,
.order-dashboard-page .order-date-filter .date-action-row,
.order-dashboard-page .order-date-filter .filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 32px;
  white-space: nowrap;
}

.order-dashboard-page .order-date-filter .el-radio-group {
  display: inline-flex;
  gap: 4px;
}

.order-dashboard-page .order-date-filter .el-radio-button__inner {
  min-width: 56px;
  height: 32px;
  padding: 0 14px;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent;
  color: #667086;
  line-height: 32px;
  box-shadow: none !important;
}

.order-dashboard-page .order-date-filter .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: #6267f2;
  color: #fff;
  box-shadow: 0 8px 18px rgba(98, 103, 242, 0.22) !important;
}

.order-dashboard-page .order-date-filter .el-date-editor.el-input__inner {
  width: 350px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #29364f;
  box-shadow: inset 0 0 0 1px rgba(98, 103, 242, 0.12);
}

.order-dashboard-page .order-date-filter .el-date-editor .el-range-input {
  width: 128px;
  color: #29364f;
  font-weight: 600;
  background: transparent;
}

.order-dashboard-page .order-date-filter .el-date-editor .el-range-separator {
  width: 32px;
  color: #8c94a8;
  line-height: 30px;
}

.order-dashboard-page .order-date-filter .el-date-editor .el-range__icon,
.order-dashboard-page .order-date-filter .el-date-editor .el-range__close-icon {
  color: #9aa4bc;
  line-height: 30px;
}

.order-dashboard-page .order-date-filter .el-button {
  height: 32px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 700;
}

.order-dashboard-page .order-date-filter .el-button--primary {
  border-color: #6267f2;
  background: #6267f2;
  box-shadow: 0 8px 18px rgba(98, 103, 242, 0.22);
}

.order-dashboard-page .order-date-filter .el-button--default {
  border-color: transparent;
  background: #fff;
  color: #6e778b;
}

.order-dashboard-page .order-date-filter .el-button--warning.is-plain {
  border-color: transparent;
  background: #fff6e8;
  color: #f39a20;
}

.order-dashboard-page .order-date-filter .el-button + .el-button {
  margin-left: 0;
}

.order-dashboard-page .chart-card,
.order-dashboard-page .table-card,
.order-dashboard-page .table-container,
.order-dashboard-page .chart-container,
.order-dashboard-page .chart-area,
.order-dashboard-page .chart-wrapper,
.order-dashboard-page .leakage-card {
  position: relative;
  border: 0 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(42, 61, 115, 0.08) !important;
}

.order-dashboard-page .chart-card,
.order-dashboard-page .table-card,
.order-dashboard-page .table-container,
.order-dashboard-page .chart-container,
.order-dashboard-page .chart-area,
.order-dashboard-page .chart-wrapper {
  padding: 22px !important;
}

.order-dashboard-page .inner-chart-card {
  border-radius: 18px !important;
  box-shadow: inset 0 0 0 1px #eef1f7 !important;
}

.order-dashboard-page .chart-title,
.order-dashboard-page .table-title {
  margin: 0 0 16px !important;
  color: #101b33 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.order-dashboard-page .card-header,
.order-dashboard-page .table-header {
  margin-bottom: 18px !important;
}

.order-dashboard-page .kpi-card,
.order-dashboard-page .kpi-cards-grid .kpi-card {
  min-height: 142px;
  padding: 20px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 16px 34px rgba(37, 50, 88, 0.08) !important;
  overflow: hidden;
}

.order-dashboard-page .kpi-card-grid .kpi-card:first-child,
.order-dashboard-page .kpi-cards-grid .kpi-card:first-of-type {
  background: linear-gradient(145deg, #7935f5 0%, #6028ee 100%) !important;
  box-shadow: 0 20px 36px rgba(99, 50, 236, 0.24) !important;
}

.order-dashboard-page .kpi-card-grid .kpi-card:first-child .kpi-title,
.order-dashboard-page .kpi-card-grid .kpi-card:first-child .kpi-value,
.order-dashboard-page .kpi-cards-grid .kpi-card:first-of-type .card-title,
.order-dashboard-page .kpi-cards-grid .kpi-card:first-of-type .main-value,
.order-dashboard-page .kpi-cards-grid .kpi-card:first-of-type .trend-text {
  color: #fff !important;
}

.order-dashboard-page .kpi-title,
.order-dashboard-page .card-title {
  color: #7b8498 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.order-dashboard-page .kpi-value,
.order-dashboard-page .main-value {
  color: #121d35 !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
}

.order-dashboard-page .icon-wrapper {
  border-radius: 14px !important;
  background: #f1efff !important;
  color: #6c3df4 !important;
}

.order-dashboard-page .search-box .el-input__inner {
  border: 0;
  border-radius: 12px 0 0 12px;
  background: #f6f8ff;
}

.order-dashboard-page .search-box .el-input-group__append {
  border: 0;
  border-radius: 0 12px 12px 0;
  background: #6267f2;
  color: #fff;
}

.order-dashboard-page table,
.order-dashboard-page .data-table {
  width: 100%;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 14px;
}

.order-dashboard-page th,
.order-dashboard-page .data-table th {
  border: 0 !important;
  background: #f8f9fd !important;
  color: #697287 !important;
  font-weight: 800 !important;
}

.order-dashboard-page td,
.order-dashboard-page .data-table td {
  border: 0 !important;
  border-bottom: 1px solid #eef1f7 !important;
  color: #29364f;
}

.order-dashboard-page tr:hover td,
.order-dashboard-page .data-row:hover {
  background: #f8f9ff !important;
}

.order-dashboard-page .pagination,
.order-dashboard-page .pagination-controls {
  margin-top: 18px !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.order-dashboard-page .pagination button,
.order-dashboard-page .pagination-controls button,
.order-dashboard-page .page-button {
  height: 34px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #f6f8ff !important;
  color: #606b82 !important;
  font-weight: 700;
}

.order-dashboard-page .pagination button:hover:not(:disabled),
.order-dashboard-page .pagination-controls button:hover:not(:disabled),
.order-dashboard-page .page-button:hover:not(:disabled) {
  background: #6267f2 !important;
  color: #fff !important;
}

.order-dashboard-page .status-overlay {
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

.order-dashboard-page .order-loading-panel {
  border-radius: inherit;
}

.order-date-popper,
.shop-report-date-popper {
  width: 646px;
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff;
  box-shadow: 0 24px 60px rgba(32, 45, 82, 0.16) !important;
  overflow: hidden !important;
}

.order-date-popper .popper__arrow,
.shop-report-date-popper .popper__arrow {
  display: none;
}

.order-date-popper .el-picker-panel__body,
.shop-report-date-popper .el-picker-panel__body {
  min-width: 646px;
}

.order-date-popper .el-date-range-picker__content,
.shop-report-date-popper .el-date-range-picker__content {
  width: 50%;
  padding: 20px 22px 18px;
}

.order-date-popper .el-date-range-picker__content.is-left,
.shop-report-date-popper .el-date-range-picker__content.is-left {
  border-right-color: #eef1f7;
}

.order-date-popper .el-date-range-picker__header,
.shop-report-date-popper .el-date-range-picker__header {
  height: 32px;
  margin-bottom: 12px;
  line-height: 32px;
}

.order-date-popper .el-date-range-picker__header div,
.shop-report-date-popper .el-date-range-picker__header div {
  color: #24314a;
  font-size: 16px;
  font-weight: 700;
}

.order-date-popper .el-picker-panel__icon-btn,
.shop-report-date-popper .el-picker-panel__icon-btn {
  color: #8c94a8;
  font-size: 13px;
  line-height: 32px;
}

.order-date-popper .el-date-table th,
.shop-report-date-popper .el-date-table th {
  padding: 6px 0 10px;
  color: #7d879b;
  font-weight: 700;
  border-bottom: 0;
}

.order-date-popper .el-date-table td,
.shop-report-date-popper .el-date-table td {
  height: 36px;
  padding: 2px 0;
  color: #26364f;
}

.order-date-popper .el-date-table td div,
.shop-report-date-popper .el-date-table td div {
  height: 32px;
  padding: 2px 0;
  border-radius: 10px;
}

.order-date-popper .el-date-table td span,
.shop-report-date-popper .el-date-table td span {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  line-height: 28px;
}

.order-date-popper .el-date-table td.disabled div,
.shop-report-date-popper .el-date-table td.disabled div {
  background: transparent;
}

.order-date-popper .el-date-table td.disabled span,
.order-date-popper .el-date-table td.prev-month span,
.order-date-popper .el-date-table td.next-month span,
.shop-report-date-popper .el-date-table td.disabled span,
.shop-report-date-popper .el-date-table td.prev-month span,
.shop-report-date-popper .el-date-table td.next-month span {
  color: #b7bfce;
}

.order-date-popper .el-date-table td.in-range div,
.order-date-popper .el-date-table td.in-range div:hover,
.shop-report-date-popper .el-date-table td.in-range div,
.shop-report-date-popper .el-date-table td.in-range div:hover {
  background: #f4f6ff;
}

.order-date-popper .el-date-table td.available:hover span,
.shop-report-date-popper .el-date-table td.available:hover span {
  background: #f0f2ff;
  color: #6267f2;
}

.order-date-popper .el-date-table td.start-date span,
.order-date-popper .el-date-table td.end-date span,
.order-date-popper .el-date-table td.current:not(.disabled) span,
.shop-report-date-popper .el-date-table td.start-date span,
.shop-report-date-popper .el-date-table td.end-date span,
.shop-report-date-popper .el-date-table td.current:not(.disabled) span {
  background: #6267f2;
  color: #fff;
  box-shadow: 0 8px 16px rgba(98, 103, 242, 0.24);
}

@media (max-width: 768px) {
  .order-dashboard-page {
    padding: 14px !important;
  }

  .order-dashboard-page .order-date-filter {
    grid-template-columns: 1fr;
  }

  .order-dashboard-page .order-date-filter .el-form-item {
    width: 100%;
    height: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  .order-dashboard-page .order-date-filter .date-action-row {
    width: 100%;
    flex-wrap: wrap;
  }

  .order-dashboard-page .order-date-filter .el-date-editor.el-input__inner {
    width: 100%;
  }
}