/* Mobile-first corrections for map inspection. No changes to map data or firmware. */
@media(max-width:760px){
 html,body{max-width:100%;overflow-x:clip}
 #main,main,.panel,.calibration-layout,.calibration-main,.calibration-sidebar{min-width:0}
 .map-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
 .map-toolbar .field,.map-toolbar .grow,.map-toolbar .search-field,.map-toolbar .category-field{min-width:0!important;width:100%!important;max-width:100%!important;flex-basis:auto!important}
 .map-toolbar input,.map-toolbar select,.ecu-family-bar select{width:100%;min-width:0;max-width:100%;font-size:16px!important;overflow:hidden;text-overflow:ellipsis}
 .map-navigation{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 .map-navigation .button-group{display:flex;flex-wrap:wrap;gap:8px}
 .map-navigation .button{min-height:44px}
 .calibration-sidebar{max-height:none!important;overflow:visible!important}
 #maplist{max-width:100%;overflow-wrap:anywhere}
 #maplist button{min-width:0;max-width:100%;overflow-wrap:anywhere}
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .metrics>div{min-width:0}
 .metrics strong{overflow-wrap:anywhere}
 .language-switch{position:static!important;right:auto!important;bottom:auto!important;margin:10px 8px 12px auto!important;width:max-content;max-width:calc(100% - 16px);z-index:1!important}
 body{padding-bottom:max(24px,env(safe-area-inset-bottom))}
 .file-panel,.panel{max-width:100%}
}
@media(max-width:420px){
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .map-navigation .button-group{width:100%}
 .map-navigation .button-group .button{flex:1 1 auto}
}

/* Highlight the selected rectangular range in the existing matrix editor. */
#editortable td.range-selected{background:#154d6e!important;box-shadow:inset 0 0 0 2px #58c9ff}
#editortable td.range-selected input{background:transparent!important;color:#fff!important}
#mobile-range-toggle[aria-pressed="true"]{background:#17699b;color:#fff;border-color:#6dd5ff}
@media(max-width:760px){.bulk-controls .control-row{display:flex;flex-wrap:wrap;gap:8px}.bulk-controls .control-row .field{flex:1 1 125px;min-width:0}.bulk-controls input,.bulk-controls select{max-width:100%;font-size:16px}}

/* Override the JS inline floating garage card on narrow screens. */
@media(max-width:760px){
 #garage-vehicle-context{position:static!important;inset:auto!important;right:auto!important;bottom:auto!important;z-index:auto!important;width:auto!important;max-height:none!important;overflow:visible!important;margin:12px 10px!important;box-shadow:none!important}
 #garage-bin-association>section{max-height:calc(100dvh - 40px);overflow-y:auto}
 #garage-bin-association{padding:12px!important}
}

#editortable.range-selecting input[data-row][data-column]{touch-action:none;user-select:none;cursor:crosshair}
#editortable.range-selecting td{user-select:none}