/* Global responsive safety layer without changing existing UI theme */
* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* Keep data tables usable on small screens */
.table-responsive-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Shared viewport variables keep tablet sizing fluid across pages */
:root {
  --tablet-page-inline: 3%;
  --tablet-panel-width: 34%;
  --tablet-panel-secondary: 40%;
  --tablet-content-width: 63%;
  --tablet-card-grid: repeat(2, minmax(0, 48%));
}

@media (max-width: 1023px) {
  .table-responsive-wrap table {
    min-width: 720px;
  }
}

/*
  Tablet layer:
  Combines desktop structure with mobile spacing so mid-size screens keep
  the same visual identity without feeling cramped.
*/
@media (min-width: 768px) and (max-width: 1279px) {
  body {
    overflow-x: hidden;
  }

  header {
    padding-left: var(--tablet-page-inline) !important;
    padding-right: var(--tablet-page-inline) !important;
  }

  header > div:first-child {
    width: 58%;
    min-width: 0;
    gap: 4%;
  }

  header > div:last-child {
    width: 40%;
    min-width: 0;
    justify-content: flex-end;
    gap: 4%;
  }

  header nav {
    gap: 4% !important;
    min-width: 0;
  }

  header nav a {
    white-space: nowrap;
  }

  /*
    Dashboard tablet header:
    use the mobile-style left section while keeping the laptop action icons
    and profile cluster on the right.
  */
  .viewport-tablet #mobileLogoBtn,
  .viewport-tablet #mobileBrandName {
    display: inline-flex !important;
  }

  .viewport-tablet #dashboardDesktopBrand,
  .viewport-tablet #dashboardDesktopNav,
  .viewport-tablet #dashboardHeaderSearch {
    display: none !important;
  }

  .viewport-tablet #dashboardSidebarMobileMenu {
    display: flex !important;
    flex-direction: column;
  }

  .viewport-tablet #dashboardSidebarUniversalSearch {
    order: 1;
  }

  .viewport-tablet #dashboardSidebarNavLinks {
    order: 2;
  }

  .viewport-tablet #dashboardSidebarProfileCard {
    display: none !important;
  }

  .viewport-tablet #mobileSidebarBackdrop {
    position: fixed !important;
    inset: 4rem 0 0 0 !important;
    z-index: 25 !important;
  }

  .viewport-tablet header > div:first-child {
    width: 42% !important;
    gap: 3% !important;
  }

  .viewport-tablet header > div:last-child {
    width: 56% !important;
    gap: 3% !important;
  }

  header h1,
  #mobileBrandName,
  #sharedMobileBrandName {
    max-width: 100%;
    min-width: 0;
  }

  .max-w-7xl,
  .max-w-\[1280px\] {
    width: 94%;
    max-width: 94% !important;
  }

  #notificationPanel {
    right: var(--tablet-page-inline) !important;
    left: auto !important;
    width: 42% !important;
    max-width: 42% !important;
  }

  .table-responsive-wrap {
    width: 100%;
  }

  .table-responsive-wrap table {
    min-width: 100%;
  }

  /*
    Dashboard tablet sidebar behaves like a drawer:
    it can be closed, reopened from the rocket button, and overlays the map.
  */
  #dashboardSidebar {
    position: fixed !important;
    top: 4rem !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 36% !important;
    max-width: none !important;
    flex: 0 0 36% !important;
    transform: translateX(-100%) !important;
    z-index: 30 !important;
    box-shadow: 0 1.5rem 2.5rem rgba(15, 23, 42, 0.28);
  }

  #dashboardSidebar + main {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  .viewport-tablet.dashboard-tablet-sidebar-open #dashboardSidebar {
    transform: translateX(0) !important;
  }

  /*
    Tablet dashboard behavior:
    selecting a vehicle closes the drawer; deselecting reopens it.
  */
  .viewport-tablet.dashboard-tablet-selection-active #dashboardSidebar {
    transform: translateX(-100%) !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active.dashboard-tablet-sidebar-open #dashboardSidebar {
    transform: translateX(0) !important;
  }

  #dashboardSidebar .p-4,
  #dashboardSidebar .p-3 {
    padding-left: 5%;
    padding-right: 5%;
  }

  #telemetryPanel {
    left: auto !important;
    right: 2.5% !important;
    bottom: 3% !important;
    width: var(--tablet-panel-secondary) !important;
    max-width: none !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryPanel {
    left: 2% !important;
    right: 2% !important;
    bottom: 2% !important;
    width: 96% !important;
    max-width: 96% !important;
    height: 24% !important;
    min-height: 22% !important;
  }

  #telemetryGrid {
    grid-template-columns: repeat(2, minmax(0, 48%)) !important;
    gap: 4% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  /*
    Selected tablet vehicle state should mirror the laptop bottom bar:
    four modules in one row, with percentage sizing for broad tablet support.
  */
  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid {
    grid-template-columns: 16% 31% 31% 16% !important;
    gap: 2% !important;
    padding-top: 2% !important;
    padding-bottom: 2% !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
    align-items: center !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryPanelHeader {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    padding-top: 1.2% !important;
    padding-bottom: 1.2% !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
    column-gap: 2% !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryPanelIdentity {
    min-width: 0 !important;
    width: 100% !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryPanelActions {
    justify-self: end !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryPanelActions > * {
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryReportsLink,
  .viewport-tablet.dashboard-tablet-selection-active #telemetryPanelActions .follow-live-btn {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryReportsLink .material-symbols-outlined,
  .viewport-tablet.dashboard-tablet-selection-active #telemetryPanelActions .follow-live-btn .material-symbols-outlined {
    font-size: 0.875rem !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #device-name-display {
    font-size: 92% !important;
    line-height: 1.2 !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #closeTelemetry {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div {
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div:nth-child(1) {
    padding-right: 6% !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div:nth-child(2) {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div:nth-child(2) > div {
    max-width: 100% !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #last-location-value {
    font-size: 70% !important;
    line-height: 1.28 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div:nth-child(3) {
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div:nth-child(3) .grid {
    gap: 2% 1.5% !important;
    grid-template-columns: 49.25% 49.25% !important;
    align-content: center !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div:nth-child(3) p,
  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div:nth-child(3) span {
    min-width: 0 !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div:nth-child(3) .mb-2 {
    margin-bottom: 0.2rem !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div:nth-child(3) .gap-2 {
    gap: 0.35rem !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid > div:nth-child(4) {
    padding-left: 2% !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #current-speed {
    font-size: 240% !important;
  }

  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid .text-xs,
  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid .text-\[10px\],
  .viewport-tablet.dashboard-tablet-selection-active #telemetryGrid .text-\[11px\] {
    line-height: 1.2 !important;
  }

  /*
    Trips tablet layout:
    let the bottom rail span the full viewport width and compress the
    summary/telemetry blocks so the speed graph owns most of the row.
  */
  #playbackSidebar {
    width: 34% !important;
    flex: 0 0 34% !important;
  }

  #tripBottomBar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 28% !important;
  }

  #tripBottomBar > .flex {
    width: 100% !important;
    align-items: stretch !important;
  }

  #tripBottomBar > .flex > div:nth-child(1) {
    width: 22% !important;
    flex: 0 0 22% !important;
  }

  #tripBottomBar > .flex > div:nth-child(2) {
    width: 18% !important;
    flex: 0 0 18% !important;
  }

  #tripBottomBar > .flex > div:nth-child(3) {
    flex: 1 1 60% !important;
    min-width: 0 !important;
  }

  #tripsPopupPanel {
    left: auto !important;
    right: 3% !important;
    width: 42% !important;
    max-width: 42% !important;
  }

  #mapUtilityControls {
    right: 3% !important;
  }

  /*
    Shared cards and filter areas on content pages: shift dense 3-column
    rows to a 2-column tablet grid and allow inputs to breathe.
  */
  .md\:grid-cols-3 {
    grid-template-columns: var(--tablet-card-grid) !important;
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 48%)) !important;
  }

  .min-w-\[250px\] {
    min-width: 46% !important;
  }

  .flex.flex-wrap.gap-4 > .flex-1,
  .flex.flex-wrap.gap-4 > select {
    flex: 1 1 48%;
    width: 48%;
  }

  .flex.items-start.justify-between.gap-4 {
    align-items: center;
    flex-wrap: wrap;
  }

  .flex.items-center.justify-between.mt-4 {
    gap: 4%;
    flex-wrap: wrap;
  }

  .flex.items-center.justify-between.mt-4 > * {
    flex: 1 1 48%;
  }
}

/* Improve visual fill on very large displays while preserving layout style */
@media (min-width: 1536px) {
  .max-w-7xl,
  .max-w-\[1280px\] {
    max-width: 1500px !important;
  }
}

@media (min-width: 1920px) {
  .max-w-7xl,
  .max-w-\[1280px\] {
    max-width: 1720px !important;
  }
}

/* Prevent long topbar titles from overflowing on narrow phones */
@media (max-width: 480px) {
  header h1 {
    max-width: 62vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}