/* ==========================================================================
   排班管理系统 · 响应式（手机 / 平板浏览器）
   ==========================================================================

   断点（与 js/app.js 里的 MOBILE_QUERY 保持一致）：

     ≥ 1025px   桌面：左侧固定导航栏
     ≤ 1024px   平板：导航栏变抽屉（汉堡按钮），内容区占满整宽
     ≤ 767px    手机：顶栏精简、表格与甘特图横向滚动、弹窗变底部抽屉
     ≤ 480px    小屏手机：按钮撑满、进一步压缩

   所有规则都写在 `@media screen and (...)` 里 —— 打印用的是纸张宽度，
   不能让「窄」把打印样式（components.css 的 @media print）带偏。
   ========================================================================== */

/* ==========================================================================
   1. 触摸设备：把交互控件放大到手指点得准的尺寸
   ========================================================================== */
@media screen and (pointer: coarse) {
  .btn {
    min-height: 36px;
  }
  .btn--sm {
    min-height: 32px;
    padding: 0 12px;
  }
  .btn--xs {
    min-height: 28px;
    padding: 0 9px;
  }
  .input,
  .select {
    height: 38px;
  }
  .input--sm,
  .select--sm {
    height: 32px;
  }
  .checkbox input {
    width: 19px;
    height: 19px;
  }
  .tab {
    padding: 9px 14px;
  }
  .week-day {
    padding: 8px 10px;
  }
  /* 甘特图格子：默认 22~26px 对手指太窄，加宽到 32px（min-width 会压过内联 width，
     表头与数据行用同一套尺寸，所以不会错位） */
  .track .gcell {
    min-width: 32px;
    min-height: 38px;
  }
  /* 悬停提示在触摸屏上没有意义，改成点一下的反馈 */
  .gcell:active {
    background: var(--c-primary-soft);
  }
}

/* ==========================================================================
   2. 平板及以下（≤1024px）：导航栏改抽屉
   ========================================================================== */
@media screen and (max-width: 1024px) {
  :root {
    --sidebar-w: 264px;
  }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) var(--topbar-h) 1fr;
    grid-template-areas:
      "brand"
      "topbar"
      "content";
    height: 100vh;
    height: 100dvh;
  }

  /* 抽屉：默认收在左侧屏幕外，打开时滑入 */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    width: min(var(--sidebar-w), 84vw);
    z-index: 60;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    overscroll-behavior: contain;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
    -webkit-overflow-scrolling: touch;
  }

  .app-shell.is-nav-open .sidebar {
    transform: none;
  }

  .app-shell.is-nav-open .nav-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* 抽屉打开时锁住底下的滚动，避免滑到一半页面跟着动 */
  body.nav-locked .content {
    overflow: hidden;
  }

  .sidebar__foot {
    display: block;
  }

  /* 表格：给横向滚动留出手势区，滚动更跟手 */
  .table-wrap,
  .gantt-wrap,
  .tabs,
  .week-days {
    -webkit-overflow-scrolling: touch;
  }

  /* 甘特图：左侧固定列收窄，把时间轴让出来 */
  .gantt,
  .gantt.gantt--edit {
    --gantt-emp-w: 132px;
    --gantt-pos-w: 96px;
    --gantt-hrs-w: 66px;
  }

  .gantt-wrap {
    max-height: calc(100dvh - 330px);
  }
}

/* ==========================================================================
   3. 手机（≤767px）
   ========================================================================== */
