/* ============================================================
 * 深商财税管理后台 - 移动端响应式样式
 * 适用：所有菜单页面 (iPhone / Android 浏览器)
 * 设计断点：
 *   - 1024px : 平板（横屏）
 *   - 768px  : 平板（竖屏）/ 手机横屏
 *   - 480px  : 小屏手机
 *   - 380px  : 超窄屏
 * ============================================================ */

/* ===================== 1024px 平板适配 ===================== */
@media (max-width: 1024px) {
  /* 表格列稍微紧凑 */
  .el-table .cell { padding: 0 6px !important; }

  /* 多列布局开始变窄 */
  .el-col[class*="el-col-md-"] { max-width: 100% !important; flex: 0 0 100% !important; }
  .el-col-md-8, .el-col-md-6, .el-col-md-4 { max-width: 100% !important; flex: 0 0 100% !important; }
}

/* ===================== 768px 及以下 主适配 ===================== */
@media (max-width: 768px) {
  /* —— 全局重置 —— */
  html, body { font-size: 14px; }
  * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05); }

  /* —— 1. 顶部 Header 紧凑 —— */
  .header {
    height: 50px !important;
    padding: 0 12px !important;
  }
  .header-left { gap: 8px !important; min-width: 0; flex: 1; overflow: hidden; }
  .header-right { gap: 10px !important; flex-shrink: 0; }
  .user-info .user-name { display: none !important; }
  .user-info .el-avatar { width: 30px !important; height: 30px !important; }
  .message-bell { font-size: 19px !important; }
  .message-badge { margin-right: 4px; }
  /* 移动端显示当前页标题（面包屑） */
  .el-breadcrumb { display: flex !important; max-width: 100%; overflow: hidden; }
  .el-breadcrumb__item { font-size: 14px !important; }
  .el-breadcrumb__item .el-breadcrumb__inner { font-weight: 500 !important; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .el-breadcrumb__separator { display: none !important; }
  .header-breadcrumb .el-breadcrumb__item:first-child { display: none; }
  /* 语言切换：仅显示图标 */
  .header-right :deep(.lang-switch),
  .header-right .lang-switch { font-size: 0; min-width: auto; padding: 0 4px; }
  .header-right :deep(.lang-switch .el-icon),
  .header-right .lang-switch .el-icon { font-size: 18px; }
  .header-right :deep(.lang-switch .lang-text),
  .header-right .lang-switch .lang-text { display: none; }

  /* —— 2. 侧边栏：转抽屉模式（默认隐藏） —— */
  .sidebar {
    position: fixed !important; left: 0; top: 0; bottom: 0;
    z-index: 2000 !important; width: 260px !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
  }
  .sidebar.mobile-open { transform: translateX(0) !important; }
  .sidebar.collapsed { width: 260px !important; }
  .sidebar-logo { height: 60px !important; padding: 10px 16px !important; }
  .logo-img { height: 40px !important; max-width: 180px !important; }

  /* 抽屉遮罩 */
  .mobile-overlay {
    display: block !important;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1999 !important;
    animation: fadeIn 0.2s ease;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* 主内容区：占满 */
  .main-area { width: 100% !important; min-width: 0 !important; }
  .content {
    padding: 12px !important;
    overflow-x: hidden;
  }
  .footer { padding: 10px 12px !important; font-size: 11px !important; }

  /* —— 3. 页面容器 / 页面标题 —— */
  .page-container, .app-container {
    padding: 0 !important;
  }
  .page-container { padding: 0 !important; }
  h1.page-title, h2.page-title { font-size: 17px !important; margin-bottom: 12px !important; }
  h2 { font-size: 16px !important; }
  h3 { font-size: 15px !important; }
  h4 { font-size: 14px !important; }
  .section-title { font-size: 15px !important; margin: 16px 0 10px !important; }

  /* —— 4. 页面头（标题 + 按钮）—— */
  .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    margin-bottom: 12px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #f0f0f0;
  }
  .page-header h2, .page-header h3 { margin: 0 !important; font-size: 16px !important; }
  .page-header > .el-button,
  .page-header > .el-button-group { align-self: flex-start; width: auto; }
  /* 页头内嵌的筛选行允许换行 */
  .page-header > div:not(.grade-overview) { flex-wrap: wrap; row-gap: 8px; }
  .page-header .el-input, .page-header .el-select { max-width: 100% !important; }

  /* —— 5. 搜索 / 筛选 / 工具栏 —— */
  .search-form, .filter-bar, .toolbar, .search-bar,
  .tab-toolbar, .header-actions, .tool-section,
  .page-tools, .form-actions, .action-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  /* inline 表单：每行一项，撑满 */
  .el-form--inline {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .el-form--inline .el-form-item {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    display: block !important;
  }
  .el-form--inline .el-form-item__content {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px;
    margin-left: 0 !important;
  }
  .el-form--inline .el-select,
  .el-form--inline .el-input,
  .el-form--inline .el-date-editor,
  .el-form--inline .el-cascader,
  .el-form--inline .el-input-number,
  .filter-bar .el-select, .filter-bar .el-input, .filter-bar .el-date-editor,
  .toolbar .el-select, .toolbar .el-input, .toolbar .el-date-editor,
  .tab-toolbar .el-select, .tab-toolbar .el-input, .tab-toolbar .el-date-editor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* —— 6. 垂直表单：label 顶部对齐（弹窗/抽屉内）—— */
  .el-dialog .el-form,
  .el-drawer .el-form,
  .el-form:not(.el-form--inline) {
    .el-form-item {
      display: block !important;
      margin-bottom: 14px !important;
    }
    .el-form-item__label {
      display: block !important;
      width: 100% !important;
      text-align: left !important;
      justify-content: flex-start !important;
      padding: 0 0 4px !important;
      line-height: 1.5;
      float: none !important;
      height: auto !important;
    }
    .el-form-item__content {
      display: block !important;
      margin-left: 0 !important;
      flex-wrap: wrap;
      width: 100% !important;
    }
    .el-form-item__content > .el-select,
    .el-form-item__content > .el-input,
    .el-form-item__content > .el-date-editor,
    .el-form-item__content > .el-cascader,
    .el-form-item__content > .el-input-number,
    .el-form-item__content > .el-textarea,
    .el-form-item__content > .el-radio-group,
    .el-form-item__content > .el-checkbox-group {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
  }
  .el-radio-group, .el-checkbox-group { flex-wrap: wrap; row-gap: 8px; }
  .el-radio, .el-checkbox { margin-right: 12px !important; }

  /* —— 7. 表格：紧凑 + 横向滚动 —— */
  .table-wrapper, .el-table__inner-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .el-table {
    width: 100% !important;
    font-size: 13px !important;
  }
  .el-table .cell {
    padding: 0 6px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .el-table .el-table__cell {
    padding: 6px 0 !important;
  }
  .el-table th.el-table__cell {
    padding: 8px 0 !important;
    background: #fafafa !important;
  }
  /* 表格内 el-tag 缩小 */
  .el-table .el-tag { padding: 0 5px !important; height: 20px !important; line-height: 18px !important; font-size: 11px !important; }
  /* 表格内 button 紧凑 */
  .el-table .el-button.is-link {
    padding: 2px 6px !important;
    font-size: 12px !important;
  }
  .el-table__empty-block { min-height: 120px; }
  .el-table__empty-text { font-size: 13px; }

  /* —— 8. 分页器：紧凑 —— */
  .el-pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 12px 0 4px !important;
    gap: 4px;
  }
  .el-pagination .el-pagination__sizes,
  .el-pagination .el-pagination__jump { display: none !important; }
  .el-pagination .el-pager li,
  .el-pagination .btn-prev,
  .el-pagination .btn-next { min-width: 28px !important; }
  .el-pagination .el-pagination__total { margin-right: 0 !important; width: 100%; text-align: center; margin-bottom: 6px; }

  /* —— 9. 对话框 / 抽屉 / 消息框：撑满 —— */
  .el-dialog {
    --el-dialog-width: 96% !important;
    width: 96% !important;
    margin: 4vh auto !important;
    max-height: 92vh !important;
  }
  .el-dialog__wrapper, .el-overlay-dialog { padding: 0 !important; }
  .el-dialog__header { padding: 14px 16px !important; }
  .el-dialog__headerbtn { top: 12px !important; right: 12px !important; }
  .el-dialog__title { font-size: 15px !important; }
  .el-dialog__body { padding: 14px 16px !important; max-height: calc(92vh - 110px) !important; overflow-y: auto !important; }
  .el-dialog__footer { padding: 10px 16px 14px !important; text-align: center !important; }
  .el-dialog__footer .el-button + .el-button { margin-left: 8px !important; }

  .el-drawer { width: 100% !important; }
  .el-drawer__header { padding: 14px 16px !important; margin-bottom: 0 !important; }
  .el-drawer__body { padding: 12px 14px !important; }

  .el-message-box { width: 92% !important; max-width: 360px !important; padding: 14px !important; }
  .el-message-box__content { padding: 12px 0 !important; font-size: 13px !important; }
  .el-message-box__btns { text-align: center !important; }

  /* 弹窗/抽屉内栅格强制单列 */
  .el-dialog .el-row > [class*="el-col"],
  .el-drawer .el-row > [class*="el-col"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* —— 10. 描述列表：单元格块级堆叠 —— */
  .el-descriptions {
    --el-descriptions-table-cell-padding: 8px 10px !important;
  }
  .el-descriptions__label,
  .el-descriptions__content { font-size: 13px !important; }
  .el-descriptions__body .el-descriptions__table,
  .el-descriptions__body tbody,
  .el-descriptions__body tr { display: block !important; width: 100% !important; }
  .el-descriptions__cell { display: block !important; width: 100% !important; }

  /* —— 11. 卡片 / 面板 —— */
  .el-card { border-radius: 6px !important; margin-bottom: 10px !important; }
  .el-card__body { padding: 12px !important; }
  .el-card__header { padding: 10px 12px !important; font-size: 14px !important; }
  .el-collapse-item__header { font-size: 13px !important; padding: 0 12px !important; }
  .el-collapse-item__content { padding: 12px !important; }

  /* —— 12. 标签页 —— */
  .el-tabs__item { padding: 0 10px !important; font-size: 13px !important; height: 36px !important; line-height: 36px !important; }
  .el-tabs__nav-wrap::after { background-color: #e4e7ed !important; }
  .el-tabs--card > .el-tabs__header { margin-bottom: 10px !important; }

  /* —— 13. 步骤条 —— */
  .el-steps--horizontal { flex-wrap: wrap; row-gap: 12px; }
  .el-steps--horizontal .el-step {
    flex-basis: 50% !important;
    max-width: 50% !important;
  }
  .el-step__title { font-size: 12px !important; line-height: 1.3 !important; }

  /* —— 14. el-row / el-col：默认单列 —— */
  .el-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 10px;
  }
  .el-row > [class*="el-col"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }
  /* 部分列按比例 */
  .el-col-xs-12, .el-col-sm-12 { max-width: 50% !important; flex: 0 0 50% !important; }
  .el-col-xs-8, .el-col-sm-8 { max-width: 33.333% !important; flex: 0 0 33.333% !important; }
  .el-col-xs-6, .el-col-sm-6 { max-width: 50% !important; flex: 0 0 50% !important; }
  .el-col-xs-4, .el-col-sm-4 { max-width: 50% !important; flex: 0 0 50% !important; }
  .el-col-xs-24, .el-col-sm-24 { max-width: 100% !important; flex: 0 0 100% !important; }

  /* —— 15. 统计 / 概览 / KPI 卡片：2列网格 —— */
  .stat-row, .stats-row, .stat-cards,
  .overview-cards, .stats-overview, .ai-cards, .sla-grid,
  .material-sections, .detail-wrap, .grade-cards,
  .chart-row, .health-row, .wf-health-row, .health-table-row,
  .quick-actions, .grade-overview .grade-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* kpi-row 特殊：grid 2 列 */
  .kpi-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat-row > *, .stats-row > *, .stat-cards > *,
  .kpi-card, .ov-card {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
  }
  .overview-cards > *, .stats-overview > *, .ai-cards > *, .sla-grid > *,
  .material-sections > *, .detail-wrap > * {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
  }
  /* grade-cards 在客户台账等页面：3列 */
  .grade-card, .grade-cards > .grade-card {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: calc(33.333% - 6px) !important;
    padding: 8px 6px !important;
  }
  .grade-card .grade-count { font-size: 18px !important; }
  .grade-card .grade-label { font-size: 11px !important; }
  .grade-card .grade-desc { font-size: 10px !important; }

  /* 通用 stat 数值紧凑 */
  .ov-value, .stat-value, .stat-num, .sla-stat-num,
  .kpi-value, .kpi-info .kpi-value {
    font-size: 18px !important;
  }
  .stat-label, .kpi-label { font-size: 12px !important; }
  .ov-label { font-size: 12px !important; }
  .detail-item { min-width: 0 !important; padding: 6px 8px !important; }

  /* —— 16. 工作台 (dashboard) 特殊 —— */
  .dashboard .el-col-xs-12 {
    max-width: 50% !important; flex: 0 0 50% !important;
  }
  .quick-actions .el-button { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; padding: 8px 4px !important; font-size: 12px !important; }
  .grade-bar-label { width: 50px !important; font-size: 11px !important; }
  .grade-bar-count { width: 28px !important; font-size: 12px !important; }

  /* —— 17. Cockpit (驾驶舱) —— */
  .cockpit-page .chart-row,
  .cockpit-page .health-row,
  .cockpit-page .wf-health-row,
  .cockpit-page .health-table-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .cockpit-page .chart-card {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .cockpit-page .kpi-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .cockpit-page .kpi-card { padding: 10px 8px !important; gap: 8px !important; }
  .cockpit-page .kpi-icon { width: 36px !important; height: 36px !important; border-radius: 8px !important; }
  .cockpit-page .kpi-icon .el-icon { font-size: 20px !important; }
  .cockpit-page .kpi-value { font-size: 17px !important; }
  .cockpit-page .kpi-label { font-size: 11px !important; }
  .chart-card { padding: 12px !important; }
  .chart-card h4 { font-size: 13px !important; margin: 0 0 8px !important; }
  .chart-container { height: 220px !important; }

  /* 通用 chart-row / health-row 移动端堆叠 */
  .chart-row, .health-row, .wf-health-row, .health-table-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .chart-row > .chart-card,
  .health-row > .chart-card,
  .wf-health-row > .chart-card,
  .health-table-row > .chart-card {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* —— 18. 个人中心 (profile) —— */
  .profile-page .el-row { margin: 0 !important; }
  .profile-page .el-col { padding: 0 !important; margin-bottom: 12px; }
  .profile-page .user-card { margin-bottom: 0; }
  .profile-page .user-name { font-size: 17px !important; }
  .profile-page .info-list .info-item { padding: 8px 0 !important; font-size: 13px; }
  .wx-bind-status { flex-direction: column !important; text-align: center; gap: 10px; }
  .wx-bind-actions { flex-direction: column !important; gap: 8px !important; }
  .wx-bind-actions .el-button { width: 100% !important; }

  /* —— 19. 消息中心 (messages) —— */
  .messages-page .el-tabs__item { font-size: 13px !important; padding: 0 10px !important; }
  .messages-page .el-badge sup { transform: scale(0.85) !important; }
  .message-item { padding: 10px !important; }
  .message-item .message-title { font-size: 13px !important; }
  .message-item .message-content { font-size: 12px !important; }

  /* —— 20. 登录页 (login) —— */
  .login-container { padding: 16px !important; }
  .login-card { width: 100% !important; max-width: 360px !important; padding: 24px 20px !important; }
  .login-card .el-form-item__label { width: 100% !important; text-align: left !important; padding: 0 0 4px !important; }
  .login-card .el-form-item__content { margin-left: 0 !important; width: 100% !important; }
  .login-card .el-input { width: 100% !important; }
  .login-card .login-title { font-size: 20px !important; }

  /* —— 21. 详情页 / 审批页 / 复杂表单 —— */
  .detail-page, .approval-detail, .flow-detail { padding: 0 !important; }
  .detail-header h2 { font-size: 16px !important; }
  .detail-actions { flex-direction: column !important; gap: 8px !important; }
  .detail-actions .el-button { width: 100% !important; }

  /* 流程图/时间线 */
  .el-timeline-item__content, .el-timeline-item__wrapper {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* —— 22. echarts 图表容器 —— */
  .echarts, .chart-container, [ref^="chart"] { max-width: 100%; }

  /* —— 23. 文本/图片防溢出 —— */
  img, video, canvas, svg { max-width: 100%; height: auto; }
  p, span, div { overflow-wrap: anywhere; }
  .el-tag { max-width: 100%; }

  /* —— 24. 全局按钮在窄屏稍微紧凑 —— */
  .el-button { padding: 8px 14px !important; font-size: 13px !important; }
  .el-button.is-small { padding: 5px 10px !important; font-size: 12px !important; }
  .el-button + .el-button { margin-left: 6px !important; }

  /* —— 25. 防止横向滚动 —— */
  body, #app, .admin-layout, .main-area, .content, .page-container, .app-container {
    overflow-x: hidden !important;
  }
  .admin-layout { width: 100%; }

  /* —— 26. 水印不遮挡可点击区域 —— */
  .watermark-overlay { pointer-events: none; }
  .watermark-overlay * { pointer-events: none; }
  /* 保留表单可点击 */
  input, textarea, .el-input__inner, .el-textarea__inner,
  .el-button, .el-select, .el-input, .el-form-item {
    pointer-events: auto !important;
  }

  /* —— 27. 表格内嵌卡片 (项目健康度排名等) —— */
  .el-table .el-card { margin-bottom: 0 !important; }

  /* —— 28. 上传组件 —— */
  .el-upload-list--picture-card .el-upload-list__item,
  .el-upload--picture-card { width: 90px !important; height: 90px !important; }

  /* —— 29. 文本输入区域 —— */
  .el-textarea__inner { min-height: 80px !important; }

  /* —— 30. 弹窗/抽屉中的 el-row —— */
  .el-dialog .el-row,
  .el-drawer .el-row { margin: 0 !important; }
  .el-dialog .el-row > [class*="el-col"],
  .el-drawer .el-row > [class*="el-col"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 10px;
  }

  /* —— 31. el-segmented / el-radio-button —— */
  .el-segmented { flex-wrap: wrap; }
  .el-segmented .el-segmented__item { padding: 4px 10px !important; font-size: 12px !important; }

  /* —— 32. el-affix 浮动按钮 —— */
  .el-affix--fixed { right: 10px !important; bottom: 10px !important; }

  /* —— 33. el-result 空结果页 —— */
  .el-result__title { font-size: 16px !important; }
  .el-result__subtitle { font-size: 13px !important; }
  .el-result__icon { font-size: 60px !important; }

  /* —— 34. 菜单的折叠按钮隐藏（被汉堡菜单替代）—— */
  .collapse-btn { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; padding: 6px; }

  /* —— 35. el-skeleton 骨架屏 —— */
  .el-skeleton__item { height: 14px !important; }

  /* —— 36. el-image / el-carousel —— */
  .el-image-viewer__wrapper { background: rgba(0,0,0,0.85) !important; }

  /* —— 37. el-popper / el-tooltip / el-dropdown —— */
  .el-popper.is-light { max-width: 90vw !important; }

  /* —— 38. el-tree 树形控件 —— */
  .el-tree-node__content { height: 32px !important; font-size: 13px !important; }

  /* —— 39. el-transfer 穿梭框 —— */
  .el-transfer-panel { width: 100% !important; margin-bottom: 10px; }
  .el-transfer__buttons { padding: 0 10px !important; }

  /* —— 40. el-empty —— */
  .el-empty { padding: 24px 0 !important; }
  .el-empty__image { width: 80px !important; }
  .el-empty__description p { font-size: 13px !important; }

  /* —— 41. el-link 链接 —— */
  .el-link { font-size: 13px !important; }

  /* —— 42. 描述列表 label 宽度 —— */
  .el-descriptions__label.is-bordered-label { width: 90px !important; }
}

/* ===================== 480px 小屏手机 ===================== */
@media (max-width: 480px) {
  .header { padding: 0 8px !important; }
  .header-right { gap: 6px !important; }
  .content { padding: 10px !important; }

  /* 卡片更紧凑 */
  .el-card__body { padding: 10px !important; }
  .el-card__header { padding: 8px 10px !important; }

  /* 表格更紧凑 */
  .el-table { font-size: 12px !important; }
  .el-table .cell { padding: 0 4px !important; }
  .el-table .el-button.is-link { font-size: 11px !important; padding: 1px 4px !important; }

  /* 弹窗更紧凑 */
  .el-dialog { margin: 2vh auto !important; }
  .el-dialog__header { padding: 12px !important; }
  .el-dialog__body { padding: 12px !important; }

  /* 按钮全宽 */
  .el-dialog__footer { text-align: center !important; }
  .el-dialog__footer .el-button { flex: 1; }
  .el-dialog__footer .el-button + .el-button { margin-left: 6px !important; }

  /* 步骤条换行 */
  .el-steps--horizontal .el-step {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* 业务页面通用 */
  .page-header .el-button { width: 100% !important; }
  .el-page-header__content { font-size: 15px !important; }
  .el-tabs--card > .el-tabs__header .el-tabs__item { padding: 0 8px !important; font-size: 12px !important; }

  /* Switch/Progress/Slider 紧凑 */
  .el-switch { height: 20px !important; }
  .el-progress { font-size: 12px !important; }
  .el-slider__runway { margin: 14px 0 !important; }

  /* 分段控件 */
  .el-segmented { font-size: 12px !important; }

  /* 通知/警示 */
  .el-alert { padding: 6px 10px !important; font-size: 12px !important; }
  .el-alert__title { font-size: 13px !important; }
  .el-notification { width: 90% !important; max-width: 360px !important; }
  .el-message { min-width: auto !important; max-width: 90% !important; padding: 8px 12px !important; }
}

/* ===================== 380px 超窄屏 ===================== */
@media (max-width: 380px) {
  /* 统计/概览卡片变单列 */
  .stat-row > *, .stats-row > *, .stat-cards > *,
  .kpi-row > *, .kpi-card, .ov-card,
  .grade-card, .grade-cards > .grade-card {
    flex-basis: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .quick-actions .el-button { flex-basis: 100% !important; }
  .grade-bar-label { width: 40px !important; font-size: 10px !important; }
  .grade-bar-count { width: 24px !important; font-size: 11px !important; }

  /* 头部更紧凑 */
  .header-right { gap: 4px !important; }
  .message-bell { font-size: 17px !important; }
}

/* ===================== 横屏适配（手机横屏/小平板）===================== */
@media (max-width: 768px) and (orientation: landscape) {
  .sidebar { width: 240px !important; }
  .el-dialog { margin: 2vh auto !important; max-height: 96vh !important; }
  .el-dialog__body { max-height: calc(96vh - 100px) !important; }
}

/* ===================== 兼容打印 ===================== */
@media print {
  .header, .footer, .sidebar, .mobile-overlay { display: none !important; }
  .main-area { width: 100% !important; }
  .content { padding: 0 !important; }
  .el-pagination, .el-dialog { display: none !important; }
}