/* Mobile UX: off-canvas nav drawer + compact single header + full-width content.
   Loaded after dashboard.css/unified.css. Desktop (>=861px) intentionally
   untouched: every rule below is scoped to small viewports. */
html, body { overflow-x: hidden; }

/* Deliberate press feedback (all viewports, no geometry change): silence the
   default blue tap flash ONLY on actionable controls, keep a visible green
   keyboard focus ring, and tint text selection green. Shell output, inputs,
   logs and file content stay fully selectable. */
button, a, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection { background: rgba(176, 237, 130, 0.35); }
input, textarea, select { caret-color: var(--accent); accent-color: var(--accent); }
/* Control labels are chrome, not content: never select them on tap-hold. */
button, nav a, summary { user-select: none; -webkit-user-select: none; }
pre, #log-text, #edit-text, input, textarea, table { user-select: text; -webkit-user-select: text; }

#sidebar-close { display: none; }
#sidebar-scrim { display: none; }

@media (max-width: 860px) {
  /* --- App frame: flex column pinned to the usable viewport.
         Outer height comes from --mobile-app-height (visualViewport when
         available, else innerHeight, else 100dvh) so Safari keyboard and
         landscape heights are honoured without hardcoded assumptions. --- */
  .app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    height: var(--mobile-app-height, 100dvh);
    min-height: 100dvh;
    min-height: var(--mobile-app-height, 100dvh);
    max-height: var(--mobile-app-height, 100dvh);
    overflow: hidden;
  }
  main {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* --- Off-canvas view-selection drawer (uses the existing nav) --- */
  /* Pre-JS guard: the drawer starts off-canvas until explicitly opened. */
  .sidebar { visibility: hidden; }
  .app.nav-open .sidebar { visibility: visible; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(320px, 84vw);
    height: 100dvh;
    height: var(--mobile-app-height, 100dvh);
    z-index: 60;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    background: #0e141a;
    border-right: 1px solid var(--border);
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.55);
    transform: translateX(-103%);
    transition: transform 0.22s ease;
    display: flex;
    flex-direction: column;
  }
  .app.nav-open .sidebar { transform: none; }
  /* Desktop collapse must never hide the drawer on phones. The collapsed
     preference itself is preserved in JS/localStorage and restored when
     returning to desktop. */
  .app.sidebar-collapsed .sidebar { display: flex; }
  #server-sidebar[hidden] { display: none !important; }

  #sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    margin-left: auto;
    font-size: 14px;
  }
  .sidebar-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .sidebar-top-row .brand { flex: 1; min-width: 0; }
  /* Very short viewports (e.g. 844x220): drawer children keep natural
     non-shrinking heights and the drawer scrolls instead, so nav links
     never collapse over the label/footer and every destination stays
     reachable with scroll. */
  .sidebar-top-row,
  .host-card,
  .sidebar > .nav-label,
  #navigation,
  nav[aria-label="Server views"],
  .sidebar-bottom {
    flex-shrink: 0;
  }

  #sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.55);
    border: 0;
    padding: 0;
    cursor: default;
  }
  #sidebar-scrim[hidden] { display: none !important; }

  /* Compact brand/host blocks: no giant stacked headers on phones. */
  .brand { font-size: 11px; gap: 10px; }
  .brand-mark { font-size: 22px; padding: 0 8px; }
  .brand small { font-size: 9px; }
  .host-card { margin: 18px 0; padding: 10px; }
  .host-card div > span { font-size: 11px; max-width: none; }
  .nav-label, .eyebrow { font-size: 12px; line-height: 1.5; }
  .sidebar-bottom { font-size: 12px; }
  .sidebar-bottom p { font-size: 12px; }

  /* Readable vertical nav: all 9 destinations inside the 320px drawer.
     Overrides any older @media 700px row/horizontal nav so there is no
     horizontal hunt on phones. */
  #navigation,
  nav[aria-label="Server views"] {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    overflow-y: visible;
    gap: 4px;
    width: 100%;
    max-width: 100%;
  }
  #navigation a,
  nav[aria-label="Server views"] a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 12px;
    font-size: 15px;
    line-height: 1.35;
    border-radius: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: hidden;
  }
  nav a kbd, nav .nav-count kbd { display: none; }
  #navigation .nav-count,
  nav[aria-label="Server views"] .nav-count {
    margin-left: auto;
    flex-shrink: 0;
  }
  nav a[aria-current="page"] {
    background: #212e24;
    color: var(--accent);
    font-weight: 650;
  }

  /* --- Compact single app header: menu + view name + account/refresh ---
     Phone shows only the current view name (Overview, Terminal, ...).
     The "dev-server /" prefix is hidden on phones; desktop keeps it. */
  .topbar {
    position: relative;
    flex-shrink: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    height: 52px;
    padding: calc(4px + env(safe-area-inset-top, 0px)) 10px 4px;
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
    background: #101419;
    border-bottom: 1px solid var(--border);
  }
  .topbar-location { flex: 1; min-width: 0; gap: 8px; }
  /* Flex-centered title: the inline baseline linebox adds descender space
     below the text, which lifted the title ~3px above the menu/refresh/
     account centres. Inline-flex centering removes the baseline offset while
     keeping ellipsis, sizes, and widths unchanged. */
  .topbar-location .breadcrumb {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    min-width: 0;
  }
  .breadcrumb-host { display: none !important; }
  #breadcrumb {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
  }
  #sidebar-toggle {
    min-height: 44px;
    min-width: 44px;
    width: 44px;
    height: 44px;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border-color: transparent;
  }
  .header-actions { gap: 8px; margin-left: auto; flex-shrink: 0; }
  .live-controls { gap: 8px; }
  .live-controls #state { display: none; }
  .live-controls button, #refresh, #pause {
    min-height: 44px;
    min-width: 44px;
    font-size: 14px;
    padding: 10px 12px;
  }
  #refresh span { display: none; }
  /* In the terminal view the header keeps account + a compact refresh (the
     native app bar is gone); pause/state stay on the metrics views only. */
  .view-terminal .live-controls #pause,
  .view-terminal .live-controls #state,
  .view-terminal .live-controls #indicator { display: none; }
  #account-button {
    min-height: 44px;
    min-width: 44px;
    font-size: 14px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  #account-button .account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #212e24;
    color: var(--accent);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
  }
  #account-button:not(.signed-in) .account-avatar { display: none; }
  #account-button.signed-in .account-avatar { display: inline-flex; }
  #account-button.signed-in #account-label { display: none; }
  #account-button:not(.signed-in) #account-label { display: inline; }
  .account-menu {
    position: fixed;
    top: calc(52px + env(safe-area-inset-top, 0px));
    right: 8px;
    min-width: min(260px, 90vw);
  }
  .account-menu button { min-height: 44px; font-size: 14px; }

  /* Keyboard-focus compact mode: on very short viewports (landscape +
     on-screen keyboard, e.g. 844x220) hide the outer header so the shell
     keeps >=5 rows (~75px). JS toggles .keyboard-compact and restores the
     header as soon as the viewport grows again. */
  .app.keyboard-compact .topbar { display: none; }

  /* --- Content: full width, internal (not document) scroll --- */
  .page {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    padding: 16px 14px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-heading h1, #page-title { font-size: 26px; line-height: 1.2; }
  .page-description { font-size: 14px; }
  .sample-time { font-size: 12px; }
  /* Compact tools row: search shares the row instead of forcing Shortcuts
     onto its own line with dead space beside it. Wraps only when narrow. */
  .tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .tools .search { flex: 1 1 200px; min-width: 0; }
  .tools .search input { font-size: 16px; }
  .tools .sort-label { flex: 1 1 140px; min-width: 0; display: flex; align-items: center; gap: 8px; }
  .tools .sort-label[hidden] { display: none !important; }
  .tools #help-toggle { flex: 0 0 auto; margin-left: auto; }
  .tools input, .tools select, .tools button, #help-toggle, #context-refresh {
    min-height: 44px;
    font-size: 14px;
  }
  .section-navigation { gap: 10px; margin-bottom: 16px; }
  .view-tabs button { min-height: 44px; font-size: 14px; padding: 10px 16px; }

  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-two, .grid-equal { grid-template-columns: minmax(0, 1fr); }
  .panel, .unified-card, .card { min-width: 0; }
  .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { font-size: 13px; }
  pre { max-width: 100%; overflow-x: auto; }

  .lane-grid, .mount-grid, .core-grid, .metric-list { min-width: 0; }
  .session-row, .lane, .mount, .alert-item { min-width: 0; overflow-wrap: anywhere; }

  dialog {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    max-height: calc(var(--mobile-app-height, 100dvh) - 24px);
    overflow-y: auto;
  }

  /* --- Terminal view: flex fills the remainder, no hardcoded heights ---
     Overrides the desktop calc(100dvh-65px), the old @media 700px
     calc(100dvh-175px)/460px minimum, and the stronger
     .app.sidebar-collapsed .terminal-panel rule so a prior desktop
     collapse can never push the panel below the fold on phones. */
  .terminal-panel,
  .app.sidebar-collapsed .terminal-panel,
  .app.nav-open .terminal-panel {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0;
    background: #0b0f14;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }
  .terminal-panel iframe {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 0;
    width: 100%;
    border: 0;
    display: block;
  }
  .terminal-panel[hidden] { display: none !important; }

  .help { font-size: 14px; line-height: 1.65; }
  .notice, .note { font-size: 13px; line-height: 1.6; }

  /* --- Deliberate pressed feedback: green-tinted for selected/accent
         controls, neutral for plain buttons, warm for destructive. Only
         colors change so nothing shifts layout on press. --- */
  button:active { background-color: #1e2831; border-color: #4a5b6a; }
  nav a:active { background: #1a242e; }
  nav a[aria-current="page"]:active { background: #2a3a2d; border-color: #3b5037; }
  .view-tabs button:active { background: #1e2a33; }
  .view-tabs button[aria-pressed="true"]:active { background: #2a3a2d; }
  .inline-actions button:active { background: #1e2831; border-color: #4a5b6a; }
  .inline-actions .danger:active, button.danger:active { background: rgba(242, 140, 140, 0.16); border-color: #a06a64; }
  /* Primary/lime buttons carry dark text: press to a darker lime and keep
     the dark text legible (never the generic near-black pressed fill). */
  .unified-card button.primary:active, #auth-submit:active, #save-file:active {
    background-color: #9fdc74;
    border-color: #9fdc74;
    color: #14210d;
  }
  #account-button:active { background: #233026; border-color: #4c6a4d; }
  .account-menu button:active { background: #2a3641; }
  summary:active { color: var(--accent); }
  /* Sticky hover never lingers on touch: hover tints only where hover exists. */
  @media (hover: none) {
    button:hover, select:hover { border-color: var(--border); }
    #account-button:hover { border-color: #3b5037; }
    .account-menu button:hover { background: transparent; }
  }

  /* --- Mobile type scale: 14px body/controls, ~12px secondary labels,
         tabular metric values, comfortable line-heights. --- */
  body { font-size: 14px; line-height: 1.6; }
  .page { font-size: 14px; line-height: 1.65; }
  .page-description { font-size: 14px; line-height: 1.65; }
  .unified-card > h2, .panel-heading h2 { font-size: 15px; line-height: 1.35; }
  .stat-label { font-size: 12px; line-height: 1.5; }
  .stat-value { font-size: 26px; line-height: 1.2; font-variant-numeric: tabular-nums; }
  .stat-value small { font-size: 12px; }
  .stat-sub { font-size: 12px; line-height: 1.55; }
  .mono, td { font-variant-numeric: tabular-nums; }
  .gauge-state { font-size: 12px; }
  .unified-card .chart-labels { font-size: 12px; }
  .host-card div > span { font-size: 12px; }
  .brand small { font-size: 10px; }
  .sample-time { font-size: 12px; line-height: 1.55; }
  .muted { font-size: 13px; line-height: 1.6; }

  /* Cards keep radius/margins; .panel keeps its own internal heading/body
     padding (no double inset), others get the compact phone padding. */
  .unified-card, .card {
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    line-height: 1.6;
  }
  .panel { border-radius: 10px; margin-bottom: 14px; }
  .stat-grid { gap: 12px; }
  .grid-two, .grid-equal { gap: 12px; }
  .lane, .mount, .alert-item, .session-row { line-height: 1.55; }
  /* Settings stack single-column on phones (desktop keeps its grid). */
  .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* Inline actions + form controls: readable and touch-sized. */
  .inline-actions { gap: 8px; }
  .inline-actions button { min-height: 44px; font-size: 14px; padding: 10px 12px; }
  /* Tables stay dense and scroll sideways; pre/log keep pre formatting. */
  .table-wrap table { font-size: 13px; line-height: 1.5; }
  pre, #log-text { overflow-x: auto; }

  /* --- Cramped header fix: long account names never squeeze the view
         title. Signed-in phones show only the avatar circle; the full name
         lives in the dropdown, aria-label, and title. --- */
  .header-actions { min-width: 0; align-items: center; }
  .account-control { min-width: 0; max-width: 44vw; display: flex; align-items: center; }
  #account-button:not(.signed-in) {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #account-button.signed-in { max-width: 44px; overflow: hidden; }
  .topbar-location { min-width: 0; }
  .topbar-location .breadcrumb, #breadcrumb { min-width: 0; }

  /* --- Dialogs: consistent phone padding, clear actions, 16px inputs
         so iOS never auto-zooms into a field. --- */
  dialog { padding: 18px; border-radius: 12px; }
  .dialog-bar { display: flex; align-items: center; gap: 10px; }
  .dialog-bar button { min-height: 44px; font-size: 14px; }
  dialog input, dialog textarea, #edit-text, #auth-username, #auth-password {
    font-size: 16px;
    line-height: 1.5;
  }
  #edit-path { overflow-wrap: anywhere; font-size: 12px; }

  @media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
  }
}

@media (max-width: 380px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .topbar-location .breadcrumb { font-size: 13px; }
  #breadcrumb { font-size: 14px; }
  .header-actions { gap: 6px; }
}