@media screen and (max-width: 767px) {
  :root {
    /* 顶部预留刘海/状态栏高度，顶栏内容再往下推一点 */
    --topbar-h: calc(52px + env(safe-area-inset-top));
  }

  /* 品牌区变成抽屉的头，顶栏只留汉堡 + 页面标题 */
  .brand {
    position: fixed;
    top: 0;
    left: 0;
    width: min(var(--sidebar-w), 84vw);
    height: var(--topbar-h);
    z-index: 61;
    transform: translateX(-102%);
    transition: transform 0.22s ease;
  }

  .app-shell.is-nav-open .brand {
    transform: none;
  }

  .app-shell {
    grid-template-areas:
      "topbar"
      "content";
    grid-template-rows: var(--topbar-h) 1fr;
  }

  .sidebar {
    top: var(--topbar-h);
  }

  .content {
    padding: 12px 12px calc(28px + env(safe-area-inset-bottom));
  }

  /* ---- 顶栏精简 ---- */
  .topbar {
    gap: 8px;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
  }
  .topbar__path,
  #storeChip {
    display: none;
  }
  .topbar__title {
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar > div:first-child {
    min-width: 0;
  }
  .topbar__user {
    padding-left: 0;
    border-left: none;
  }
  /* 账号名与「改密码 / 退出」都挪进抽屉了，顶栏只留头像作为账号入口 */
  .topbar__user > div:not(.avatar),
  #pwdBtn,
  #logoutBtn {
    display: none;
  }

  .page-head {
    margin-bottom: 12px;
  }
  .page-head h2 {
    font-size: 16.5px;
  }
  .page-head__actions {
    width: 100%;
  }
  .page-head__actions .btn {
    flex: 1 1 auto;
  }

  /* 卡片与工具条更紧凑（换行行为已在 components.css 的基础样式里处理） */
  .card__head {
    padding: 12px 14px;
  }
  .card__body {
    padding: 14px;
  }
  .card__foot,
  .toolbar {
    flex-wrap: wrap;
    padding: 10px 14px;
  }
  .toolbar .toolbar__spacer {
    display: none;
  }
  .card__desc {
    white-space: normal;
  }

  /* ---- 弹窗变成底部抽屉：手机上一屏放得下，拇指也够得着 ---- */
  .modal-mask {
    padding: 0;
    align-items: flex-end;
    justify-items: stretch;
  }
  .modal,
  .modal--narrow,
  .modal--wide,
  .modal--xwide {
    max-width: 100%;
    width: 100%;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    animation: sheetUp 0.2s ease;
  }
  @keyframes sheetUp {
    from {
      transform: translateY(14px);
      opacity: 0.6;
    }
  }
  .modal__head {
    padding: 14px 16px;
  }
  .modal__body {
    padding: 14px 16px;
    overscroll-behavior: contain;
  }
  .modal__foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    gap: 8px;
    position: sticky;
    bottom: 0;
    border-radius: 0;
  }
  .modal__foot .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  /* ---- 数据表格：横向滚动，滚动条不占位 ---- */
  .table-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* ---- 标签页横向滚动，不再换行挤成两排 ---- */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }

  /* ---- 周切换 ---- */
  .week-bar {
    padding: 10px 12px;
    gap: 8px;
  }
  .week-days {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .week-day {
    min-width: 66px;
    flex: none;
  }

  /* ---- 统计卡：手机上一行两张，比一张占满一屏更好扫 ---- */
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stat {
    padding: 12px 13px;
  }
  .stat__value {
    font-size: 20px;
  }

  /* ---- 甘特图 ---- */
  .gantt,
  .gantt.gantt--edit {
    --gantt-emp-w: 108px;
    --gantt-pos-w: 80px;
    --gantt-hrs-w: 46px;
  }
  .gantt {
    font-size: 12px;
  }
  .gantt th,
  .gantt td {
    padding: 3px 4px;
  }
  .gantt tbody tr,
  .gantt.gantt--edit tbody tr {
    height: auto;
    min-height: 44px;
  }
  .gantt .emp-cell {
    flex-wrap: wrap;
    gap: 4px;
  }
  .gantt .emp-cell .emp-name {
    font-size: 12.5px;
  }
  /* 岗位下拉原本写死 102px，会撑破收窄后的列 */
  .gantt .sticky-pos select {
    width: 100% !important;
    padding-left: 4px;
    padding-right: 16px;
    font-size: 11.5px;
  }
  .gantt .act-cell {
    gap: 3px;
  }
  .gantt .act-cell .btn {
    padding: 0 6px;
    font-size: 11.5px;
  }
  .gantt-wrap {
    max-height: 62dvh;
  }
  .gantt-alert {
    padding: 12px 14px 0;
  }

  /* 周表：员工列收窄，时间列保持可读 */
  .table--week .sticky-emp {
    min-width: 88px;
  }

  /* 表单与详情：一行一列 */
  .detail-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-grid,
  .form-grid--tight {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 提示条改成底部通栏（注意清掉原来居中用的 translateX） */
  .toast-host {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    transform: none;
    align-items: stretch;
  }
  .toast {
    max-width: none;
  }

  /* 登录页 */
  .auth {
    padding: 16px;
  }
  .auth__card {
    padding: 24px 20px 20px;
    border-radius: 12px;
  }
}

/* ==========================================================================
   4. 小屏手机（≤480px）
   ========================================================================== */
@media screen and (max-width: 480px) {
  :root {
    --sidebar-w: 240px;
  }

  /* 只有 480px 宽时，甘特图再让一让：岗位列藏起来，
     时间轴才有一半屏幕可用（横屏回到上一档，全部列都在） */
  .gantt,
  .gantt.gantt--edit {
    --gantt-emp-w: 100px;
    --gantt-pos-w: 0px;
    --gantt-hrs-w: 44px;
  }
  .gantt .sticky-pos,
  .gantt th.sticky-pos,
  .gantt td.sticky-pos {
    display: none;
  }

  /* 统计卡一屏一张，数字看得清 */
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 按钮成对时撑满一行 */
  .modal__foot .btn {
    flex: 1 1 100%;
  }
  .page-head__actions .btn {
    flex: 1 1 100%;
  }

  .table--week .sticky-emp {
    min-width: 74px;
  }
}

/* ==========================================================================
   5. 手机横屏：竖向空间宝贵（常见高度只有 375~430px）
   ========================================================================== */
@media screen and (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  :root {
    --topbar-h: 44px;
    --sidebar-w: 220px;
  }
  .gantt-wrap {
    max-height: 46dvh;
  }
  .modal {
    max-height: 96dvh;
  }
}