/* ============================================================
   神云盾 · 移动端布局修复 (mobile-fix.css)
   问题根因：Tailwind 响应式网格在窄屏没有显式列定义，
   网格列按 max-content 取值，被内部不可换行内容撑开，
   导致卡片/按钮超出屏幕，右侧内容被裁掉。
   修复思路：窄屏强制单列 minmax(0,1fr) 并放开关键容器收缩。
   ============================================================ */

/* ---- 1. 窄屏：只在大屏定义多列的网格，一律锁成单列 ---- */
@media (max-width: 639.98px) {
  [class*="sm:grid-cols-"]:not([class~="grid-cols-1"]):not([class~="grid-cols-2"]):not([class~="grid-cols-3"]):not([class~="grid-cols-4"]),
  [class*="md:grid-cols-"]:not([class~="grid-cols-1"]):not([class~="grid-cols-2"]):not([class~="grid-cols-3"]):not([class~="grid-cols-4"]),
  [class*="lg:grid-cols-"]:not([class~="grid-cols-1"]):not([class~="grid-cols-2"]):not([class~="grid-cols-3"]):not([class~="grid-cols-4"]),
  [class*="xl:grid-cols-"]:not([class~="grid-cols-1"]):not([class~="grid-cols-2"]):not([class~="grid-cols-3"]):not([class~="grid-cols-4"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- 2. 平板宽度：只在 lg/xl 才多列的网格，同样锁成单列 ---- */
@media (min-width: 640px) and (max-width: 1023.98px) {
  [class*="lg:grid-cols-"]:not([class~="grid-cols-1"]):not([class~="grid-cols-2"]):not([class~="grid-cols-3"]):not([class~="grid-cols-4"]),
  [class*="xl:grid-cols-"]:not([class~="grid-cols-1"]):not([class~="grid-cols-2"]):not([class~="grid-cols-3"]):not([class~="grid-cols-4"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- 3. 加固工作台：关键容器放开收缩，强度档位锁单列 ---- */
@media (max-width: 1023.98px) {
  .hw-shell,
  .hw-inner,
  .hw-card,
  .hw-card-h,
  .hw-card-t,
  .hw-drop,
  .hw-steps,
  .hw-step,
  .panel {
    min-width: 0;
  }

  .hw-card-h {
    flex-wrap: wrap;
    row-gap: .5rem;
  }

  .hw-levels {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hw-level {
    min-width: 0;
  }
}

/* ---- 4. 触屏细节 ---- */
@media (max-width: 1023.98px) {
  .table-wrap,
  .hw-steps {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* 步骤条在窄屏收窄字号，尽量少横滚 */
  .hw-step-t {
    font-size: .72rem;
  }

  .hw-steps {
    gap: .3rem;
  }
}

/* ---- 4b. 手机：步骤条换行，保证四个步骤一屏看全 ---- */
@media (max-width: 640px) {
  .hw-steps {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: .55rem;
    column-gap: .7rem;
  }

  .hw-step-dot {
    width: 22px;
    height: 22px;
    font-size: .66rem;
  }

  .hw-step-t {
    font-size: .7rem;
  }

  /* 步骤之间原来的连接线在换行后不好看，隐藏掉 */
  .hw-steps .hw-step + .hw-step::before,
  .hw-step-line {
    display: none !important;
  }

  /* 长文件名/长文本不撑破卡片 */
  .hw-card,
  .panel {
    overflow-wrap: anywhere;
  }
}

/* ---- 5. 小屏(≤430px)：控制台标签栏四个标签收窄，一屏排下 ---- */
@media (max-width: 430px) {
  div[class*="overflow-x-auto"][class*="gap-1.5"] {
    gap: .25rem !important;
  }

  div[class*="overflow-x-auto"][class*="gap-1.5"] > button {
    padding-left: .6rem !important;
    padding-right: .6rem !important;
  }
}