/* ============================================================
   移动端样式（独立文件，必须最后加载）
   ------------------------------------------------------------
   目的：把移动端布局从 styles.css 里那几个互相重叠的媒体查询块中
   独立出来，只保留一份权威定义，避免"改了 A 块被 B 块覆盖"。
   生效条件：视口 ≤1100px，或者设备是触摸屏（pointer: coarse）。
   ============================================================ */

@media (max-width: 1100px), (pointer: coarse) {
  /* ---------- 1. 外壳：左右不再留白，内容直接满屏 ---------- */
  .app-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .topbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 关键修复：.content 是 display:grid，隐式单列默认宽度为 auto（minmax(auto,1fr)），
     子元素的最小内容宽度会把整列撑宽，页面就必须左右滑动才能看全卡片。
     这里显式改成 minmax(0, 1fr)，并清零所有直接子项的最小宽度。 */
  .content {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .content > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ---------- 2. 最外层卡片去掉方框，内容铺满屏幕 ---------- */
  .panel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* 左右内距清零：内容直接贴到屏幕两边，不再留白。 */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 抽屉侧边栏是浮层，必须保留白底和阴影，否则盖不住页面内容。 */
  .panel.sidebar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12) !important;
  }

  /* ---------- 2.5 账号 / 登录 / 静态页的外层卡片同样去掉两侧空白 ---------- */
  /* 这些页面不用 .panel，而是 .account-card / .auth-card / .static-card，
     原先各自带 18~30px 的外壳与卡片内距，手机上两侧空白明显，一并压到最小。 */
  .account-shell,
  .auth-shell,
  .static-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .account-card,
  .auth-card,
  .static-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ---------- 2.6 通知总览：四个统计卡片在手机上排成一行 ---------- */
  /* 断点表里 ≤640px 原本是 1 列（四张大卡片竖着堆），这里强制改成 4 列并压缩字号。 */
  .notify-overview-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .notify-overview-stat {
    min-height: 0 !important;
    padding: 10px 6px !important;
    border-radius: 10px !important;
  }

  .notify-overview-stat-label {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .notify-overview-stat-value {
    margin-top: 4px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  /* ---------- 3. 任务清单：表格转卡片 ---------- */
  /* 外框已经满屏，卡片左右不再留内距，直接贴到屏幕边缘。 */
  .task-table-panel {
    padding: 12px 0 !important;
  }

  .task-table-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  /* 顶部四个按钮 2×2，每个 44px 高，文字不换行 */
  .task-table-header .inline-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .task-table-header .inline-actions > button {
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .task-table-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
  }

  .task-table-search {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
    height: 44px;
    font-size: 15px;
  }

  /* 状态筛选胶囊横向滑动，不折行占满首屏 */
  .task-status-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .task-status-filters::-webkit-scrollbar {
    display: none;
  }

  .task-filter-chip {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
  }

  .task-table-toolbar-right {
    margin-left: 0;
    gap: 8px;
  }

  .task-table-toolbar-right select {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    font-size: 15px;
  }

  /* 去掉横向滚动容器，表格本身改成块级 */
  .task-table-scroll {
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .task-table {
    display: block !important;
    width: 100%;
    min-width: 0 !important;
    font-size: 13px;
  }

  .task-table thead,
  .task-table colgroup {
    display: none !important;
  }

  .task-table tbody {
    display: block !important;
  }

  .task-table tbody td {
    padding: 0;
    border-bottom: 0;
  }

  /* 一条任务 = 一张卡 */
  .task-table tbody tr,
  .task-table-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 6px 10px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e8ecf3;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .task-table-row:last-child {
    margin-bottom: 0;
  }

  .task-table-row:hover {
    background: #ffffff;
  }

  .task-table-row.is-current,
  .task-table-row.is-current:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
  }

  /* 第一行：任务名称（左）+ 状态（右） */
  .task-table-col-name {
    order: 1;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .task-table-name {
    display: block;
    width: 100%;
    font-size: 14.5px;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
  }

  .task-table-col-status {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }

  /* 第二行：监控网址，单行省略 */
  .task-table-col-url {
    order: 3;
    display: block !important;
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }

  .task-table-url {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 第三行：频率 / 上次 / 下次 */
  .task-table-col-interval,
  .task-table-col-last,
  .task-table-col-next {
    order: 4;
    display: block !important;
    flex: 0 0 auto;
    font-size: 12px;
    color: #64748b;
  }

  .task-table-col-interval::before {
    content: "频率 ";
  }

  .task-table-col-last::before {
    content: "上次 ";
  }

  .task-table-col-next::before {
    content: "下次 ";
  }

  .task-table-col-interval::before,
  .task-table-col-last::before,
  .task-table-col-next::before {
    color: #94a3b8;
  }

  /* 第四行：执行 / 暂停恢复 / 置顶 / 删除，2×2 */
  .task-table-col-actions {
    order: 5;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 100%;
    width: auto;
    gap: 8px;
    text-align: left;
  }

  .task-table-col-actions button {
    width: 100%;
    min-height: 40px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* 底部分页 */
  .task-table-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .task-table-pager {
    width: 100%;
    justify-content: space-between;
  }

  .task-table-pager button {
    flex: 1 1 0;
    min-height: 40px;
  }
}

/* ============================================================
   兜底：清单页在任何情况下都不允许回退成「横向宽表格」。
   放在文件最后，确保优先级和声明顺序都压过 styles.css。
   ============================================================ */
@media (max-width: 1100px), (pointer: coarse) {
  .task-table,
  .task-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .task-table thead,
  .task-table colgroup {
    display: none !important;
  }

  .task-table tbody tr,
  .task-table-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .task-table tbody td,
  .task-table-row > * {
    min-width: 0 !important;
  }

  /* 宽度兜底：清单相关的每一层都不允许超出屏幕宽度，避免出现横向滑动。 */
  .task-table-view,
  .task-table-panel,
  .task-table-scroll,
  .task-table,
  .task-table tbody,
  .task-table tbody tr,
  .task-table-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .task-table-panel {
    overflow-x: hidden !important;
  }

  html,
  body {
    overflow-x: hidden !important;
  }
}