/* ============================================
   Huakings Portal — Mobile Optimization v10
   Targets: Cockpit PF6, ttyd terminal, portal
   ============================================ */

/* ═══ BASE MOBILE RESET ═══ */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    padding: 10px 12px !important;
    overflow-x: hidden;
  }
  button, a, .tab, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ═══ SMALL PHONES (≤480px) ═══ */
@media (max-width: 480px) {
  body { padding: 8px 10px !important; }
  h2 { font-size: 16px !important; }
  h3 { font-size: 12px !important; }
  .metric-big { font-size: 26px !important; }
  .metric-unit { font-size: 13px !important; }
  .grid, .grid2, .grid3, .grid4 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .live-stat { flex-wrap: wrap; gap: 8px; }
  .live-stat > div {
    flex: 1 1 30%;
    min-width: 80px;
    padding: 8px 6px !important;
  }
  .live-stat .num { font-size: 16px !important; }
  .live-stat .lbl { font-size: 9px !important; }
}

/* ═══ TABLET ═══ */
@media (min-width: 481px) and (max-width: 1024px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
  .grid3 { grid-template-columns: 1fr 1fr !important; }
  .grid4 { grid-template-columns: 1fr 1fr !important; }
}

/* ═══ PORTAL SCROLLABLE TABS ═══ */
@media (max-width: 768px) {
  .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 8px !important;
    position: relative;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs::after {
    content: "";
    position: sticky;
    right: 0; top: 0; bottom: 0;
    width: 32px;
    flex-shrink: 0;
    background: linear-gradient(90deg, transparent, #161b22 70%);
    pointer-events: none;
    z-index: 1;
  }
  .tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
  .topbar .info { display: none !important; }
  .topbar { padding: 0 12px !important; }
  .topbar .logo { font-size: 14px !important; }
}

/* ═══ PORTAL IFRAME HEIGHT ═══ */
@media (max-width: 768px) {
  .content iframe {
    height: calc(100vh - 90px) !important;
  }
}

/* ═══════════════════════════════════════════
   COCKPIT PF6 — SIDEBAR AUTO-HIDE (MOBILE)
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Prevent page header from clipping topnav dropdown */
  .pf-v6-c-page__header,
  .pf-v6-c-masthead {
    overflow: visible !important;
  }
  .pf-v6-c-page {
    overflow: visible !important;
  }
  #nav-system,
  #nav-hosts,
  .area-ct-subnav {
    position: fixed !important;
    left: -290px !important;
    top: 0 !important;
    z-index: 10000 !important;
    height: 100vh !important;
    width: 270px !important;
    max-width: 82vw !important;
    transition: left 0.25s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 3px 0 16px rgba(0,0,0,0.5) !important;
    overflow-y: auto !important;
    background: var(--pf-v6-global--BackgroundColor--dark-200, #1b1d21) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #nav-system.expanded,
  #nav-hosts.expanded,
  .area-ct-subnav.expanded,
  body.mobile-nav-visible #nav-system {
    left: 0 !important;
  }

  body.mobile-nav-visible::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9995;
    pointer-events: auto;
  }

  #content, .area-ct-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  #nav-system-item, #host-toggle,
  .ct-nav-toggle, .pf-v6-c-menu-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
  }

  #nav-system .pf-v6-c-nav__link,
  #nav-hosts .pf-v6-c-nav__link,
  .area-ct-subnav .pf-v6-c-nav__link {
    min-height: 46px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  .pf-v6-c-nav__section-title {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  .pf-v6-c-masthead { height: 44px !important; }
  .pf-v6-c-masthead__content { padding: 0 8px !important; }

  .pf-v6-c-toolbar,
  .pf-v6-c-page__main-breadcrumb {
    padding: 4px 8px !important;
  }
  .pf-v6-c-breadcrumb__item,
  .pf-v6-c-breadcrumb__link {
    font-size: 11px !important;
  }
}

@media (max-width: 480px) {
  #nav-system, #nav-hosts, .area-ct-subnav {
    width: 250px !important;
    max-width: 75vw !important;
  }
  .pf-v6-c-card {
    margin: 6px 4px !important;
    border-radius: 6px !important;
  }
  .pf-v6-c-card__title {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  .pf-v6-c-card__body {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
  .pf-v6-c-table { font-size: 11px !important; }
  .pf-v6-c-table th, .pf-v6-c-table td {
    padding: 6px 8px !important;
  }
  .pf-v6-c-modal-box {
    width: 96vw !important;
    max-width: 96vw !important;
    margin: 8px auto !important;
    border-radius: 8px !important;
  }
  .pf-v6-c-modal-box__body { padding: 12px !important; }
}

/* ═══════════════════════════════════════════
   COCKPIT 终端 — 移动端优化
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* 核心修复：让工具栏区只占内容高度，终端区填满剩余 */
  #system-terminal-page .pf-v6-c-page__main-section:first-child {
    flex: 0 0 auto !important;
  }
  #system-terminal-page .pf-v6-c-page__main-section:last-child {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 终端主体填满父容器 */
  #system-terminal-page .terminal-body {
    flex: 1 !important;
    min-height: 0 !important;
  }

  /* 隐藏字体工具栏节省空间 */
  #system-terminal-page .terminal-group {
    display: none !important;
  }
  #system-terminal-page .pf-v6-c-toolbar__group:first-of-type,
  #system-terminal-page button[aria-label*="Font"],
  #system-terminal-page button[aria-label*="font"],
  #system-terminal-page button[aria-label*="字体"],
  #system-terminal-page button[aria-label*="增大"],
  #system-terminal-page button[aria-label*="减小"] {
    display: none !important;
  }

  /* 工具栏更紧凑 */
  #system-terminal-page .pf-v6-c-toolbar {
    padding: 2px 4px !important;
    min-height: 28px !important;
  }

  /* 终端全宽 — 去除左右留白 */
  #system-terminal-page .console-ct {
    padding: 0 !important;
    margin: 0 !important;
  }
  #system-terminal-page .terminal-body {
    padding: 0 !important;
    margin: 0 !important;
  }
  #system-terminal-page .xterm-viewport {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* xterm 字体 10px (移动端清晰+信息密度平衡) */
  #system-terminal-page .xterm {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  #system-terminal-page .xterm-screen {
    font-size: 10px !important;
    padding: 2px !important;
  }
  #system-terminal-page .xterm-text-layer {
    font-size: 10px !important;
    font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Menlo, monospace !important;
  }
  #system-terminal-page .xterm-char-measure-element {
    font-size: 10px !important;
    font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Menlo, monospace !important;
  }

  /* ct-page-fill flex 填满 + 无内边距 */
  #system-terminal-page .ct-page-fill {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  /* 页面容器零边距 = 真正全宽 */
  #system-terminal-page .pf-v6-c-page__main-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #system-terminal-page .pf-v6-c-page__main-body {
    padding: 0 !important;
  }
  /* 消除 body 自带的 10px padding (cockpit shell.css) */
  #system-terminal-page {
    padding: 0 !important;
    margin: 0 !important;
  }
  html#system-terminal-page, html#system-terminal-page body {
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  #system-terminal-page .xterm,
  #system-terminal-page .xterm-screen,
  #system-terminal-page .xterm-text-layer,
  #system-terminal-page .xterm-char-measure-element {
    font-size: 10px !important;
  }
  #system-terminal-page .xterm-screen {
    padding: 1px !important;
  }
  /* 更小屏幕保持可用性 */
  #system-terminal-page .pf-v6-c-toolbar {
    padding: 1px 2px !important;
    min-height: 24px !important;
  }
}

