/* ============== 店多利后台 - 移动端响应式样式 ============== */
/* 断点：<= 768px 移动端，769-1024 平板，> 1024 桌面 */

/* ----- 通用变量与基础 ----- */
:root {
  --sidebar-w: 220px;
  --header-h: 56px;
  --content-pad: 20px;
}

/* ----- 平板 (≤1024px) ----- */
@media (max-width: 1024px) {
  :root { --content-pad: 16px; }

  /* 侧边栏 */
  .sidebar { width: 180px !important; }
  .main, .main-area, .content-wrap { margin-left: 180px !important; }

  /* 4列卡片改为2列 */
  .cards { grid-template-columns: repeat(2, 1fr) !important; }
  .cards-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-cards { grid-template-columns: repeat(2, 1fr) !important; }

  /* 图表行 */
  .charts-row { grid-template-columns: 1fr !important; }
  .charts-row-2 { grid-template-columns: 1fr !important; }

  /* 表格 */
  table th, table td { padding: 8px 10px !important; font-size: 12px !important; }
}

/* ----- 移动端 (≤768px) ----- */
@media (max-width: 768px) {
  :root { --content-pad: 12px; }

  /* 顶部汉堡菜单按钮 */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: #1890ff; color: #fff;
    border: none; border-radius: 6px;
    font-size: 20px; cursor: pointer;
    position: fixed; top: 10px; left: 10px; z-index: 200;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
  }

  /* 遮罩 */
  .sidebar-mask {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 99;
  }
  .sidebar-mask.show { display: block; }

  /* 侧边栏：抽屉式，默认隐藏 */
  .sidebar {
    position: fixed !important;
    left: 0; top: 0; width: 240px !important; height: 100% !important;
    z-index: 100; transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .sidebar.open { transform: translateX(0); }

  /* 主内容全宽 */
  .main, .main-area, .content-wrap, body > .main {
    margin-left: 0 !important;
  }

  /* 顶栏调整 */
  .header, .topbar, .navbar {
    padding: 10px 12px 10px 60px !important;
    flex-wrap: wrap; gap: 8px;
  }
  .header h1, .topbar-left { font-size: 15px !important; }

  /* 内容容器 */
  .content, .content-wrap, .container { padding: 12px !important; }

  /* 卡片：全部单列 */
  .cards, .cards-4, .stat-cards, .kpi-row, .row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .card { padding: 14px !important; }
  .card .value { font-size: 20px !important; }
  .card .label, .card .sub { font-size: 11px !important; }

  /* 图表行/卡片 */
  .charts-row, .charts-row-2, .charts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .chart-box, .chart-box.h300 { height: 260px !important; }

  /* 表格：横向滚动 + 紧凑 */
  .table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  table th, table td { padding: 6px 8px !important; font-size: 11px !important; white-space: nowrap; }

  /* 模态框：全屏 */
  .modal-mask { padding: 0 !important; }
  .modal, .modal-dialog, .modal-content {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; max-height: 100vh !important;
    border-radius: 0 !important; margin: 0 !important;
  }
  .modal-bd, .modal-body { max-height: calc(100vh - 100px) !important; overflow-y: auto; }

  /* 表单元素 */
  .fg { display: flex; flex-direction: column; gap: 4px; }
  .fg label { font-size: 12px; }
  .fg input, .fg select, .fg textarea, .filter-bar select, .filter-bar input {
    font-size: 14px !important; padding: 8px 10px !important; width: 100% !important; box-sizing: border-box;
  }
  .filter-bar { flex-wrap: wrap; gap: 6px; }
  .filter-bar > * { flex: 1 1 100px; min-width: 0; }

  /* 按钮 */
  .btn { padding: 8px 12px !important; font-size: 13px !important; }
  .btn-sm { padding: 4px 8px !important; font-size: 11px !important; }

  /* 标题 */
  .section-hd h2, h2 { font-size: 14px !important; }
  .page-title, .title-bar h1 { font-size: 16px !important; }

  /* 分页 */
  .pagination, .pager { flex-wrap: wrap; gap: 4px; }

  /* 隐藏次要列 */
  .hide-mobile { display: none !important; }
}

/* ----- 超小屏 (≤480px) ----- */
@media (max-width: 480px) {
  .card .value { font-size: 18px !important; }
  .card { padding: 10px !important; }
  .content, .content-wrap { padding: 8px !important; }
  table th, table td { padding: 5px 6px !important; font-size: 10px !important; }
}