/* ================================================================
   鲜花商城后台管理系统 - 全局响应式样式
   断点: 手机 <768px | 平板 768-1024px | PC >1024px
   ================================================================ */

/* ---------- 全局：防止 iOS 输入框获焦时自动缩放页面 ---------- */
/* iOS Safari 在输入框字体小于 16px 时会自动 zoom，统一设为 16px 可规避 */
input,
textarea,
select,
.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner,
.el-cascader .el-input__inner,
.el-date-editor .el-input__inner,
.w-e-text-container,
.w-e-text {
  font-size: 16px !important;
}

/* 手机端保留 16px，平板和 PC 恢复正常字号 */
@media (min-width: 768px) {
  input,
  textarea,
  select,
  .el-input__inner,
  .el-textarea__inner,
  .el-select .el-input__inner,
  .el-cascader .el-input__inner,
  .el-date-editor .el-input__inner {
    font-size: 14px !important;
  }
}

/* ---------- 全局：禁止页面 touch 双指缩放（CSS 层兜底） ---------- */
html {
  touch-action: manipulation;
}

/* ---------- 通用工具 ---------- */
@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .hide-on-tablet {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  .hide-on-pc {
    display: none !important;
  }
}

/* ---------- Element UI el-table 横向滚动 ---------- */
@media (max-width: 1024px) {
  .el-table {
    width: 100% !important;
  }
  .el-table__body-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .el-table__header-wrapper {
    overflow-x: auto !important;
  }
  /* 隐藏手机端次要列 */
  .mobile-hide {
    display: none !important;
  }
}

