// RunForge 用户端 / 管理端统一设计令牌（绿色系）
@store-primary: #1b3022;
@store-primary-light: #2d4a38;
@store-accent: #52b878;
@store-accent-hover: #3fa866;
@store-bg: #f4faf6;
@store-card-bg: #ffffff;
@store-card-border: #e2efe6;
@store-text-muted: #4a5c52;
@store-radius: 16px;
@store-radius-sm: 12px;
@store-shadow: 0 4px 24px rgba(27, 48, 34, 0.06);
@store-shadow-hover: 0 12px 40px rgba(27, 48, 34, 0.12);
@store-price: #e85d04;
@store-cover-bg: linear-gradient(135deg, #e8f5ec 0%, #d4f0dc 100%);
// 内容区宽度：相对父级 100%，窄栏用 rem 上限（非固定 px）
@store-content-narrow: min(100%, 42rem);
@store-page-padding-x: clamp(12px, 2.5vw, 40px);
@store-page-padding-bottom: clamp(20px, 3vh, 40px);

@app-breakpoint-sm: 576px;
@app-breakpoint-md: 768px;
@app-breakpoint-lg: 992px;
@app-breakpoint-xl: 1280px;

// —— 页面容器（兼容旧 .container）——
.container,
.store-page,
.app-page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 @store-page-padding-x @store-page-padding-bottom;
  box-sizing: border-box;
}

.app-page--full,
.service-page,
.order-page,
.order-detail-page,
.power-page {
  width: 100%;
  max-width: none;
}

.app-page--wide {
  max-width: none;
}

.app-page__inner,
.service-page__inner,
.power-page__inner,
.order-page__inner,
.order-detail-page__inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.app-page__inner--wide,
.service-page__inner--wide,
.power-page__inner--wide,
.order-page__inner,
.order-detail-page__inner {
  max-width: 100%;
  width: 100%;
}

.app-page__inner--narrow,
.service-page__inner:not(.service-page__inner--wide),
.power-page__inner:not(.power-page__inner--wide) {
  max-width: @store-content-narrow;
  width: 100%;
}

// —— 页头 / 工具栏 ——
.app-page-header,
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;

  @media (min-width: @app-breakpoint-md) {
    gap: 16px;
    margin-bottom: 20px;
  }

  &__text {
    flex: 1 1 200px;
    min-width: 0;
  }

  &__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
  }
}

.store-section-title {
  margin: 0 0 4px;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 600;
  color: @store-primary;
  line-height: 1.3;
}

.store-section-desc {
  margin: 0;
  font-size: 0.9rem;
  color: @store-text-muted;
  line-height: 1.5;
}

.app-notice,
.notice {
  margin-bottom: 16px;
  border-radius: @store-radius-sm;
}

// —— 按钮 ——
.app-btn-primary,
.submit-btn,
.primary-btn {
  border-radius: 999px;
  background: @store-primary !important;
  border-color: @store-primary !important;

  &:hover:not(:disabled) {
    background: @store-primary-light !important;
    border-color: @store-primary-light !important;
  }
}

.buttonGroup,
.app-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;

  @media (min-width: @app-breakpoint-md) {
    gap: 10px;
  }
}

// —— 卡片 ——
.container .arco-card,
.store-page .arco-card,
.app-page .arco-card,
.app-card {
  max-width: 100%;
  overflow: visible;
  border-radius: @store-radius;
  border: 1px solid @store-card-border;
  box-shadow: @store-shadow;
  margin-bottom: 16px;

  .arco-card-header {
    border-bottom: 1px solid @store-card-border;
  }

  .arco-card-header-title {
    font-weight: 600;
    color: @store-primary;
  }

  .arco-card-body {
    overflow: visible;
  }
}

// —— 表格（移动端横向滚动）——
.app-table-wrap,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;

  .arco-table {
    min-width: 640px;
  }
}

// 表格单元格垂直居中（避免全局改造后文字贴顶）
.store-page .arco-card {
  .arco-table-td {
    vertical-align: middle;
  }

  .arco-table-cell {
    align-items: center;
  }
}

.app-table-ellipsis {
  line-height: 1.45;
}

// —— 筛选表单响应式 ——
.app-query-form {
  .arco-form-item {
    margin-bottom: 12px;
  }
}

