/* source block 176: dmm-v21904-mobile-backoffice-pass1; v2.19.18 line 34246 */ /* v2.19.04 — Back Office phone optimisation pass 1. Responsive CSS only. Desktop >= 901px and Driver Portal behaviour are intentionally unchanged. */ @media (max-width:900px){ body:not(.driver-mode) .app-shell{margin-left:0!important;width:100%!important;} body:not(.driver-mode) main{padding:14px 12px 30px!important;overflow-x:hidden!important;} body:not(.driver-mode) .topbar{height:auto!important;min-height:64px!important;padding:9px 10px!important;gap:8px!important;align-items:center!important;} body:not(.driver-mode) .topbar>div:first-of-type{min-width:0;flex:1 1 auto;} body:not(.driver-mode) .topbar h2{font-size:1.05rem!important;margin:0 0 2px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} body:not(.driver-mode) .topbar p{font-size:.72rem!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} body:not(.driver-mode) .topbar-account{gap:5px!important;flex:0 0 auto;} body:not(.driver-mode) .topbar-account .account-copy{display:none!important;} body:not(.driver-mode) #dmmCloudRefreshTopBtn, body:not(.driver-mode) #changeCloudPasswordBtn{display:none!important;} body:not(.driver-mode) #officeLogoutTopBtn{padding:8px 9px!important;font-size:.76rem!important;} body:not(.driver-mode) .mobile-nav-toggle{width:40px!important;height:40px!important;min-width:40px!important;} body:not(.driver-mode) .card{border-radius:11px!important;box-shadow:0 3px 14px rgba(20,30,45,.07)!important;} body:not(.driver-mode) .card-head{padding:13px 14px!important;} body:not(.driver-mode) .card-head h3{font-size:1rem!important;} body:not(.driver-mode) .section-actions{flex-direction:column!important;align-items:stretch!important;gap:9px!important;} body:not(.driver-mode) .section-actions>*,body:not(.driver-mode) .search-box{width:100%!important;} body:not(.driver-mode) .search-box input{width:100%!important;max-width:none!important;min-height:44px!important;} body:not(.driver-mode) input,body:not(.driver-mode) select,body:not(.driver-mode) textarea{max-width:100%!important;font-size:16px;} body:not(.driver-mode) button{min-height:40px;} body:not(.driver-mode) .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:12px!important;} body:not(.driver-mode) .stat-card{padding:12px!important;border-radius:10px!important;min-width:0!important;} body:not(.driver-mode) .stat-card span{font-size:.7rem!important;margin-bottom:5px!important;} body:not(.driver-mode) .stat-card strong{font-size:1.2rem!important;overflow-wrap:anywhere;} body:not(.driver-mode) .dashboard-grid{display:block!important;} body:not(.driver-mode) .dashboard-grid>.card{margin-bottom:12px!important;} body:not(.driver-mode) .dashboard-quick-datetime{padding:12px!important;} body:not(.driver-mode) .dashboard-quick-datetime-copy{margin-bottom:10px!important;} body:not(.driver-mode) .dashboard-quick-datetime-controls, body:not(.driver-mode) .dashboard-find-job-row, body:not(.driver-mode) .dashboard-date-filter-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important;} body:not(.driver-mode) .dashboard-find-job-row small{display:none!important;} body:not(.driver-mode) .dashboard-primary-filters, body:not(.driver-mode) .customer-search-grid, body:not(.driver-mode) .catalogue-search-grid{grid-template-columns:1fr!important;gap:9px!important;} body:not(.driver-mode) .entity-card-grid{grid-template-columns:1fr!important;gap:10px!important;} body:not(.driver-mode) .entity-card{padding:13px!important;border-radius:10px!important;} body:not(.driver-mode) .form-grid{grid-template-columns:1fr!important;gap:10px!important;} body:not(.driver-mode) .dialog-card,body:not(.driver-mode) dialog{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;} body:not(.driver-mode) .dialog-actions{position:sticky;bottom:0;background:#fff;padding:10px 0 2px;z-index:4;flex-wrap:wrap!important;} body:not(.driver-mode) .table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;border-radius:10px;} body:not(.driver-mode) table{min-width:680px;} body:not(.driver-mode) th,body:not(.driver-mode) td{padding:9px 10px!important;font-size:.78rem!important;} body:not(.driver-mode) .calendar-toolbar{grid-template-columns:1fr!important;gap:9px!important;padding:10px!important;} body:not(.driver-mode) .view-tabs{overflow-x:auto!important;width:100%!important;-webkit-overflow-scrolling:touch;} body:not(.driver-mode) .view-tab{white-space:nowrap!important;flex:0 0 auto;} body:not(.driver-mode) .date-controls{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;justify-items:stretch!important;} body:not(.driver-mode) .date-controls h3{min-width:0!important;width:100%!important;font-size:.95rem!important;text-align:left!important;} body:not(.driver-mode) .date-nav{width:100%!important;} body:not(.driver-mode) .date-nav button{flex:1 1 0!important;} body:not(.driver-mode) .calendar-wrap{max-height:calc(100dvh - 190px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain;} body:not(.driver-mode) .sidebar{padding:14px 10px!important;} body:not(.driver-mode) .sidebar .brand{margin-bottom:8px!important;padding:0 7px 8px!important;} body:not(.driver-mode) .sidebar .brand-mark{width:40px!important;height:40px!important;} body:not(.driver-mode) .sidebar nav{padding-top:4px!important;} body:not(.driver-mode) .sidebar nav .nav-item{min-height:42px!important;padding:9px 11px!important;} } @media (max-width:560px){ body:not(.driver-mode) main{padding:10px 8px 24px!important;} body:not(.driver-mode) .topbar{padding:8px!important;} body:not(.driver-mode) .topbar p{display:none!important;} body:not(.driver-mode) .stat-grid{gap:6px!important;} body:not(.driver-mode) .stat-card{padding:10px!important;} body:not(.driver-mode) .dashboard-filter-heading{padding:10px 11px!important;} } /* source block 177: dmm-v21908-mobile-planner-date-portrait-editor-final; v2.19.18 line 34323 */ /* v2.19.08 — mobile-only final reinforcement. 1) visible planner period/date strip beneath toolbar. 2) restore portrait-first Job Editor after v2.19.07 navigation pass. Desktop and Driver Portal unchanged. */ @media (max-width:900px){ body:not(.driver-mode) #mobilePlannerPeriodLabel{ display:block!important; width:calc(100% - 24px)!important; max-width:calc(100% - 24px)!important; margin:8px 12px 10px!important; padding:8px 12px!important; box-sizing:border-box!important; border:1px solid #dbe3ec!important; border-radius:10px!important; background:#fff!important; color:#18223a!important; text-align:center!important; font-size:.88rem!important; line-height:1.15!important; font-weight:900!important; letter-spacing:.01em!important; box-shadow:0 2px 8px rgba(15,23,42,.05)!important; } /* Portrait Job Editor is the final mobile authority. */ body:not(.driver-mode) #jobDialog{ position:fixed!important; inset:0!important; margin:0!important; width:100vw!important; min-width:0!important; max-width:100vw!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; padding:0!important; border-radius:0!important; overflow-x:hidden!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; box-sizing:border-box!important; background:#fff!important; } body:not(.driver-mode) #jobDialog *{box-sizing:border-box!important;max-width:100%!important;} body:not(.driver-mode) #jobDialog #jobForm{ display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; min-height:100%!important; padding:0 10px 92px!important; margin:0!important; overflow-x:hidden!important; } body:not(.driver-mode) #jobDialog .dialog-head{ position:sticky!important; top:0!important; z-index:95!important; width:auto!important; min-width:0!important; margin:0 -10px 10px!important; padding:10px 12px 8px!important; background:#fff!important; border-bottom:1px solid #e5e7eb!important; box-shadow:0 2px 8px rgba(15,23,42,.06)!important; overflow:hidden!important; } body:not(.driver-mode) #jobDialog .dialog-head>div, body:not(.driver-mode) #jobDialog #jobFormGrid, body:not(.driver-mode) #jobDialog #jobFormGrid>*{ width:100%!important; min-width:0!important; max-width:100%!important; } body:not(.driver-mode) #jobDialog .dialog-head p{display:none!important;} body:not(.driver-mode) #jobDialog .dialog-close{position:absolute!important;right:8px!important;top:8px!important;z-index:110!important;} body:not(.driver-mode) #jobDialog .job-identity-phone-row, body:not(.driver-mode) #jobDialog #jobFormGrid, body:not(.driver-mode) #jobDialog #jobFormGrid.form-grid, body:not(.driver-mode) #jobDialog .audit-row, body:not(.driver-mode) #jobDialog .delivery-row, body:not(.driver-mode) #jobDialog .paired-address-columns, body:not(.driver-mode) #jobDialog .paired-address-fields, body:not(.driver-mode) #jobDialog .sprint2-site-grid, body:not(.driver-mode) #jobDialog .job-marketing-pair, body:not(.driver-mode) #jobDialog .job-customer-marketing-quick-pair, body:not(.driver-mode) #jobDialog .job-status-pay-grid, body:not(.driver-mode) #jobDialog .full-job-notes-split, body:not(.driver-mode) #jobDialog .job-total-breakdown{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; width:100%!important; min-width:0!important; max-width:100%!important; gap:9px!important; } body:not(.driver-mode) #jobDialog .customer-flow-selected, body:not(.driver-mode) #jobDialog .job-line, body:not(.driver-mode) #jobDialog .line-items-panel, body:not(.driver-mode) #jobDialog .delivery-charge-panel, body:not(.driver-mode) #jobDialog .sprint2-address-panel, body:not(.driver-mode) #jobDialog .sprint2-contact-panel{ width:100%!important; min-width:0!important; max-width:100%!important; } body:not(.driver-mode) #jobDialog .job-line{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;} body:not(.driver-mode) #jobDialog input, body:not(.driver-mode) #jobDialog select, body:not(.driver-mode) #jobDialog textarea, body:not(.driver-mode) #jobDialog label{min-width:0!important;max-width:100%!important;} body:not(.driver-mode) #jobDialog input, body:not(.driver-mode) #jobDialog select, body:not(.driver-mode) #jobDialog textarea{width:100%!important;} body:not(.driver-mode) #jobDialog #jobLiveStatusStrip{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:6px!important; width:100%!important; min-width:0!important; overflow:visible!important; } body:not(.driver-mode) #jobDialog #jobLiveStatusStrip>*{width:100%!important;min-width:0!important;margin:0!important;white-space:normal!important;} body:not(.driver-mode) #jobDialog #jobCreatedByQuick, body:not(.driver-mode) #jobDialog #jobTopSaveBtn{grid-column:1/-1!important;} body:not(.driver-mode) #jobDialog #jobQuickNav{ display:flex!important; flex-wrap:nowrap!important; width:100%!important; min-width:0!important; gap:6px!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch!important; padding:3px 0 7px!important; } body:not(.driver-mode) #jobDialog #jobQuickNav .job-quick-nav-spacer{display:none!important;} body:not(.driver-mode) #jobDialog #jobQuickNav button{flex:0 0 auto!important;min-height:40px!important;white-space:nowrap!important;} body:not(.driver-mode) #jobDialog .dialog-actions{ position:fixed!important; left:0!important;right:0!important;bottom:0!important; z-index:120!important; display:flex!important; flex-wrap:wrap!important; gap:7px!important; width:100%!important; min-width:0!important; margin:0!important; padding:8px 10px calc(8px + env(safe-area-inset-bottom))!important; background:#fff!important; border-top:1px solid #dce3eb!important; box-shadow:0 -5px 16px rgba(15,23,42,.10)!important; } body:not(.driver-mode) #jobDialog .dialog-actions .spacer{display:none!important;} body:not(.driver-mode) #jobDialog .dialog-actions button{flex:1 1 120px!important;min-width:0!important;margin:0!important;} } @media (min-width:901px){ #mobilePlannerPeriodLabel{display:none!important;} }