/* ============================================================
 * 大健康门店管理系统 · 多端显示与操作适配
 * （须在 admin.css 及页面内联 <style> 之后引入，以覆盖其规则）
 * ============================================================ */

html { -webkit-text-size-adjust: 100%; }

.el-button,
.ghs-btn-text,
.quick-action-btn,
.todo-item,
.sidebar .el-menu-item,
.sidebar .el-sub-menu__title {
  -webkit-tap-highlight-color: transparent;
}

/* ============ 平板 ≤ 992px ============ */
@media (max-width: 992px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .content-area { padding: 16px; }
}

/* ============ 手机 ≤ 768px ============ */
@media (max-width: 768px) {
  /* ---- 页面骨架 ---- */
  .content-area { padding: 12px 10px; }
  .page-card { padding: 14px 12px; border-radius: 10px; min-height: 0; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  .page-header h3 { font-size: 16px; }
  .page-header > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

  /* ---- 顶栏：隐藏冗余文字，保留核心操作 ---- */
  .top-bar { padding: 0 10px; }
  .top-bar-left { gap: 4px; }
  .top-bar-left .welcome-text,
  .top-bar-left > span[style] { display: none; }
  .session-timer { display: none !important; }
  .top-bar .el-button { margin-left: 0; }

  /* ---- 移动端抽屉导航 ---- */
  .app-layout { position: relative; }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: min(78vw, 270px) !important;
    max-width: 85vw;
    z-index: 1301 !important;
    transform: translateX(-106%);
    visibility: hidden;
    transition: transform .28s ease, visibility .28s ease;
    box-shadow: none !important;
    overflow-y: auto;
  }
  .sidebar.collapsed { width: min(78vw, 270px) !important; }
  .app-layout.sidebar-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .28) !important;
  }
  .sidebar-mask {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, .5);
    display: none;
  }
  .app-layout.sidebar-open .sidebar-mask { display: block; }

  /* ---- 搜索区：纵向堆叠，控件全宽（方便触控） ---- */
  .search-bar { flex-direction: column; align-items: stretch; padding: 12px; }
  .search-bar > * {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 0 auto;
  }
  .search-bar .el-date-editor { max-width: 100%; }

  /* ---- 统计卡片 ---- */
  .stat-card { padding: 14px 12px; gap: 12px; }
  .stat-card .stat-icon { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; }
  .stat-card .value { font-size: 20px; }
  .stat-card .sub { line-height: 1.5; }

  /* ---- 原生表格：横向滑动保真 ---- */
  .ghs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ghs-table {
    width: max-content !important;
    min-width: 100%;
    table-layout: auto !important;
  }
  .ghs-table thead th { padding: 10px 10px; font-size: 12px; }
  .ghs-table tbody td { padding: 9px 10px; }
  .ghs-table-empty { padding: 36px 12px; }

  /* ---- 分页 ---- */
  .pagination-wrap { justify-content: center; flex-wrap: wrap; gap: 6px; }
  .pagination-wrap .el-pagination { max-width: 100%; overflow-x: auto; }

  /* ---- 描述列表（只读信息，横向滑动） ---- */
  .el-descriptions { overflow-x: auto; }
  .el-descriptions__body .el-descriptions__table { width: max-content; min-width: 100%; }

  /* ---- 店员端：快捷按钮 / 待办 ---- */
  .quick-actions { gap: 10px; }
  .quick-action-btn { flex: 1 1 calc(50% - 10px); min-width: 120px; padding: 12px 8px; }
  .quick-action-btn .icon { font-size: 22px; margin-bottom: 4px; }
  .todo-item { align-items: flex-start; padding: 10px; }
  .todo-item .todo-time { display: none; }

  /* ---- 双栏数据卡片（超管/店长） ---- */
  .row-2 { gap: 12px; }

  /* ---- 对话框：接近全屏，便于操作 ---- */
  .el-dialog {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    margin: 6vh auto 4vh !important;
  }
  .el-dialog__header { padding: 14px 16px 6px !important; }
  .el-dialog__title { font-size: 15px !important; }
  .el-dialog__body { padding: 12px 16px 8px !important; }
  .el-dialog__body { max-height: calc(100vh - 130px); overflow-y: auto; }
  .el-dialog__footer { padding: 8px 16px 14px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .el-dialog__footer .el-button + .el-button { margin-left: 0; }
  .el-message-box { width: calc(100vw - 48px) !important; max-width: 100% !important; }

  /* ---- Element 卡片 ---- */
  .el-card__body { padding: 14px; }

  /* ---- 通用按钮宽度适中 ---- */
  .page-header .el-button { margin: 0; }
  .page-header .el-date-editor { width: 100% !important; }
}

/* ============ 窄屏 ≤ 560px（手机竖屏为主） ============ */
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; gap: 10px; }
  .row-2 { grid-template-columns: 1fr !important; }

  /* 表单 label 置顶，控件独占一行，符合单手操作 */
  .el-form-item { display: block; margin-bottom: 14px; }
  .el-form-item__label {
    display: block;
    width: auto !important;
    text-align: left;
    justify-content: flex-start;
    line-height: 1.4;
    margin-bottom: 4px;
  }
  .el-form-item__content { display: block; }
  .el-form-item__content .el-input,
  .el-form-item__content .el-select,
  .el-form-item__content .el-date-editor,
  .el-form-item__content .el-input-number { width: 100% !important; max-width: 100%; }

  /* 登录页 */
  .login-bg { padding: 16px; }
  .login-card {
    width: 100% !important;
    max-width: 420px;
    margin: 0;
    padding: 28px 20px !important;
  }
  .login-title { font-size: 22px; }
  .login-sub { font-size: 12px; margin-bottom: 20px; }
  .login-logo { margin-bottom: 18px; }
  .login-logo .logo-circle { width: 48px; height: 48px; font-size: 24px; }

  /* 分页简化 */
  .el-pagination__total,
  .el-pagination .el-pagination__jump { display: none !important; }
  .el-pagination .el-pager li { min-width: 30px; height: 30px; line-height: 30px; }
}

/* ============ 极限小屏 ≤ 380px ============ */
@media (max-width: 380px) {
  .content-area { padding: 10px 8px; }
  .page-card { padding: 12px 10px; }
  .el-pagination .el-pager li { min-width: 26px; height: 26px; line-height: 26px; font-size: 12px; }
}