// —— 移动端筛选折叠（桌面端始终展示表单项）——
.app-query-filter {
  margin-bottom: 16px;

  &__chevron {
    margin-left: 4px;
    transition: transform 0.2s ease;
  }

  @media (max-width: @app-breakpoint-md) {
    margin-bottom: 12px;

    &__toggle {
      width: 100%;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: @store-radius-sm;
      color: @store-primary;
      border-color: #c5d9cc;
      background: @store-card-bg;
    }

    &.is-expanded {
      .app-query-filter__panel {
        margin-top: 10px;
      }

      .app-query-filter__chevron {
        transform: rotate(180deg);
      }
    }

    // 避免各页 queryForm / query-row 额外 margin 与组件间距叠加
    .queryForm,
    .query-row {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
  }

  @media (min-width: (@app-breakpoint-md + 1px)) {
    &__toggle {
      display: none !important;
    }
  }
}

@media (max-width: @app-breakpoint-md) {
  .app-query-filter + .arco-alert,
  .app-query-filter + .notice {
    margin-top: 0 !important;
  }

  // 水平表单在移动端堆叠为上下行时，label 默认仍右对齐，统一改为靠左
  .arco-form-item-label-col {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .arco-form-item-label-col > .arco-form-item-label,
  .arco-form-item-label-col > label {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  // 表格底部分页：换行展示，隐藏跳页，避免超出卡片
  .arco-table-pagination {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 10px 0 4px;
    box-sizing: border-box;

    .arco-pagination {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      row-gap: 8px;
      column-gap: 6px;
      width: 100%;
      max-width: 100%;
      margin: 0;
    }

    .arco-pagination-total {
      order: 1;
      flex: 0 0 100%;
      width: 100%;
      margin-right: 0 !important;
      text-align: center;
      justify-content: center;
      line-height: 0.8;
      color: #666;
    }

    .arco-pagination-list {
      order: 2;
      flex: 1 1 auto;
      max-width: 100%;
      margin: 0 !important;
      justify-content: center;
      flex-wrap: wrap;
      row-gap: 4px;
    }

    .arco-pagination-options {
      order: 3;
      flex: 0 0 100%;
      width: 100%;
      margin-left: 0 !important;
      padding-left: 0 !important;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .arco-pagination-jumper {
      display: none !important;
    }

    .arco-pagination-item,
    .arco-pagination-item-previous,
    .arco-pagination-item-next {
      min-width: 28px;
    }

    .arco-select-view-single {
      max-width: min(100%, 140px);
    }
  }
}

@media (max-width: @app-breakpoint-lg) {
  .app-query-form .arco-row > .arco-col,
  .queryForm .arco-row > .arco-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .app-query-form .arco-divider-vertical,
  .queryForm + .arco-divider,
  .queryForm .arco-divider-vertical {
    display: none;
  }

  .app-query-actions,
  .queryForm ~ .arco-col[style*='text-align: right'] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-top: 4px;
  }

  .arco-modal {
    max-width: calc(100vw - 32px);
  }

  .arco-drawer {
    max-width: 100vw;
  }
}

// —— Spin ——
.store-spin {
  display: block !important;
  width: 100% !important;

  .arco-spin-children {
    width: 100%;
  }
}

// —— 商品网格 ——
.goods-grid {
  @media (max-width: @app-breakpoint-md) {
    grid-template-columns: 1fr !important;
  }
}

// —— 搜索框 ——
.store-search.arco-input-wrapper {
  background-color: @store-card-bg !important;
  border: 1px solid #c5d9cc !important;
  border-radius: 999px !important;
  box-shadow: @store-shadow !important;
  transition: border-color 0.2s, box-shadow 0.2s;

  &:hover {
    border-color: @store-accent !important;
    background-color: @store-card-bg !important;
  }

  &.arco-input-focus {
    border-color: @store-accent !important;
    box-shadow: 0 0 0 3px fade(@store-accent, 22%) !important;
  }

  .arco-input {
    background: transparent !important;
    color: @store-primary;

    &::placeholder {
      color: @store-text-muted;
    }
  }

  .arco-input-suffix .arco-icon {
    color: @store-accent;
  }
}

// —— 弹窗（移动端宽度，含 Modal.confirm）——
@media (max-width: @app-breakpoint-md) {
  .arco-modal-wrapper {
    box-sizing: border-box;
    padding: 0 12px;
    max-width: 100vw;
  }

  .arco-modal,
  .arco-modal-simple,
  .arco-modal-default {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin: 12px auto !important;
    box-sizing: border-box;
  }

  .arco-modal .arco-modal-title,
  .arco-modal .arco-modal-body {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .arco-modal .arco-modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }

  .arco-modal .arco-modal-header {
    padding: 14px 16px 10px;
  }

  .arco-modal .arco-modal-body,
  .arco-modal .arco-modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .arco-modal .arco-modal-footer,
  .arco-modal-confirm .arco-modal-footer,
  .arco-modal-simple .arco-modal-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: stretch;
    gap: 10px;

    .arco-btn {
      flex: 1 1 0;
      min-width: 0;
      width: auto !important;
      margin: 0 !important;
    }
  }

  .arco-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .arco-drawer .arco-drawer-body {
    padding: 14px 16px 16px;
  }

  .arco-drawer .arco-drawer-footer {
    padding: 10px 16px 14px;
  }

  .arco-drawer .arco-drawer-footer .arco-btn {
    width: 100%;
  }

  .arco-tabs-nav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .arco-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .arco-tabs-nav .arco-tabs-nav-type-line,
  .arco-tabs-nav .arco-tabs-nav-type-rounded,
  .arco-tabs-nav .arco-tabs-nav-type-card {
    min-width: max-content;
  }

  .arco-descriptions-layout-inline-horizontal .arco-descriptions-item {
    width: 100%;
  }

  .arco-descriptions-layout-inline-horizontal .arco-descriptions-item-label,
  .arco-descriptions-layout-inline-horizontal .arco-descriptions-item-value {
    width: auto !important;
  }
}

