/* Hylab Networks — mobile pass.
   Loaded last so it can settle anything the desktop sheets leave for phones:
   one-line action rows instead of accidental wrapping, smaller type/spacing,
   and a records table that reads as a list. Everything here is scoped to
   narrow viewports so the desktop layout is untouched. */

@media (max-width: 720px) {
  /* ---------- header / page head ---------- */
  .content { padding: 22px 14px 56px; }
  /* the desktop rules are id-scoped, so match that weight to win here */
  #workspace:not(.is-detail) .page-head h1,
  #workspace.is-detail .page-head h1 {
    font-size: 24px; letter-spacing: -.03em; margin: 5px 0;
  }
  #workspace:not(.is-detail) .page-head { margin-bottom: 16px; }
  #workspace.is-detail .page-head { margin-bottom: 12px; }
  .eyebrow { font-size: 10px; letter-spacing: .1em; }
  .site-header { padding: 0 14px; }
  .brand { font-size: 15px; }
  nav button { padding: 6px 11px; font-size: 13px; }
  .icon { width: 34px; height: 34px; font-size: 16px; }

  /* ---------- login ---------- */
  .hero h1 { font-size: clamp(34px, 10.5vw, 46px); }
  .login-shell { padding-top: 32px; }
  .login-card { padding: 22px 18px; border-radius: 20px; }
  .login-card .field input { height: 46px; font-size: 16px; } /* ≥16px avoids iOS zoom */

  /* ---------- server cards: a compact rectangle ---------- */
  .server-grid { gap: 11px; }
  .server-grid .vm-card { padding: 11px 13px 10px; border-radius: 16px; }
  .server-grid .vm-id { font-size: 10.5px; }
  .server-grid .vm-status { font-size: 10.5px; padding: 2px 8px; }
  .server-grid .vm-head { min-height: 18px; }
  .server-grid .vm-name { margin-top: 5px; font-size: 17px; line-height: 1.1; }
  /* keep the boxed layout (three segmented cells) — it reads better than a plain
     line of text — but with smaller boxes so the card stays a rectangle */
  .server-grid .vm-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  /* server-cards.css lets the last cell span the full row on narrow screens
     (".vm-specs > div:last-child { grid-column: 1/-1 }"); that is more specific, so
     all three cells must be put back into the flow explicitly. */
  .server-grid .vm-specs > div,
  .server-grid .vm-specs > div:last-child { grid-column: auto; padding: 7px 8px 8px; }
  .server-grid .vm-specs dt { font-size: 10.5px; }
  .server-grid .vm-specs dd { font-size: 12.5px; margin-top: 2px; }
  /* CPU and memory share one line, half the card each, with noticeably thicker
     bars. The "295 MiB / 8.0 GiB" detail is what forced a wrap when they were side
     by side, so it is dropped here — it is still on the detail page. */
  .server-grid .vm-load { margin-top: 9px; gap: 3px 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .server-grid .vm-load .load-row { gap: 6px; }
  .server-grid .vm-load .load-label { font-size: 11px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .server-grid .vm-load .load-label small { display: none; }
  .server-grid .vm-load .load-value { font-size: 12px; flex: none; white-space: nowrap; }
  .server-grid .vm-load progress { height: 6px; margin-top: 4px; width: 100%; border-radius: 999px; }
  /* cumulative traffic totals are the least urgent: keep them on the detail page */
  .vm-net { display: none; }
  /* one line: uptime may ellipsize, the buttons must never wrap their labels
     (letting them shrink is what made the card taller, not shorter) */
  /* a little more air under the load bars than between them */
  .server-grid .vm-foot { margin-top: 15px; gap: 8px; flex-wrap: nowrap; }
  /* the uptime keeps its natural width (it was squeezed to nothing when the
     buttons were allowed to take the whole row); buttons share what is left */
  .server-grid .vm-uptime { flex: 0 0 auto; font-size: 9.5px; letter-spacing: 0; white-space: nowrap; color: var(--muted); }
  .server-grid .vm-actions { gap: 6px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
  .server-grid .vm-actions button { flex: 1 1 0; min-width: 0; min-height: 30px; font-size: 12px; padding: 6px 8px; white-space: nowrap; }

  /* ---------- detail: one row of actions ---------- */
  /* On a phone everything is a single column, and the customer wants the address
     block first. Dissolving the side column lets its panels join the page grid,
     where the network panel can be pulled in front of 硬件与线路. */
  .detail-side { display: contents }
  .detail-columns { gap: 14px }
  .net-panel { order: -1 }
  .detail-page { padding-top: 4px; }
  .detail-back { font-size: 12.5px; padding: 7px 12px; margin-bottom: 10px; }
  .detail-columns, .detail-main, .detail-side { gap: 12px; }
  .detail-panel { padding: 16px 15px; border-radius: 18px; }
  .detail-overview-head .badge { font-size: 11px; padding: 4px 9px; }
  .detail-node { font-size: 12.5px; }
  .detail-section-head h2 { font-size: 18px; }
  .detail-section-head p { font-size: 12px; }
  .detail-facts { gap: 8px; }
  .detail-facts > div { padding: 10px 11px; }
  .detail-facts dt { font-size: 10.5px; }
  .detail-facts dd { font-size: 13.5px; }

  /* the whole 服务器操作 group stays on one line */
  .detail-actions {
    display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .detail-actions::-webkit-scrollbar { display: none; }
  .detail-actions button {
    flex: 1 1 auto; min-width: 0; min-height: 38px;
    padding: 8px 7px; font-size: 12.5px; gap: 5px; white-space: nowrap;
  }
  .detail-actions .button-icon { width: 14px; height: 14px; }
  .detail-action-heading span { font-size: 12.5px; }

  /* monitoring side */
  .usage-row > div > span { font-size: 12px; }
  .usage-row strong { font-size: 12.5px; }
  .usage-row small { font-size: 11px; }
  .live-rates { gap: 6px; }
  .live-rates > div { padding: 8px 9px; }
  .live-rates span { font-size: 10.5px; }
  .live-rates b { font-size: 12.5px; }
  .trend-value { font-size: 16px; }
  .trend-value small { font-size: 10.5px; }
  .trend-card h3 { font-size: 12px; }
  .monitor-foot { font-size: 10.5px; }

  /* snapshots */
  .snapshot-item { padding: 11px 12px; gap: 10px; }
  .snapshot-name { font-size: 13.5px; }
  .snapshot-meta { font-size: 11px; }
  .snapshot-actions { margin-left: 42px; gap: 6px; }
  .snapshot-actions button { min-height: 34px; padding: 7px 10px; font-size: 12px; }

  /* ---------- hardware & line ---------- */
  .ops-head { margin-bottom: 8px; gap: 8px; }
  .ops-head h3 { font-size: 13.5px; }
  .ops-badge { font-size: 10.5px; padding: 3px 8px; }
  .ops-list { gap: 4px; }
  .ops-list li { font-size: 12.5px; }
  .ops-hint { font-size: 11px; margin-top: 8px; }
  .ops-actions {
    display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 10px;
    overflow-x: auto; scrollbar-width: none;
  }
  .ops-actions::-webkit-scrollbar { display: none; }
  .ops-actions button {
    flex: 1 1 auto; min-width: 0; min-height: 38px;
    padding: 8px 7px; font-size: 12.5px; white-space: nowrap;
  }
  .ops-block + .ops-block { margin-top: 14px; padding-top: 14px; }
  .detail-ops .ops-block:first-child { margin-top: 12px; padding-top: 14px; }

  /* chips scroll sideways instead of stacking into two rows */
  .ops-lines, .range-picker {
    display: flex; flex-wrap: nowrap; gap: 5px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  .ops-lines::-webkit-scrollbar, .range-picker::-webkit-scrollbar { display: none; }
  .ops-line, .range-btn {
    flex: 0 0 auto; min-height: 32px; padding: 6px 8px; font-size: 11px;
    letter-spacing: -.01em;
  }
  .ops-line.is-current { font-weight: 600; }
  .ops-current { font-size: 12.5px; }

  /* ---------- dialogs ---------- */
  dialog { width: calc(100vw - 24px); padding: 20px 18px; border-radius: 20px; }
  .dialog-head h2 { font-size: 19px; }
  dialog p { font-size: 13px; }
  dialog .actions { gap: 8px; }
  dialog .actions button { min-height: 40px; font-size: 13.5px; }
  #verify-label { font-size: 12.5px; }
  #verify-input { height: 44px; font-size: 16px; }

  /* ---------- records: the table becomes a two-line list ---------- */
  .table-wrap { overflow: visible; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "task status" "meta time";
    gap: 4px 10px; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
  }
  .table-wrap tr:last-child { border-bottom: 0; }
  .table-wrap td { padding: 0; border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .table-wrap td:nth-child(1) { grid-area: meta; font-size: 11.5px; color: var(--muted); }
  .table-wrap td:nth-child(2) { grid-area: task; font-size: 14px; font-weight: 600; }
  .table-wrap td:nth-child(3) { grid-area: status; justify-self: end; }
  .table-wrap td:nth-child(4) { grid-area: time; justify-self: end; font-size: 11.5px; color: var(--muted); }
  .table-wrap .task-state { font-size: 11px; padding: 3px 9px; white-space: nowrap; }

  /* ---------- sections / empty ---------- */
  .section { padding: 18px 16px; border-radius: 18px; }
  .empty { padding: 32px 16px; font-size: 13.5px; }
}

/* ---------- console (VNC) ---------- */
@media (max-width: 768px) {
  /* A modal <dialog> keeps the UA's max-height/inset rules, which silently caps
     height:100dvh and centres the box — pushing the toolbar off the screen.
     Pin it to the viewport explicitly and let the stage absorb the height. */
  .console-dialog {
    position: fixed; inset: 0; margin: 0;
    width: 100%; height: 100dvh; max-width: 100%; max-height: 100dvh;
    border: 0; border-radius: 0; padding: 0; overflow: hidden;
  }
  .console-dialog[open] { display: flex; flex-direction: column; }
  .console-shell { flex: 1 1 auto; height: auto; min-height: 0; }
  .console-stage { flex: 1 1 auto; min-height: 0; }
  .console-bar { flex: 0 0 auto; }
  .console-head { padding: 10px 12px; gap: 8px; flex: 0 0 auto; }
  .console-head h2 { font-size: 16px; }
  .console-meta { font-size: 11px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .console-dialog .icon { width: 32px; height: 32px; }

  /* the stage takes the room that is left, the bar is one line */
  .console-stage { margin: 0 8px; border-radius: 12px; }
  .console-hint, .console-toast {
    padding: 5px 11px; font-size: 11px; line-height: 1.35;
    border-radius: 999px; max-width: calc(100% - 20px); text-align: center;
  }
  .console-hint { top: auto; bottom: 8px; }
  .console-toast { top: 8px; }
  /* flex-end and a horizontal overflow cannot coexist: with content wider than
     the bar the leading items land off-screen and cannot be scrolled back to.
     Anchor to the start on phones so nothing is unreachable. */
  .console-bar {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    justify-content: flex-start; gap: 4px; align-items: center;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .console-bar::-webkit-scrollbar { display: none; }
  .bar-hide-mobile { display: none; } /* diagnostics stay on the desktop */
  /* the machine/model chip repeats the dialog title, so it is dropped to keep
     the whole toolbar on one row without scrolling */
  .bar-badge { display: none; }
  /* eight controls plus the status chip share a phone width, so each icon is 30px */
  .bar-icon { width: 30px; height: 30px; min-width: 30px; flex: 0 0 auto; border-radius: 10px; }
  .bar-icon svg { width: 16px; height: 16px; }
  .console-status { font-size: 10px; padding: 3px 7px; white-space: nowrap; }
  .console-bar-left, .console-bar-right { gap: 2px; flex: 0 0 auto; }
  .key-pad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .key { min-height: 38px; font-size: 12.5px; }
  .console-popover { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 62dvh; overflow-y: auto; }
  .popover-title { font-size: 15px; }
  .console-toast { font-size: 12px; padding: 9px 14px; }
}