/**
 * 列表页全局样式 — 统一查询区栅格对齐、工具栏按钮、表格排版
 * 匹配 .app-container 内任意层级的标准 RuoYi 列表结构（含 Tab / el-col / wrapper div）
 */
@import './variables.scss';

// ---- 查询筛选区 ----
$filter-label-width: 90px;
$filter-control-width: 200px;
$filter-date-width: 240px;
$filter-item-width: 310px;
$filter-gap-x: 16px;
$filter-gap-y: 12px;

@mixin list-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: $filter-gap-x;
  row-gap: $filter-gap-y;
  margin-bottom: 16px !important;
  padding: 16px 16px 4px;
  background: #f8fafc;
  border: 1px solid #ebeef5;
  border-radius: 8px;

  .el-form-item {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    width: $filter-item-width;
    min-height: 32px;

    .el-form-item__label {
      width: $filter-label-width !important;
      flex-shrink: 0;
      padding-right: 8px;
      line-height: 32px;
      font-weight: 400;
      color: #606266;
    }

    .el-form-item__content {
      flex: 1;
      min-width: 0;
      line-height: 32px;

      > .el-input,
      > .el-select,
      > .el-cascader,
      > .vue-treeselect,
      > .el-input-number {
        width: $filter-control-width !important;
      }

      > .el-date-editor--daterange,
      > .el-date-editor--datetimerange,
      > .el-date-editor--monthrange {
        width: $filter-date-width !important;
      }

      > .el-date-editor.el-input {
        width: $filter-control-width !important;
      }

      [style*="width"] {
        &.el-input,
        &.el-select,
        &.el-date-editor {
          width: $filter-control-width !important;
        }
      }
    }

    &:last-child:not([label]),
    &.filter-actions {
      width: auto;
      min-width: 140px;

      .el-form-item__content {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }
  }
}

@mixin list-toolbar-row {
  margin-bottom: 12px !important;
  padding: 2px 0 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .el-col {
    width: auto !important;
    flex: 0 0 auto;
    padding-left: 0 !important;
    padding-right: 8px !important;
  }

  .el-button--mini,
  .el-button--small {
    padding: 7px 14px;
    font-size: 13px;
  }

  .el-button--success:not(.is-plain) {
    color: $primary;
    background-color: $primary-light;
    border-color: #c4b5fd;

    &:hover,
    &:focus {
      color: #fff;
      background-color: $primary;
      border-color: $primary;
    }
  }

  .el-button--warning:not(.is-plain) {
    color: #606266;
    background-color: #fff;
    border-color: #dcdfe6;

    &:hover,
    &:focus {
      color: $primary;
      background-color: $primary-light;
      border-color: #c4b5fd;
    }
  }
}

@mixin list-table-style {
  border-radius: 6px;
  overflow: hidden;

  &::before {
    display: none;
  }

  th {
    background-color: #f5f7fa !important;
    color: #606266;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 0;
  }

  td {
    padding: 8px 0;
    color: #555;
    font-size: 13px;
  }

  .cell {
    line-height: 22px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .small-padding .cell,
  .fixed-width .cell {
    white-space: normal;
    overflow: visible;
  }

  .el-tag {
    margin: 0 2px;
  }

  &:not(.el-table--striped) .el-table__body tr:nth-child(even) > td {
    background-color: #fafbfc;
  }
}

.app-container {
  // 查询区：匹配任意层级 inline 表单（Tab / el-col / wrapper div / filter-card 等）
  .el-form.el-form--inline {
    @include list-filter-form;
  }

  // filter-card：外层已有卡片，内层表单去重
  .filter-card {
    margin-bottom: 16px;
    padding: 16px 16px 4px;
    background: #f8fafc;
    border: 1px solid #ebeef5;
    border-radius: 8px;

    .el-form.el-form--inline,
    .filter-form.el-form--inline {
      margin-bottom: 0 !important;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
    }
  }

  // ---- 工具栏 ----
  .el-row.mb8,
  .toolbar-row > .el-row.mb8,
  .toolbar-row.el-row.mb8 {
    @include list-toolbar-row;
  }

  // ---- 表格 ----
  .el-table,
  .table-card > .el-table {
    @include list-table-style;
  }

  .table-card {
    margin-bottom: 8px;
  }

  .toolbar-row {
    margin-bottom: 4px;
  }
}

// 查询按钮 cyan 与主题 primary 统一
.el-button--cyan {
  background-color: $primary !important;
  border-color: $primary !important;
  color: #fff !important;

  &:hover,
  &:focus {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #fff !important;
  }

  &:active {
    background-color: $primary-dark !important;
    border-color: $primary-dark !important;
  }
}

.app-container .el-form--inline .el-form-item:last-child .el-button + .el-button {
  margin-left: 10px;
}