/* ---------- Element UI el-dialog 响应式 ---------- */
@media (max-width: 767px) {
  .el-dialog {
    width: 95% !important;
    margin-top: 5vh !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .el-dialog__body {
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    padding: 15px !important;
  }
  .el-dialog__footer {
    padding: 10px 15px !important;
  }
}

/* ---------- Element UI el-form 响应式 ---------- */
@media (max-width: 767px) {
  .el-form--label-left .el-form-item__label {
    float: none !important;
    width: auto !important;
    text-align: left !important;
    padding-bottom: 4px !important;
  }
  .el-form--label-left .el-form-item__content {
    margin-left: 0 !important;
  }
  .el-form-item {
    margin-bottom: 16px !important;
  }
  .el-form-item__content .el-input,
  .el-form-item__content .el-select,
  .el-form-item__content .el-cascader {
    width: 100% !important;
  }
}

/* ---------- Element UI el-pagination 响应式 ---------- */
@media (max-width: 767px) {
  .el-pagination {
    padding: 8px 0 !important;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .el-pagination__sizes,
  .el-pagination__jump {
    display: none !important;
  }
}

/* ---------- Element UI el-tabs 响应式 ---------- */
@media (max-width: 767px) {
  .el-tabs__header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .el-tabs__nav-wrap {
    overflow: visible !important;
  }
  .el-tabs__nav-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Element UI el-button 响应式 ---------- */
@media (max-width: 767px) {
  .el-button--small {
    padding: 7px 12px !important;
  }
}

/* ---------- Element UI el-tag 响应式 ---------- */
@media (max-width: 767px) {
  .el-tag {
    height: auto !important;
    padding: 0 6px !important;
    line-height: 22px !important;
    font-size: 11px !important;
    border-radius: 3px !important;
  }
  .el-tag.el-tag--mini {
    line-height: 18px !important;
    font-size: 10px !important;
    padding: 0 4px !important;
  }
  .el-tag.el-tag--small {
    line-height: 20px !important;
    font-size: 11px !important;
    padding: 0 5px !important;
  }
  /* 弹窗内标签间距优化 */
  .el-dialog .el-descriptions-item__content .el-tag {
    margin-right: 2px;
    margin-bottom: 2px;
  }
}

/* ---------- 通用 container 响应式 ---------- */
@media (max-width: 767px) {
  .container {
    padding: 12px !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .handle-box {
    flex-wrap: wrap;
    gap: 8px;
  }
  .handle-box .el-input,
  .handle-box .el-select {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 18px !important;
  }
}

/* ---------- 修复 el-table-column 在手机端的隐藏 ---------- */
@media (max-width: 767px) {
  .el-table .mobile-hide {
    display: none !important;
  }
  .el-table .mobile-hide th,
  .el-table .mobile-hide td {
    display: none !important;
  }
}

/* ================================================================
   手机端卡片式表格布局
   PC/平板端: el-table 正常显示, .mobile-card-list 隐藏
   手机端: el-table 隐藏, .mobile-card-list 显示
   ================================================================ */

/* PC/平板端隐藏卡片列表 */
.mobile-card-list {
  display: none;
}

@media (max-width: 767px) {
  /* 手机端隐藏 el-table，显示卡片列表 */
  .table-then-card {
    display: none !important;
  }
  .mobile-card-list {
    display: block;
  }

  /* ---- 卡片基础样式 ---- */
  .mobile-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mc-card {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s;
  }
  .mc-card:active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  /* 新订单高亮卡片 */
  .mc-card.mc-new {
    background-color: #fff8e1;
    border-color: #ffe8a3;
  }

  /* 卡片头部行 */
  .mc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f2f5;
  }
  .mc-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .mc-title {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    line-height: 1.4;
  }
  .mc-subtitle {
    font-size: 12px;
    color: #909399;
    line-height: 1.4;
  }

  /* 卡片字段行 */
  .mc-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.6;
  }
  .mc-row:last-child {
    margin-bottom: 0;
  }
  .mc-label {
    color: #909399;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 8px;
  }
  .mc-value {
    color: #303133;
    text-align: right;
    word-break: break-all;
    flex: 1;
    min-width: 0;
  }
  .mc-value-bold {
    font-weight: 600;
    color: #303133;
  }
  .mc-value-danger {
    color: #ff2000;
    font-weight: 600;
  }
  .mc-value-success {
    color: #67c23a;
    font-weight: 600;
  }
  .mc-value-warning {
    color: #e6a23c;
    font-weight: 600;
  }

  /* 卡片图片 */
  .mc-img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
  }

  /* 卡片操作按钮区 */
  .mc-actions {
    display: flex;
    gap: 0;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f2f5;
    flex-wrap: wrap;
  }
  .mc-actions .el-button {
    min-height: 36px;
    min-width: 60px;
    font-size: 13px;
    padding: 6px 12px;
  }

  /* 卡片内两列网格 */
  .mc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-bottom: 6px;
  }
  .mc-grid-2 .mc-row {
    margin-bottom: 0;
  }

  /* 卡片内缩略图区 */
  .mc-thumb-area {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .mc-thumb-area .mc-thumb-info {
    flex: 1;
    min-width: 0;
  }

  /* ---- 弹窗内 el-descriptions 移动端优化 ---- */
  .el-dialog .el-descriptions__title {
    font-size: 14px;
    margin-bottom: 8px;
  }
  /* 每组 el-descriptions 之间增加间距 */
  .el-dialog .el-descriptions {
    margin-bottom: 16px !important;
  }
  .el-dialog .el-descriptions:last-child {
    margin-bottom: 0 !important;
  }
  /* 非边框 descriptions: 每项独占一行，标签固定宽度 */
  .el-dialog .el-descriptions-item {
    display: flex !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed #f0f2f5;
  }
  .el-dialog .el-descriptions-item:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none;
  }
  .el-dialog .el-descriptions-item__label {
    min-width: 76px !important;
    max-width: 76px !important;
    width: 76px !important;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px !important;
    color: #909399 !important;
    margin-right: 10px !important;
  }
  .el-dialog .el-descriptions-item__content {
    flex: 1;
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.6 !important;
    word-break: break-all;
  }
  /* 标签组内间距 */
  .el-dialog .el-descriptions-item__content .el-tag + .el-tag {
    margin-left: 4px;
  }
  /* 边框 descriptions: 转为行内流式布局 */
  .el-dialog .el-descriptions.is-bordered table {
    display: block;
    width: 100%;
  }
  .el-dialog .el-descriptions.is-bordered tbody {
    display: block;
  }
  .el-dialog .el-descriptions.is-bordered tr {
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid #f0f2f5;
  }
  .el-dialog .el-descriptions.is-bordered tr:last-child {
    border-bottom: none;
  }
  .el-dialog .el-descriptions.is-bordered th,
  .el-dialog .el-descriptions.is-bordered td {
    display: inline;
    border: none !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.6;
  }
  .el-dialog .el-descriptions.is-bordered th {
    background: transparent !important;
    color: #909399 !important;
    font-weight: normal !important;
    margin-right: 4px;
  }
  .el-dialog .el-descriptions.is-bordered td {
    color: #303133;
    margin-right: 12px;
  }

  /* ---- 弹窗内卡片样式微调 ---- */
  .el-dialog .mobile-card-list {
    display: block;
  }
  .el-dialog .mc-card {
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .el-dialog .mc-actions .el-button {
    min-height: 36px;
    min-width: 50px;
  }

  /* ---- 收货信息卡片样式 ---- */
  .recipient-card {
    background: #f5f7fa;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 8px;
  }
  .recipient-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .recipient-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #303133;
  }
  .recipient-card-phone {
    font-size: 13px;
    color: #606266;
    margin-left: 8px;
  }
  .recipient-card-address {
    font-size: 13px;
    color: #909399;
    line-height: 1.5;
    word-break: break-all;
  }
  .recipient-card-copy {
    margin-top: 10px;
  }
  .recipient-card-copy .el-button {
    min-height: 36px;
  }
}