/* Web-only overlay, loaded AFTER the shared renderer app.css. Two jobs:
   (1) let the page scroll normally in a browser tab (the Electron layout
   pins everything to 100vh), and (2) make it usable on phones/tablets. */

/* Tap targets a bit comfier for touch without changing the desktop look. */
button, .tab, .dash-row.tappable, .list-modal-item { -webkit-tap-highlight-color: transparent; }

/* ----- Tablet / phone ----- */
@media (max-width: 860px) {
  html, body { height: auto; min-height: 100%; }

  /* Topbar wraps; tabs drop to their own full-width row and scroll. */
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .topbar .session { order: 2; font-size: 11px; }
  #btn-logout { order: 2; }
  .tabs {
    order: 3;
    margin-left: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabs .tab { flex: 1 0 auto; }

  /* Stack the two-pane layout vertically and let the document scroll. */
  .view { flex-direction: column; height: auto; min-height: calc(100vh - 52px); }
  .panel-left {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .panel-main { overflow: visible; }

  /* Tables: keep columns readable by scrolling sideways, not squishing. */
  .fleet-table-wrap { max-height: 70vh; }
  .fleet-table { min-width: 720px; }

  /* Dashboard tiles go single-column; modals near full-width. */
  .dash-grid { grid-template-columns: 1fr; }
  .dash-scroll { overflow: visible; }
  .dash-traffic { gap: 24px; }
  .modal, .list-modal { width: 94vw; }
  #view-login { padding-top: 24px; }
  .card { width: min(440px, 92vw); }
}

/* ----- Small phones ----- */
@media (max-width: 520px) {
  .tile .tile-value { font-size: 28px; }
  .dash-traffic .t-val { font-size: 22px; }
  .topbar .brand { font-size: 13px; letter-spacing: 1px; }
}