/* ═══ COCKPIT LOGIN MOBILE ═══ */
@media (max-width: 768px) {
  body.login-pf .container {
    width: 90% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  body.login-pf #badge {
    inline-size: 160px !important;
    block-size: 58px !important;
  }
  body.login-pf .form-control {
    font-size: 16px !important;
    height: 44px !important;
    padding: 10px 12px !important;
  }
  body.login-pf .login-button {
    width: 100% !important;
    height: 48px !important;
    font-size: 16px !important;
  }
}

/* ═══ TOUCH DEVICE ═══ */
@media (hover: none) and (pointer: coarse) {
  a, button, [role="button"], .tab, .card {
    cursor: pointer;
  }
  .card:active, .tab:active {
    opacity: 0.7;
    transition: opacity 0.1s;
  }
  input[type="text"], input[type="search"], input[type="number"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════
   终端字体 — 移动端强制 12px
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* xterm.js 所有文本相关层 */
  #system-terminal-page .xterm {
    font-size: 12px !important;
  }
  #system-terminal-page .xterm-screen {
    font-size: 12px !important;
  }
  #system-terminal-page .xterm-text-layer {
    font-size: 12px !important;
    font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Menlo, monospace !important;
  }
  #system-terminal-page .xterm-cursor-layer {
    font-size: 12px !important;
  }
  #system-terminal-page .xterm-char-measure-element {
    font-size: 12px !important;
    font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Menlo, monospace !important;
  }
  /* 隐藏字体工具栏节省空间 */
  #system-terminal-page .pf-v6-c-toolbar__group:first-of-type,
  #system-terminal-page button[aria-label*="Font"],
  #system-terminal-page button[aria-label*="font"],
  #system-terminal-page button[aria-label*="字体"],
  #system-terminal-page button[aria-label*="增大"],
  #system-terminal-page button[aria-label*="减小"] {
    display: none !important;
  }
}
@media (max-width: 480px) {
  #system-terminal-page .xterm,
  #system-terminal-page .xterm-screen,
  #system-terminal-page .xterm-text-layer,
  #system-terminal-page .xterm-cursor-layer,
  #system-terminal-page .xterm-char-measure-element {
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════
   最大化可用面积 — 移动端减少 Chrome
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* 隐藏面包屑导航 */
  .pf-v6-c-page__main-breadcrumb {
    display: none !important;
  }

  /* 减小 masthead */
  .pf-v6-c-masthead {
    height: 44px !important;
    min-height: 44px !important;
  }
  .pf-v6-c-masthead__content {
    padding: 0 6px !important;
  }

  /* 减小工具栏 */
  .pf-v6-c-toolbar {
    padding: 3px 6px !important;
    min-height: 32px !important;
    gap: 4px !important;
  }
  .pf-v6-c-toolbar__group {
    gap: 4px !important;
  }
  .pf-v6-c-toolbar__item {
    margin: 0 !important;
  }

  /* 减小页面内边距 */
  .pf-v6-c-page__main-container {
    margin: 0 !important;
    padding: 0 !important;
  }
  .pf-v6-c-page__main-body {
    padding: 4px !important;
  }
  .pf-v6-c-page__main-section {
    padding: 4px 6px !important;
  }

  /* 内容区全宽 */
  #content, .area-ct-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
  }

  /* 终端页面 — 确保终端填满剩余空间 */
  #system-terminal-page {
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #system-terminal-page .pf-v6-c-page__main-container,
  #system-terminal-page .pf-v6-c-page__main,
  #system-terminal-page .pf-v6-c-page__main-body,
  #system-terminal-page .pf-v6-c-page__main-section {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* ct-page-fill 自动填满父容器剩余高度 */
  #system-terminal-page .ct-page-fill {
    flex: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    background: #000 !important;
  }

  /* 隐藏非必要 */
  .pf-v6-c-page__main-nav {
    display: none !important;
  }

  /* 表格紧凑 */
  .pf-v6-c-table {
    font-size: 12px !important;
  }
  .pf-v6-c-table th,
  .pf-v6-c-table td {
    padding: 6px 8px !important;
  }

  /* 卡片紧凑 */
  .pf-v6-c-card {
    margin: 4px 0 !important;
    border-radius: 6px !important;
  }
  .pf-v6-c-card__body {
    padding: 10px 12px !important;
  }
  .pf-v6-c-card__title {
    padding: 8px 12px 4px !important;
    font-size: 13px !important;
  }
}

/* ═══ 小屏手机 ═══ */
@media (max-width: 480px) {
  .pf-v6-c-masthead {
    height: 40px !important;
    min-height: 40px !important;
  }
  .pf-v6-c-toolbar {
    padding: 2px 4px !important;
    min-height: 28px !important;
  }
  .pf-v6-c-page__main-body {
    padding: 2px !important;
  }
  .pf-v6-c-page__main-section {
    padding: 2px 4px !important;
  }
}

/* ═══════════════════════════════════════════
   禁止页面水平溢出
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  html, body, #main, .pf-v6-c-page, .pf-v6-c-page__main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* 允许终端内垂直滚动 */
  .xterm-viewport {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ═══════════════════════════════════════════
   iPhone 安全区域适配
   ═══════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 900px) {
    #system-terminal-page .ct-page-fill {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
  }
}