/* Responsive layer for the TorqueTrace prototype.
   The design is desktop-first and styled inline, so desktop widths are left
   exactly as designed and every rule here sits inside a max-width query.
   Inline styles outrank classes, hence the !important overrides. */

.tt-nav-scrim { display: none; }

/* Hover feedback on inactive navigation items; the active item keeps its colour. */
.tt-nav button[style*="background: transparent"]:hover {
  background: #0F3A49 !important;
  color: #FFFFFF !important;
}

/* Tablet and small laptop: let the top bar wrap instead of overflowing. */
@media (max-width: 1100px) {
  .tt-topbar {
    height: auto !important;
    min-height: 56px;
    flex-wrap: wrap;
    row-gap: 8px !important;
    padding: 8px 12px !important;
  }
  .tt-topbar select { max-width: 240px !important; }
}

/* Phone and portrait tablet. */
@media (max-width: 768px) {
  .tt-topbar { column-gap: 8px !important; }
  .tt-topbar select { flex: 1 1 110px; min-width: 0; max-width: none !important; }

  /* Navigation: an icon rail when folded, a drawer over the page when open. */
  .tt-nav { min-height: 0 !important; }
  .tt-nav-rail { width: 52px !important; }
  .tt-nav-open {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    z-index: 85;
    width: min(280px, 85vw) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  }
  .tt-nav-open + .tt-nav-scrim {
    display: block;
    position: fixed; inset: 0;
    z-index: 84;
    background: rgba(11, 46, 59, .45);
  }

  /* Content: wide rows scroll inside the page instead of being clipped. */
  .tt-main { overflow-x: auto !important; }
  .tt-main table { display: block; max-width: 100%; overflow-x: auto; }
  .tt-main img, .tt-main svg { max-width: 100%; }
  .tt-main select, .tt-main input { max-width: 100%; }

  /* Menus that hang off the top bar (New, Notifications) become full-width
     sheets. z-index 60 singles out the menus from small badges. */
  .tt-topbar [style*="position: absolute"][style*="z-index: 60"] {
    position: fixed !important;
    left: 8px !important; right: 8px !important; top: 60px !important;
    width: auto !important; max-height: 70vh; overflow-y: auto !important;
  }
}

/* Phone: multi-column grids stack into one column. */
@media (max-width: 640px) {
  .tt-main [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .tt-main [style*="grid-column"] { grid-column: auto !important; }
  .tt-main [style*="width: 3"], .tt-main [style*="width: 4"], .tt-main [style*="width: 5"] { max-width: 100%; }

  /* Module pages pad 24px 28px; a phone needs that width for content. */
  .tt-main [style*="padding: 24px 28px"] { padding-left: 12px !important; padding-right: 12px !important; }

  /* Field app: on a real phone, drop the drawn handset and fill the screen. */
  .tt-main [style*="flex-shrink: 0"]:has(> [style*="border-radius: 44px"]) { width: 100%; flex-shrink: 1 !important; }
  .tt-main [style*="border-radius: 44px"] { padding: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; }
  .tt-main [style*="border-radius: 34px"] {
    width: 100% !important; max-width: 100% !important;
    height: calc(100dvh - 150px) !important; min-height: 520px;
    border-radius: 10px !important; border: 1px solid #C9CFD4;
  }
}

/* Sign-in screen on a narrow phone. */
@media (max-width: 480px) {
  [style*="padding: 48px 32px 64px"] { padding: 28px 16px 40px !important; }
  [style*="minmax(340px"] { grid-template-columns: minmax(0, 1fr) !important; }
}