/* Mobile / installed-app optimizations. Loaded after style.css and the
   per-page sheets, so these win on small screens. Desktop is untouched. */

/* never let the page scroll sideways on a phone */
html, body { max-width: 100%; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

/* respect the notch / rounded corners when running full-screen (viewport-fit=cover) */
.navbar { padding-top: env(safe-area-inset-top, 0); }

@media (max-width: 720px) {
  :root { --max-width: 100%; }
  .container { padding: 0 14px; }

  /* --- typography / touch targets --- */
  body { font-size: 15px; }
  .btn, .btn-sm, button, .nav-links a, input, select, textarea { font-size: 15px; }
  .btn, button[type="submit"] { min-height: 44px; }
  input, select, textarea { min-height: 44px; }

  /* --- navbar --- */
  .navbar .container { padding: 0 14px; }
  .brand { font-size: 1.05rem; }
  .nav-links { top: 56px; gap: 10px; padding: 14px 18px; max-height: calc(100vh - 56px); overflow-y: auto; }
  .nav-links a { padding: 8px 0; width: 100%; }
  .nav-links .btn { width: 100%; text-align: center; }

  /* --- IoT panel: full-width stacked, no desktop floating --- */
  .iot-panel { padding: 14px 0 90px; }         /* bottom pad clears the app tab bar */
  .iot-header h1 { font-size: 1.4rem; }
  .iot-split { display: block !important; }
  .iot-split-map, .iot-split-data { width: auto !important; margin-bottom: 14px; }
  .iot-split .map-card { height: auto !important; }
  #gps-map { height: 58vh !important; }         /* tall, usable map */
  #device-tree { height: 50vh !important; }

  /* map widget internals: list on top, map below, controls wrap */
  .map-body { flex-direction: column; }
  .map-sidebar { width: auto !important; height: 32vh; flex: none !important; }
  #gps-map { flex: none !important; }             /* don't let flex squeeze the map */
  .map-splitter, .map-toggle { display: none; }  /* no side-resize on mobile */
  .map-card-head { gap: 8px; }
  .dl-toolbar { flex-wrap: wrap; }

  /* export / delete modals fill the screen nicely */
  .exp-modal { width: 92vw; max-width: 92vw; }

  /* tables scroll instead of breaking the layout */
  .iot-table, .ap-table, table { display: block; overflow-x: auto; white-space: nowrap; }

  /* back button a touch smaller and out of the way */
  .backrow { padding-top: 12px; }
  .crumbs [aria-current] { display: none; }  /* the page heading already says it */

  /* forms go single column and full width */
  .stacked-form, .inline-form { width: 100%; }
  .btnrow { flex-wrap: wrap; }

  /* footer breathing room above the tab bar */
  .footer { padding-bottom: 84px; }
}

/* ============ App-style bottom navigation (mobile only) ============ */
.app-tabbar { display: none; }

@media (max-width: 720px) {
  .app-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--bg-alt, #151a21);
    border-top: 1px solid var(--border, #2a3542);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0));
    justify-content: space-around;
  }
  .app-tabbar a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none;
    color: var(--text-dim, #9fadbd);
    font-size: 11px;
    padding: 4px 0;
  }
  .app-tabbar a { position: relative; }
  .app-tabbar a .ic { width: 22px; height: 22px; }
  .app-tabbar .tab-badge {
    position: absolute; top: 0; left: 50%; margin-left: 6px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--accent, var(--accent)); color: var(--on-accent);
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  }
  .app-tabbar a.active { color: var(--accent, var(--accent)); }
}

/* When installed & running standalone, hide the top hamburger clutter a bit
   and lean on the bottom tabs. */
@media (display-mode: standalone) and (max-width: 720px) {
  .footer { display: none; }
}