/* Phone layouts use the browser's available height, including changing chrome. */
@media(max-width:700px){
 #rotationDialog{inset:0!important;margin:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;overflow:hidden!important}
 #rotationDialog header{padding:8px 10px;gap:8px;min-height:48px}
 #rotationDialog h2{font-size:17px}
 #rotationDialog header small{display:none}
 #rotationDialog #rotClose{min-height:36px;padding:6px 10px;font-size:13px}
 #rotationDialog .rotBody{padding:8px;overflow:auto;overscroll-behavior:contain;min-width:0}
 #rotationDialog #rotBackOffice{min-height:32px;padding:4px 10px;font-size:12px}
 #rotationDialog #rotStatus{font-size:11px;margin:4px 0}
 #rotationDialog .rotToolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;align-items:end;margin:6px 0}
 #rotationDialog .rotToolbar label{min-width:0;font-size:11px;grid-column:span 2}
 #rotationDialog .rotToolbar label:first-child{grid-column:span 2}
 #rotationDialog .rotToolbar input,#rotationDialog .rotToolbar select{width:100%;min-width:0;min-height:34px;height:34px;font-size:13px;padding:4px}
 #rotationDialog .rotToolbar button{min-width:0;min-height:34px;padding:4px;font-size:12px;overflow-wrap:anywhere}
 #rotationDialog #rotNew{grid-column:span 2}
 #rotationDialog .rotCounts{gap:4px;margin:6px 0}
 #rotationDialog .rotCounts span{padding:4px 6px;font-size:11px}
 #rotationDialog #rotOverview>.rotHint{display:none}
 #rotationDialog .rotScroll{max-height:none;overflow:visible;border-radius:6px}
 #rotationDialog table.rotCalendar{min-width:0;width:100%;table-layout:fixed}
 #rotationDialog .rotCalendar .rotDay,#rotationDialog .rotCalendar thead th:nth-child(n+2):nth-last-child(n+3){display:none}
 #rotationDialog .rotCalendar th:first-child{position:static;min-width:0;max-width:none;width:40%;padding:6px;font-size:12px;overflow-wrap:anywhere}
 #rotationDialog .rotCalendar thead th:nth-last-child(2){width:34%}
 #rotationDialog .rotCalendar thead th:last-child{width:26%}
 #rotationDialog .rotCalendar th,#rotationDialog .rotCalendar td{position:static;font-size:11px;padding:5px 3px;white-space:normal;vertical-align:middle}
 #rotationDialog .rotCalendar td:nth-last-child(2){padding:4px;font-size:11px;white-space:normal}
 #rotationDialog .rotCalendar td:last-child button{font-size:11px;padding:5px 3px;width:100%;min-height:36px}
 #rotationDialog .rotEditor{margin:8px 0;padding:12px}
 #rotationDialog .rotEditor h3{font-size:17px;margin-top:0}
 #rotationDialog .rotGrid{grid-template-columns:1fr}
 #rotationDialog .rotPeriod{gap:6px}
 #rotationDialog .rotPeriod button{font-size:12px;min-height:36px;padding:6px 9px}
 #rotationDialog .rotPeriod>div{min-width:0;flex-basis:100%}
 #driver[data-compact-driver][data-compact-screen="home"]:not(.hidden){padding:6px!important;gap:5px!important;height:100dvh!important}
 #driver[data-compact-driver][data-compact-screen="home"] .compactHeader{padding:8px!important;gap:5px!important;border-radius:12px}
 #driver[data-compact-driver][data-compact-screen="home"] .compactIdentity small{font-size:8px;letter-spacing:.7px}
 #driver[data-compact-driver][data-compact-screen="home"] #driverName{font-size:15px!important;line-height:1.15!important;margin:2px 0!important}
 #driver[data-compact-driver][data-compact-screen="home"] .compactPersonalText{font-size:10px;line-height:1.25;margin:2px 0}
 #driver[data-compact-driver][data-compact-screen="home"] #currentTruckPlate{font-size:12px!important}
 #driver[data-compact-driver][data-compact-screen="home"] .compactHeaderActions{width:108px;gap:4px}
 #driver[data-compact-driver][data-compact-screen="home"] .driverLangBtn{min-height:32px!important;height:32px;font-size:11px!important}
 #driver[data-compact-driver][data-compact-screen="home"] .compactHeaderActions #logoutD{min-height:32px!important;padding:4px 8px!important;font-size:12px!important}
 #driver[data-compact-driver][data-compact-screen="home"] .compactHeaderInfo{gap:3px!important}
 #driver[data-compact-driver][data-compact-screen="home"] .compactHeaderInfo .driverWeather{font-size:11px!important;line-height:1.2!important;padding:3px 0!important;min-height:0!important}
 #driver[data-compact-driver][data-compact-screen="home"] .compactHeaderInfo .driverWeather *{font-size:11px!important;line-height:1.2!important}
 #driver[data-compact-driver][data-compact-screen="home"] #weatherExtra{display:none!important}
 #driver[data-compact-driver][data-compact-screen="home"] .compactHeaderInfo #dailyMessage{padding:3px 6px!important;font-size:10px!important;line-height:1.2!important;min-height:0!important}
 #driver[data-compact-driver][data-compact-screen="home"] .compactScreenTitle{font-size:16px;line-height:20px}
 #driver[data-compact-driver] > #compactDashboard.active{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(5,minmax(50px,1fr));grid-auto-rows:minmax(50px,1fr);gap:5px;align-content:stretch;padding:0!important;overflow:auto!important;scroll-padding:4px}
 #driver[data-compact-driver] #compactDashboard>.compactTile{min-height:0;padding:5px 3px;gap:3px;font-size:11px;line-height:1.15;border-radius:10px;overflow-wrap:anywhere}
 #driver[data-compact-driver] #compactDashboard>.compactTile .compactIcon{font-size:22px;line-height:1}
 #driver #compactDashboard .compactTopTiles{gap:5px;min-height:0}
 #driver #compactDashboard .compactTopTiles>.compactLeaveAlert,#driver #compactDashboard .compactTopTiles>.driverPaymentAlert{padding:6px!important;gap:3px;font-size:10px;line-height:1.2;border-radius:10px}
 #driver #compactDashboard .compactTopTiles strong{font-size:11px;line-height:1.2}
 #driver[data-compact-driver] #compactDashboard .compactTopTiles>#officeEmergencyCall.compactEmergency{font-size:11px!important;padding:6px 4px!important;gap:4px!important;border-radius:10px!important}
 #driver[data-compact-driver] #compactDashboard .compactTopTiles>#officeEmergencyCall.compactEmergency>span:first-child{font-size:18px!important}
}