*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:#031321;color:#f4f8fb}button,input{font:inherit}.login-screen{display:none;position:fixed;inset:0;overflow:hidden;background:#06111d url('assets/login-bg.jpg') center center/cover no-repeat}.login-screen.active{display:flex;align-items:center;justify-content:center}.login-overlay{position:absolute;inset:0;background:rgba(2,11,23,.53)}.login-content{position:relative;z-index:2;width:min(620px,92vw);display:flex;flex-direction:column;align-items:center;transform:translateY(-2vh)}.login-brand{width:100%;text-align:center;margin-bottom:52px}.login-brand>img{display:block;width:min(590px,88vw);height:auto;margin:0 auto 22px}.login-subtitle{display:flex;align-items:center;justify-content:center;gap:22px}.login-subtitle span{height:1px;width:92px;background:#0ea5b7;opacity:.75}.login-subtitle h1{font-size:28px;font-weight:400;letter-spacing:8px;margin:0;color:#fff}.login-brand h2{font-size:16px;font-weight:400;letter-spacing:8px;color:#d9d9dd;margin:18px 0 0}.login-card{width:510px;max-width:90vw;padding:36px;border:1px solid rgba(161,185,208,.38);border-radius:15px;background:linear-gradient(145deg,rgba(23,34,53,.90),rgba(5,18,32,.94));box-shadow:0 22px 55px rgba(0,0,0,.42)}.login-input{height:64px;border:1px solid #425269;border-radius:9px;background:rgba(24,39,59,.52);display:flex;align-items:center;margin-bottom:16px;overflow:hidden}.login-input:focus-within{border-color:#269bd8;box-shadow:0 0 0 2px rgba(38,155,216,.12)}.login-icon{width:56px;text-align:center;color:#69bce9;font-size:25px}.login-input input{flex:1;height:100%;min-width:0;border:0;outline:0;background:transparent;color:white;font-size:18px;padding:0 12px 0 0}.login-input input::placeholder{color:#aab2bd}.login-input button{width:55px;height:100%;border:0;background:transparent;color:#aeb9c5;font-size:21px;cursor:pointer}.login-btn{width:100%;height:64px;border:0;border-radius:8px;background:linear-gradient(#118be1,#0870c8);color:white;font-size:20px;letter-spacing:3px;cursor:pointer;box-shadow:0 12px 28px rgba(0,113,201,.22)}.login-btn:hover{filter:brightness(1.08)}.app-shell{display:none;min-height:100vh;background:#031321 url('assets/home-bg.png') center center/cover fixed no-repeat}.app-shell.active{display:block}.topbar{height:94px;display:flex;align-items:center;gap:18px;padding:12px 28px 12px 210px;border-bottom:1px solid #1b3b50;background:rgba(2,17,29,.96);position:sticky;top:0;z-index:30}.topbar img{width:220px;max-height:50px;object-fit:contain}.brand-title{text-align:center;position:absolute;left:50%;transform:translateX(-50%)}.brand-title strong{display:block;font-size:23px;letter-spacing:6px}.brand-title span{display:block;font-size:12px;letter-spacing:4px}.crew-pill{border:1px solid #173b52;background:#071d2e;border-radius:9px;padding:8px 15px}.crew-pill small{display:block;color:#9bb4c2}.mobile-menu{display:none}.spacer{flex:1}#googleState{font-size:11px;color:#85b8d2}.sidebar{position:fixed;left:0;top:94px;bottom:0;width:174px;border-right:1px solid #1a3b51;background:#031524;padding:18px 12px;z-index:25;display:flex;flex-direction:column;gap:7px}.sidebar button{border:0;background:transparent;color:#d9e6ed;text-align:left;padding:14px 14px;border-radius:8px;cursor:pointer}.sidebar button.selected{background:#0b4f8e;color:white}.sidebar span{margin-left:10px}.side-bottom{margin-top:auto;border-top:1px solid #1d3c50;padding:18px 12px;display:grid;gap:5px}.side-bottom b{font-size:28px}.side-bottom small{color:#45d38b}main{margin-left:174px}.page{display:none;padding:28px 32px 95px;max-width:1500px;margin:auto}.page.active{display:block}.home-hero{height:210px;margin:-28px -32px 0;padding:32px;text-align:center;background:linear-gradient(rgba(3,19,33,.30),rgba(3,19,33,.78));border-bottom:1px solid #24485e}.home-hero img{width:330px;max-height:62px;object-fit:contain}.home-hero h1{margin:15px 0 2px;letter-spacing:8px}.home-hero h2{margin:0;font-size:16px;letter-spacing:5px;color:#57aef5}.home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:-20px auto 30px;max-width:1050px;position:relative}.dash-card{min-height:200px;border:1px solid #24506a;border-radius:12px;background:linear-gradient(#0c2c40,#061a29);color:white;padding:0 20px 20px;overflow:hidden}.dash-card span{display:block;margin:0 -20px 20px;padding:11px;font-weight:700}.dash-card b{display:block;font-size:48px}.dash-card small{display:block;margin-top:12px;font-weight:700}.blue span{background:#1264bd}.amber span{background:#b75c08}.green span{background:#167c45}.purple span{background:#633ba0}.quick{max-width:1150px;margin:auto;border-top:1px solid #2c5368;padding-top:14px}.quick h2{text-align:center;font-size:15px;letter-spacing:1px}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:#061b2b;border:1px solid #1b4358;border-radius:12px;padding:22px}.quick-grid button{min-height:110px;border:1px solid #20577a;background:#09253a;color:white;border-radius:10px;display:flex;align-items:center;gap:14px;text-align:left;padding:18px;font-size:28px}.quick-grid span{font-size:14px}.quick-grid b,.quick-grid small{display:block}.quick-grid small{color:#9ab2c0;margin-top:5px}.page-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.page-title h1{margin:3px 0;font-size:28px}.page-title small,.eyebrow{color:#39bfff;letter-spacing:1.5px}.page-title button{border:1px solid #1d7898;background:#0c3a50;color:white;border-radius:8px;padding:10px 14px}.job-tabs{display:flex;gap:8px;margin-bottom:12px}.job-tabs button{border:1px solid #1b4559;background:#0b2535;color:#cde3ed;border-radius:8px;padding:9px 18px}.job-tabs .selected{background:#0b5da6}.notice{border:1px solid #21485a;background:#0a2231;color:#9db8c6;border-radius:10px;padding:14px;margin:12px 0}.job-list{display:grid;gap:10px}.job{display:grid;grid-template-columns:100px 1fr auto;gap:16px;align-items:center;padding:16px;border:1px solid #1c4355;background:#071d2d;border-radius:10px;cursor:pointer}.job b,.job small{display:block}.job small{color:#8eabb9;margin-top:4px}.badge{padding:6px 10px;border-radius:999px;background:#10374b;color:#58cdf1;font-size:12px}.detail-head{display:flex;align-items:center;justify-content:space-between}.detail-head h1{margin:4px 0 16px}.detail-head .priority{color:#ffc400}.summary-strip,.request-strip{display:grid;grid-template-columns:auto repeat(4,1fr);border:1px solid #21485d;background:#061b2b;border-radius:10px;margin-bottom:14px;overflow:hidden}.summary-strip>div,.request-strip>div{padding:14px 18px;border-left:1px solid #17394d}.summary-strip .type-chip{border-left:0;display:flex;align-items:center}.type-chip span{background:#0b4e95;padding:9px 14px;border-radius:7px}.request-strip{grid-template-columns:repeat(4,1fr)}.request-strip>div:first-child{border-left:0}.k{display:block;color:#8fa7b5;font-size:10px;text-transform:uppercase;margin-bottom:5px}.detail-body{display:grid;grid-template-columns:360px 1fr;gap:14px}.panel{border:1px solid #21485d;background:#061b2b;border-radius:10px;padding:14px}.panel h3{margin:0 0 14px;font-size:15px}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.info-grid .wide{grid-column:1/-1}.status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.status-box{border:1px solid #28516a;border-radius:7px;padding:12px;text-align:center;font-size:12px}.status-box.active{border-color:#ffc400;color:#ffc400}.location-panel{padding:0;overflow:hidden}.location-title{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid #21485d}.location-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:14px}.location-meta>div{padding:0 12px;border-right:1px solid #17394d}.location-meta>div:nth-child(4n){border-right:0}.map-box{height:330px;margin:0 14px 14px;border-radius:9px;overflow:hidden;border:1px solid #28516a}.map-box iframe{width:100%;height:100%;border:0}.photo-panel{margin-top:14px}.photo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;min-height:110px}.photo-placeholder{border:1px dashed #31576b;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#7594a5}.actions{display:grid;grid-template-columns:1fr 2fr;gap:14px;margin-top:16px}.actions button{padding:14px;border-radius:7px;border:1px solid #285d79;background:#09283b;color:white}.actions .start{background:#167d43;border-color:#36a965}.bottom-nav{display:none}.map-page{padding:0;height:calc(100vh - 94px);max-width:none}.map-page iframe{border:0;width:100%;height:100%}
@media(max-width:760px){.login-art{object-fit:cover;object-position:center}.login-fields{top:68%;width:63%;gap:9px}.login-fields input{height:42px;padding:0 40px;font-size:14px}.login-btn{height:45px}.pass-wrap button{top:8px}.topbar{height:64px;padding:8px 12px;justify-content:center}.topbar img{width:160px}.brand-title,.crew-pill,#googleState{display:none}.mobile-menu{display:block;position:absolute;left:12px;border:0;background:transparent;color:white;font-size:24px}.sidebar{display:none}main{margin-left:0}.page{padding:18px 12px 82px}.home-hero{height:170px;margin:-18px -12px 0;padding:18px}.home-hero img{width:210px}.home-hero h1{font-size:20px;letter-spacing:4px}.home-hero h2{font-size:11px;letter-spacing:2px}.home-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin:-12px 0 20px}.dash-card{min-height:125px;padding:0 10px 10px}.dash-card span{margin:0 -10px 10px;padding:7px;font-size:11px}.dash-card b{font-size:32px}.dash-card small{font-size:10px;margin-top:5px}.quick-grid{grid-template-columns:1fr;padding:10px;gap:8px}.quick-grid button{min-height:58px;padding:10px 14px}.detail-body{grid-template-columns:1fr}.summary-strip{grid-template-columns:auto repeat(2,1fr)}.summary-strip>div:nth-child(4),.summary-strip>div:nth-child(5){border-top:1px solid #17394d}.request-strip{grid-template-columns:repeat(2,1fr)}.location-meta{grid-template-columns:repeat(2,1fr);gap:12px}.location-meta>div{border-right:0}.map-box{height:245px}.photo-row{grid-template-columns:repeat(2,1fr)}.actions{grid-template-columns:1fr 1fr}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:68px;background:#031421;border-top:1px solid #173b4d;z-index:40}.bottom-nav button{flex:1;border:0;background:none;color:#7898a8;font-size:18px}.bottom-nav button.selected{color:#37a9ff;background:#08284a}.bottom-nav span{display:block;font-size:10px}.map-page{height:calc(100vh - 132px);padding:0}.job{grid-template-columns:70px 1fr}.job .badge{grid-column:2}.page-title h1{font-size:23px}}
@media(max-width:760px){.login-screen.active{align-items:center}.login-content{width:100%;padding:20px;transform:none}.login-brand{margin-bottom:30px}.login-brand>img{width:min(420px,88vw);margin-bottom:17px}.login-subtitle{gap:12px}.login-subtitle span{width:45px}.login-subtitle h1{font-size:19px;letter-spacing:4px}.login-brand h2{font-size:11px;letter-spacing:4px;margin-top:12px}.login-card{width:min(440px,92vw);padding:24px}.login-input{height:56px}.login-btn{height:58px}}
#home{min-height:calc(100vh - 94px);background:linear-gradient(rgba(3,19,33,.36),rgba(3,19,33,.58));}
#home .home-grid,#home .quick{backdrop-filter:blur(2px);}
/* v5 home dashboard - approved mockup */
.app-shell{background:#02111d}
.topbar{height:78px;padding:10px 28px 10px 92px;background:rgba(2,16,29,.94);backdrop-filter:blur(12px)}
.topbar img{width:245px}.mobile-menu{display:block;position:absolute;left:22px;width:44px;height:44px;border:1px solid #294a61;border-radius:8px;background:rgba(10,35,52,.88);color:white;font-size:23px}.brand-title{display:none}.sidebar{top:78px;transform:translateX(-100%);transition:.2s;width:210px;background:rgba(2,18,31,.98)}.sidebar.open{transform:translateX(0)}main{margin-left:0}.page{max-width:1500px}.crew-pill{margin-left:auto;display:block}.crew-pill b{display:inline}.crew-pill small{margin-left:18px}
#home{padding:0 28px 70px;max-width:none;min-height:calc(100vh - 78px);background:linear-gradient(rgba(1,12,22,.14),rgba(1,13,23,.34)),url('assets/home-bg.png') center top/cover no-repeat fixed}
.home-hero{height:245px;margin:0 -28px;padding:28px 32px 0;background:linear-gradient(180deg,rgba(2,15,27,.05),rgba(2,15,27,.18));border:0;text-shadow:0 2px 12px rgba(255,255,255,.22)}.home-hero img{width:420px;max-height:75px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}.home-hero h1{font-size:31px;margin:15px 0 4px;letter-spacing:8px;color:#071a2b;text-shadow:0 1px 2px rgba(255,255,255,.6)}.home-hero h2{font-size:16px;letter-spacing:5px;color:#0c62aa;text-shadow:none}
.home-grid{max-width:1020px;gap:18px;margin:-8px auto 26px}.dash-card{min-height:190px;border-color:#315d74;background:linear-gradient(180deg,rgba(5,34,54,.96),rgba(2,19,33,.97));box-shadow:0 14px 35px rgba(0,0,0,.3);cursor:pointer;transition:.15s}.dash-card:hover{transform:translateY(-2px);filter:brightness(1.08)}.dash-card span{font-size:15px}.dash-card b{font-size:52px;margin-top:4px}.dash-card small{font-size:12px;line-height:1.3}.quick{max-width:1100px;border-top:1px solid rgba(169,211,233,.35);padding-top:0}.quick h2{width:max-content;margin:-11px auto 15px;padding:0 20px;background:#061727;font-size:14px;letter-spacing:2px}.quick-grid{padding:20px 24px;background:rgba(3,24,40,.91);box-shadow:0 14px 32px rgba(0,0,0,.24)}.quick-grid button{min-height:105px;cursor:pointer;transition:.15s;background:linear-gradient(145deg,#09263b,#061d2e)}.quick-grid button:hover{transform:translateY(-2px);filter:brightness(1.1)}.quick-grid button:nth-child(1){border-color:#1766b2}.quick-grid button:nth-child(2){border-color:#9b5a15}.quick-grid button:nth-child(3){border-color:#0e7e86}.quick-grid button:nth-child(4){border-color:#167c45}
.home-footer{max-width:1100px;margin:22px auto 0;padding-top:18px;border-top:1px solid rgba(169,211,233,.22);display:grid;grid-template-columns:repeat(5,1fr);gap:0}.home-footer div{text-align:center;border-right:1px solid rgba(169,211,233,.18);color:#c7d6df;font-size:12px}.home-footer div:last-child{border:0}.home-footer b{display:block;font-size:22px;margin-bottom:5px;color:#b8d6ea}.home-footer small{display:block;color:#809bab;margin-top:3px}
@media(max-width:760px){.topbar{height:64px;padding:8px 10px;justify-content:center}.topbar img{width:178px}.mobile-menu{left:9px;width:40px;height:40px}.crew-pill{display:block;position:absolute;right:9px;width:40px;height:40px;padding:0;border-radius:50%;font-size:0}.crew-pill:after{content:'●';font-size:22px;display:grid;place-items:center;height:100%;color:#dceaf2}.crew-pill b,.crew-pill small,#googleState{display:none}.sidebar{display:flex;top:64px;bottom:68px}.page{padding:16px 12px 82px}#home{padding:0 12px 84px;min-height:calc(100vh - 64px);background-position:center top}.home-hero{height:132px;margin:0 -12px;padding:10px 10px 0}.home-hero img{width:185px;max-height:42px}.home-hero h1{font-size:17px;letter-spacing:4px;margin:7px 0 2px}.home-hero h2{font-size:9px;letter-spacing:2px}.home-grid{margin:-2px 0 20px;gap:8px}.dash-card{min-height:115px}.dash-card b{font-size:31px}.quick h2{background:#061727}.quick-grid{padding:0;background:transparent;border:0;box-shadow:none}.quick-grid button{min-height:52px}.home-footer{display:none}}
/* v7 completed jobs */
.completed-tabs{margin:8px 0 12px}.completed-section{margin-top:16px;border:1px solid #21485d;background:#061b2b;border-radius:10px;padding:16px}.completed-section>h3{color:#35b85d;margin:8px 0 14px}.complete-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:22px}.complete-stats>div{border:1px solid #284b60;background:#081f30;border-radius:7px;padding:14px}.complete-stats span{display:block;color:#8fa7b5;font-size:11px;margin-bottom:6px}.employee-comments{border:1px solid #284b60;background:#081f30;border-radius:7px;padding:16px;margin-bottom:20px}.completed-photos{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;margin-bottom:12px}.job-photo{width:220px;height:132px;flex:0 0 auto;object-fit:cover;border-radius:18px;border:1px solid #31576b}.freelance-summary{grid-template-columns:auto 1fr;max-width:650px}@media(max-width:760px){.complete-stats{grid-template-columns:repeat(2,1fr)}.job-photo{width:170px;height:110px}}
/* v8 completed detail cleanup */
.completed-inline{grid-column:1/-1;border-top:1px solid #21485d;margin-top:4px;padding-top:14px}.completed-inline h4{margin:0 0 12px;color:#35c96d;font-size:14px}.completed-inline .complete-stats{grid-template-columns:repeat(2,1fr);margin-bottom:10px}.photos-only{margin-top:16px}.job-photo:not([src]){display:none}.summary-strip:has(.type-chip) {grid-template-columns:auto repeat(3,1fr)}
@media(max-width:760px){.completed-inline .complete-stats{grid-template-columns:1fr 1fr}}
.detail-back{background:none;border:0;color:#2dc8ff;font:inherit;letter-spacing:.08em;padding:0 0 8px;cursor:pointer}.single-status{border:1px solid #1e5168;border-radius:10px;padding:16px;text-align:center;font-weight:800}.completed-status{color:#31dc68}.completed-inline{grid-column:1/-1;border-top:1px solid #1e5168;margin-top:10px;padding-top:14px}.completed-inline h4{color:#31dc68;margin:0 0 12px}.complete-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.complete-stats>div{border:1px solid #24546a;border-radius:8px;padding:12px}.complete-stats span{display:block;color:#7fb7d4;font-size:11px;text-transform:uppercase;margin-bottom:6px}.complete-stats b{font-size:15px}.completed-inline>.wide{margin-top:12px}.job-photo{object-fit:cover;background:#061d2a}@media(max-width:700px){.complete-stats{grid-template-columns:1fr}.detail-back{font-size:13px}}
/* v10 completed detail photo/layout refinements */
.under-map{margin:14px 0 0}.photos-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.photos-title-row h3{margin:0;color:#35c96d}.photos-title-row button{border:1px solid #2588b8;background:#0a3650;color:#fff;border-radius:8px;padding:9px 13px;font-weight:700;cursor:pointer}.job-photo{cursor:zoom-in}.photo-modal{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:10000;display:flex;align-items:center;justify-content:center;padding:60px 80px}.photo-modal img{max-width:90vw;max-height:84vh;object-fit:contain;border-radius:8px}.photo-close,.photo-prev,.photo-next{position:absolute;border:0;background:rgba(7,31,48,.9);color:white;cursor:pointer;border-radius:50%;width:50px;height:50px;font-size:34px}.photo-close{right:22px;top:20px}.photo-prev{left:22px;top:50%}.photo-next{right:22px;top:50%}.photo-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(7,31,48,.9);padding:8px 14px;border-radius:20px;color:white}.info-grid:empty{display:none}@media(max-width:760px){.photo-modal{padding:55px 15px}.photo-prev{left:8px}.photo-next{right:8px}.photos-title-row{align-items:flex-start;flex-direction:column}}
/* v11 photo rail: fixed-width section with horizontal scrolling */
.detail-body>div,.location-panel,.under-map,.photos-only{min-width:0}
.under-map{width:100%;max-width:100%;overflow:hidden}
.under-map .completed-photos{display:flex;flex-wrap:nowrap;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;gap:14px;padding:6px 2px 14px;margin:0 0 14px;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.under-map .completed-photos::-webkit-scrollbar{height:10px}
.under-map .completed-photos::-webkit-scrollbar-track{background:#041724;border-radius:999px}
.under-map .completed-photos::-webkit-scrollbar-thumb{background:#23556d;border-radius:999px}
.under-map .job-photo{flex:0 0 220px;width:220px;max-width:220px}
.location-title{min-height:48px}
@media(max-width:760px){.under-map .job-photo{flex-basis:170px;width:170px;max-width:170px}}
/* v13 detail refinements */
@media(min-width:761px){.summary-strip{grid-template-columns:auto repeat(4,minmax(0,1fr))!important}.summary-strip.freelance-summary{grid-template-columns:auto 1fr!important}}
/* v14 detail header + photo carousel refinements */
@media(min-width:761px){
.summary-strip.open-summary{grid-template-columns:auto repeat(4,minmax(0,1fr))!important}
.summary-strip.completed-summary{grid-template-columns:auto repeat(3,minmax(0,1fr))!important}
}
.photo-rail-wrap{position:relative;min-width:0;width:100%}
.photo-rail-wrap .completed-photos{scrollbar-width:none!important;padding-left:2px!important;padding-right:2px!important}
.photo-rail-wrap .completed-photos::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.photo-rail-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid #39718d;background:rgba(3,25,40,.92);color:#fff;font-size:31px;line-height:34px;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.photo-rail-arrow.prev{left:8px}.photo-rail-arrow.next{right:8px}
.photo-rail-arrow:hover{background:#0b4b6a}.photo-rail-arrow:disabled{opacity:.25;cursor:default}
.photo-rail-arrow[hidden]{display:none!important}
/* v15 Add CSR */
.addcsr-wrap{max-width:1500px;margin:0 auto;padding:20px}.addcsr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.addcsr-head h1{margin:0;font-size:34px}.addcsr-head p{margin:3px 0 0;color:#a9bfd0}.addcsr-grid{display:grid;grid-template-columns:minmax(420px,.9fr) minmax(600px,1.35fr);gap:14px}.addcsr-card{background:#061f30;border:1px solid #20516b;border-radius:12px;overflow:hidden}.addcsr-card h3{margin:0;padding:15px 17px;border-bottom:1px solid #173e55}.addcsr-pad{padding:14px 16px}.addcsr-map{height:430px;position:relative}.addcsr-map iframe{width:100%;height:100%;border:0}.addcsr-help{font-size:13px;color:#c6d4df;margin:0 0 10px}.addcsr-pinmsg{padding:10px 14px;color:#25dc73;border-top:1px solid #173e55}.coord-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.addcsr-form label{display:block;color:#dceaf3;font-size:12px;font-weight:700}.addcsr-form input,.addcsr-form select,.addcsr-form textarea{box-sizing:border-box;width:100%;margin-top:6px;background:#071b2b;border:1px solid #31566d;color:#fff;border-radius:7px;padding:11px 12px;font:inherit}.addcsr-form textarea{min-height:78px;resize:vertical}.addcsr-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.addcsr-form-grid.three{grid-template-columns:repeat(3,1fr)}.addcsr-form .wide{grid-column:1/-1}.addcsr-auto{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.auto-field{border:1px solid #244d65;border-radius:8px;padding:10px;background:#061b2a}.auto-field span{display:block;color:#7fc9f7;text-transform:uppercase;font-size:10px}.auto-field b{display:block;margin-top:5px;min-height:18px}.addcsr-section{padding:13px 16px;border-top:1px solid #173e55}.addcsr-section-title{font-weight:800;margin-bottom:11px}.photo-inputs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.photo-slot{border:1px dashed #2581b8;border-radius:10px;min-height:145px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;color:#cceeff;font-size:13px;position:relative;overflow:hidden;background:#071b2b}.photo-slot input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:4}.photo-preview{display:none;width:100%;height:100%;object-fit:cover}.photo-slot.has-photo .photo-preview{display:block}.photo-slot.has-photo .photo-placeholder{display:none}.photo-number{position:absolute;right:7px;bottom:7px;z-index:3;display:none;padding:3px 7px;border-radius:12px;background:rgba(0,0,0,.68);color:#fff;font-weight:800}.photo-slot.has-photo .photo-number{display:block}.save-row{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.primary-btn,.secondary-btn{border:1px solid #1689d0;border-radius:8px;padding:11px 22px;color:white;background:#0873c5;font-weight:800;cursor:pointer}.secondary-btn{background:#08263a}.save-state{margin-right:auto;align-self:center;color:#8fc5e5}.required:before{content:'* ';color:#ff9b33}@media(max-width:900px){.addcsr-wrap{padding:10px}.addcsr-grid{grid-template-columns:1fr}.addcsr-map{height:390px}.addcsr-form-grid.three,.addcsr-auto{grid-template-columns:repeat(2,1fr)}.photo-inputs{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.addcsr-form-grid,.addcsr-form-grid.three,.addcsr-auto{grid-template-columns:1fr}.photo-inputs{grid-template-columns:repeat(2,1fr)}.addcsr-head h1{font-size:26px}}
/* v20 completed month + daily route */
.month-wrap,.route-wrap{max-width:1450px;margin:0 auto;padding:18px}.month-head,.route-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}.month-head h1,.route-head h1{margin:0;font-size:34px}.month-head p,.route-head p{margin:4px 0 0;color:#9db7c8}.month-card,.route-summary,.route-list-card,.route-map-card,.route-bottom>section{background:#061f30;border:1px solid #20516b;border-radius:12px}.month-card{padding:18px}.month-nav{display:grid;grid-template-columns:50px 1fr 50px;align-items:center}.month-nav h2{text-align:center;margin:0;font-size:30px}.month-nav button{border:0;background:transparent;color:#2aa9ff;font-size:48px;cursor:pointer}.month-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.month-stats>div,.route-summary>div{background:#081b2b;border:1px solid #254c63;border-radius:10px;padding:14px;text-align:center}.month-stats span,.route-summary>div>span{font-size:28px}.month-stats b,.route-summary>div>b{display:block;font-size:28px}.month-stats small,.route-summary small{color:#a9bfd0}.calendar-week,.month-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.calendar-week b{text-align:center;padding:7px;color:#bcd0dc}.cal-day{min-height:105px;border:1px solid #21485d;border-radius:8px;background:#071b2b;padding:9px;position:relative;cursor:default}.cal-day.other{opacity:.35}.cal-day.has-jobs{cursor:pointer}.cal-day.has-jobs:hover{border-color:#2aa9ff;transform:translateY(-1px)}.cal-day .daynum{font-weight:800}.cal-day .day-pill{position:absolute;left:10px;right:10px;bottom:9px;border-radius:20px;text-align:center;padding:4px;font-size:11px;font-weight:800}.cal-day.regular{background:rgba(44,160,72,.12)}.cal-day.overtime{background:rgba(161,80,211,.14)}.cal-day.callout{background:rgba(255,126,0,.13)}.day-pill.regular{background:#2f9d49}.day-pill.overtime{background:#9a4dca}.day-pill.callout{background:#ef7900}.month-legend{display:flex;align-items:center;gap:32px;padding:18px 8px 2px;color:#c8d7e0}.month-legend em{margin-left:auto;color:#9db7c8;font-style:normal}.month-legend i,.route-map-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px}.reg{background:#42bd3b}.ot{background:#9b4bc4}.call{background:#f37a0a}.move{background:#888}.route-head>div{flex:1}.route-summary{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:10px;padding:12px;margin-bottom:14px}.route-summary .route-date{display:flex;text-align:left;gap:12px;align-items:center}.route-date b{font-size:24px!important}.route-date mark{display:inline-block;background:#0b3045;color:#fff;border-radius:12px;padding:4px 9px;margin:7px 5px 0 0;font-size:11px}.route-grid{display:grid;grid-template-columns:390px 1fr;gap:14px}.route-list-card{padding:14px;min-height:570px}.route-card-title{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #21485d}.route-card-title span{color:#2aa9ff}.route-stop{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:15px 0;border-bottom:1px solid #173e55}.stop-num{width:30px;height:30px;border-radius:50%;background:#ef7900;display:grid;place-items:center;font-weight:900}.route-stop h4{margin:0 0 5px}.route-stop p{margin:3px 0;color:#b8cbd7;font-size:13px}.route-stop small{color:#7fa8bf}.route-map-card{position:relative;overflow:hidden;min-height:570px}.route-map-card iframe{border:0;width:100%;height:570px}.route-map-legend{position:absolute;left:15px;right:15px;bottom:12px;background:rgba(3,23,36,.9);border:1px solid #21485d;border-radius:8px;padding:11px;display:flex;justify-content:center;gap:28px}.route-day-summary{margin-top:16px;padding:12px;background:#071b2b;border-radius:8px;line-height:1.7}.route-bottom{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:14px}.route-bottom>section{padding:15px}.route-bottom h3{margin:0 0 10px}.route-bottom>section>div{color:#bdd0db}.route-empty{padding:40px 10px;text-align:center;color:#88a6b8}
@media(max-width:900px){.month-stats{grid-template-columns:repeat(2,1fr)}.route-summary{grid-template-columns:repeat(2,1fr)}.route-summary .route-date{grid-column:1/-1}.route-grid,.route-bottom{grid-template-columns:1fr}.route-list-card{min-height:auto}.route-map-card,.route-map-card iframe{min-height:400px;height:400px}.calendar-week,.month-calendar{gap:3px}.cal-day{min-height:78px;padding:6px}.month-legend{flex-wrap:wrap;gap:12px}.month-legend em{width:100%;margin:0}.route-map-legend{gap:10px;font-size:11px}.month-head h1,.route-head h1{font-size:27px}}
/* v21 desktop viewport + route interaction refinements */
@media(min-width:1100px){
#month.page.active,#route.page.active{height:calc(100vh - 72px);overflow:hidden}
.month-wrap,.route-wrap{max-width:none;width:100%;height:100%;box-sizing:border-box;padding:12px 18px;display:flex;flex-direction:column}
.month-head,.route-head{margin-bottom:9px;flex:0 0 auto}
.month-head h1,.route-head h1{font-size:29px}.month-head p,.route-head p{font-size:13px}
.month-card{padding:11px 14px;flex:1;min-height:0;display:flex;flex-direction:column}
.month-nav{height:42px;flex:0 0 auto}.month-nav h2{font-size:25px}.month-nav button{font-size:38px}
.month-stats{margin:7px 0;gap:8px;flex:0 0 auto}.month-stats>div{padding:7px 10px}.month-stats span{font-size:20px}.month-stats b{font-size:23px}.month-stats small{font-size:11px}
.calendar-week{flex:0 0 auto}.calendar-week b{padding:4px;font-size:12px}
.month-calendar{flex:1;min-height:0;grid-template-rows:repeat(6,minmax(0,1fr));gap:4px}.cal-day{min-height:0;padding:6px}.cal-day .day-pill{left:7px;right:7px;bottom:6px;padding:3px;font-size:10px}
.month-legend{padding:8px 5px 0;font-size:12px;flex:0 0 auto}
.route-summary{padding:7px;gap:7px;margin-bottom:8px;flex:0 0 auto}.route-summary>div{padding:7px}.route-summary>div>span{font-size:20px}.route-summary>div>b{font-size:22px}.route-date b{font-size:20px!important}
.route-grid{grid-template-columns:minmax(300px,24%) 1fr;gap:9px;flex:1;min-height:0}.route-list-card{padding:10px;min-height:0;overflow:hidden;display:flex;flex-direction:column}.route-stops-list{overflow-y:auto;min-height:0;flex:1;padding-right:4px}
.route-stop{grid-template-columns:32px 1fr;gap:8px;padding:9px 4px;cursor:pointer}.stop-num{width:26px;height:26px;font-size:12px}.route-stop h4{font-size:13px}.route-stop p{font-size:11px;margin:2px 0}.route-stop small{font-size:10px}
.route-map-card{min-height:0;height:auto}.route-map-card iframe{height:100%;min-height:0}.route-map-legend{padding:7px;font-size:11px;bottom:7px}
.route-bottom{margin-top:8px;gap:9px;flex:0 0 auto}.route-bottom>section{padding:9px}.route-bottom h3{font-size:13px;margin-bottom:4px}.route-bottom>section>div{font-size:12px}
}
.route-stop:hover,.route-stop.selected-stop{background:#0a2b40;border-radius:8px}.route-stop:focus{outline:1px solid #2aa9ff;outline-offset:-1px}.route-stop-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.route-stop-title h4{margin:0}.source-badge{display:inline-block;border-radius:10px;padding:2px 7px;font-size:9px;font-weight:900;letter-spacing:.35px;background:#0b74b8;color:#fff}.source-badge.source-request{background:#8c4ac4}.source-badge.source-freelance{background:#1689d0}.source-badge.source-callout{background:#ef7900}.stop-open-hint{display:block;margin-top:4px;color:#55bfff;font-size:10px;font-weight:700}
/* v24 before/after gallery redesign */
.job-photo-gallery{padding:18px!important}
.job-photo-gallery .photos-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.job-photo-gallery .photos-title-row h3{margin:0;color:#32db78;font-size:20px}
.job-photo-gallery .photos-title-row p{margin:5px 0 0;color:#9eb5c3;font-size:13px}
.job-photo-gallery #downloadPhotos{border:1px solid #168bd4;background:#071e30;color:#fff;border-radius:9px;padding:11px 17px;font-weight:800;cursor:pointer;white-space:nowrap}
.job-photo-gallery #downloadPhotos:hover{background:#0a3450}
.before-after-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.photo-side{min-width:0;border:1px solid #28566e;border-radius:12px;background:#061b2b;padding:15px 16px 12px;overflow:hidden}
.photo-side-title{border-bottom:1px solid #2573a1;margin-bottom:13px;padding-bottom:10px}
.after-side .photo-side-title{border-color:#249353}
.photo-side-title h3{margin:0!important;color:#f2f7fa!important;font-size:16px!important}
.photo-side-title small{color:#91a9b8;font-size:12px;font-weight:500}
.photo-side .completed-photos{margin:0!important;padding:4px 2px 8px!important;gap:10px!important;min-height:160px;align-items:center}
.photo-side .job-photo{width:220px;height:165px;border-radius:12px;object-fit:cover}
.photo-side .photo-rail-arrow{width:40px;height:40px}
.before-side .photo-rail-arrow{border-color:#168bd4}
.after-side .photo-rail-arrow{border-color:#27a85a;background:rgba(4,53,35,.94)}
.after-side .photo-rail-arrow:hover{background:#0b603b}
.photo-gallery-hint{text-align:center;color:#2ba9ff;font-weight:700;padding:15px 0 2px;font-size:13px}
@media(max-width:900px){.before-after-grid{grid-template-columns:1fr}.job-photo-gallery .photos-title-row{align-items:stretch}.photo-side .job-photo{width:190px;height:140px}}
@media(max-width:600px){.job-photo-gallery .photos-title-row{flex-direction:column}.job-photo-gallery #downloadPhotos{width:100%}}
/* v26 automatic Day / Night appearance */
:root{color-scheme:dark}
.app-shell{background-image:linear-gradient(rgba(1,14,24,.60),rgba(1,14,24,.72)),url('assets/night-bg.png');background-position:center center;background-size:cover;background-attachment:fixed}
.theme-picker{height:40px;display:flex;align-items:center;gap:7px;border:1px solid #21485d;border-radius:9px;padding:0 9px;background:#071d2e;color:#eaf6fc;margin-left:8px}
.theme-picker select{border:0;outline:0;background:transparent;color:inherit;font-weight:700;cursor:pointer}.theme-picker option{background:#071d2e;color:#fff}
body.theme-day{color:#102a3a;background:#eaf3f8}body.theme-day .app-shell{background-image:linear-gradient(rgba(240,248,252,.64),rgba(240,248,252,.76)),url('assets/day-bg.png')}
body.theme-day .topbar{background:rgba(247,251,253,.94);border-bottom-color:#a9c4d2;color:#12354a;box-shadow:0 2px 12px rgba(20,55,75,.10)}
body.theme-day .topbar img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}body.theme-day #googleState{color:#39738e}
body.theme-day .crew-pill,body.theme-day .theme-picker{background:rgba(255,255,255,.86);border-color:#9fc0d0;color:#17394c}body.theme-day .theme-picker option{background:#fff;color:#17394c}
body.theme-day .sidebar{background:rgba(244,249,252,.96);border-right-color:#a9c4d2}body.theme-day .sidebar button{color:#23495c}body.theme-day .sidebar button.selected{background:#0b69ae;color:#fff}body.theme-day .side-bottom{border-top-color:#bdd1dc;color:#23495c}
body.theme-day .page-title h1,body.theme-day .detail-head h1,body.theme-day .month-head h1,body.theme-day .route-head h1,body.theme-day .addcsr-head h1{color:#102b3b}
body.theme-day .panel,body.theme-day .notice,body.theme-day .job,body.theme-day .location-panel,body.theme-day .summary-strip,body.theme-day .request-strip,body.theme-day .photo-panel,body.theme-day .addcsr-card,body.theme-day .month-card,body.theme-day .route-list-card,body.theme-day .route-map-card,body.theme-day .route-summary,body.theme-day .route-bottom>section{background:rgba(250,253,255,.94)!important;border-color:#a9c7d5!important;color:#15384b!important;box-shadow:0 8px 22px rgba(27,69,91,.08)}
body.theme-day .dash-card{background:rgba(249,253,255,.94);color:#17394c;border-color:#a8c5d3}body.theme-day .quick-grid{background:rgba(249,253,255,.92);border-color:#a8c5d3}body.theme-day .quick-grid button{background:rgba(239,248,252,.96);color:#17394c;border-color:#86b4ca}body.theme-day .quick-grid small,body.theme-day .job small,body.theme-day .k{color:#58798a}
body.theme-day .home-hero{background:linear-gradient(rgba(255,255,255,.08),rgba(236,247,252,.48));border-bottom-color:#9bbdcd}body.theme-day .quick{border-top-color:#9bbdcd}body.theme-day .quick h2{color:#17394c}
body.theme-day .job-tabs button,body.theme-day .actions button,body.theme-day .secondary-btn{background:#eef7fb;color:#17394c;border-color:#8eb7ca}body.theme-day .job-tabs .selected{background:#0b69ae;color:#fff}
body.theme-day .auto-field,body.theme-day .addcsr-form input,body.theme-day .addcsr-form select,body.theme-day .addcsr-form textarea{background:#fff!important;color:#15384b!important;border-color:#9bbdcc!important}body.theme-day .addcsr-section{border-color:#bad0db!important}
body.theme-day .month-nav,body.theme-day .calendar-week,body.theme-day .month-legend,body.theme-day .route-card-title,body.theme-day .route-day-summary{color:#17394c}body.theme-day .cal-day{background:rgba(255,255,255,.84);border-color:#abc6d3;color:#17394c}body.theme-day .cal-day.other{opacity:.48}body.theme-day .cal-day.has-jobs{background:rgba(224,247,234,.92)}
body.theme-day .route-stop{border-color:#b2cad6!important;color:#17394c}body.theme-day .route-stop:hover,body.theme-day .route-stop.selected-stop{background:#e8f5fb!important}body.theme-day .route-stop p,body.theme-day .route-stop small{color:#58798a!important}
body.theme-day .route-map-legend{background:rgba(255,255,255,.90)!important;color:#17394c!important}
body.theme-day .home-footer{background:rgba(248,252,254,.70);color:#274c5e}body.theme-day .home-footer small{color:#648392}
body.theme-day .bottom-nav{background:rgba(248,252,254,.97)!important;border-color:#a9c4d2!important}body.theme-day .bottom-nav button{color:#31576a!important}body.theme-day .bottom-nav button.selected{color:#0874b9!important}
@media(max-width:760px){.theme-picker{position:absolute;right:10px;height:34px;padding:0 5px}.theme-picker select{width:56px;font-size:11px}.theme-picker span{display:none}.app-shell{background-attachment:scroll}}
/* v28: Main dashboard uses the same Day/Night background as every other app screen. */
#home{background-image:linear-gradient(rgba(1,14,24,.34),rgba(1,14,24,.50)),url('assets/night-bg.png')!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
body.theme-night #home{background-image:linear-gradient(rgba(1,14,24,.34),rgba(1,14,24,.50)),url('assets/night-bg.png')!important}
body.theme-day #home{background-image:linear-gradient(rgba(245,251,254,.22),rgba(245,251,254,.38)),url('assets/day-bg.png')!important}
@media(max-width:760px){#home{background-attachment:scroll!important}}
/* v30 desktop fit + invisible route list scrollbar */
.route-stops-list{scrollbar-width:none!important;-ms-overflow-style:none!important}
.route-stops-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
/* v31 compact Add CSR layout */
#addcsr.page{padding-top:12px}.addcsr-wrap{padding-top:8px}.addcsr-head{margin-bottom:8px}.addcsr-head h1{font-size:30px}
.addcsr-card h3{padding:11px 14px}.addcsr-section{padding:9px 14px}.addcsr-section-title{margin-bottom:7px}.addcsr-auto{gap:6px}.auto-field{padding:7px 9px}.auto-field b{margin-top:3px;min-height:16px;font-size:12px}
.addcsr-form-grid{gap:8px}.addcsr-form input,.addcsr-form select,.addcsr-form textarea{margin-top:4px;padding:8px 10px}.addcsr-form textarea{min-height:48px;max-height:58px}.photo-slot{min-height:82px;aspect-ratio:16/9}.save-row{margin-top:9px}.save-row .primary-btn,.save-row .secondary-btn{padding:9px 18px}
@media(min-width:1100px){.addcsr-map{height:350px}.addcsr-pad{padding:10px 14px}.addcsr-pinmsg{padding:8px 12px}.photo-inputs{gap:6px}}
@media(min-width:1100px) and (max-height:850px){.addcsr-map{height:320px}.addcsr-head p{margin:0}.addcsr-card h3{padding:9px 13px}.addcsr-section{padding:7px 13px}.photo-slot{min-height:68px}.addcsr-form textarea{min-height:40px;max-height:44px}}
@media (min-width:1100px) and (min-height:700px){
#addcsr.page.active{height:calc(100vh - 70px);overflow:hidden}
#addcsr .addcsr-wrap{height:100%;box-sizing:border-box;padding:12px 20px;display:flex;flex-direction:column}
#addcsr .addcsr-head{margin-bottom:8px;flex:0 0 auto}
#addcsr .addcsr-head h1{font-size:31px}
#addcsr .addcsr-grid{flex:1;min-height:0;grid-template-columns:minmax(420px,.9fr) minmax(600px,1.35fr);gap:12px}
#addcsr .addcsr-card{min-height:0}
#addcsr .addcsr-card h3{padding:11px 15px}
#addcsr .addcsr-pad{padding:9px 14px}
#addcsr .addcsr-map{height:410px}
#addcsr .addcsr-help{margin-bottom:7px}
#addcsr .addcsr-pinmsg{padding:7px 13px}
#addcsr .addcsr-section{padding:8px 14px}
#addcsr .addcsr-section-title{margin-bottom:7px}
#addcsr .addcsr-form-grid{gap:8px 10px}
#addcsr .addcsr-form input,#addcsr .addcsr-form select,#addcsr .addcsr-form textarea{margin-top:4px;padding:8px 10px}
#addcsr .addcsr-form textarea{min-height:55px;height:55px}
#addcsr .addcsr-auto{gap:6px}
#addcsr .auto-field{padding:7px 9px}
#addcsr .auto-field b{margin-top:3px;min-height:16px}
#addcsr .photo-inputs{gap:6px}
#addcsr .photo-slot{min-height:95px;aspect-ratio:4/3}
#addcsr .save-row{margin-top:8px}
}
/* v31 final viewport overrides: keep Photos and form actions visible. */
@media (min-width:1100px) and (min-height:700px){
#addcsr .addcsr-wrap{padding:7px 20px}
#addcsr .addcsr-map{height:350px}
#addcsr .addcsr-card h3{padding:9px 14px}
#addcsr .addcsr-section{padding:6px 13px}
#addcsr .addcsr-form textarea{min-height:40px;height:40px;max-height:48px}
#addcsr .photo-slot{min-height:66px;aspect-ratio:16/9}
#addcsr .save-row{margin-top:6px}
}
@media (min-width:1100px) and (min-height:900px){
#addcsr .addcsr-map{height:390px}
#addcsr .photo-slot{min-height:78px}
}
/* v32 Graffiti Request */
.request-wrap{max-width:1500px;margin:0 auto;padding:10px 20px}.request-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.request-head h1{margin:0;font-size:31px}.request-head p{margin:2px 0 0;color:#a9bfd0}.request-grid{display:grid;grid-template-columns:minmax(420px,.9fr) minmax(600px,1.35fr);gap:12px}.request-card{background:#061f30;border:1px solid #20516b;border-radius:12px;overflow:hidden}.request-card h3{margin:0;padding:10px 14px;border-bottom:1px solid #173e55}.request-help{padding:9px 14px;color:#c6d4df;font-size:13px}.request-map{height:350px}.request-map iframe{width:100%;height:100%;border:0}.request-pinmsg{padding:8px 13px;color:#25dc73;border-top:1px solid #173e55}.request-coordinates{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;padding:10px 14px}.request-form label,.request-coordinates label{display:block;color:#dceaf3;font-size:12px;font-weight:700}.request-form input,.request-form select,.request-form textarea,.request-coordinates input{width:100%;margin-top:4px;padding:8px 10px;background:#071b2b;border:1px solid #31566d;color:#fff;border-radius:7px;font:inherit}.request-fields{padding:10px 14px 7px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 10px}.request-fields .wide{grid-column:1/-1}.request-fields textarea{height:44px;min-height:44px;resize:vertical}.request-location-summary{margin:0 14px 8px;padding:7px 9px;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:7px;align-items:center;border:1px solid #244d65;border-radius:8px;background:#061b2a;font-size:11px}.request-location-summary span{color:#7fc9f7;text-transform:uppercase}.request-location-summary b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.request-photos{padding:7px 14px;border-top:1px solid #173e55}.request-photo-title{display:flex;align-items:center;gap:6px;margin-bottom:7px;font-weight:800}.request-photo-title small{color:#2aa9ff}.request-photo-title b{margin-left:auto;color:#9fd3ef;font-size:12px}.request-photo-inputs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.request-photo-inputs .photo-slot{min-height:58px;aspect-ratio:16/9}.request-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:8px 14px;border-top:1px solid #173e55}.request-actions>span{margin-right:auto;color:#8fc5e5;font-size:12px}.request-actions button{padding:9px 17px}
@media(min-width:1100px) and (min-height:900px){.request-map{height:390px}.request-photo-inputs .photo-slot{min-height:68px}}
@media(max-width:900px){#request.page{padding:0 0 90px}.request-wrap{padding:10px}.request-head h1{font-size:26px}.request-grid{grid-template-columns:1fr}.request-map-card{order:-1}.request-map{height:48vh;min-height:330px}.request-fields{grid-template-columns:1fr}.request-fields .wide{grid-column:auto}.request-location-summary{grid-template-columns:auto 1fr}.request-photo-inputs{grid-template-columns:repeat(2,1fr)}.request-photo-inputs .photo-slot{min-height:110px}.request-actions{position:sticky;bottom:68px;background:#061f30;z-index:4;flex-wrap:wrap}.request-actions>span{width:100%;order:-1}.request-coordinates{grid-template-columns:1fr}.request-coordinates button{width:100%}}
@media(max-width:600px){.request-head{align-items:flex-start}.request-head .secondary-btn{padding:8px 10px}.request-map{height:43vh;min-height:300px}.request-photo-inputs .photo-slot{min-height:90px}}
body.theme-day .request-card{background:rgba(250,253,255,.94);border-color:#a9c7d5;color:#15384b}body.theme-day .request-form label,body.theme-day .request-coordinates label{color:#15384b}body.theme-day .request-form input,body.theme-day .request-form select,body.theme-day .request-form textarea,body.theme-day .request-coordinates input{background:#fff;color:#15384b;border-color:#a9c7d5}body.theme-day .request-location-summary{background:#eef7fb;border-color:#a9c7d5}body.theme-day .request-head h1{color:#102b3b}
/* v33 Start Job, Google Maps handoff and Finish Job */
.active-job-banner{position:fixed;left:194px;right:20px;bottom:18px;z-index:80;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px 14px;border:1px solid #46c87c;border-radius:12px;background:linear-gradient(135deg,rgba(9,78,45,.98),rgba(6,45,33,.98));color:#fff;box-shadow:0 12px 35px rgba(0,0,0,.38)}.active-job-banner[hidden]{display:none}.active-job-banner div{min-width:0}.active-job-banner small,.active-job-banner b,.active-job-banner span{display:block}.active-job-banner small{color:#8ff0b7;font-weight:800;letter-spacing:1px}.active-job-banner b{font-size:17px}.active-job-banner span{font-size:12px;color:#c9efda;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.active-job-banner button{border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:10px 14px;background:#fff;color:#07512c;font-weight:900;cursor:pointer}.active-job-banner #activeJobMaps{background:transparent;color:#fff}.finish-wrap{max-width:1300px;margin:0 auto;padding:4px 12px}.finish-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.finish-head small{color:#42d681;letter-spacing:2px}.finish-head h1{margin:2px 0;font-size:32px}.finish-head p{margin:0;color:#a9bfd0}.finish-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:10px}.finish-summary>div,.finish-card{background:#061f30;border:1px solid #20516b;border-radius:10px}.finish-summary>div{padding:11px 13px}.finish-summary span,.finish-summary b{display:block}.finish-summary span{color:#7fc9f7;text-transform:uppercase;font-size:10px}.finish-summary b{margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.finish-card{overflow:hidden}.finish-card>h3{margin:0;padding:11px 14px;border-bottom:1px solid #173e55}.finish-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 11px;padding:11px 14px}.finish-fields label{color:#dceaf3;font-size:12px;font-weight:700}.finish-fields input,.finish-fields select,.finish-fields textarea{width:100%;margin-top:4px;padding:9px 10px;background:#071b2b;border:1px solid #31566d;color:#fff;border-radius:7px;font:inherit}.finish-fields .wide{grid-column:1/-1}.finish-fields textarea{height:48px;resize:vertical}.finish-photo-sections{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:9px 14px;border-top:1px solid #173e55}.finish-photo-sections section{min-width:0}.finish-photo-title{display:flex;justify-content:space-between;margin-bottom:7px;font-weight:800}.finish-photo-title b{color:#7fc9f7;font-size:12px}.finish-photo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.finish-photo-grid .photo-slot{min-height:68px;aspect-ratio:1/1}.finish-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:10px 14px;border-top:1px solid #173e55}.finish-actions>span{margin-right:auto;color:#8fc5e5;font-size:12px}.finish-actions button{padding:10px 16px}body.theme-day .finish-summary>div,body.theme-day .finish-card{background:rgba(250,253,255,.94);border-color:#a9c7d5;color:#15384b}body.theme-day .finish-fields label{color:#15384b}body.theme-day .finish-fields input,body.theme-day .finish-fields select,body.theme-day .finish-fields textarea{background:#fff;color:#15384b;border-color:#a9c7d5}body.theme-day .finish-head h1{color:#102b3b}
@media(max-width:760px){.active-job-banner{left:8px;right:8px;bottom:76px;grid-template-columns:1fr auto;padding:9px}.active-job-banner #activeJobMaps{display:none}.active-job-banner button{padding:10px}.active-job-banner b{font-size:14px}.active-job-banner span{max-width:210px}.finish-wrap{padding:0}.finish-head{align-items:flex-start}.finish-head h1{font-size:25px}.finish-head p{font-size:12px}.finish-head .secondary-btn{padding:8px}.finish-summary{grid-template-columns:repeat(2,1fr);gap:6px}.finish-summary>div{padding:8px}.finish-fields{grid-template-columns:1fr;padding:9px}.finish-fields .wide{grid-column:auto}.finish-photo-sections{grid-template-columns:1fr;padding:9px}.finish-photo-grid .photo-slot{min-height:72px}.finish-actions{position:sticky;bottom:68px;z-index:5;background:#061f30;flex-wrap:wrap;padding:9px}.finish-actions>span{width:100%;order:-1}.finish-actions button{flex:1;padding:11px 7px;font-size:12px}}
/* v35 mobile photo rails and CSR detail flow */
.request-photo-inputs,.finish-photo-grid{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}.request-photo-inputs::-webkit-scrollbar,.finish-photo-grid::-webkit-scrollbar{display:none;width:0;height:0}.request-photo-inputs .photo-slot{flex:0 0 150px;min-height:92px;aspect-ratio:4/3;scroll-snap-align:start}.finish-photo-grid .photo-slot{flex:0 0 104px;min-height:78px;aspect-ratio:1/1;scroll-snap-align:start}
@media(max-width:760px){
.request-photo-inputs .photo-slot{flex-basis:calc((100% - 9px)/2);min-height:130px}
.finish-photo-grid .photo-slot{flex-basis:42%;min-height:118px}
#details .detail-body{display:flex!important;flex-direction:column;gap:14px}
#details .detail-body>div{display:contents}
#details .detail-body>div:first-child>.panel:first-child{order:1}
#details .detail-body>div:nth-child(2)>.location-panel{order:2;display:flex;flex-direction:column}
#details .location-panel .location-title{order:0}
#details .location-panel .map-box{order:1;margin:0 12px 12px;height:280px}
#details .location-panel .location-meta{order:2;border-top:1px solid #21485d}
#details .detail-body>div:nth-child(2)>.photo-panel{order:3;margin-top:0}
#details .detail-body>div:first-child>.panel:nth-child(2){order:4;margin-top:0!important}
#details .detail-body>div:nth-child(2)>.completed-section{order:5}
}
/* v41 Google-first secure login */
.google-login-card{padding:34px 36px 30px;text-align:center}
.google-login-card h3{margin:0 0 24px;color:#fff;font-size:13px;font-weight:500;letter-spacing:5px}
.google-login-btn{width:100%;min-height:64px;display:flex;align-items:center;justify-content:center;gap:18px;border:1px solid #d5dbe0;border-radius:8px;background:#fff;color:#18232d;font-size:18px;font-weight:600;cursor:pointer;box-shadow:0 7px 20px rgba(0,0,0,.24)}
.google-login-btn:hover{background:#f7fbff;transform:translateY(-1px)}
.google-login-btn:disabled{opacity:.68;cursor:wait;transform:none}
.google-login-btn img{width:28px;height:28px;flex:0 0 auto}
.google-login-card p{margin:26px 0 0;color:#afbdc9;font-size:14px}
.google-login-card p+p{margin-top:9px}
.google-login-card small{display:block;margin-top:28px;color:#c2cfda;font-size:12px}
.login-state{min-height:20px;margin-top:16px;font-size:12px;line-height:1.45;color:#9fd9ff}
.login-state.error{color:#ff9ea8}
.login-state.loading{color:#79ceff}
.login-brand h2{letter-spacing:5px}
@media(max-width:600px){.login-brand{margin-bottom:30px}.login-subtitle h1{font-size:23px;letter-spacing:6px}.login-brand h2{font-size:12px;letter-spacing:3px;line-height:1.6}.google-login-card{padding:26px 22px 24px}.google-login-card h3{font-size:11px;letter-spacing:3px}.google-login-btn{min-height:58px;font-size:16px}.google-login-card p{font-size:12px}}
/* v37 cancel active job */
.active-job-banner{grid-template-columns:minmax(0,1fr) auto auto auto}
.active-job-banner #activeJobCancel{background:#7b1d28;border-color:#e46b77;color:#fff}
@media(max-width:760px){.active-job-banner{grid-template-columns:minmax(0,1fr) auto auto;gap:6px}.active-job-banner #activeJobCancel,.active-job-banner #activeJobFinish{padding:9px 8px;font-size:11px;white-space:nowrap}}
.photo-slot{position:relative}
.photo-stamp-state{display:none;position:absolute;inset:auto 8px 8px 8px;z-index:4;padding:6px 8px;border-radius:8px;background:rgba(0,30,48,.88);color:#fff;font-size:11px;font-weight:900;letter-spacing:.06em;text-align:center;pointer-events:none}
.photo-slot.stamping .photo-stamp-state{display:block}
.photo-slot.stamping{pointer-events:none;opacity:.78}
.photo-slot.stamp-ready::after{content:'✓ STAMPED';position:absolute;right:6px;bottom:6px;z-index:3;padding:4px 6px;border-radius:6px;background:rgba(0,104,56,.9);color:#fff;font-size:9px;font-weight:900;letter-spacing:.04em;pointer-events:none}
.photo-slot.stamp-ready .photo-preview{cursor:zoom-in;pointer-events:auto}
.photo-slot input[type="file"]{display:none!important}
.photo-slot .photo-placeholder{position:absolute;inset:0;width:100%;height:100%;z-index:2;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.photo-slot.has-photo .photo-preview{position:absolute;inset:0;z-index:5;cursor:zoom-in;pointer-events:auto}
.photo-slot.has-photo .photo-number,.photo-slot.has-photo::after{z-index:7}
.photo-slot.stamping .photo-stamp-state{z-index:8}
.stamped-photo-modal{position:fixed;inset:0;z-index:50000;display:flex;align-items:center;justify-content:center;padding:70px 12px 18px;background:rgba(0,10,18,.96)}
.stamped-photo-modal>img{display:block;max-width:100%;max-height:calc(100vh - 92px);object-fit:contain;border:1px solid #1b789e;box-shadow:0 14px 50px #000}
.stamped-photo-toolbar{position:absolute;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;gap:10px;color:#fff}
.stamped-photo-toolbar b{margin-right:auto;font-size:13px;letter-spacing:.05em}
.stamped-photo-toolbar button{min-height:42px;padding:8px 13px;border:1px solid #168bd0;border-radius:10px;background:#062a3d;color:#fff;font-weight:800}
.stamped-photo-toolbar .stamped-photo-close{width:42px;padding:0;font-size:27px}
.stamped-photo-toolbar .stamped-photo-retake{background:#087fc7;border-color:#39b9ff}
@media(max-width:600px){.stamped-photo-toolbar{flex-wrap:wrap}.stamped-photo-toolbar b{width:100%;font-size:11px}.stamped-photo-toolbar button{padding:7px 10px;font-size:11px}.stamped-photo-toolbar .stamped-photo-close{margin-left:auto}.stamped-photo-modal{padding-top:112px}.stamped-photo-modal>img{max-height:calc(100vh - 132px)}}
/* v40 keep mobile photo rails fully visible above their action buttons */
@media(max-width:760px){
.request-photos{padding:12px 14px 14px;overflow:visible}
.request-photo-inputs{height:154px;min-height:154px;align-items:stretch;padding:0 0 8px}
.request-photo-inputs .photo-slot{height:140px;min-height:140px;max-height:140px;aspect-ratio:auto;flex-basis:calc((100% - 9px)/2)}
.request-actions{position:relative;bottom:auto;z-index:2;margin-top:0;padding-top:12px;padding-bottom:14px}
.finish-photo-sections{gap:18px;padding-bottom:14px;overflow:visible}
.finish-photo-grid{height:132px;min-height:132px;align-items:stretch;padding:0 0 8px}
.finish-photo-grid .photo-slot{height:118px;min-height:118px;max-height:118px;aspect-ratio:auto}
.finish-actions{position:relative;bottom:auto;margin-top:0;padding-top:12px;padding-bottom:14px}
}
/* v32 Open Jobs modernization + Job Details icon integration */
#jobs.page{max-width:1180px}.open-jobs-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}.open-jobs-toolbar .job-tabs{margin:0}.open-job-stats{display:flex;gap:8px;margin-left:auto}.open-job-stats>div{min-width:86px;text-align:center;border:1px solid #244d63;background:#071f30;border-radius:9px;padding:7px 11px}.open-job-stats b{display:block;font-size:20px}.open-job-stats small{color:#8eabb9;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.travel-refresh{border:1px solid #247aa3;background:#092b40;color:#dff5ff;border-radius:8px;padding:10px 13px;cursor:pointer}.open-job-card{display:grid;grid-template-columns:66px minmax(115px,.7fr) minmax(220px,1.4fr) minmax(135px,.8fr) minmax(120px,.8fr) 78px 24px;align-items:center;gap:14px;padding:12px 15px;border:1px solid #1e4b61;background:rgba(5,28,43,.94);border-radius:11px;cursor:pointer;transition:.15s ease}.open-job-card:hover,.open-job-card:focus{border-color:#2a9fe0;background:#09283c;outline:none;transform:translateY(-1px)}.open-status-icon{display:grid;place-items:center}.open-status-icon img{width:48px;height:48px;object-fit:contain}.open-job-id b,.open-job-id small,.open-job-location b,.open-job-location small,.open-travel b,.open-travel small{display:block}.open-job-id b{font-size:16px}.open-job-id small,.open-job-location small,.open-travel small{color:#89a9ba;font-size:11px;margin-top:4px}.open-job-location>div{display:flex;align-items:center;gap:8px}.open-job-location img{width:36px;height:32px;object-fit:contain}.open-travel b{color:#55c3ff;font-size:14px}.open-status-badge{justify-self:center;min-width:112px;text-align:center;border-radius:7px;padding:8px 10px;font-size:11px;font-weight:900;text-transform:uppercase;background:#12405a;color:#aee6ff}.open-status-badge.status-priority{background:#862020;color:#fff}.open-status-badge.status-inprogress{background:#785900;color:#fff}.open-status-badge.status-needsshadow,.open-status-badge.status-shadowneeded{background:#493078;color:#fff}.open-status-badge.status-contractorneeded{background:#9a5a00;color:#fff}.open-source-badge{justify-self:center;background:#0c64a7;color:#fff;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:900}.open-chevron{font-size:28px;color:#3aa9e9}.field-icon,.info-icon-field>img{width:30px;height:30px;object-fit:contain;float:left;margin:0 9px 3px 0}.route-field-icon{width:38px}.generated-field-icon{float:left;margin:0 9px 3px 0;width:30px;height:30px;border:1px solid #2991c5;border-radius:6px;display:grid;place-items:center;color:#4ec4ff;font-weight:900;font-size:10px}.city-field-icon{font-size:18px}.info-icon-field{min-height:55px}.info-icon-field .k{padding-top:1px}
body.theme-day .open-job-card,body.theme-day .open-job-stats>div{background:rgba(250,253,255,.94);border-color:#a9c7d5;color:#15384b}body.theme-day .open-job-card:hover{background:#e8f5fb}body.theme-day .travel-refresh{background:#eef8fc;color:#17445b}
@media(max-width:900px){#jobs.page{padding-left:14px;padding-right:14px}.open-job-stats{order:3;width:100%;margin-left:0}.open-job-stats>div{flex:1}.open-job-card{grid-template-columns:52px 1fr auto;gap:9px}.open-status-icon img{width:42px;height:42px}.open-job-location,.open-travel{grid-column:2/4}.open-status-badge{grid-column:2;justify-self:start}.open-source-badge{grid-column:3}.open-chevron{display:none}.travel-refresh{margin-left:auto}}
.open-job-location>div{gap:10px;white-space:nowrap}.open-location-sep{color:#4d7185;font-weight:700}.open-job-location img{margin-left:2px}
/* v34 Open Jobs live-stat icons */
.open-job-stats>div{display:flex;align-items:center;justify-content:center;gap:9px;min-width:108px;text-align:left}
.open-job-stats>div>img{width:34px;height:34px;object-fit:contain;flex:0 0 34px}
.open-job-stats>div>span{display:block;min-width:0}
.open-job-stats>div>span b{line-height:1.05}
.open-job-stats>div>span small{display:block;margin-top:3px;white-space:nowrap}
@media(max-width:900px){.open-job-stats>div{min-width:0}.open-job-stats>div>img{width:30px;height:30px;flex-basis:30px}}
/* v37 Open Jobs polish */
.open-job-stats>div{min-width:112px;min-height:68px;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:11px}
.open-job-stats>div img{width:38px;height:38px;object-fit:contain;flex:0 0 auto}
.open-job-stats>div span{display:block;min-width:48px}
.open-job-stats b{font-size:24px;line-height:1}
.open-job-stats small{font-size:11px;margin-top:6px;display:block}
.open-job-location{display:flex;align-items:center;gap:14px}
.open-job-location .open-city{font-size:16px;min-width:76px}
.open-route-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:50px}
.open-route-stack .open-direction{font-size:12px;line-height:1;color:#dff5ff}
.open-route-stack img{width:38px;height:34px;object-fit:contain}
body.theme-day .open-route-stack .open-direction{color:#15384b}
@media(max-width:900px){.open-job-stats>div{min-width:0;min-height:62px;padding:8px}.open-job-stats>div img{width:32px;height:32px}.open-job-location{align-items:flex-start}.open-route-stack{min-width:44px}}
/* v37 Open Jobs travel + spacing refinement */
@media(min-width:901px){
#jobs.page{max-width:1180px}
.open-job-card{grid-template-columns:66px 150px 260px 180px 180px 78px 24px;justify-content:space-between;column-gap:12px}
.open-status-icon,.open-job-id,.open-job-location,.open-travel,.open-status-badge,.open-source-badge,.open-chevron{min-width:0}
}
.open-job-location{justify-content:flex-start}
.open-route-stack{gap:4px}
.open-route-stack img,.open-job-location img{width:48px!important;height:43px!important;object-fit:contain}
.open-route-stack .open-direction{font-size:11px!important;font-weight:600!important;line-height:1.05;color:#89a9ba!important;margin-top:1px}
body.theme-day .open-route-stack .open-direction{color:#668596!important}
/* v38 Job Details compact desktop + simplified location fields */
#details.page{max-width:1280px;padding-left:24px;padding-right:24px}
#details .summary-strip{margin-left:auto;margin-right:auto}
#details .detail-body{grid-template-columns:320px minmax(0,1fr)}
#details .location-meta{grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
#details .location-meta>div{min-height:58px;display:flex;flex-direction:column;justify-content:center;position:relative}
#details .location-meta .route-only-field{align-items:center;padding:2px 12px}
#details .route-only-field .route-field-icon{float:none;margin:0;width:58px;height:52px;object-fit:contain}
#details .city-logo-field{padding-left:62px!important}
#details .city-logo{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:40px;height:40px;object-fit:contain}
#details .coordinates-field{grid-column:span 2}
body.theme-day #details .city-logo{filter:none}
@media(max-width:900px){#details.page{max-width:none;padding-left:14px;padding-right:14px}#details .location-meta{grid-template-columns:repeat(2,minmax(0,1fr))}#details .coordinates-field{grid-column:span 2}}
\n/* v40 Open Jobs icon sizing, city crest, and even spacing */\n@media(min-width:901px){\n .open-job-card{grid-template-columns:72px 150px 270px 180px 180px 78px 24px;column-gap:18px}\n}\n.open-status-icon img{width:44px!important;height:44px!important;object-fit:contain}\n.open-job-location{display:grid!important;grid-template-columns:92px 92px;align-items:center!important;justify-content:start!important;gap:28px!important}\n.open-city-stack,.open-route-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0}\n.open-city-stack img,.open-route-stack img{width:44px!important;height:44px!important;object-fit:contain;margin:0!important}\n.open-city-stack .open-city,.open-route-stack .open-direction{font-size:11px!important;font-weight:600!important;line-height:1.05;color:#89a9ba!important;margin-top:1px;text-align:center;white-space:nowrap}\nbody.theme-day .open-city-stack .open-city,body.theme-day .open-route-stack .open-direction{color:#668596!important}\n@media(max-width:900px){\n .open-job-location{grid-template-columns:82px 82px;gap:18px!important}\n .open-status-icon img,.open-city-stack img,.open-route-stack img{width:40px!important;height:40px!important}\n}\n
/* v41 Open Jobs refinements */
.open-job-card .open-status-icon img{
width:50px!important;height:50px!important;object-fit:contain!important;
}
.open-job-card .open-job-location{
display:grid!important;grid-template-columns:100px 100px!important;gap:40px!important;
align-items:center!important;justify-content:start!important;
}
.open-job-card .open-city-stack,
.open-job-card .open-route-stack{
display:flex!important;flex-direction:column!important;align-items:center!important;
justify-content:center!important;gap:6px!important;min-width:100px!important;
}
.open-job-card .open-city-stack img,
.open-job-card .open-route-stack img{
display:block!important;width:50px!important;height:50px!important;object-fit:contain!important;
margin:0 auto!important;position:static!important;
}
.open-job-card .open-city-stack .open-city,
.open-job-card .open-route-stack .open-direction{
display:block!important;width:100%!important;text-align:center!important;margin:0!important;
font-size:11px!important;line-height:1.1!important;
}
@media(min-width:901px){
.open-job-card{grid-template-columns:78px 150px 300px 180px 180px 78px 24px!important;column-gap:22px!important}
}
@media(max-width:900px){
.open-job-card .open-status-icon img,
.open-job-card .open-city-stack img,
.open-job-card .open-route-stack img{width:46px!important;height:46px!important}
.open-job-card .open-job-location{grid-template-columns:90px 90px!important;gap:24px!important}
}
/* v42 city crests + SR-260 + final Open Jobs spacing */
.open-job-card .open-status-icon img{width:50px!important;height:50px!important}
.open-job-card .open-job-location{grid-template-columns:104px 88px!important;gap:34px!important;justify-content:start!important}
.open-job-card .open-city-stack,.open-job-card .open-route-stack{gap:5px!important}
.open-job-card .open-city-stack img,.open-job-card .open-route-stack img{width:48px!important;height:48px!important;max-width:78px!important;object-fit:contain!important}
.open-job-card .open-city-stack .open-city,.open-job-card .open-route-stack .open-direction{font-size:11px!important}
@media(min-width:901px){.open-job-card{grid-template-columns:78px 150px 320px 180px 180px 78px 24px!important;column-gap:24px!important}}
#details .city-logo-field{padding-left:70px!important}
#details .city-logo{width:48px!important;height:48px!important;object-fit:contain!important}
#details .route-only-field .route-field-icon{width:50px!important;height:50px!important}
@media(max-width:900px){.open-job-card .open-status-icon img{width:46px!important;height:46px!important}.open-job-card .open-city-stack img,.open-job-card .open-route-stack img{width:44px!important;height:44px!important}.open-job-card .open-job-location{grid-template-columns:90px 80px!important;gap:22px!important}}
/* v43 Open Jobs mockup-style desktop layout */
#jobs.page{max-width:1080px!important;margin-left:auto!important;margin-right:auto!important}
#jobs #jobMessage{display:none!important}
.open-jobs-toolbar{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:end!important;margin-bottom:18px!important}
.open-jobs-toolbar .open-job-tabs{grid-column:1;justify-self:start}
.open-job-stats{grid-column:2!important;margin:0!important;justify-self:center!important;gap:12px!important}
.open-job-stats>div{min-width:132px!important;min-height:82px!important;padding:12px 17px!important;border-radius:11px!important;gap:12px!important}
.open-job-stats>div img{width:43px!important;height:43px!important}
.open-job-stats b{font-size:27px!important}
.open-job-stats small{font-size:11px!important}
.travel-refresh{grid-column:3;justify-self:end;min-height:50px;padding:11px 16px!important}
.open-job-head{display:grid;grid-template-columns:78px 150px 210px 120px 180px 145px 100px;align-items:end;column-gap:0;padding:0 16px 8px;margin-top:2px;color:#8eabb9;font-size:10px;text-transform:uppercase;letter-spacing:.45px}
.open-job-head>span{text-align:left}.open-job-head>span:nth-child(5),.open-job-head>span:nth-child(6),.open-job-head>span:nth-child(7){text-align:center}.open-job-head small{display:block;text-transform:none;letter-spacing:0;font-size:9px;margin-top:2px}
#jobList.job-list{display:flex;flex-direction:column;gap:10px}
.open-job-card{grid-template-columns:78px 150px 210px 120px 180px 145px 100px!important;column-gap:0!important;justify-content:stretch!important;min-height:92px!important;padding:12px 16px!important;border-radius:12px!important}
.open-job-card>div,.open-job-card>span{height:64px;display:flex;align-items:center}
.open-job-card>div:not(:first-child),.open-job-card>span{border-left:1px solid rgba(112,160,184,.24);padding-left:18px}
.open-job-card .open-status-icon{justify-content:flex-start!important}
.open-job-card .open-status-icon img{width:54px!important;height:54px!important}
.open-job-card .open-job-id{display:block!important;padding-top:9px}
.open-job-card .open-job-id b{font-size:16px}.open-job-card .open-job-id small{font-size:12px}
.open-job-card .open-job-location{display:grid!important;grid-template-columns:105px 85px!important;gap:0!important;padding-left:10px!important}
.open-job-card .open-city-stack,.open-job-card .open-route-stack{min-width:0!important;height:64px!important;gap:3px!important}
.open-job-card .open-city-stack img,.open-job-card .open-route-stack img{width:50px!important;height:50px!important}
.open-job-card .open-city-stack .open-city,.open-job-card .open-route-stack .open-direction{font-size:11px!important;color:#dff5ff!important}
.open-job-card .open-travel{display:block!important;padding-top:11px;padding-left:22px!important}.open-job-card .open-travel b{font-size:14px}.open-job-card .open-travel small{font-size:11px}
.open-job-card .open-status-badge{display:flex!important;align-items:center;justify-content:center!important;height:auto!important;min-height:34px!important;margin:15px 12px 15px 18px!important;padding:7px 8px!important}
.open-job-card .open-source-badge{height:auto!important;margin-left:18px!important;padding:7px 11px!important;justify-self:center!important;align-self:center!important;border-left:0!important}
.open-job-card .open-chevron{height:auto!important;border-left:0!important;padding-left:8px!important;justify-self:end!important;align-self:center!important}
@media(max-width:900px){#jobs.page{max-width:none!important}.open-jobs-toolbar{display:flex!important}.open-job-head{display:none!important}.open-job-stats{order:3!important;width:100%!important}.open-job-card{grid-template-columns:52px 1fr auto!important;min-height:0!important}.open-job-card>div,.open-job-card>span{height:auto;border-left:0!important;padding-left:0!important}.open-job-card .open-job-location{grid-column:2/4!important;grid-template-columns:90px 80px!important}.open-job-card .open-status-badge{grid-column:2!important;margin:0!important}.open-job-card .open-source-badge{grid-column:3!important;margin:0!important}}
/* v44 Open Jobs alignment + Priority column */
#jobs.page{max-width:1040px!important}
.open-job-head{grid-template-columns:74px 145px 205px 130px 170px 145px 92px 92px 22px!important;padding:0 15px 9px!important;column-gap:0!important;color:#fff!important;font-size:12px!important;font-weight:800!important;letter-spacing:.55px!important}
.open-job-head>span{display:flex;align-items:flex-end;justify-content:flex-start;min-height:30px;padding-left:14px}
.open-job-head>span:first-child{padding-left:0}.open-job-head>span:nth-child(6),.open-job-head>span:nth-child(7),.open-job-head>span:nth-child(8){justify-content:center;text-align:center;padding-left:0}
.open-job-card{grid-template-columns:74px 145px 205px 130px 170px 145px 92px 92px 22px!important;padding:12px 15px!important}
.open-job-card>div:not(:first-child),.open-job-card>span{border-left:1px solid rgba(112,160,184,.28)!important;padding-left:14px!important}
.open-job-card .open-job-location{display:contents!important}
.open-job-card .open-city-stack,.open-job-card .open-route-stack{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;height:64px!important;gap:3px!important;border-left:1px solid rgba(112,160,184,.28)!important;padding-left:14px!important}
.open-job-card .open-travel{padding-top:10px!important;padding-left:20px!important}
.open-job-card .open-travel small{display:block!important;margin-top:4px!important;color:#89a9ba!important}
.open-job-card .open-status-badge{margin:15px 10px!important;padding-left:8px!important;border-left:1px solid rgba(112,160,184,.28)!important}
.open-job-card .open-source-badge{margin:0!important;justify-self:center!important;border-left:1px solid rgba(112,160,184,.28)!important;padding:7px 10px!important}
.open-priority-cell{display:flex!important;align-items:center!important;justify-content:center!important;height:64px!important;font-size:11px!important;font-weight:900!important;color:#ffcf4a!important;border-left:1px solid rgba(112,160,184,.28)!important;padding-left:0!important}
.open-job-card .open-chevron{border-left:1px solid rgba(112,160,184,.28)!important;padding-left:8px!important}
body.theme-day .open-job-head{color:#17394c!important}
@media(max-width:900px){.open-priority-cell{grid-column:2!important;height:auto!important;border-left:0!important;justify-content:flex-start!important}.open-job-card .open-job-location{display:grid!important}.open-job-card .open-city-stack,.open-job-card .open-route-stack{border-left:0!important;padding-left:0!important}}
/* v45 precision Open Jobs columns */
#jobs.page{max-width:1120px!important}
.open-job-head,
.open-job-card{grid-template-columns:76px 128px 190px 130px 180px 145px 100px 95px 24px!important;column-gap:0!important}
.open-job-head{padding:0 15px 10px!important;font-size:13px!important;font-weight:900!important;color:#fff!important;letter-spacing:.45px!important}
.open-job-head>span{display:flex!important;align-items:flex-end!important;justify-content:center!important;text-align:center!important;min-height:34px!important;padding:0 8px!important}
.open-job-card{padding:12px 15px!important}
.open-job-card>div,.open-job-card>span{box-sizing:border-box!important;min-width:0!important}
.open-job-card>div:not(:first-child),.open-job-card>span{border-left:1px solid rgba(112,160,184,.30)!important}
.open-job-card .open-status-icon,.open-job-card .open-job-id,.open-job-card .open-city-stack,.open-job-card .open-route-stack,.open-job-card .open-travel,.open-job-card .open-status-badge,.open-job-card .open-source-badge,.open-job-card .open-priority-cell,.open-job-card .open-chevron{align-self:stretch!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:8px!important;height:auto!important}
.open-job-card .open-job-id{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;padding-left:16px!important}
.open-job-card .open-city-stack,.open-job-card .open-route-stack{flex-direction:column!important;gap:3px!important}
.open-job-card .open-travel{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;padding-left:16px!important}
.open-job-card .open-status-badge{justify-self:stretch!important;min-width:0!important;text-align:center!important}
.open-job-card .open-source-badge{justify-self:stretch!important;border-radius:0!important;background:transparent!important;color:#fff!important}
.open-job-card .open-source-badge::before{content:'';background:#0c64a7;border-radius:999px;position:absolute}
.open-job-card .open-source-badge{position:relative!important}
.open-job-card .open-source-badge{font-size:10px!important;font-weight:900!important}
.open-job-card .open-priority-cell{padding-left:8px!important;color:#ffcf4a!important}
.open-job-card .open-chevron{padding:0!important;font-size:27px!important}
body.theme-day .open-job-head{color:#17394c!important}
@media(max-width:900px){#jobs.page{max-width:none!important}.open-job-card>div,.open-job-card>span{border-left:0!important}.open-job-card .open-job-id,.open-job-card .open-travel{padding-left:0!important}.open-job-card .open-source-badge{background:#0c64a7!important;border-radius:999px!important}}
.open-job-card .open-source-badge::before{display:none!important}.open-job-card .open-source-badge{background:#0c64a7!important;border-radius:999px!important;align-self:center!important;height:auto!important;justify-self:center!important;padding:7px 10px!important;border-left:1px solid rgba(112,160,184,.30)!important}
/* v46 final precision Open Jobs layout */
@media(min-width:901px){
#jobs.page{max-width:1160px!important}
.open-job-head,.open-job-card{grid-template-columns:92px 130px 190px 140px 190px 170px 105px 100px 28px!important}
.open-job-head{padding:0 14px 10px!important}
.open-job-card{padding:12px 14px!important}
.open-job-head>span{justify-content:center!important;text-align:center!important;padding:0 5px!important}
.open-job-card .open-status-icon,.open-job-card .open-job-id{justify-content:center!important;align-items:center!important;text-align:center!important}
.open-job-card .open-job-id{padding:8px!important;flex-direction:column!important}
.open-job-card .open-job-id b,.open-job-card .open-job-id small{width:100%;text-align:center!important}
.open-job-card .open-route-stack img{width:43px!important;height:43px!important;max-width:60px!important}
.open-job-card .open-status-icon img{width:54px!important;height:54px!important}
.open-job-card .open-travel{align-items:center!important;text-align:center!important;padding:8px!important}
.open-job-card .open-travel small:empty{display:none!important}
.open-job-card .open-status-badge{align-self:center!important;justify-self:center!important;height:auto!important;min-height:0!important;min-width:108px!important;max-width:160px!important;border-radius:999px!important;padding:8px 14px!important;border-left:1px solid rgba(112,160,184,.30)!important}
.open-job-card .open-source-badge{border-left:1px solid rgba(112,160,184,.30)!important}
.open-job-card .open-priority-cell{border-left:1px solid rgba(112,160,184,.30)!important}
.open-job-card .open-chevron{border-left:1px solid rgba(112,160,184,.30)!important}
}
.open-status-badge.status-open{background:#b51f1f!important;color:#fff!important}
.open-status-badge.status-completed{background:#238a32!important;color:#fff!important}
.open-status-badge.status-priority{background:#c49a00!important;color:#fff!important}
.open-status-badge.status-inprogress{background:#1778b5!important;color:#fff!important}
.open-status-badge.status-contractorneeded{background:#9a5a00!important;color:#fff!important}
\n/* v47 Open Jobs cleanup: no column headers; Job Type removed; Priority moved inside list */
#jobs .open-job-head{display:none!important}
#jobs .open-job-card{
grid-template-columns:92px 150px 220px 145px 190px 180px 120px 34px!important;
padding:14px 16px!important;
column-gap:0!important;
align-items:stretch!important;
}
#jobs .open-job-card>.open-status-icon,
#jobs .open-job-card>.open-job-id,
#jobs .open-job-card .open-city-stack,
#jobs .open-job-card .open-route-stack,
#jobs .open-job-card>.open-travel,
#jobs .open-job-card>.open-status-badge,
#jobs .open-job-card>.open-priority-cell,
#jobs .open-job-card>.open-chevron{
border-left:1px solid rgba(112,160,184,.30)!important;
box-sizing:border-box!important;
}
#jobs .open-job-card>.open-status-icon{border-left:0!important}
#jobs .open-job-location{display:contents!important}
#jobs .open-job-card>.open-status-badge{
align-self:center!important;height:auto!important;min-height:38px!important;
justify-self:center!important;width:auto!important;min-width:136px!important;
padding:9px 16px!important;border-radius:12px!important;
}
#jobs .open-job-card>.open-priority-cell{align-self:stretch!important;justify-self:stretch!important}
#jobs .open-job-card>.open-chevron{padding:0!important}
#jobs .open-travel small{display:none!important}
@media(max-width:900px){
#jobs .open-job-card{grid-template-columns:52px 1fr auto!important}
#jobs .open-job-card>*{border-left:0!important}
#jobs .open-job-location{display:grid!important}
}
/* v57 Daily Route single-screen layout */
@media(min-width:1100px){
#route.page.active{height:100vh;max-height:100vh;overflow:hidden!important}
#route .route-wrap{height:100vh;max-height:100vh;overflow:hidden!important;padding-top:10px;padding-bottom:10px}
#route .route-grid{flex:1;min-height:0;overflow:hidden}
#route .route-list-card,#route .route-map-card{height:100%;min-height:0;max-height:100%;overflow:hidden}
#route .route-stops-list{height:100%;min-height:0;overflow-y:auto!important;scrollbar-width:none;-ms-overflow-style:none}
#route .route-stops-list::-webkit-scrollbar{width:0;height:0;display:none}
#route .route-map-card iframe{height:100%!important;min-height:0!important}
#route .route-bottom{display:none!important}
}
/* v58 Daily Route: fixed one-screen workspace with hidden internal scrollbar. */
@media (min-width:1100px){
#route.page.active{height:calc(100dvh - 94px)!important;max-height:calc(100dvh - 94px)!important;overflow:hidden!important}
#route .route-wrap{height:100%!important;max-height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;padding:10px 18px!important}
#route .route-head,#route .route-summary{flex:0 0 auto!important}
#route .route-grid{display:grid!important;grid-template-columns:minmax(320px,30%) minmax(0,1fr)!important;flex:1 1 auto!important;height:auto!important;min-height:0!important;overflow:hidden!important}
#route .route-list-card{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}
#route .route-card-title,#route .route-day-summary{flex:0 0 auto!important}
#route .route-stops-list{flex:1 1 0!important;height:0!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important;-ms-overflow-style:none!important;overscroll-behavior:contain}
#route .route-stops-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
#route .route-map-card{height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}
#route .route-map-card iframe{display:block!important;width:100%!important;height:100%!important;min-height:0!important}
#route .route-bottom{display:none!important}
}
/* v60 VERIFIED tablet/desktop Daily Route fixed viewport + hidden internal scroll */
@media (min-width: 761px) {
#route.page.active {
box-sizing: border-box !important;
height: calc(100dvh - 94px) !important;
max-height: calc(100dvh - 94px) !important;
min-height: 0 !important;
overflow: hidden !important;
padding: 8px 18px 10px !important;
}
#route .route-wrap {
box-sizing: border-box !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
}
#route .route-head {
flex: 0 0 auto !important;
margin: 0 0 6px !important;
}
#route .route-summary {
flex: 0 0 auto !important;
margin: 0 0 7px !important;
padding: 6px !important;
}
#route .route-grid {
flex: 1 1 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important;
display: grid !important;
grid-template-columns: minmax(300px, 32%) minmax(0, 1fr) !important;
gap: 9px !important;
}
#route .route-list-card {
box-sizing: border-box !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
#route .route-card-title,
#route .route-day-summary {
flex: 0 0 auto !important;
}
#route .route-stops-list {
display: block !important;
flex: 1 1 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
}
#route .route-stops-list::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
#route .route-map-card {
box-sizing: border-box !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important;
}
#route .route-map-card iframe {
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
border: 0 !important;
}
#route .route-bottom { display: none !important; }
}
/* v62 Completed Jobs searchable archive */
#completed.page{max-width:1240px;margin:0 auto;padding-left:22px!important;padding-right:22px!important;box-sizing:border-box}
#completed .page-title{margin-bottom:8px}
#completed .completed-tabs{margin:4px 0 10px;display:flex;gap:8px;flex-wrap:wrap}
#completed .completed-tabs button{min-width:92px}
.completed-browser{border:1px solid #24516a;background:rgba(5,29,45,.94);border-radius:12px;padding:12px;margin-bottom:9px;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.completed-search-row{display:grid;grid-template-columns:minmax(250px,1.8fr) repeat(5,minmax(110px,.85fr));gap:9px;align-items:end}
.completed-search-row label{display:flex;flex-direction:column;gap:5px;min-width:0;color:#dceef8;font-size:11px;font-weight:800}
.completed-search-row input,.completed-search-row select{width:100%;height:38px;box-sizing:border-box;border:1px solid #315e75;border-radius:8px;background:#071c2b;color:#fff;padding:0 10px;outline:0;font:600 12px inherit}
.completed-search-row input:focus,.completed-search-row select:focus{border-color:#31aef4;box-shadow:0 0 0 2px rgba(49,174,244,.13)}
.completed-search{grid-column:span 1}.completed-search>div{display:flex;position:relative}.completed-search input{padding-right:42px}.completed-search button{position:absolute;right:3px;top:3px;width:32px;height:32px;border:0;border-radius:7px;background:transparent;color:#55c2ff;font-size:20px;cursor:pointer}
.completed-filter-actions{display:flex;justify-content:flex-end;margin-top:8px}.completed-filter-actions button{height:32px;padding:0 12px;border:1px solid #315e75;border-radius:7px;background:#082236;color:#dff4ff;font-weight:700;cursor:pointer}
.completed-countbar{height:34px;display:flex;align-items:center;padding:0 12px;margin-bottom:7px;border:1px solid #214b62;border-radius:9px;background:rgba(6,29,44,.92);color:#a9d9f2;font-size:12px}
.completed-job-list{display:flex;flex-direction:column;gap:6px}
.completed-job-card{display:grid;grid-template-columns:minmax(145px,.95fr) minmax(155px,1fr) minmax(250px,1.7fr) minmax(95px,.65fr) minmax(115px,.75fr) minmax(125px,.85fr) 18px;align-items:center;min-height:68px;border:1px solid #24516a;border-radius:10px;background:rgba(4,31,48,.94);overflow:hidden;cursor:pointer;transition:.15s ease;color:#fff}
.completed-job-card:hover{border-color:#2b9ee3;background:rgba(6,39,59,.97);transform:translateY(-1px)}
.completed-job-card>div,.completed-job-card>.completed-status{min-width:0;padding:8px 12px;border-left:1px solid rgba(84,143,174,.26);box-sizing:border-box}.completed-job-card>div:first-child{border-left:0}
.completed-ids{display:grid;grid-template-columns:1fr 1fr;gap:8px}.completed-ids.single{grid-template-columns:1fr}.completed-ids span,.completed-production span{min-width:0}.completed-ids small,.completed-job-card small{display:block;color:#89adc1;font-size:9px;line-height:1.2;text-transform:uppercase}.completed-ids b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.completed-route{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center}.completed-route img{width:43px;height:43px;object-fit:contain;flex:0 0 auto}.completed-route b{font-size:13px}.completed-route small{margin-top:2px}
.completed-location b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.completed-location small{margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none}
.completed-pm{display:flex;align-items:center;justify-content:center;gap:7px}.pm-mini{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border:1px solid #38c2ff;border-radius:6px;color:#67d3ff;font-size:9px;font-weight:900}.completed-pm b{font-size:12px}.completed-date{text-align:center}.completed-date b{font-size:12px}.completed-date small{margin-top:3px}
.completed-status{justify-self:center;min-width:104px!important;max-width:150px;text-align:center;border:1px solid #239a49!important;border-radius:8px!important;background:#0b5b2b!important;color:#fff!important;font-size:10px!important;font-weight:900!important;padding:8px 9px!important;line-height:1.05}.completed-status.status-utl,.completed-status.status-unabletolocate{background:#7b181d!important;border-color:#e63c47!important}.completed-status.status-completedbycontractor,.completed-status.status-completedcontractor{background:#0b4070!important;border-color:#1478c5!important}
.completed-production{display:flex;justify-content:center;gap:12px;text-align:center}.completed-production b{font-size:12px}.completed-chevron{color:#31b8ff;font-size:24px;padding-right:8px}
.completed-empty{margin:0}
.theme-day .completed-browser,.theme-day .completed-countbar,.theme-day .completed-job-card{background:rgba(247,252,255,.94);color:#0b2638;border-color:#a9c9da}.theme-day .completed-search-row label{color:#17384b}.theme-day .completed-search-row input,.theme-day .completed-search-row select{background:#fff;color:#17384b;border-color:#a7c5d5}.theme-day .completed-job-card small{color:#547489}.theme-day .completed-filter-actions button{background:#fff;color:#17384b;border-color:#a7c5d5}
@media(max-width:1180px){#completed.page{max-width:1080px;padding-left:16px!important;padding-right:16px!important}.completed-search-row{grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(105px,1fr))}.completed-search-row label:nth-child(n+5){grid-row:2}.completed-job-card{grid-template-columns:minmax(135px,.9fr) minmax(145px,.95fr) minmax(215px,1.5fr) minmax(90px,.6fr) minmax(110px,.7fr) minmax(110px,.78fr) 18px}}
@media(max-width:900px){#completed.page{max-width:820px}.completed-search-row{grid-template-columns:repeat(2,minmax(0,1fr))}.completed-search{grid-column:1/-1}.completed-search-row label:nth-child(n){grid-row:auto}.completed-job-card{grid-template-columns:120px 130px minmax(180px,1fr) 95px 110px 18px}.completed-pm{display:none}.completed-job-card>.completed-status{min-width:96px!important}.completed-location small{max-width:240px}}
@media(max-width:700px){#completed.page{padding:10px!important}.completed-search-row{grid-template-columns:1fr}.completed-search{grid-column:auto}.completed-job-card{grid-template-columns:95px 105px minmax(130px,1fr) 88px 16px;min-height:64px}.completed-pm,.completed-date{display:none}.completed-job-card>.completed-status{min-width:82px!important;font-size:9px!important}.completed-ids{grid-template-columns:1fr}.completed-ids span:nth-child(2){display:none}.completed-route img{width:36px;height:36px}.completed-location small{display:none}}
/* v63 Completed Jobs visual polish */
.completed-search-row{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:16px 18px!important;align-items:end!important}
.completed-search-row [hidden]{display:none!important}
.completed-search{grid-column:1/-1!important;width:min(860px,78%)!important;justify-self:center!important;margin:0 auto 2px!important}
.completed-search-row label:not(.completed-search){width:100%!important}
.completed-search-row[data-type="freelance"],.completed-search-row[data-type="callout"]{grid-template-columns:repeat(4,minmax(150px,1fr))!important}
.completed-search-row[data-type="freelance"] .completed-search,.completed-search-row[data-type="callout"] .completed-search{grid-column:1/-1!important}
.completed-search-row input,.completed-search-row select{height:42px!important;font-size:13px!important}
.completed-search-row label{font-size:12px!important}
.completed-filter-actions{justify-content:center!important;margin-top:14px!important}
.completed-filter-actions button{height:36px!important;padding:0 18px!important}
.completed-job-list{gap:8px!important}
.completed-job-card{grid-template-columns:minmax(165px,1.05fr) minmax(180px,1.05fr) minmax(360px,2.25fr) minmax(135px,.78fr) minmax(145px,.85fr) 22px!important;min-height:84px!important}
.completed-job-card>div,.completed-job-card>.completed-status{padding:11px 14px!important}
.completed-ids small,.completed-job-card small{font-size:10px!important}
.completed-ids b{font-size:14px!important}
.completed-route img{width:50px!important;height:50px!important}
.completed-route b{font-size:15px!important}
.completed-location b{font-size:14px!important}
.completed-location small{font-size:10.5px!important;line-height:1.3!important;margin-top:5px!important}
.completed-date b{font-size:14px!important}
.completed-date small{font-size:10px!important}
.completed-status{font-size:11px!important;min-width:116px!important;padding:9px 11px!important}
.completed-production b{font-size:14px!important}
.completed-chevron{font-size:26px!important}
.completed-pm{display:none!important}
@media(max-width:1180px){
.completed-search-row{grid-template-columns:repeat(5,minmax(120px,1fr))!important}
.completed-search-row[data-type="freelance"],.completed-search-row[data-type="callout"]{grid-template-columns:repeat(4,minmax(120px,1fr))!important}
.completed-job-card{grid-template-columns:minmax(150px,1fr) minmax(165px,1fr) minmax(280px,1.9fr) minmax(125px,.78fr) minmax(130px,.82fr) 20px!important}
}
@media(max-width:900px){
.completed-search{width:100%!important}
.completed-search-row,.completed-search-row[data-type="freelance"],.completed-search-row[data-type="callout"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.completed-job-card{grid-template-columns:135px 145px minmax(210px,1fr) 110px 120px 18px!important;min-height:80px!important}
}
@media(max-width:700px){
.completed-search-row,.completed-search-row[data-type="freelance"],.completed-search-row[data-type="callout"]{grid-template-columns:1fr!important}
.completed-job-card{grid-template-columns:110px 115px minmax(145px,1fr) 95px 18px!important;min-height:76px!important}
.completed-date{display:none!important}
}
/* v64 Completed Jobs compact filter panel */
.completed-browser{padding:10px 14px 11px!important}
.completed-search-row{grid-template-columns:repeat(5,170px)!important;justify-content:center!important;gap:12px 14px!important}
.completed-search{width:min(760px,72%)!important;margin:0 auto!important}
.completed-search-controls{display:grid!important;grid-template-columns:minmax(0,1fr) 38px auto!important;gap:7px!important;position:relative!important}
.completed-search-controls input{padding-right:10px!important}
.completed-search button{position:static!important;width:auto!important;height:38px!important}
.completed-search-submit{min-width:38px!important;padding:0!important;background:transparent!important;border:1px solid #315e75!important}
.completed-inline-clear{padding:0 14px!important;border:1px solid #315e75!important;border-radius:7px!important;background:#082236!important;color:#dff4ff!important;font-size:12px!important;font-weight:700!important;cursor:pointer!important}
.theme-day .completed-inline-clear{background:#fff!important;color:#17384b!important;border-color:#a7c5d5!important}
.completed-filter-actions{display:none!important}
@media(max-width:1180px){.completed-search-row{grid-template-columns:repeat(5,minmax(130px,150px))!important}.completed-search{width:min(700px,82%)!important}}
@media(max-width:900px){.completed-search{width:100%!important}.completed-search-row,.completed-search-row[data-type="freelance"],.completed-search-row[data-type="callout"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.completed-search-controls{grid-template-columns:minmax(0,1fr) 38px!important}.completed-inline-clear{grid-column:1/-1!important;justify-self:center!important;width:auto!important}}
/* v65 Keep Freelance/Callout filter widths consistent with CSR/Requests */
.completed-search-row[data-type="freelance"],
.completed-search-row[data-type="callout"]{
grid-template-columns:repeat(4,170px)!important;
justify-content:center!important;
}
@media(max-width:1180px){
.completed-search-row[data-type="freelance"],
.completed-search-row[data-type="callout"]{
grid-template-columns:repeat(4,minmax(130px,150px))!important;
}
}
@media(max-width:900px){
.completed-search-row[data-type="freelance"],
.completed-search-row[data-type="callout"]{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media(max-width:700px){
.completed-search-row[data-type="freelance"],
.completed-search-row[data-type="callout"]{
grid-template-columns:1fr!important;
}
}
/* v66 Completed Jobs: remove redundant field titles above search/filters. */
#completed .completed-search-row > label > span{display:none!important}
#completed .completed-search-row{align-items:center!important}
#completed .completed-search{margin-top:0!important}
/* v67 Open Jobs tighter desktop layout + real Priority final column */
@media(min-width:901px){
#jobs.page{max-width:1080px!important}
.open-job-card{
grid-template-columns:88px 130px 145px 120px minmax(175px,1fr) 170px 74px 28px!important;
width:100%!important;
max-width:100%!important;
overflow:hidden!important;
}
.open-job-card .open-city-stack{padding:8px 6px!important;min-width:0!important}
.open-job-card .open-city-stack img{width:42px!important;height:42px!important;max-width:72px!important;object-fit:contain!important}
.open-job-card .open-city-stack .open-city{font-size:11px!important;max-width:125px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.open-job-card .open-route-stack{padding:8px 6px!important}
.open-job-card .open-route-stack img{width:42px!important;height:42px!important}
.open-job-card .open-travel{padding:8px 12px!important}
.open-job-card .open-status-badge{min-width:118px!important;max-width:160px!important}
.open-job-card .open-priority-cell{padding:0!important;justify-content:center!important;color:#ffcf4a!important}
.open-priority-flag{width:31px!important;height:31px!important;object-fit:contain!important;display:block!important}
.open-job-card .open-chevron{padding:0!important;justify-content:center!important}
}
/* v68 Open Jobs readability + restored Priority column */
@media(min-width:901px){
#jobs.page{max-width:1240px!important}
#jobs .open-job-card{
grid-template-columns:88px 150px 165px 125px minmax(180px,1fr) 180px 76px 30px!important;
min-height:92px!important;
padding:10px 14px!important;
column-gap:0!important;
overflow:hidden!important;
}
#jobs .open-job-location{display:contents!important}
#jobs .open-job-card>.open-status-icon,
#jobs .open-job-card>.open-job-id,
#jobs .open-job-card .open-city-stack,
#jobs .open-job-card .open-route-stack,
#jobs .open-job-card>.open-travel,
#jobs .open-job-card>.open-status-badge,
#jobs .open-job-card>.open-priority-cell,
#jobs .open-job-card>.open-chevron{
min-width:0!important;
height:100%!important;
padding:8px 12px!important;
}
#jobs .open-status-icon img{width:58px!important;height:58px!important}
#jobs .open-job-id{align-items:flex-start!important;padding-left:16px!important}
#jobs .open-job-id b{font-size:17px!important;line-height:1.1!important}
#jobs .open-job-id small{font-size:12.5px!important;line-height:1.2!important;margin-top:6px!important}
#jobs .open-city-stack{gap:5px!important;padding-left:10px!important;padding-right:10px!important}
#jobs .open-city-stack img{width:60px!important;height:54px!important;max-width:105px!important;object-fit:contain!important}
#jobs .open-city-stack .open-city{font-size:13.5px!important;line-height:1.1!important;max-width:145px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#jobs .open-route-stack{gap:5px!important}
#jobs .open-route-stack img{width:52px!important;height:52px!important}
#jobs .open-route-stack .open-direction{font-size:13px!important;line-height:1.1!important}
#jobs .open-travel{align-items:center!important;text-align:center!important;padding:8px 10px!important}
#jobs .open-travel b{font-size:15px!important;line-height:1.2!important}
#jobs .open-status-badge{font-size:12px!important;min-width:132px!important;max-width:172px!important;padding:10px 14px!important}
#jobs .open-priority-cell{
display:flex!important;
align-items:center!important;
justify-content:center!important;
align-self:stretch!important;
justify-self:stretch!important;
color:#ffcf4a!important;
font-size:18px!important;
border-left:1px solid rgba(112,160,184,.30)!important;
}
#jobs .open-priority-flag{width:38px!important;height:38px!important;object-fit:contain!important;display:block!important}
#jobs .open-chevron{display:flex!important;align-items:center!important;justify-content:center!important;font-size:30px!important}
#jobs .open-job-stats>div{min-width:112px!important;min-height:74px!important;padding:10px 14px!important}
#jobs .open-job-stats>div img{width:38px!important;height:38px!important}
#jobs .open-job-stats b{font-size:24px!important}
#jobs .open-job-stats small{font-size:10.5px!important}
}
/* v69 Open Jobs spacing/pills/live-stat icon polish */
@media(min-width:901px){
#jobs.page{max-width:1240px!important}
#jobs .open-job-card{
grid-template-columns:88px 150px 160px 125px 205px 190px 92px 30px!important;
min-height:92px!important;
width:100%!important;
max-width:100%!important;
padding:10px 14px!important;
column-gap:0!important;
overflow:hidden!important;
}
#jobs .open-job-card>.open-status-icon,
#jobs .open-job-card>.open-job-id,
#jobs .open-job-card .open-city-stack,
#jobs .open-job-card .open-route-stack,
#jobs .open-job-card>.open-travel,
#jobs .open-job-card>.open-priority-cell,
#jobs .open-job-card>.open-chevron{
min-width:0!important;
height:100%!important;
box-sizing:border-box!important;
}
#jobs .open-travel{
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:8px 8px!important;
}
#jobs .open-travel b{font-size:16px!important;line-height:1.2!important;white-space:nowrap!important}
#jobs .open-status-badge{
align-self:center!important;
justify-self:center!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:168px!important;
min-width:0!important;
max-width:168px!important;
height:38px!important;
min-height:38px!important;
margin:0!important;
padding:7px 14px!important;
border-radius:999px!important;
box-sizing:border-box!important;
font-size:12px!important;
line-height:1.05!important;
text-align:center!important;
}
#jobs .open-priority-cell{
align-self:stretch!important;
justify-self:stretch!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
#jobs .open-priority-flag{width:40px!important;height:40px!important}
#jobs .open-job-stats>div{min-width:122px!important;min-height:78px!important;padding:10px 15px!important;gap:10px!important}
#jobs .open-job-stats>div img{width:46px!important;height:46px!important;object-fit:contain!important}
#jobs .open-job-stats b{font-size:25px!important}
#jobs .open-job-stats small{font-size:10.5px!important}
}
/* v70 Open Jobs: completed-screen pill sizing + even priority spacing */
@media(min-width:901px){
#jobs.page{max-width:1240px!important}
#jobs .open-job-card{
grid-template-columns:88px 150px 165px 125px 190px 160px 120px 34px!important;
width:100%!important;
max-width:100%!important;
min-height:92px!important;
padding:10px 14px!important;
column-gap:0!important;
overflow:hidden!important;
}
#jobs .open-travel{
padding:8px 10px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
#jobs .open-travel b{font-size:16px!important;white-space:nowrap!important}
#jobs .open-status-badge{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
align-self:center!important;
justify-self:center!important;
width:128px!important;
min-width:128px!important;
max-width:128px!important;
height:38px!important;
min-height:38px!important;
max-height:38px!important;
margin:0!important;
padding:0 12px!important;
border-radius:8px!important;
border-left:0!important;
box-sizing:border-box!important;
font-size:11px!important;
line-height:1.05!important;
text-align:center!important;
}
#jobs .open-status-badge.status-contractorneeded,
#jobs .open-status-badge.status-utl,
#jobs .open-status-badge.status-unabletolocate{
width:144px!important;
min-width:144px!important;
max-width:144px!important;
}
#jobs .open-priority-cell{
width:100%!important;
min-width:0!important;
align-self:stretch!important;
justify-self:stretch!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:0 10px!important;
box-sizing:border-box!important;
border-left:1px solid rgba(112,160,184,.30)!important;
border-right:1px solid rgba(112,160,184,.30)!important;
}
#jobs .open-priority-flag{width:42px!important;height:42px!important;object-fit:contain!important}
#jobs .open-chevron{
width:100%!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
#jobs .open-job-stats>div img{width:52px!important;height:52px!important;object-fit:contain!important}
}
/* v71 completed job details redesign */
#details .completed-inline .complete-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#details .complete-stat{min-height:72px;display:flex;align-items:center;gap:12px;border:1px solid #24546a;border-radius:9px;padding:10px 12px;background:#081f30}
#details .complete-stat>img{width:42px;height:42px;object-fit:contain;flex:0 0 42px}
#details .complete-stat.paint-stat>img{width:48px;height:48px;flex-basis:48px}
#details .complete-stat.gallons-stat>img{width:46px;height:38px;flex-basis:46px}
#details .complete-stat.sqft-stat>img{width:42px;height:42px}
#details .complete-stat span{display:block;color:#7fb7d4;font-size:10px;text-transform:uppercase;margin-bottom:5px}
#details .complete-stat b{font-size:15px;color:#fff}
#details .right-of-way-field img{width:38px;height:38px;object-fit:contain}
#details .location-meta{grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 12px;row-gap:14px}
#details .location-meta>div{padding:0 16px;min-height:68px}
#details .location-meta>div:nth-child(4n){border-right:0}
#details .location-meta .route-only-field{justify-content:center}
#details .location-meta .city-logo-field{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:10px;align-content:center}
#details .location-meta .city-logo-field .city-logo{grid-row:1/3;width:44px;height:44px;object-fit:contain}
#details .job-photo-gallery .photos-title-row{margin-bottom:14px}
#details .job-photo-gallery .photos-title-row>div{width:100%}
#details .job-photo-gallery .before-after-grid{gap:16px}
#details .job-photo-gallery .photo-side{min-height:245px}
@media(max-width:900px){#details .location-meta{grid-template-columns:repeat(2,minmax(0,1fr))}#details .location-meta>div:nth-child(odd){border-right:1px solid #17394d}#details .location-meta>div:nth-child(even){border-right:0}}
@media(max-width:600px){#details .completed-inline .complete-stats{grid-template-columns:1fr}#details .location-meta{grid-template-columns:1fr}#details .location-meta>div{border-right:0!important;border-bottom:1px solid #17394d;padding:10px 6px}}
/* v72 CSR Inbox test */
.csr-inbox-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:14px;border:1px solid #20516b;border-radius:10px;background:#061f30}.csr-file-btn{display:inline-flex;align-items:center;justify-content:center}.csr-inbox-toolbar span{color:#9fc4d7}.csr-inbox-list{display:grid;gap:10px}.csr-inbox-card{display:grid;grid-template-columns:140px 1fr 150px 30px;gap:14px;align-items:center;padding:16px;border:1px solid #20516b;border-radius:10px;background:#071d2d;color:#fff;cursor:pointer;text-align:left}.csr-inbox-card:hover{border-color:#2aa9ff;filter:brightness(1.08)}.csr-inbox-card b,.csr-inbox-card small{display:block}.csr-inbox-card small{color:#91adbb;margin-top:4px}.csr-inbox-card .csr-arrow{font-size:28px;color:#4ab9ff}.csr-import-banner{display:none;margin:0 0 12px;padding:10px 12px;border:1px solid #2875a3;border-radius:8px;background:#082d47;color:#bfe8ff}.csr-import-banner.show{display:block}@media(max-width:700px){.csr-inbox-toolbar{align-items:stretch;flex-direction:column}.csr-inbox-card{grid-template-columns:1fr 34px}.csr-inbox-card>div:nth-child(2),.csr-inbox-card>div:nth-child(3){grid-column:1}.csr-inbox-card .csr-arrow{grid-column:2;grid-row:1/4;align-self:center}}
/* v74 CSR Inbox dashboard count + review card polish */
.csr-inbox-count{display:inline-flex;min-width:24px;height:24px;padding:0 7px;margin-left:6px;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,.14);font-size:13px;line-height:1;vertical-align:middle}.csr-inbox-count.has-items{background:#ff9d21;color:#07131d;box-shadow:0 0 0 2px rgba(255,157,33,.18)}.csr-opened{margin-top:7px!important;color:#72c7f5!important;font-weight:700}.csr-inbox-card>div:nth-child(2)>small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
/* v75 Add CSR viewport fix: allow the full form and action row to be reached. */
@media (min-width:1100px){
#addcsr.page.active{height:auto!important;min-height:calc(100vh - 70px);overflow:visible!important;padding-bottom:40px}
#addcsr .addcsr-wrap{height:auto!important;min-height:0!important;display:block!important;padding-bottom:40px}
#addcsr .addcsr-grid{min-height:0}
#addcsr .save-row{position:sticky;bottom:10px;z-index:8;background:#061f30;border:1px solid #20516b;border-radius:9px;padding:8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
body.theme-day #addcsr .save-row{background:rgba(250,253,255,.98);border-color:#a9c7d5}
}
/* v76 Add CSR centered compact layout + complete controls */
@media (min-width:1100px){
#addcsr .addcsr-wrap{max-width:1320px!important;margin:0 auto!important}
#addcsr .addcsr-grid{grid-template-columns:minmax(400px,500px) minmax(620px,760px)!important;justify-content:center!important}
#addcsr .csr-info-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #173e55}
#addcsr .csr-info-head h3{border-bottom:0!important;flex:1}
#addcsr .csr-top-actions{display:flex;align-items:center;gap:9px;padding:6px 12px}
#addcsr .csr-top-actions .save-state{font-size:11px;max-width:190px}
#addcsr .addcsr-form-grid:not(.three){grid-template-columns:repeat(3,minmax(0,1fr))}
#addcsr .csr-priority-label{display:flex!important;flex-direction:column}
#addcsr .priority-check{display:flex;align-items:center;gap:8px;margin-top:8px;height:34px;font-weight:600;text-transform:none}
#addcsr .priority-check input{width:18px!important;height:18px!important;margin:0!important}
#addcsr .csr-long-text{grid-column:span 3}
#addcsr .csr-long-text textarea{height:72px!important;max-height:110px!important;min-height:72px!important}
#addcsr .save-row{display:none!important}
}
@media(max-width:1099px){#addcsr .csr-info-head{display:block}.csr-top-actions{display:flex;gap:8px;padding:8px 14px}.csr-priority-label{grid-column:1/-1}.priority-check{display:flex;align-items:center;gap:8px}.priority-check input{width:18px!important;margin:0!important}}
/* v78 Open Jobs redesign - desktop reference + mobile card layout */
#jobs.page{max-width:1320px!important;margin:0 auto;padding-top:28px!important}
#jobs .page-title{margin-bottom:18px}
#jobs .page-title small{color:#35b9ff;letter-spacing:1.5px;font-weight:800}
#jobs .page-title h1{text-transform:uppercase;font-size:34px;margin-top:7px}
#jobs .open-jobs-toolbar{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:14px!important}
#jobs .open-job-tabs{margin:0!important}
#jobs .travel-refresh{margin-left:auto}
#jobs .open-job-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin:8px 0 26px!important}
#jobs .open-job-stats>div{min-height:132px!important;border:1px solid #24516a!important;border-radius:14px!important;background:rgba(5,25,39,.88)!important;padding:20px 22px!important;display:flex!important;align-items:flex-start!important;gap:18px!important;box-sizing:border-box!important}
#jobs .open-job-stats>div img{width:58px!important;height:58px!important;object-fit:contain!important}
#jobs .open-job-stats span{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;flex:1}
#jobs .open-job-stats b{font-size:29px!important;line-height:1;color:#fff}
#jobs .open-job-stats small{font-size:12px!important;color:#b9d9ea!important;font-weight:800!important}
#jobs .open-job-stats em{grid-column:1/-1;font-style:normal;color:#9eb4c1;font-size:13px;margin-top:24px}
#jobs .open-list-panel{border:1px solid #24516a;border-radius:14px;background:rgba(4,23,36,.90);padding:18px}
#jobs .open-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
#jobs .open-list-head h2{font-size:22px;margin:0;padding-left:18px;position:relative}
#jobs .open-list-head h2:before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:5px;border-radius:5px;background:#2f9cff}
#jobs .open-list-controls{display:flex;gap:10px}
#jobs .open-list-controls select,#jobs .open-list-controls button{height:42px;border:1px solid #28526a;border-radius:9px;background:#071d2d;color:#fff;padding:0 16px;font:inherit}
#jobs .job-list{display:grid!important;gap:14px!important}
#jobs .open-job-card{display:block!important;padding:0!important;border:1px solid #234b61!important;border-radius:13px!important;background:rgba(6,25,39,.94)!important;overflow:hidden!important;min-height:0!important}
#jobs .open-job-card:hover{border-color:#2e9ee9!important;transform:translateY(-1px)}
#jobs .open-job-top{display:grid;grid-template-columns:62px 1fr auto 34px;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(78,126,150,.35)}
#jobs .open-status-icon{padding:0!important;border:0!important;display:flex;align-items:center}
#jobs .open-status-icon img{width:48px!important;height:48px!important}
#jobs .open-job-id{padding:0 12px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important}
#jobs .open-job-id b{font-size:18px!important}.open-job-id small{margin-top:4px;color:#9eb4c1!important}
#jobs .open-chevron{font-size:31px!important;color:#2fa8ff!important;text-align:right!important}
#jobs .open-job-fields{display:grid;grid-template-columns:1.1fr .8fr 1fr .8fr .9fr 1fr;align-items:stretch}
#jobs .open-job-fields>div{min-height:86px;padding:15px 18px;border-right:1px solid rgba(78,126,150,.32);display:flex;flex-direction:column;justify-content:center;gap:8px}
#jobs .open-job-fields>div:last-child{border-right:0}
#jobs .open-job-fields small{font-size:11px;color:#91a9b8;letter-spacing:.5px}
#jobs .open-job-fields b{font-size:15px;color:#fff;font-weight:700}
#jobs .route-field{display:flex;align-items:center;gap:10px}.route-field img{width:44px;height:44px;object-fit:contain}.route-field b{font-size:13px!important}
#jobs .open-job-fields .open-status-badge{align-self:flex-start!important;width:auto!important;min-width:72px!important;height:auto!important;padding:8px 13px!important;border-radius:8px!important}
#jobs .priority-text{color:#c9d5dc!important}
@media(max-width:900px){
#jobs.page{padding:18px 14px 92px!important;max-width:none!important}
#jobs .page-title h1{font-size:28px}
#jobs .open-jobs-toolbar{align-items:flex-end!important}
#jobs .open-job-stats{grid-template-columns:repeat(4,minmax(130px,1fr))!important;overflow-x:auto;padding-bottom:6px;margin-bottom:16px!important;gap:0!important;border:1px solid #24516a;border-radius:13px;background:#061a29}
#jobs .open-job-stats>div{min-width:150px!important;min-height:126px!important;border:0!important;border-right:1px solid #24516a!important;border-radius:0!important;background:transparent!important;padding:17px 14px!important;gap:10px!important}
#jobs .open-job-stats>div img{width:44px!important;height:44px!important}
#jobs .open-job-stats b{font-size:24px!important}#jobs .open-job-stats em{margin-top:18px;font-size:12px}
#jobs .open-list-panel{padding:12px;border-radius:12px}
#jobs .open-list-head{align-items:flex-start;gap:12px}.open-list-controls{gap:7px!important}.open-list-controls select,.open-list-controls button{padding:0 10px!important;font-size:12px}
#jobs .open-list-head h2{font-size:19px}
#jobs .open-job-top{grid-template-columns:54px 1fr auto 24px;padding:13px 12px}
#jobs .open-status-icon img{width:43px!important;height:43px!important}
#jobs .open-job-fields{grid-template-columns:repeat(3,1fr)}
#jobs .open-job-fields>div{min-height:82px;padding:12px 10px;border-bottom:1px solid rgba(78,126,150,.32)}
#jobs .open-job-fields>div:nth-child(3n){border-right:0}
#jobs .open-job-fields>div:nth-last-child(-n+3){border-bottom:0}
#jobs .open-job-fields b{font-size:14px}.route-field{gap:5px}.route-field img{width:38px;height:38px}
}
@media(max-width:520px){#jobs .travel-refresh{font-size:0!important;width:46px!important;padding:0!important}#jobs .travel-refresh:before{content:'↻';font-size:22px}#jobs .open-job-tabs button{padding:10px 20px!important}.open-list-controls button{font-size:0!important;width:44px}.open-list-controls button:before{content:'▽';font-size:17px}}
/* v79 desktop Open Jobs: compact single-row layout matching approved reference */
@media (min-width:901px){
#jobs .open-list-panel{padding:18px!important}
#jobs .job-list{gap:12px!important}
#jobs .open-job-card{
display:grid!important;
grid-template-columns:72px 1.15fr 1.1fr .85fr 1.05fr .82fr .95fr 1.18fr 42px!important;
align-items:stretch!important;
min-height:132px!important;
padding:0!important;
overflow:hidden!important;
}
#jobs .open-job-top,#jobs .open-job-fields{display:contents!important}
#jobs .open-status-icon{grid-column:1;display:flex!important;align-items:center!important;justify-content:center!important;border-right:1px solid rgba(78,126,150,.32)!important;padding:0 12px!important}
#jobs .open-status-icon img{width:48px!important;height:48px!important;object-fit:contain!important}
#jobs .open-job-id{grid-column:2;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;padding:18px 24px!important;border-right:1px solid rgba(78,126,150,.32)!important}
#jobs .open-job-id b{font-size:19px!important}
#jobs .open-job-id small{font-size:14px!important;margin-top:7px!important}
#jobs .open-job-top>.open-status-badge{display:none!important}
#jobs .open-chevron{grid-column:9;display:flex!important;align-items:center!important;justify-content:center!important;font-size:32px!important;color:#2f9cff!important;border-left:1px solid rgba(78,126,150,.32)!important}
#jobs .open-job-fields>div{min-height:132px!important;padding:18px 22px!important;border-right:1px solid rgba(78,126,150,.32)!important;border-bottom:0!important;justify-content:center!important;gap:10px!important}
#jobs .open-job-fields>div:nth-child(1){grid-column:3}
#jobs .open-job-fields>div:nth-child(2){grid-column:4}
#jobs .open-job-fields>div:nth-child(3){grid-column:5}
#jobs .open-job-fields>div:nth-child(4){grid-column:6}
#jobs .open-job-fields>div:nth-child(5){grid-column:7}
#jobs .open-job-fields>div:nth-child(6){grid-column:8;border-right:0!important}
#jobs .open-job-fields small{font-size:11px!important;letter-spacing:.6px!important}
#jobs .open-job-fields b{font-size:16px!important}
#jobs .route-field{display:flex!important;align-items:center!important;gap:10px!important}
#jobs .route-field img{width:50px!important;height:50px!important;object-fit:contain!important}
#jobs .open-job-fields .open-status-badge{align-self:flex-start!important;min-width:78px!important;text-align:center!important;padding:10px 14px!important}
#jobs .priority-text{white-space:nowrap!important}
}
/* v80 desktop Open Jobs: even single-row spacing + live travel time/distance */
@media (min-width:901px){
#jobs .open-job-card{
grid-template-columns:76px 170px minmax(170px,1.05fr) 130px minmax(170px,1fr) 120px 145px 150px 42px!important;
min-height:108px!important;
}
#jobs .open-job-id{padding:14px 20px!important}
#jobs .open-job-fields>div{min-height:108px!important;padding:14px 18px!important;align-items:flex-start!important;text-align:left!important}
#jobs .open-job-fields>div:nth-child(1){grid-column:3}
#jobs .open-job-fields>div:nth-child(2){grid-column:4}
#jobs .open-job-fields>div:nth-child(3){grid-column:5}
#jobs .open-job-fields>div:nth-child(4){grid-column:6}
#jobs .open-job-fields>div:nth-child(5){grid-column:7}
#jobs .open-job-fields>div:nth-child(6){grid-column:8;border-right:0!important}
#jobs .open-travel{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;text-align:left!important}
#jobs .open-travel b{font-size:16px!important;color:#55c3ff!important;white-space:nowrap!important}
#jobs .open-travel small{display:block!important;margin:0!important;color:#91a9b8!important}
#jobs .open-job-fields .open-status-badge{align-self:flex-start!important}
}
/* v81 desktop Open Jobs: force every job field into one horizontal row */
@media (min-width:901px){
#jobs .open-job-card{
display:grid!important;
grid-template-columns:68px 160px minmax(150px,1fr) 125px minmax(165px,1fr) 115px 135px 150px 36px!important;
grid-template-rows:96px!important;
align-items:stretch!important;
padding:0!important;
gap:0!important;
min-height:96px!important;
}
#jobs .open-job-top,#jobs .open-job-fields{display:contents!important}
#jobs .open-job-top>.open-status-icon{grid-column:1;grid-row:1}
#jobs .open-job-top>.open-job-id{grid-column:2;grid-row:1}
#jobs .open-job-fields>div:nth-child(1){grid-column:3;grid-row:1}
#jobs .open-job-fields>div:nth-child(2){grid-column:4;grid-row:1}
#jobs .open-job-fields>div:nth-child(3){grid-column:5;grid-row:1}
#jobs .open-job-fields>div:nth-child(4){grid-column:6;grid-row:1}
#jobs .open-job-fields>div:nth-child(5){grid-column:7;grid-row:1}
#jobs .open-job-fields>div:nth-child(6){grid-column:8;grid-row:1}
#jobs .open-job-top>.open-chevron{grid-column:9;grid-row:1}
#jobs .open-job-top>.open-status-badge{display:none!important}
#jobs .open-job-top>.open-status-icon,#jobs .open-job-top>.open-job-id,#jobs .open-job-fields>div,#jobs .open-job-top>.open-chevron{
min-height:96px!important;height:96px!important;box-sizing:border-box!important;margin:0!important;
display:flex!important;align-items:center!important;justify-content:center!important;padding:10px 14px!important;
border-left:1px solid rgba(112,160,184,.28)!important;
}
#jobs .open-job-top>.open-status-icon{border-left:0!important}
#jobs .open-job-id,#jobs .open-job-fields>div{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important}
#jobs .open-job-fields>div:nth-child(2){align-items:center!important;text-align:center!important}
#jobs .open-job-fields>div:nth-child(4){align-items:center!important}
#jobs .open-job-fields small{margin:0 0 7px!important}
#jobs .open-travel{align-items:flex-start!important;text-align:left!important}
#jobs .open-travel small:empty{display:none!important}
}
/* v82 desktop Open Jobs polish: direction above route shield + centered travel */
@media (min-width:901px){
#jobs .open-job-fields>div:nth-child(2) .route-field{
display:flex!important;
flex-direction:column-reverse!important;
align-items:center!important;
justify-content:center!important;
gap:4px!important;
width:100%!important;
}
#jobs .open-job-fields>div:nth-child(2) .route-field b{
display:block!important;
width:100%!important;
text-align:center!important;
line-height:1!important;
margin:0!important;
}
#jobs .open-job-fields>div:nth-child(2) .route-field img{
display:block!important;
margin:0 auto!important;
}
#jobs .open-travel{
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
#jobs .open-travel small{
display:block!important;
width:100%!important;
text-align:center!important;
margin:0 0 7px!important;
color:#91a9b8!important;
}
#jobs .open-travel b{
display:block!important;
width:100%!important;
text-align:center!important;
}
}
/* v83 — headerless dashboard / exact desktop Open Jobs visual pass */
.topbar{background:transparent!important;border:0!important;box-shadow:none!important;position:absolute!important;inset:0 0 auto 0!important;height:96px!important;padding:18px 22px!important;z-index:40!important;pointer-events:none!important}
.topbar>*{pointer-events:auto}
.topbar>img,.topbar .brand-title,.topbar .crew-pill,#googleState{display:none!important}
.topbar .mobile-menu{display:flex!important;align-items:center;justify-content:center;width:58px;height:58px;border:1px solid rgba(126,174,199,.5);border-radius:11px;background:rgba(3,20,33,.72);color:#fff;font-size:0;cursor:pointer;backdrop-filter:blur(7px)}
.topbar .mobile-menu::before{content:'☰';font-size:29px;line-height:1}
.topbar .theme-picker{margin-left:16px!important;background:rgba(3,20,33,.72)!important;border:1px solid rgba(126,174,199,.42)!important;border-radius:11px!important;height:54px!important;padding:0 12px!important;backdrop-filter:blur(7px)}
.desktop-weather-clock{display:flex;align-items:center;gap:22px;margin-left:auto;color:#fff}
.weather-now{display:flex;align-items:center;gap:10px;padding-right:20px;border-right:1px solid rgba(160,195,214,.35)}
#desktopWeatherIcon{font-size:32px}.weather-now div,.clock-now{display:flex;flex-direction:column}.weather-now b{font-size:22px}.weather-now small,.clock-now small{font-size:11px;color:#e4edf2}.clock-now b{font-size:24px;margin-top:3px}
main{margin-left:0!important}
#jobs.page{max-width:1440px!important;padding:170px 44px 95px!important}
#jobs .page-title{display:none!important}
#jobs .open-jobs-toolbar{display:flex!important;flex-direction:column!important;align-items:flex-start!important;margin:0 0 16px!important}
#jobs .open-jobs-toolbar .open-job-tabs{order:2!important;margin:18px 0 0!important}
#jobs #refreshOpenJobs{position:absolute!important;right:44px!important;top:182px!important}
#jobs .open-job-stats{order:1!important;width:100%!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin:0!important}
#jobs .open-job-stats>div{min-width:0!important;min-height:142px!important;padding:25px 28px!important;border:1px solid rgba(91,150,181,.55)!important;border-radius:13px!important;background:rgba(4,25,40,.82)!important;backdrop-filter:blur(5px)!important}
#jobs .open-job-stats>div img{width:58px!important;height:58px!important}
#jobs .open-job-stats b{font-size:35px!important}#jobs .open-job-stats small{font-size:13px!important}#jobs .open-job-stats em{font-size:14px!important;margin-top:22px!important}
#jobs .open-list-panel{margin-top:0!important;background:rgba(3,24,39,.88)!important;border:1px solid rgba(91,150,181,.58)!important;border-radius:14px!important;padding:14px!important;backdrop-filter:blur(6px)!important}
#jobs .open-list-head{min-height:58px!important;padding:0 4px 10px!important}#jobs .open-list-head h2{font-size:23px!important}
#jobs .open-job-card{grid-template-columns:88px 170px minmax(170px,1fr) 150px minmax(205px,1.25fr) 135px 150px 160px 44px!important;grid-template-rows:124px!important;min-height:124px!important;border-radius:12px!important;background:rgba(3,24,39,.9)!important}
#jobs .open-job-top>.open-status-icon,#jobs .open-job-top>.open-job-id,#jobs .open-job-fields>div,#jobs .open-job-top>.open-chevron{height:124px!important;min-height:124px!important;padding:15px 20px!important}
#jobs .open-job-id{align-items:flex-start!important}.open-job-id small{font-size:12px!important;color:#9ab6c6!important;letter-spacing:.5px!important;margin:0 0 12px!important}.open-job-id b{font-size:21px!important}
#jobs .open-job-fields>div{align-items:flex-start!important;text-align:left!important}#jobs .open-job-fields small{font-size:12px!important;margin:0 0 12px!important;color:#9ab6c6!important}
#jobs .open-job-fields>div:nth-child(2){align-items:center!important;text-align:center!important;padding:10px 18px!important}
#jobs .open-job-fields>div:nth-child(2)>small{margin-bottom:6px!important}
#jobs .open-job-fields>div:nth-child(2) .route-field{gap:5px!important;flex-direction:column-reverse!important}
#jobs .open-job-fields>div:nth-child(2) .route-field img{width:58px!important;height:58px!important}
#jobs .open-job-fields>div:nth-child(2) .route-field b{font-size:16px!important}
#jobs .open-travel{align-items:center!important;text-align:center!important}#jobs .open-travel small,#jobs .open-travel b{text-align:center!important}#jobs .open-travel b{font-size:17px!important}
#jobs .open-job-fields>div:nth-child(4),#jobs .open-job-fields>div:nth-child(5),#jobs .open-job-fields>div:nth-child(6){align-items:center!important;text-align:center!important}
#jobs .open-job-fields .open-status-badge{align-self:center!important}
#jobs .priority-text{font-size:17px!important}
@media(max-width:900px){
.desktop-weather-clock{display:none!important}
.topbar{height:72px!important;padding:10px 12px!important}
.topbar .mobile-menu{width:48px;height:48px}.topbar .theme-picker{height:46px!important;margin-left:auto!important}
#jobs.page{padding-top:92px!important}
#jobs #refreshOpenJobs{position:static!important}
#jobs .open-job-stats{display:grid!important;grid-template-columns:repeat(2,1fr)!important}
}
/* v83.3: retain JS-required header hooks without showing the old header UI */
.runtime-hook{display:none !important;}
/* v83.4 home polish: clear background, no blurred logo, professional night title */
#home .home-hero img{display:none!important}
#home .home-hero{background:transparent!important}
#home{background-image:linear-gradient(rgba(1,14,24,.10),rgba(1,14,24,.22)),url('assets/night-bg.png')!important}
body.theme-night #home{background-image:linear-gradient(rgba(1,14,24,.10),rgba(1,14,24,.22)),url('assets/night-bg.png')!important}
body.theme-night #home .home-hero h1{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.48)!important}
body.theme-night #home .home-hero h2{color:#26a7ef!important;text-shadow:0 2px 10px rgba(0,0,0,.5)!important}
#home .home-hero h2{letter-spacing:6px!important}
#home .home-grid,#home .quick{backdrop-filter:none!important}
/* v83.5 — restore crisp Caltrans Bay Area home branding and remove blur */
#home .home-hero{
height:215px!important;
padding:24px 32px 0!important;
background:transparent!important;
filter:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
text-shadow:none!important;
}
#home .home-hero img{
display:block!important;
width:390px!important;
max-width:42vw!important;
max-height:72px!important;
height:auto!important;
margin:0 auto 12px!important;
object-fit:contain!important;
filter:none!important;
opacity:1!important;
transform:none!important;
}
#home .home-hero h1{
margin:6px 0 4px!important;
color:#fff!important;
font-size:31px!important;
letter-spacing:9px!important;
text-shadow:0 2px 8px rgba(0,0,0,.55)!important;
filter:none!important;
}
#home .home-hero h2{
margin:0!important;
color:#2aa9ff!important;
font-size:16px!important;
letter-spacing:7px!important;
text-shadow:0 2px 8px rgba(0,0,0,.55)!important;
filter:none!important;
}
body.theme-night #home .home-hero h1{color:#fff!important}
body.theme-night #home .home-hero h2{color:#2aa9ff!important}
#home,#home:before,#home:after,#home .home-grid,#home .quick,#home .quick-grid{
filter:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
#home{background-image:linear-gradient(rgba(1,14,24,.04),rgba(1,14,24,.12)),url('assets/night-bg.png')!important}
body.theme-night #home{background-image:linear-gradient(rgba(1,14,24,.04),rgba(1,14,24,.12)),url('assets/night-bg.png')!important}
@media(max-width:760px){
#home .home-hero{height:170px!important;padding-top:18px!important}
#home .home-hero img{width:245px!important;max-width:72vw!important;max-height:48px!important}
#home .home-hero h1{font-size:22px!important;letter-spacing:6px!important}
#home .home-hero h2{font-size:11px!important;letter-spacing:4px!important}
}
/* v83.7 — true headerless top area: do not blur content/background behind transparent topbar */
.topbar{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
filter:none!important;
}
/* v73 CHP / MAZEEP shared-workflow integration */
.mz-wrap{max-width:1540px;margin:0 auto;padding:22px}.mz-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.mz-page-head h1{margin:2px 0 4px;font-size:34px}.mz-page-head p{margin:0;color:#9cb8c9;max-width:820px}.mz-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.mz-connection{display:inline-flex;align-items:center;min-height:38px;padding:0 11px;border-radius:9px;border:1px solid #20516b;background:#061f30;color:#9fc4d7;font-size:12px;font-weight:800}.mz-connection.ok{color:#64e59a;border-color:#23794b}.mz-connection.bad{color:#ff9d9d;border-color:#9a3c43}.mz-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.mz-stat{border:1px solid #20516b;border-radius:12px;padding:14px 16px;background:rgba(5,28,43,.94);box-shadow:0 8px 22px rgba(0,0,0,.12)}.mz-stat span{display:block;color:#9db9c9;font-size:12px;font-weight:800;text-transform:uppercase}.mz-stat b{display:block;font-size:30px;margin-top:3px;color:#fff}.mz-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);gap:14px}.mz-card{background:rgba(5,27,42,.96);border:1px solid #20516b;border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.16)}.mz-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #1c455d}.mz-card-head small{color:#55baf0;font-weight:900;letter-spacing:.07em}.mz-card-head h2{margin:2px 0 0;font-size:23px}.mz-source-badge,.mz-live-pill{border:1px solid #2f83ad;background:#082d47;color:#c7edff;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900}.mz-live-pill{border-color:#297a4c;color:#6ee89f;background:#092e21}.mz-create-card form{padding:16px}.mz-linked-banner{display:grid;grid-template-columns:auto 1fr 30px;align-items:center;gap:10px;margin-bottom:14px;padding:11px 12px;border-radius:9px;border:1px solid #2875a3;background:#082d47}.mz-linked-banner span{font-size:11px;color:#9cc9e1;text-transform:uppercase;font-weight:800}.mz-linked-banner b{color:#fff}.mz-linked-banner button{border:0;background:transparent;color:#fff;font-size:22px;cursor:pointer}.mz-form-section{border:1px solid #1e4b63;border-radius:11px;padding:13px;margin-bottom:12px;background:rgba(5,24,37,.72)}.mz-form-section h3{margin:0 0 10px;font-size:14px;color:#cdeeff;letter-spacing:.02em}.mz-section-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.mz-section-row h3{margin:0}.mz-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.mz-form-grid.three{grid-template-columns:repeat(3,1fr)}.mz-form-grid .span2{grid-column:span 2}.mz-form-grid label,.mz-date-row label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:900;color:#91b5c8;text-transform:uppercase}.mz-form-grid input,.mz-form-grid select,.mz-form-grid textarea,.mz-date-row input{width:100%;box-sizing:border-box;border:1px solid #28536a;border-radius:8px;background:#071b2b;color:#f0faff;min-height:42px;padding:9px 10px;font:inherit;outline:none}.mz-form-grid textarea{resize:vertical}.mz-form-grid input:focus,.mz-form-grid select:focus,.mz-form-grid textarea:focus,.mz-date-row input:focus{border-color:#2aa9ff;box-shadow:0 0 0 2px rgba(42,169,255,.12)}.mz-map-shell{border:1px solid #20516b;border-radius:11px;overflow:hidden;margin-bottom:12px;background:#071b2b}.mz-map-shell iframe{display:block;border:0;width:100%;height:300px}.mz-map-shell>div{padding:9px 12px;color:#9db8c8;font-size:12px;border-top:1px solid #20516b}.mz-dates{display:grid;gap:8px;margin-top:10px}.mz-date-row{display:grid;grid-template-columns:1fr 1fr 1fr 38px;gap:8px;align-items:end}.mz-date-row button{height:42px;border:1px solid #7a3c45;background:#34181d;color:#ffb2b2;border-radius:8px;cursor:pointer}.mz-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:3px}.mz-form-actions #mzSaveState{margin-right:auto;color:#9fc4d7;font-size:12px}.mz-list-card{min-height:700px}.mz-filter-row{display:flex;gap:6px;padding:12px;border-bottom:1px solid #1b4358}.mz-filter-row button{border:1px solid #28536a;background:#071b2b;color:#b7d1de;border-radius:8px;padding:8px 10px;font-weight:800;cursor:pointer}.mz-filter-row button.selected{background:#0b69ae;color:#fff;border-color:#1987ca}.mz-request-list{display:grid;gap:9px;padding:12px;max-height:785px;overflow:auto}.mz-request{border:1px solid #214c63;border-radius:10px;background:#071b2b;padding:12px}.mz-request-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.mz-request h3{margin:0;font-size:17px}.mz-request p{margin:6px 0;color:#b6cbd7;font-size:13px}.mz-request-meta{display:flex;gap:8px;flex-wrap:wrap;color:#88a9ba;font-size:11px}.mz-status{border-radius:999px;padding:5px 8px;font-size:10px;font-weight:900;white-space:nowrap;border:1px solid #536879}.mz-status.pending{background:#332b0a;color:#ffd56a;border-color:#7d6a23}.mz-status.posted{background:#082e47;color:#7fd4ff;border-color:#216c91}.mz-status.active{background:#073624;color:#79efa8;border-color:#2b8054}.mz-status.completed{background:#163b1a;color:#a6f29f;border-color:#498150}.mz-status.denied{background:#3a171b;color:#ff9b9b;border-color:#8c3e47}.mz-source-mini{display:inline-flex;margin-top:8px;border-radius:6px;background:#0d3349;color:#a9d8ef;padding:4px 7px;font-size:10px;font-weight:800}.mz-quick-action{border-color:#24759c!important}.actions .mazeep-job-btn{border-color:#2f9bce;background:#082d47;color:#d4f2ff}
body.theme-day .mz-page-head h1{color:#102b3b}body.theme-day .mz-page-head p{color:#58798a}body.theme-day .mz-connection,body.theme-day .mz-stat,body.theme-day .mz-card,body.theme-day .mz-form-section,body.theme-day .mz-map-shell,body.theme-day .mz-request{background:rgba(250,253,255,.95);border-color:#a9c7d5;color:#15384b;box-shadow:0 8px 22px rgba(27,69,91,.08)}body.theme-day .mz-stat span,body.theme-day .mz-form-grid label,body.theme-day .mz-date-row label,body.theme-day .mz-map-shell>div,body.theme-day .mz-form-actions #mzSaveState{color:#58798a}body.theme-day .mz-stat b,body.theme-day .mz-linked-banner b{color:#15384b}body.theme-day .mz-card-head,body.theme-day .mz-filter-row{border-color:#b4ccd7}body.theme-day .mz-form-grid input,body.theme-day .mz-form-grid select,body.theme-day .mz-form-grid textarea,body.theme-day .mz-date-row input,body.theme-day .mz-filter-row button{background:#fff;color:#15384b;border-color:#9bbdcc}body.theme-day .mz-linked-banner{background:#e4f4fb;border-color:#8abbd1}body.theme-day .mz-linked-banner span{color:#36748f}body.theme-day .mz-linked-banner button{color:#23556c}body.theme-day .mz-request p{color:#4f7081}body.theme-day .mz-request-meta{color:#668697}body.theme-day .mz-source-mini{background:#e2f3fa;color:#2d6780}body.theme-day .actions .mazeep-job-btn{background:#e6f5fc;color:#185b7a;border-color:#7dbbd7}
@media(max-width:1050px){.mz-grid{grid-template-columns:1fr}.mz-list-card{min-height:auto}.mz-request-list{max-height:none}.mz-form-grid.three{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.mz-wrap{padding:12px}.mz-page-head{flex-direction:column}.mz-head-actions{justify-content:flex-start}.mz-summary-grid{grid-template-columns:repeat(2,1fr)}.mz-form-grid,.mz-form-grid.three{grid-template-columns:1fr}.mz-form-grid .span2{grid-column:auto}.mz-date-row{grid-template-columns:1fr 1fr}.mz-date-row button{grid-column:2;justify-self:end;width:42px}.mz-map-shell iframe{height:260px}.mz-card-head{align-items:flex-start}.mz-form-actions{flex-wrap:wrap}.mz-form-actions #mzSaveState{width:100%}}
/* v74 CSR Job Details — Attach MAZEEP */
.csr-mazeep-panel{margin-top:16px}.csr-mazeep-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.csr-mazeep-head h3{margin:0}.csr-mazeep-head p{margin:5px 0 0;color:var(--muted,#6f7d8d);font-size:13px}.csr-mazeep-actions{display:flex;gap:9px;flex-wrap:wrap}.csr-mazeep-actions button,.csr-mz-card-actions button{border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}.attach-mazeep-btn{background:#e8f3ff;color:#1665a8}.csr-mazeep-actions .mazeep-job-btn,.csr-open-mazeep{background:#1678b9;color:white}.csr-mazeep-content{margin-top:14px;display:grid;gap:12px}.csr-mz-none{border:1px dashed rgba(42,118,158,.35);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:4px}.csr-mz-none span{font-size:13px;color:var(--muted,#75808d)}.csr-mz-request-card{border:1px solid rgba(51,116,153,.24);border-radius:14px;padding:15px;background:rgba(245,251,255,.78)}.csr-mz-request-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.csr-mz-request-title small,.csr-mz-summary small,.csr-mz-officer-grid small{display:block;font-size:10px;letter-spacing:.08em;color:#72808c;font-weight:800}.csr-mz-request-title h3{margin:2px 0 3px;font-size:20px}.csr-mz-request-title p{margin:0;color:#536575}.csr-mz-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:13px 0}.csr-mz-summary>div{background:rgba(255,255,255,.7);padding:10px;border-radius:10px}.csr-mz-summary b{font-size:13px}.csr-mz-officers{display:grid;gap:8px}.csr-mz-officer{border:1px solid rgba(57,113,144,.18);background:rgba(255,255,255,.7);border-radius:12px;padding:11px}.csr-mz-officer-top{display:flex;align-items:center;gap:10px}.csr-mz-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#1d5f8b;color:#fff;font-size:10px;font-weight:900}.csr-mz-officer-top>div:nth-child(2){display:flex;flex:1;flex-direction:column}.csr-mz-officer-top span:not(.mz-status){font-size:12px;color:#647482}.csr-mz-officer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.csr-mz-officer-grid>div{background:rgba(234,245,251,.65);border-radius:8px;padding:8px}.csr-mz-officer-grid b{font-size:12px}.csr-mz-empty-officers{font-size:13px;color:#697784;padding:8px 2px}.csr-mz-card-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:11px}.csr-detach-mazeep{background:transparent;color:#6d7882;border:1px solid rgba(82,105,119,.25)!important}.mz-attach-modal{position:fixed;inset:0;z-index:10050;background:rgba(5,18,29,.68);backdrop-filter:blur(7px);display:grid;place-items:center;padding:18px}.mz-attach-dialog{width:min(760px,100%);max-height:min(820px,92vh);overflow:hidden;display:flex;flex-direction:column;background:#f7fbfe;border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.35)}.mz-attach-head{display:flex;justify-content:space-between;gap:15px;padding:20px 22px 13px}.mz-attach-head small{font-weight:900;letter-spacing:.12em;color:#3381a8}.mz-attach-head h2{margin:2px 0 5px}.mz-attach-head p{margin:0;color:#677785}.mz-attach-close{border:0;background:transparent;font-size:30px;line-height:1;cursor:pointer}.mz-attach-search{padding:0 22px 14px}.mz-attach-search input{width:100%;box-sizing:border-box;border:1px solid #c9dae5;border-radius:11px;padding:12px 13px;background:#fff;color:#172b38}.mz-attach-list{padding:0 22px 22px;overflow:auto;display:grid;gap:8px}.mz-attach-option{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;text-align:left;gap:4px 12px;border:1px solid #d1e0e9;background:#fff;border-radius:12px;padding:13px;cursor:pointer;color:#18303d}.mz-attach-option>div{display:flex;flex-direction:column;gap:2px}.mz-attach-option>div span{font-size:12px;color:#687986}.mz-attach-option>small{grid-column:1/-1;color:#768792}.mz-attach-option:hover{border-color:#3289b4;box-shadow:0 4px 14px rgba(25,99,137,.12)}.mz-attach-option.saving{opacity:.55}
body.theme-night .csr-mz-request-card,html[data-theme="night"] .csr-mz-request-card{background:rgba(9,34,49,.82);border-color:rgba(80,175,216,.25)}body.theme-night .csr-mz-summary>div,body.theme-night .csr-mz-officer,body.theme-night .csr-mz-officer-grid>div,html[data-theme="night"] .csr-mz-summary>div,html[data-theme="night"] .csr-mz-officer,html[data-theme="night"] .csr-mz-officer-grid>div{background:rgba(16,47,64,.78)}body.theme-night .attach-mazeep-btn,html[data-theme="night"] .attach-mazeep-btn{background:#153f59;color:#8ed7ff}body.theme-night .mz-attach-dialog,html[data-theme="night"] .mz-attach-dialog{background:#0d2737;color:#eaf6fc}body.theme-night .mz-attach-head p,html[data-theme="night"] .mz-attach-head p{color:#99afbb}body.theme-night .mz-attach-search input,body.theme-night .mz-attach-option,html[data-theme="night"] .mz-attach-search input,html[data-theme="night"] .mz-attach-option{background:#12364a;color:#edf8fd;border-color:#285a73}body.theme-night .mz-attach-option>div span,html[data-theme="night"] .mz-attach-option>div span{color:#a5bbc7}
@media(max-width:760px){.csr-mazeep-head{align-items:stretch;flex-direction:column}.csr-mazeep-actions{display:grid;grid-template-columns:1fr}.csr-mz-summary,.csr-mz-officer-grid{grid-template-columns:1fr 1fr}.csr-mz-request-title{flex-direction:column}.mz-attach-dialog{max-height:94vh}.mz-attach-head{padding:17px 16px 10px}.mz-attach-search,.mz-attach-list{padding-left:16px;padding-right:16px}}@media(max-width:440px){.csr-mz-summary,.csr-mz-officer-grid{grid-template-columns:1fr}.csr-mz-officer-top{align-items:flex-start;flex-wrap:wrap}.csr-mz-officer-top .mz-status{margin-left:48px}.csr-mz-card-actions{display:grid;grid-template-columns:1fr 1fr}.csr-mz-card-actions button{width:100%}}
/* v84 Home live cards: themed artwork backgrounds */
#home .home-grid .dash-card{
position:relative;
isolation:isolate;
background-color:#061a29;
background-repeat:no-repeat;
background-position:center calc(50% + 20px);
background-size:100% calc(100% - 42px);
}
#home .home-grid .dash-card > span,
#home .home-grid .dash-card > b,
#home .home-grid .dash-card > small{position:relative;z-index:1}
#home .home-grid .dash-card:nth-child(1){background-image:url('assets/card-csr-night.png')}
#home .home-grid .dash-card:nth-child(2){background-image:url('assets/card-request-night.png')}
#home .home-grid .dash-card:nth-child(3){background-image:url('assets/card-month-night.png')}
#home .home-grid .dash-card:nth-child(4){background-image:url('assets/card-route-night.png')}
body.theme-day #home .home-grid .dash-card:nth-child(1){background-image:url('assets/card-csr-day.png')}
body.theme-day #home .home-grid .dash-card:nth-child(2){background-image:url('assets/card-request-day.png')}
body.theme-day #home .home-grid .dash-card:nth-child(3){background-image:url('assets/card-month-day.png')}
body.theme-day #home .home-grid .dash-card:nth-child(4){background-image:url('assets/card-route-day.png')}
body.theme-day #home .home-grid .dash-card{background-color:#f9fdff}
@media(max-width:760px){
#home .home-grid .dash-card{background-position:center calc(50% + 14px);background-size:100% calc(100% - 31px)}
}
/* v85 Home cards — preserve Request/Month artwork aspect ratio */
#home .home-grid .dash-card:nth-child(2),
#home .home-grid .dash-card:nth-child(3){
background-size:100% auto;
background-position:center calc(50% + 20px);
}
@media(max-width:760px){
#home .home-grid .dash-card:nth-child(2),
#home .home-grid .dash-card:nth-child(3){
background-size:100% auto;
background-position:center calc(50% + 14px);
}
}
/* v84 — streamlined home: CSR Inbox in top-left, remove footer, center dashboard */
.topbar .top-csr-inbox{
display:flex!important;align-items:center;justify-content:center;position:relative;
width:58px;height:58px;margin-left:10px;border:1px solid rgba(126,174,199,.5);
border-radius:11px;background:rgba(3,20,33,.72);color:#fff;cursor:pointer;
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.topbar .top-csr-inbox .ticket-icon{
width:30px;height:22px;display:grid;place-items:center;border:2px solid #e9f6ff;
border-radius:4px;color:transparent;position:relative;
}
.topbar .top-csr-inbox .ticket-icon:before,
.topbar .top-csr-inbox .ticket-icon:after{
content:'';position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
background:#071827;transform:translateY(-50%);
}
.topbar .top-csr-inbox .ticket-icon:before{left:-5px}.topbar .top-csr-inbox .ticket-icon:after{right:-5px}
.topbar .top-csr-inbox .csr-inbox-count{
position:absolute;right:-6px;top:-6px;min-width:23px;height:23px;margin:0;padding:0 6px;
background:#ff9d21;color:#07131d;border:2px solid #061827;font-size:12px;font-weight:900;
box-shadow:none;
}
body.theme-day .topbar .top-csr-inbox{background:rgba(248,252,254,.82);border-color:rgba(70,115,140,.42)}
body.theme-day .topbar .top-csr-inbox .ticket-icon{border-color:#123e58}
body.theme-day .topbar .top-csr-inbox .ticket-icon:before,
body.theme-day .topbar .top-csr-inbox .ticket-icon:after{background:#f5fafc}
#home .home-footer{display:none!important}
#home.page.active{
min-height:100vh!important;padding-bottom:38px!important;
display:flex!important;flex-direction:column!important;justify-content:center!important;
}
#home .home-hero{width:100%!important;flex:0 0 auto!important;height:205px!important;margin-top:-18px!important}
#home .home-grid{width:min(1050px,calc(100% - 24px))!important;flex:0 0 auto!important;margin-bottom:22px!important}
#home .quick{width:min(1150px,calc(100% - 24px))!important;flex:0 0 auto!important;margin-left:auto!important;margin-right:auto!important}
#home .quick-grid{grid-template-columns:repeat(6,1fr)!important}
#home .quick-grid>button{grid-column:span 2}
#home .quick-grid>button:nth-child(4){grid-column:2 / span 2}
#home .quick-grid>button:nth-child(5){grid-column:4 / span 2}
@media(max-width:900px){
.topbar .top-csr-inbox{width:48px;height:48px;margin-left:8px}
#home.page.active{justify-content:flex-start!important;min-height:calc(100vh - 64px)!important}
}
@media(max-width:760px){
.topbar .top-csr-inbox{position:absolute;left:58px;margin:0}
#home .quick-grid{grid-template-columns:1fr!important}
#home .quick-grid>button,#home .quick-grid>button:nth-child(4),#home .quick-grid>button:nth-child(5){grid-column:auto!important}
}
/* v86 — CSR ticket placement + vertically centered home content */
.topbar .top-csr-inbox{
position:absolute!important;left:94px!important;top:18px!important;margin:0!important;
width:58px!important;height:58px!important;
}
.topbar .top-csr-inbox .ticket-icon{
width:32px!important;height:22px!important;border:2px solid #eef8ff!important;border-radius:3px!important;
position:relative!important;display:block!important;color:transparent!important;background:transparent!important;
}
.topbar .top-csr-inbox .ticket-icon:before,.topbar .top-csr-inbox .ticket-icon:after{
content:''!important;position:absolute!important;top:50%!important;width:9px!important;height:9px!important;
border-radius:50%!important;background:#071827!important;transform:translateY(-50%)!important;z-index:2!important;
}
.topbar .top-csr-inbox .ticket-icon:before{left:-7px!important}.topbar .top-csr-inbox .ticket-icon:after{right:-7px!important}
.topbar .top-csr-inbox .ticket-icon i{
position:absolute;right:7px;top:3px;bottom:3px;border-left:2px dashed rgba(238,248,255,.72);
}
body.theme-day .topbar .top-csr-inbox .ticket-icon{border-color:#123e58!important}
body.theme-day .topbar .top-csr-inbox .ticket-icon:before,body.theme-day .topbar .top-csr-inbox .ticket-icon:after{background:#f5fafc!important}
body.theme-day .topbar .top-csr-inbox .ticket-icon i{border-left-color:rgba(18,62,88,.62)}
/* Treat logo/title, live cards and Quick Actions as one centered home composition. */
#home.page.active{
justify-content:center!important;
padding-top:72px!important;
padding-bottom:20px!important;
}
#home .home-hero{height:190px!important;margin-top:0!important;padding-top:8px!important}
#home .home-grid{margin-top:-2px!important;margin-bottom:28px!important}
#home .quick{margin-bottom:0!important}
@media(max-width:900px){
.topbar .top-csr-inbox{left:78px!important;top:15px!important;width:48px!important;height:48px!important}
#home.page.active{padding-top:72px!important;justify-content:flex-start!important}
}
@media(max-width:760px){
.topbar .top-csr-inbox{left:58px!important;top:8px!important}
#home.page.active{padding-top:66px!important}
}
/* v87 — old-app centered home composition */
#home.page.active{
display:block!important;
min-height:calc(100vh - 94px)!important;
padding-top:72px!important;
padding-bottom:34px!important;
}
#home .home-hero{
height:205px!important;
margin:0!important;
padding:8px 0 0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
}
#home .home-hero img{
width:470px!important;
max-width:72vw!important;
max-height:92px!important;
height:auto!important;
object-fit:contain!important;
}
#home .home-hero h1{display:none!important}
#home .home-hero h2{
margin:24px 0 0!important;
font-size:28px!important;
line-height:1.1!important;
font-weight:700!important;
letter-spacing:1px!important;
color:#fff!important;
text-transform:uppercase!important;
}
body.theme-day #home .home-hero h2{color:#172332!important;text-shadow:0 1px 2px rgba(255,255,255,.55)!important}
#home .home-grid{
margin:0 auto 30px!important;
width:min(1050px,calc(100% - 24px))!important;
}
#home .quick{margin:0 auto!important}
@media(max-width:900px){
#home.page.active{padding-top:34px!important}
#home .home-hero{height:170px!important}
#home .home-hero img{width:390px!important;max-height:76px!important}
#home .home-hero h2{font-size:22px!important;margin-top:18px!important}
}
@media(max-width:760px){
#home.page.active{padding-top:18px!important}
#home .home-hero{height:135px!important}
#home .home-hero img{width:250px!important;max-height:52px!important}
#home .home-hero h2{font-size:15px!important;margin-top:12px!important;letter-spacing:.5px!important}
}
/* v87 Home cards — match legacy card headers and artwork fit */
#home .home-grid .dash-card{
background-image:none !important;
position:relative;
overflow:hidden;
}
#home .home-grid .dash-card::before{
content:"";
position:absolute;
left:0; right:0;
top:42px; bottom:0;
z-index:0;
background-repeat:no-repeat;
background-position:center top;
}
/* CSR and route artwork naturally fill the card body */
#home .home-grid .dash-card:nth-child(1)::before{
background-image:url('assets/card-csr-night.png');
background-size:100% 100%;
}
#home .home-grid .dash-card:nth-child(4)::before{
background-image:url('assets/card-route-night.png');
background-size:100% 100%;
}
/* Request/month: preserve source proportions, fit width like legacy cards */
#home .home-grid .dash-card:nth-child(2)::before{
background-image:url('assets/card-request-night.png');
background-size:100% auto;
}
#home .home-grid .dash-card:nth-child(3)::before{
background-image:url('assets/card-month-night.png');
background-size:100% auto;
}
body.theme-day #home .home-grid .dash-card:nth-child(1)::before{background-image:url('assets/card-csr-day.png')}
body.theme-day #home .home-grid .dash-card:nth-child(2)::before{background-image:url('assets/card-request-day.png')}
body.theme-day #home .home-grid .dash-card:nth-child(3)::before{background-image:url('assets/card-month-day.png')}
body.theme-day #home .home-grid .dash-card:nth-child(4)::before{background-image:url('assets/card-route-day.png')}
/* Legacy header colors */
#home .home-grid .dash-card:nth-child(1)>span{background:#2d8bd8}
#home .home-grid .dash-card:nth-child(2)>span{background:#f25c05}
#home .home-grid .dash-card:nth-child(3)>span{background:#df363b}
#home .home-grid .dash-card:nth-child(4)>span{background:#2ca02c}
/* Header must meet artwork directly — no dark strip/gap */
#home .home-grid .dash-card>span{
margin-bottom:0;
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
}
#home .home-grid .dash-card>b{margin-top:22px}
@media(max-width:760px){
#home .home-grid .dash-card::before{top:31px}
#home .home-grid .dash-card>span{min-height:31px}
#home .home-grid .dash-card>b{margin-top:12px}
}
/* v88 — final home card polish to match approved mockup */
#home .home-hero h2{
color:#d9ecf7!important;
font-family:"Segoe UI",Arial,sans-serif!important;
font-size:25px!important;
font-weight:600!important;
letter-spacing:7px!important;
text-shadow:0 2px 12px rgba(0,0,0,.55)!important;
position:relative!important;
}
#home .home-hero h2:before,#home .home-hero h2:after{
content:"";display:inline-block;width:42px;height:2px;background:#169fe6;vertical-align:middle;margin:0 18px 6px;
}
body.theme-day #home .home-hero h2{color:#172332!important;text-shadow:none!important}
#home .home-grid .dash-card{
padding-top:0!important;
background-image:none!important;
}
#home .home-grid .dash-card::before{
top:40px!important;
background-position:center center!important;
background-repeat:no-repeat!important;
}
/* Entire source artwork visible and centered. The dark card color fills any spare space. */
#home .home-grid .dash-card:nth-child(1)::before{background-size:100% 100%!important}
#home .home-grid .dash-card:nth-child(2)::before{background-size:contain!important;background-image:url('assets/card-request-night.png')!important}
#home .home-grid .dash-card:nth-child(3)::before{background-size:contain!important;background-image:url('assets/card-month-night.png')!important}
#home .home-grid .dash-card:nth-child(4)::before{background-size:100% 100%!important}
body.theme-day #home .home-grid .dash-card:nth-child(2)::before{background-image:url('assets/card-request-day.png')!important}
body.theme-day #home .home-grid .dash-card:nth-child(3)::before{background-image:url('assets/card-month-day.png')!important}
/* Header is flush with the card body: no strip above or below it. */
#home .home-grid .dash-card>span{
position:absolute!important;left:0!important;right:0!important;top:0!important;
height:40px!important;min-height:40px!important;margin:0!important;padding:0 8px!important;
border:0!important;border-radius:11px 11px 0 0!important;
display:flex!important;align-items:center!important;justify-content:center!important;
}
#home .home-grid .dash-card>b{margin-top:64px!important}
#home .home-grid .dash-card>small{margin-top:12px!important}
/* Muted legacy colors in night mode, brighter legacy colors in day mode. */
body:not(.theme-day) #home .home-grid .dash-card:nth-child(1)>span{background:#1c70bb!important}
body:not(.theme-day) #home .home-grid .dash-card:nth-child(2)>span{background:#b85a08!important}
body:not(.theme-day) #home .home-grid .dash-card:nth-child(3)>span{background:#b62e36!important}
body:not(.theme-day) #home .home-grid .dash-card:nth-child(4)>span{background:#23833b!important}
body.theme-day #home .home-grid .dash-card:nth-child(1)>span{background:#2d8bd8!important}
body.theme-day #home .home-grid .dash-card:nth-child(2)>span{background:#f25c05!important}
body.theme-day #home .home-grid .dash-card:nth-child(3)>span{background:#df363b!important}
body.theme-day #home .home-grid .dash-card:nth-child(4)>span{background:#2ca02c!important}
@media(max-width:760px){
#home .home-grid .dash-card::before{top:31px!important}
#home .home-grid .dash-card>span{height:31px!important;min-height:31px!important}
#home .home-grid .dash-card>b{margin-top:43px!important}
#home .home-hero h2{font-size:14px!important;letter-spacing:3px!important}
#home .home-hero h2:before,#home .home-hero h2:after{width:20px;margin:0 8px 4px}
}
/* v89 — compact desktop actions, lower centered dashboard, click theme control */
@media(min-width:901px){
#home.page.active{padding-top:112px!important;padding-bottom:28px!important}
#home .home-hero{height:190px!important}
#home .home-grid{margin-bottom:34px!important}
#home .quick{max-width:1050px!important}
#home .quick-grid{grid-template-columns:repeat(4,1fr)!important;gap:12px!important;padding:14px!important}
#home .quick-grid button{min-height:72px!important;padding:12px 14px!important;gap:10px!important;font-size:22px!important}
#home .quick-grid span{font-size:13px!important}
#home .quick-grid small{font-size:11px!important;margin-top:3px!important}
.desktop-freelance-menu{display:block!important}
}
.theme-cycle-button{appearance:none;-webkit-appearance:none;cursor:pointer;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;min-width:92px;height:50px;padding:0 14px;border:1px solid #294c61;border-radius:12px;background:rgba(4,24,39,.82);color:#fff;font-weight:700}
.theme-cycle-button:hover{filter:brightness(1.12)}
.theme-cycle-button #themeIcon{font-size:16px}
.theme-cycle-button #themeModeLabel{font-size:13px}
body.theme-day .theme-cycle-button{background:rgba(248,252,255,.9);color:#17394c;border-color:#9bbdcd}
@media(max-width:900px){.desktop-freelance-menu{display:none!important}}
/* v90 — approved mockup: single-row compact Quick Actions + refined management title */
@media(min-width:901px){
/* Keep the whole desktop home composition centered and slightly lower. */
#home.page.active{padding-top:122px!important;padding-bottom:32px!important}
#home .home-hero{height:190px!important}
#home .home-grid{margin-bottom:42px!important}
/* Match mockup: no large enclosing Quick Actions panel. */
#home .quick{
width:min(1050px,calc(100% - 24px))!important;
max-width:1050px!important;
border:0!important;
padding:0!important;
background:transparent!important;
}
#home .quick h2{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:26px!important;
margin:0 0 18px!important;
color:#f4f8fb!important;
font-size:15px!important;
font-weight:700!important;
letter-spacing:5px!important;
}
#home .quick h2:before,#home .quick h2:after{
content:""!important;
display:block!important;
width:150px!important;
height:1px!important;
background:#1788c4!important;
opacity:.9!important;
}
#home .quick-grid{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
grid-auto-flow:row!important;
gap:14px!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
}
#home .quick-grid>button,
#home .quick-grid>button:nth-child(1),
#home .quick-grid>button:nth-child(2),
#home .quick-grid>button:nth-child(3),
#home .quick-grid>button:nth-child(4),
#home .quick-grid>button:nth-child(5){
grid-column:auto!important;
grid-row:auto!important;
width:100%!important;
min-width:0!important;
min-height:82px!important;
height:82px!important;
margin:0!important;
padding:12px 16px!important;
gap:13px!important;
border-radius:11px!important;
background:rgba(5,31,48,.92)!important;
box-shadow:0 8px 22px rgba(0,0,0,.16)!important;
}
#home .quick-grid>button>b{font-size:14px!important}
#home .quick-grid>button>span{font-size:13px!important;line-height:1.2!important}
#home .quick-grid>button>span b{font-size:14px!important;line-height:1.2!important}
#home .quick-grid>button>span small{font-size:11px!important;line-height:1.2!important;margin-top:5px!important}
#home .quick-grid>button{font-size:27px!important}
/* Approved mockup title treatment. */
#home .home-hero h2{
margin-top:24px!important;
font-family:"Segoe UI",Arial,sans-serif!important;
font-size:22px!important;
line-height:1!important;
font-weight:600!important;
letter-spacing:7px!important;
color:#35aef4!important;
text-shadow:0 2px 10px rgba(0,0,0,.5)!important;
white-space:nowrap!important;
}
#home .home-hero h2:before,#home .home-hero h2:after{
width:48px!important;
height:1px!important;
margin:0 20px 5px!important;
background:#25a9ef!important;
}
}
body.theme-day #home .quick h2{color:#17394c!important}
body.theme-day #home .quick-grid>button{background:rgba(250,253,255,.94)!important;color:#17394c!important}
body.theme-day #home .home-hero h2{color:#197fbd!important;text-shadow:none!important}
/* v11 — clean quick actions, complete day theme, themed CSR inbox artwork */
.top-csr-inbox .ticket-icon{
width:42px!important;height:30px!important;border:0!important;border-radius:0!important;
background:url('assets/csr-inbox-night.png') center/contain no-repeat!important;
display:block!important;
}
.top-csr-inbox .ticket-icon:before,.top-csr-inbox .ticket-icon:after,.top-csr-inbox .ticket-icon i{display:none!important}
body.theme-day .top-csr-inbox .ticket-icon{background-image:url('assets/csr-inbox-day.png')!important}
@media(min-width:901px){
#home .quick{background:transparent!important;border:0!important;box-shadow:none!important}
#home .quick h2{
width:100%!important;padding:0!important;background:transparent!important;border:0!important;
text-align:center!important;justify-content:center!important;color:#f4f8fb!important;
}
#home .quick h2:before,#home .quick h2:after{background:#1788c4!important}
#home .quick-grid{background:transparent!important;border:0!important;box-shadow:none!important}
#home .quick-grid>button{
justify-content:center!important;text-align:left!important;
}
#home .quick-grid>button>span{flex:0 1 auto!important;text-align:left!important}
}
body.theme-day #home .quick,body.theme-day #home .quick-grid{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
body.theme-day #home .quick h2{background:transparent!important;color:#197fbd!important}
body.theme-day #home .quick h2:before,body.theme-day #home .quick h2:after{background:#197fbd!important}
body.theme-day #home .quick-grid>button{background:rgba(255,255,255,.90)!important;color:#17394c!important;box-shadow:0 7px 20px rgba(30,75,100,.10)!important}
body.theme-day #home .quick-grid>button small{color:#58798a!important}
body.theme-day .topbar{background:rgba(242,249,253,.86)!important;border-bottom-color:rgba(94,151,181,.38)!important;color:#17394c!important}
body.theme-day .mobile-menu{background:rgba(12,52,78,.88)!important;color:#fff!important}
body.theme-day .desktop-weather-clock,body.theme-day .desktop-weather-clock b,body.theme-day .desktop-weather-clock small{color:#17394c!important}
body.theme-day #home .home-hero{background:transparent!important;border-bottom:0!important}
/* v12 — requested day/night dashboard corrections (2026-08-30) */
/* Keep the dashboard truly headerless in Day mode: no light strip across the top. */
body.theme-day .topbar{
background:transparent!important;
border:0!important;
border-bottom:0!important;
box-shadow:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
/* Day controls use a light glass button rather than the Night control treatment. */
body.theme-day .topbar .mobile-menu,
body.theme-day .topbar .top-csr-inbox,
body.theme-day .topbar .theme-picker,
body.theme-day .theme-cycle-button{
background:rgba(248,252,255,.88)!important;
border-color:rgba(80,125,150,.46)!important;
color:#17394c!important;
box-shadow:0 3px 12px rgba(25,65,88,.08)!important;
}
body.theme-day .topbar .mobile-menu::before{color:#17394c!important}
/* Weather/date/time stay white over the daytime sky, matching the requested header treatment. */
body.theme-day .desktop-weather-clock,
body.theme-day .desktop-weather-clock b,
body.theme-day .desktop-weather-clock small,
body.theme-day #desktopWeatherTemp,
body.theme-day #desktopWeatherPlace,
body.theme-day #desktopDate,
body.theme-day #desktopTime{color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.55)!important}
body.theme-day .weather-now{border-right-color:rgba(255,255,255,.48)!important}
/* Reduce the milky Day overlay so the daytime photo remains crisp and colorful. */
body.theme-day #home{
background-image:linear-gradient(rgba(245,251,254,.07),rgba(245,251,254,.12)),url('assets/day-bg.png')!important;
}
/* Quick Actions heading has no backing plate; white centered type and clean blue rules. */
body.theme-day #home .quick h2,
body.theme-night #home .quick h2,
#home .quick h2{
background:transparent!important;
border:0!important;
box-shadow:none!important;
color:#fff!important;
text-align:center!important;
text-shadow:0 1px 4px rgba(0,0,0,.62)!important;
}
body.theme-day #home .quick h2:before,body.theme-day #home .quick h2:after,
body.theme-night #home .quick h2:before,body.theme-night #home .quick h2:after{background:#1788c4!important}
/* Preserve the same four accent outlines in both themes. */
#home .quick-grid>button:nth-child(1),body.theme-day #home .quick-grid>button:nth-child(1){border-color:#1766b2!important}
#home .quick-grid>button:nth-child(2),body.theme-day #home .quick-grid>button:nth-child(2){border-color:#9b5a15!important}
#home .quick-grid>button:nth-child(3),body.theme-day #home .quick-grid>button:nth-child(3){border-color:#0e7e86!important}
#home .quick-grid>button:nth-child(4),body.theme-day #home .quick-grid>button:nth-child(4){border-color:#167c45!important}
/* Requested Night title correction. */
body.theme-night #home .home-hero h2{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.55)!important}
/* v13 — day title + gold divider accents */
body.theme-day #home .home-hero h2{
color:#fff!important;
text-shadow:0 1px 5px rgba(0,0,0,.48)!important;
}
body.theme-day #home .home-hero h2:before,
body.theme-day #home .home-hero h2:after,
body.theme-day #home .quick h2:before,
body.theme-day #home .quick h2:after{
background:#d6a83a!important;
}
/* v14 — match approved Day mockup */
body.theme-day #home .home-hero h2{color:#fff!important;text-shadow:0 1px 5px rgba(0,0,0,.48)!important}
body.theme-day #home .home-grid .dash-card>span{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.22)!important}
@media(min-width:901px){
body.theme-day #home .home-hero h2:before,body.theme-day #home .home-hero h2:after{height:4px!important;background:#e0b84f!important;opacity:1!important;border-radius:999px!important}
body.theme-day #home .quick h2:before,body.theme-day #home .quick h2:after{height:4px!important;background:#e0b84f!important;opacity:1!important;border-radius:999px!important}
body.theme-day #home .quick-grid>button{border-width:2px!important}
}
/* Let the daytime background fill the viewport all the way to the bottom. */
body.theme-day .app-shell,body.theme-day #home{background-color:transparent!important}
body.theme-day #home.page.active{min-height:100vh!important;margin-bottom:0!important;padding-bottom:0!important}
body.theme-day #home:before,body.theme-day #home:after{display:none!important;background:none!important}
/* v91 — Request/August artwork prepared to card-body ratio.
Artwork is proportional; sampled image background fills all spare space. */
#home .home-grid .dash-card:nth-child(2)::before,
#home .home-grid .dash-card:nth-child(3)::before{background-size:100% 100%!important;background-position:center center!important;}
/* v16 — unify night-mode live-card body color */
body:not(.theme-day) #home .home-grid .dash-card::before{background-color:#021226!important;}
/* v17 — CSR artwork icon: actual ticket PNG, replaces old CSS rectangle */
.topbar .top-csr-inbox .ticket-icon{
display:block!important;
position:relative!important;
width:42px!important;
height:32px!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
background-color:transparent!important;
background-image:url('assets/csr-ticket-night.png')!important;
background-position:center!important;
background-repeat:no-repeat!important;
background-size:contain!important;
}
.topbar .top-csr-inbox .ticket-icon:before,
.topbar .top-csr-inbox .ticket-icon:after,
.topbar .top-csr-inbox .ticket-icon i{
display:none!important;
content:none!important;
border:0!important;
background:none!important;
}
body.theme-day .topbar .top-csr-inbox .ticket-icon{background-image:url('assets/csr-ticket-day.png')!important}
body.theme-night .topbar .top-csr-inbox .ticket-icon{background-image:url('assets/csr-ticket-night.png')!important}
.topbar .top-csr-inbox .csr-inbox-count{
position:absolute!important;
right:-5px!important;
top:-7px!important;
z-index:5!important;
margin:0!important;
min-width:21px!important;
height:21px!important;
padding:0 5px!important;
font-size:12px!important;
font-weight:900!important;
}
@media(max-width:900px){.topbar .top-csr-inbox .ticket-icon{width:38px!important;height:29px!important}}
/* v19 — CSR ticket: preserve wide ticket proportions (no squashing) */
.topbar .top-csr-inbox .ticket-icon{
width:48px!important;
height:24px!important;
flex:0 0 48px!important;
background-size:contain!important;
background-position:center!important;
background-repeat:no-repeat!important;
}
@media(max-width:900px){
.topbar .top-csr-inbox .ticket-icon{width:42px!important;height:21px!important;flex-basis:42px!important}
}
/* v20 — CSR inbox ticket: wide button + large proportional artwork */
.topbar .top-csr-inbox{
width:76px!important;
min-width:76px!important;
height:52px!important;
padding:5px 7px!important;
overflow:visible!important;
}
.topbar .top-csr-inbox .ticket-icon{
width:62px!important;
height:30px!important;
flex:0 0 62px!important;
background-size:62px auto!important;
background-position:center center!important;
}
.topbar .top-csr-inbox .csr-inbox-count{right:-4px!important;top:-8px!important}
@media(max-width:900px){
.topbar .top-csr-inbox{width:68px!important;min-width:68px!important;height:48px!important}
.topbar .top-csr-inbox .ticket-icon{width:56px!important;height:27px!important;flex-basis:56px!important;background-size:56px auto!important}
}
/* v21 — tablet-first Crew View */
.crew-home-grid,.crew-home-footer{display:none}
.view-mode-toggle{height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.28);border-radius:22px;background:rgba(5,28,48,.72);color:#fff;font-size:11px;font-weight:900;letter-spacing:.8px;cursor:pointer;white-space:nowrap}
body.theme-day .view-mode-toggle{background:rgba(255,255,255,.72);color:#09213a;border-color:rgba(9,33,58,.2)}
body.crew-view .top-csr-inbox{display:none!important}
body.crew-view #home .home-grid,body.crew-view #home .quick{display:none!important}
body.crew-view #home .crew-home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:min(1220px,calc(100% - 36px));margin:8px auto 22px;position:relative;z-index:2}
body.crew-view #home .crew-home-footer{display:flex;align-items:center;justify-content:space-between;width:min(1220px,calc(100% - 36px));margin:0 auto;padding:14px 22px;border:1px solid rgba(91,144,180,.35);border-radius:12px;background:rgba(2,20,36,.88);color:#eaf4fa;font-size:12px;font-weight:800;letter-spacing:.6px;position:relative;z-index:2}
.crew-dash-card{min-width:0;min-height:330px;padding:28px 18px 0;border:1px solid rgba(255,255,255,.62);border-radius:20px;background:rgba(249,252,255,.95);box-shadow:0 12px 28px rgba(0,0,0,.22);color:#07182b;text-align:center;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:.15s}
.crew-dash-card:hover{transform:translateY(-3px)}
.crew-dash-card .crew-card-icon{width:76px;height:76px;border:3px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:34px;margin-bottom:18px}
.crew-dash-card strong{font-size:20px;letter-spacing:.5px}.crew-dash-card b{font-size:62px;line-height:1;margin:18px 0 8px}.crew-dash-card small{font-size:12px;color:#263445;font-weight:700}.crew-dash-card em{font-style:normal;margin-top:auto;width:calc(100% + 36px);padding:16px 8px;color:white;font-size:12px;font-weight:900;letter-spacing:.4px}
.crew-blue{color:#1971c9}.crew-blue em{background:#1971c9}.crew-green{color:#2d9a3a}.crew-green em{background:#2d9a3a}.crew-orange{color:#df650c}.crew-orange em{background:#df650c}.crew-purple{color:#653b98}.crew-purple em{background:#653b98}.crew-map-mark{font-size:64px!important;margin:12px 0 8px!important}
body:not(.theme-day) .crew-dash-card{background:rgba(4,25,42,.96);color:#fff;border-color:#315d74}.crew-dash-card.crew-blue:not(x) .crew-card-icon{color:#3d9cff}.crew-dash-card.crew-green:not(x) .crew-card-icon{color:#58c866}.crew-dash-card.crew-orange:not(x) .crew-card-icon{color:#ff8a35}.crew-dash-card.crew-purple:not(x) .crew-card-icon{color:#a77add}body:not(.theme-day) .crew-dash-card small{color:#b9c9d3}
body.crew-view #home .home-hero{height:230px;padding-top:28px}body.crew-view #home .home-hero img{width:360px;max-height:72px}body.crew-view #home .home-hero h1{display:none}body.crew-view #home .home-hero h2{font-size:26px;letter-spacing:5px;margin-top:20px}
@media (orientation:portrait) and (max-width:1100px){body.crew-view #home .crew-home-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}.crew-dash-card{min-height:300px}}
@media(max-width:760px){.view-mode-toggle{position:absolute;right:58px;height:38px;padding:0 9px;font-size:9px}body.crew-view #home .crew-home-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:9px}.crew-dash-card{min-height:220px;padding:16px 8px 0;border-radius:14px}.crew-dash-card .crew-card-icon{width:52px;height:52px;font-size:23px;margin-bottom:10px}.crew-dash-card strong{font-size:14px}.crew-dash-card b{font-size:42px;margin:10px 0 5px}.crew-dash-card em{width:calc(100% + 16px);padding:11px 4px;font-size:9px}body.crew-view #home .crew-home-footer{display:none}body.crew-view #home .home-hero{height:145px;padding-top:12px}body.crew-view #home .home-hero img{width:210px}body.crew-view #home .home-hero h2{font-size:15px;letter-spacing:3px;margin-top:10px}}
\n\n/* v23 — Crew tablet header cleanup */\n.crew-weather-slot{display:none}\nbody.crew-view #home .crew-home-footer{display:none!important}\nbody.crew-view #home .home-hero{height:255px!important}\nbody.crew-view #home .crew-weather-slot{display:flex;justify-content:center;align-items:center;margin-top:14px;min-height:54px}\nbody.crew-view #home .crew-weather-slot .desktop-weather-clock{display:flex!important;position:static!important;margin:0!important;gap:28px!important;justify-content:center;align-items:center;color:#fff!important}\nbody.crew-view #home .crew-weather-slot .desktop-weather-clock b,\nbody.crew-view #home .crew-weather-slot .desktop-weather-clock small{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.5)}\nbody.crew-view #home .crew-weather-slot .weather-now,\nbody.crew-view #home .crew-weather-slot .clock-now{display:flex!important;align-items:center!important}\nbody.crew-view #home .crew-home-grid{margin-top:10px!important}\n@media(max-width:760px){body.crew-view #home .home-hero{height:190px!important}body.crew-view #home .crew-weather-slot{margin-top:8px;transform:scale(.86);transform-origin:top center}}\n
/* v24 — Crew header spacing: give weather/date/time their own row */
body.crew-view #home .home-hero{height:300px!important;padding-top:30px!important}
body.crew-view #home .home-hero h2{margin-top:24px!important;margin-bottom:0!important}
body.crew-view #home .crew-weather-slot{margin-top:28px!important;min-height:68px!important}
body.crew-view #home .crew-weather-slot .desktop-weather-clock{gap:64px!important;min-width:360px!important}
body.crew-view #home .crew-weather-slot .weather-now,
body.crew-view #home .crew-weather-slot .clock-now{min-width:145px!important;justify-content:center!important}
body.crew-view #home .crew-home-grid{margin-top:22px!important}
@media (orientation:portrait) and (max-width:1100px){body.crew-view #home .home-hero{height:285px!important}body.crew-view #home .crew-weather-slot{margin-top:24px!important}}
@media(max-width:760px){body.crew-view #home .home-hero{height:225px!important}body.crew-view #home .crew-weather-slot{margin-top:18px!important}body.crew-view #home .crew-weather-slot .desktop-weather-clock{gap:34px!important;min-width:300px!important}}
/* v25 — Crew tablet: true separate weather row with breathing room */
body.crew-view #home .home-hero{
height:350px!important;
min-height:350px!important;
padding-top:30px!important;
overflow:visible!important;
box-sizing:border-box!important;
}
body.crew-view #home .home-hero h2{
margin:24px 0 0!important;
}
body.crew-view #home .crew-weather-slot{
display:flex!important;
width:100%!important;
min-height:76px!important;
margin:30px 0 0!important;
padding:0!important;
justify-content:center!important;
align-items:center!important;
position:relative!important;
z-index:5!important;
}
body.crew-view #home .crew-weather-slot .desktop-weather-clock{
display:flex!important;
position:relative!important;
gap:72px!important;
min-width:390px!important;
justify-content:center!important;
align-items:center!important;
}
body.crew-view #home .crew-weather-slot .weather-now,
body.crew-view #home .crew-weather-slot .clock-now{
min-width:155px!important;
justify-content:center!important;
}
body.crew-view #home .crew-home-grid{
margin-top:34px!important;
}
@media (orientation:portrait) and (max-width:1100px){
body.crew-view #home .home-hero{height:330px!important;min-height:330px!important}
body.crew-view #home .crew-home-grid{margin-top:28px!important}
}
@media(max-width:760px){
body.crew-view #home .home-hero{height:250px!important;min-height:250px!important;padding-top:12px!important}
body.crew-view #home .crew-weather-slot{min-height:58px!important;margin-top:18px!important;transform:scale(.86);transform-origin:top center}
body.crew-view #home .crew-weather-slot .desktop-weather-clock{gap:34px!important;min-width:300px!important}
body.crew-view #home .crew-home-grid{margin-top:20px!important}
}
/* v26 — Crew tablet compact header: weather/time directly below title */
body.crew-view #home .home-hero{
height:255px!important;
min-height:255px!important;
padding-top:22px!important;
overflow:visible!important;
}
body.crew-view #home .home-hero img{
width:360px!important;
max-height:72px!important;
}
body.crew-view #home .home-hero h2{
margin:16px 0 0!important;
}
body.crew-view #home .crew-weather-slot{
display:flex!important;
width:100%!important;
min-height:48px!important;
margin:10px 0 0!important;
padding:0!important;
justify-content:center!important;
align-items:center!important;
position:relative!important;
z-index:5!important;
}
body.crew-view #home .crew-weather-slot .desktop-weather-clock{
display:flex!important;
position:static!important;
width:auto!important;
min-width:0!important;
gap:38px!important;
margin:0!important;
justify-content:center!important;
align-items:center!important;
}
body.crew-view #home .crew-weather-slot .weather-now,
body.crew-view #home .crew-weather-slot .clock-now{
min-width:125px!important;
width:auto!important;
justify-content:center!important;
}
body.crew-view #home .crew-home-grid{
margin-top:4px!important;
}
@media (orientation:portrait) and (max-width:1100px){
body.crew-view #home .home-hero{height:245px!important;min-height:245px!important;padding-top:18px!important}
body.crew-view #home .crew-weather-slot{margin-top:8px!important;min-height:46px!important}
body.crew-view #home .crew-home-grid{margin-top:2px!important}
}
@media(max-width:760px){
body.crew-view #home .home-hero{height:205px!important;min-height:205px!important;padding-top:10px!important}
body.crew-view #home .home-hero img{width:220px!important}
body.crew-view #home .home-hero h2{margin-top:8px!important}
body.crew-view #home .crew-weather-slot{margin-top:6px!important;min-height:42px!important;transform:scale(.82);transform-origin:top center}
body.crew-view #home .crew-weather-slot .desktop-weather-clock{gap:24px!important}
body.crew-view #home .crew-home-grid{margin-top:0!important}
}
/* v27 — Crew tablet final vertical alignment */
body.crew-view #home .home-hero{
height:242px!important;
min-height:242px!important;
}
body.crew-view #home .crew-weather-slot{
margin-top:16px!important;
}
body.crew-view #home .crew-home-grid{
margin-top:0!important;
}
@media (orientation:portrait) and (max-width:1100px){
body.crew-view #home .home-hero{height:232px!important;min-height:232px!important}
body.crew-view #home .crew-weather-slot{margin-top:14px!important}
body.crew-view #home .crew-home-grid{margin-top:0!important}
}
/* v82 — approved centered operations layouts */
:root{--ops-max:1320px;--ops-gap:14px;--ops-panel:rgba(4,29,45,.94);--ops-line:#24566f}
.topbar .top-nav-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;min-width:96px;padding:0 16px;margin-left:12px;border:1px solid rgba(126,174,199,.5);border-radius:11px;background:rgba(3,20,33,.72);color:#fff;font-weight:850;cursor:pointer;backdrop-filter:blur(7px)}
.topbar .top-nav-btn span{font-size:12px;letter-spacing:.03em}.topbar .top-back-btn{margin-left:70px}.topbar .mobile-menu+.top-back-btn{margin-left:70px}
.topbar .top-csr-inbox{position:static!important;left:auto!important;top:auto!important;margin-left:12px!important;flex:0 0 76px!important}
.page:not(#home):not(#mapPage):not(#finishJob){padding-top:100px!important}
/* Open jobs */
#jobs{max-width:1360px!important;margin:0 auto!important;padding-left:20px!important;padding-right:20px!important}
#jobs .page-title{margin:10px 0 12px!important}
.open-jobs-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:10px!important}
.open-job-stats{gap:12px!important;margin-bottom:0!important}.open-job-stats>div{min-height:112px!important;padding:14px 18px!important}
.open-list-panel{margin-top:0!important;border-radius:12px!important;background:var(--ops-panel)!important}.open-list-head h2{font-size:22px!important}.job-list{gap:10px!important}
/* Add CSR and Graffiti Request: centered, balanced, map-side photo rails */
.addcsr-wrap,.request-wrap{max-width:1240px!important;margin:0 auto!important;padding:10px 18px 28px!important}
.addcsr-head,.request-head{margin-bottom:10px!important}.addcsr-head>button,.request-head>button{display:none!important}
.addcsr-grid,.request-grid{grid-template-columns:minmax(430px,42%) minmax(0,58%)!important;gap:10px!important;align-items:start!important}
.addcsr-map{height:455px!important}.request-map{height:435px!important}
.addcsr-left-photos{padding:12px 14px 14px;border-top:1px solid #173e55}
.photo-inputs,.request-photo-inputs{display:flex!important;gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;scrollbar-width:none!important;-ms-overflow-style:none!important;padding:2px 0 4px!important}
.photo-inputs::-webkit-scrollbar,.request-photo-inputs::-webkit-scrollbar{display:none!important}
.photo-inputs .photo-slot,.request-photo-inputs .photo-slot{flex:0 0 150px!important;min-height:92px!important;aspect-ratio:4/3!important;scroll-snap-align:start}
.csr-info-head,.request-form-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;border-bottom:1px solid #173e55!important;padding-right:10px!important}
.csr-info-head h3,.request-form-head h3{border:0!important}.request-form-head .request-actions{padding:0!important;border:0!important}
.csr-top-actions,.request-actions{display:flex!important;align-items:center!important;gap:8px!important}
.addcsr-section{padding:10px 14px!important}.addcsr-form-grid{gap:9px!important}.addcsr-form textarea{min-height:58px!important;max-height:none!important}
.csr-priority-label .priority-check{min-height:38px;border:1px solid #b67a14;border-radius:8px;padding:0 12px;display:flex;align-items:center;gap:8px;margin-top:4px}
.request-fields{padding:12px 14px!important;gap:10px!important}.request-location-summary{grid-template-columns:repeat(3,1fr)!important}.request-location-summary span{display:none!important}.request-location-summary b{white-space:normal!important}
.request-map-card .request-photos{border-top:1px solid #173e55!important;padding:12px 14px!important}
/* Completed month */
.month-wrap{max-width:1240px!important;padding:10px 18px 28px!important}.month-head{margin-bottom:8px!important}.month-head>button{display:none!important}.month-card{padding:14px!important}.month-nav h2{font-size:26px!important}.month-stats{gap:10px!important;margin:10px 0!important}.month-stats>div{padding:10px!important}.cal-day{min-height:66px!important}.calendar-week b{padding:5px!important}.month-legend{padding-top:12px!important}
/* Daily route */
.route-wrap{max-width:1320px!important;padding:10px 18px 28px!important}.route-head{margin-bottom:10px!important}.route-head>button:first-child{order:2!important;margin-left:auto!important}.route-head>div{order:1!important}.route-head>button:last-child{order:3!important}.route-summary{padding:10px!important;margin-bottom:10px!important}.route-summary>div{padding:10px!important}
.route-grid{grid-template-columns:minmax(420px,38%) minmax(0,62%)!important;gap:10px!important}.route-list-card,.route-map-card{min-height:590px!important}.route-map-card iframe{height:590px!important}.route-stops-list{max-height:470px!important;overflow-y:auto!important;scrollbar-width:none!important}.route-stop{padding:12px 8px!important;border:1px solid rgba(62,126,159,.45)!important;border-radius:10px!important;margin:8px 0!important;background:rgba(5,31,48,.78)!important}
/* Open and completed job details */
#details{max-width:1320px!important;margin:0 auto!important;padding-left:18px!important;padding-right:18px!important;padding-bottom:28px!important}
#detailsBody{width:100%!important}.detail-head{margin:6px 0 10px!important}.detail-head h1{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;margin:0!important}.detail-head .badge{position:static!important;font-size:10px!important;padding:5px 10px!important}
.summary-strip{width:100%!important;max-width:none!important;box-sizing:border-box!important;margin-bottom:12px!important}
.detail-body{display:grid!important;grid-template-columns:minmax(340px,31%) minmax(0,69%)!important;gap:12px!important;align-items:start!important}
.detail-body .panel{border-radius:12px!important}.info-grid{align-items:start!important}.detail-text-block{padding:12px!important;border:1px solid rgba(64,121,151,.36)!important;border-radius:9px!important;background:rgba(5,25,39,.58)!important}.detail-text-block b{white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.48!important;display:block!important;margin-top:7px!important}
.detail-side-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}.detail-side-actions button{min-height:52px;border:1px solid #2d6078;border-radius:9px;background:#092b40;color:#fff;font-size:16px;cursor:pointer}.detail-side-actions .start{background:#13883e;border-color:#2fb760}
.location-meta{grid-template-columns:repeat(5,minmax(0,1fr))!important}.location-meta>div{min-width:0!important}.coordinates-field{display:none!important}.map-box,.map-box iframe{height:330px!important;min-height:330px!important}
.photo-panel,.job-photo-gallery{margin-top:10px!important}.completed-photos{overflow-x:auto!important;scrollbar-width:none!important}.completed-photos::-webkit-scrollbar{display:none!important}.photo-rail-arrow{display:none!important}
.before-after-grid{gap:10px!important}.completed-inline{margin-top:14px!important}.completed-inline .complete-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#details:has(.completed-summary){max-width:1240px!important}.completed-summary{grid-template-columns:auto repeat(3,1fr)!important}.completed-summary .type-chip span{font-size:0!important}.completed-summary .type-chip span::after{content:'CSR';font-size:12px!important}.job-photo-gallery{padding:12px!important}
/* Completed jobs archive: fixed internal scrolling results */
#completed{max-width:1200px!important;margin:0 auto!important;padding-left:18px!important;padding-right:18px!important;padding-bottom:24px!important}
#completed .page-title{margin:14px 0 8px!important}.completed-tabs{margin-bottom:10px!important}.completed-browser{margin-bottom:8px!important}.completed-countbar{margin-bottom:6px!important}
.completed-job-list{height:520px!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important;-ms-overflow-style:none!important;padding:3px 4px 12px!important;border:1px solid rgba(50,108,137,.5)!important;border-radius:12px!important;background:rgba(3,23,36,.38)!important}
.completed-job-list::-webkit-scrollbar{display:none!important}.completed-job-card{min-height:78px!important;flex:0 0 auto!important}.completed-search-row{gap:10px 12px!important}
@media(max-width:1000px){
.topbar .top-nav-btn{min-width:54px;padding:0 10px}.topbar .top-nav-btn span{display:none}.topbar .top-back-btn,.topbar .mobile-menu+.top-back-btn{margin-left:62px}
.addcsr-grid,.request-grid,.detail-body,.route-grid{grid-template-columns:1fr!important}.addcsr-map,.request-map{height:390px!important}.detail-body{gap:12px!important}.completed-job-list{height:auto!important;max-height:65vh!important}
}
@media(max-width:700px){
.topbar .top-nav-btn{display:none!important}.page:not(#home):not(#mapPage):not(#finishJob){padding-top:88px!important}
.addcsr-wrap,.request-wrap,.month-wrap,.route-wrap,#details,#completed{padding-left:10px!important;padding-right:10px!important}
.location-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important}.before-after-grid{grid-template-columns:1fr!important}.map-box,.map-box iframe{height:300px!important;min-height:300px!important}
}
/* Integrated District 4 Field Map: full-screen inside Graffiti Operations */
.integrated-field-map-page{position:fixed!important;inset:0!important;z-index:120!important;width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important;padding:0!important;background:#07141d!important}
.integrated-field-map-page iframe{display:block;width:100%!important;height:100%!important;border:0!important}
.field-map-back{position:absolute;z-index:125;top:12px;left:12px;min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.45);border-radius:10px;background:rgba(4,30,44,.90);color:#fff;font-size:12px;font-weight:900;letter-spacing:.04em;box-shadow:0 4px 16px rgba(0,0,0,.25);cursor:pointer}
body.integrated-field-map-open .topbar,body.integrated-field-map-open .sidebar,body.integrated-field-map-open .bottom-nav,body.integrated-field-map-open #activeJobBanner{display:none!important}
/* v83 — Crew/Admin view switch now lives in the slide-out menu. */
.sidebar .sidebar-view-mode{
position:static!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
width:100%!important;
height:auto!important;
min-height:46px!important;
margin:0!important;
padding:14px!important;
border:0!important;
border-radius:8px!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
color:#d9e6ed!important;
font-size:13px!important;
font-weight:600!important;
letter-spacing:0!important;
text-align:left!important;
}
.sidebar .sidebar-view-mode:hover{background:rgba(38,126,178,.18)!important}
.sidebar .sidebar-view-mode[aria-pressed="true"]{background:#0b4f8e!important;color:#fff!important}
.sidebar .sidebar-view-mode .sidebar-view-icon{margin-left:0!important}
body.theme-day .sidebar .sidebar-view-mode{color:#23495c!important}
body.theme-day .sidebar .sidebar-view-mode:hover{background:rgba(11,105,174,.10)!important}
body.theme-day .sidebar .sidebar-view-mode[aria-pressed="true"]{background:#0b69ae!important;color:#fff!important}
/* v84 — approved compact home header, shared by Day and Night themes. */
.topbar{
display:flex!important;
align-items:center!important;
gap:8px!important;
height:76px!important;
padding:20px 24px!important;
}
.topbar .mobile-menu{
position:static!important;
display:grid!important;
place-items:center!important;
width:36px!important;
min-width:36px!important;
height:36px!important;
padding:0!important;
border:1px solid rgba(143,174,194,.34)!important;
border-radius:8px!important;
background:rgba(4,22,37,.76)!important;
color:#edf5fa!important;
box-shadow:0 3px 12px rgba(0,0,0,.12)!important;
backdrop-filter:blur(8px)!important;
}
.topbar .mobile-menu::before{content:none!important}
.topbar .mobile-menu>span,
.topbar .mobile-menu>span::before,
.topbar .mobile-menu>span::after{
display:block;width:16px;height:1.5px;border-radius:2px;background:currentColor;
}
.topbar .mobile-menu>span{position:relative}
.topbar .mobile-menu>span::before,.topbar .mobile-menu>span::after{content:'';position:absolute;left:0}
.topbar .mobile-menu>span::before{top:-5px}.topbar .mobile-menu>span::after{top:5px}
.topbar .top-nav-btn{
position:static!important;
height:36px!important;
min-width:0!important;
margin:0!important;
padding:0 11px!important;
gap:6px!important;
border-radius:8px!important;
font-size:13px!important;
background:rgba(4,22,37,.76)!important;
border-color:rgba(143,174,194,.34)!important;
box-shadow:0 3px 12px rgba(0,0,0,.12)!important;
}
.topbar .top-nav-btn span{display:inline!important;font-size:11px!important}
body.home-page .topbar .top-nav-btn{display:none!important}
.topbar .top-csr-inbox{
position:relative!important;
inset:auto!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
flex:0 0 auto!important;
width:auto!important;
min-width:72px!important;
height:36px!important;
margin:0!important;
padding:0 10px!important;
overflow:visible!important;
border:1px solid rgba(143,174,194,.34)!important;
border-radius:8px!important;
background:rgba(4,22,37,.76)!important;
color:#edf5fa!important;
box-shadow:0 3px 12px rgba(0,0,0,.12)!important;
backdrop-filter:blur(8px)!important;
}
.topbar .csr-header-icon{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.topbar .csr-header-label{margin:0!important;font-size:12px;font-weight:750;letter-spacing:.01em}
.topbar .top-csr-inbox .csr-inbox-count{
position:absolute!important;
right:-5px!important;
top:-6px!important;
display:grid!important;
place-items:center!important;
min-width:17px!important;
width:auto!important;
height:17px!important;
padding:0 4px!important;
border:1.5px solid #fff!important;
border-radius:999px!important;
background:#f59a23!important;
color:#112433!important;
font-size:9px!important;
line-height:1!important;
font-weight:850!important;
}
.topbar .spacer{flex:1 1 auto!important}
.desktop-weather-clock{
display:flex!important;
align-items:stretch!important;
gap:0!important;
height:40px!important;
margin:0!important;
padding:4px 10px!important;
border:1px solid rgba(143,174,194,.34)!important;
border-radius:8px!important;
background:rgba(4,22,37,.76)!important;
color:#edf5fa!important;
box-shadow:0 3px 12px rgba(0,0,0,.12)!important;
backdrop-filter:blur(8px)!important;
}
.desktop-weather-clock .weather-now{
display:flex!important;
align-items:center!important;
gap:7px!important;
min-width:106px!important;
padding:0 12px 0 0!important;
border-right:1px solid rgba(143,174,194,.32)!important;
}
#desktopWeatherIcon{width:18px!important;font-size:18px!important;line-height:1!important;text-align:center!important}
.desktop-weather-clock .weather-now div,.desktop-weather-clock .clock-now{display:flex!important;flex-direction:column!important;justify-content:center!important}
.desktop-weather-clock .weather-now b{font-size:12px!important;line-height:1.05!important}
.desktop-weather-clock .weather-now small{font-size:8px!important;line-height:1.15!important;margin-top:2px!important;white-space:nowrap!important}
.desktop-weather-clock .clock-now{min-width:154px!important;padding:0 0 0 12px!important;align-items:flex-start!important}
.desktop-weather-clock .clock-now small{font-size:8px!important;line-height:1.1!important;white-space:nowrap!important}
.desktop-weather-clock .clock-now b{font-size:13px!important;line-height:1.05!important;margin-top:3px!important}
.topbar .theme-picker{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
height:40px!important;
min-width:66px!important;
margin:0!important;
padding:0 10px!important;
border:1px solid rgba(143,174,194,.34)!important;
border-radius:8px!important;
background:rgba(4,22,37,.76)!important;
color:#edf5fa!important;
box-shadow:0 3px 12px rgba(0,0,0,.12)!important;
backdrop-filter:blur(8px)!important;
font-size:11px!important;
}
.topbar .theme-picker #themeIcon{font-size:15px!important;line-height:1!important}
body.theme-day .topbar .mobile-menu,
body.theme-day .topbar .top-nav-btn,
body.theme-day .topbar .top-csr-inbox,
body.theme-day .desktop-weather-clock,
body.theme-day .topbar .theme-picker{
background:rgba(250,253,255,.88)!important;
border-color:rgba(83,122,145,.25)!important;
color:#17394c!important;
box-shadow:0 3px 12px rgba(25,65,88,.08)!important;
}
body.theme-day .desktop-weather-clock,
body.theme-day .desktop-weather-clock b,
body.theme-day .desktop-weather-clock small,
body.theme-day #desktopWeatherTemp,
body.theme-day #desktopWeatherPlace,
body.theme-day #desktopDate,
body.theme-day #desktopTime{
color:#17394c!important;
text-shadow:none!important;
}
body.theme-day .desktop-weather-clock .weather-now{border-right-color:rgba(53,88,108,.22)!important}
body.theme-day .topbar .top-csr-inbox .csr-inbox-count{border-color:#fff!important}
@media(max-width:900px){
.topbar{height:64px!important;padding:12px!important}
.topbar .mobile-menu{width:36px!important;height:36px!important}
.topbar .top-csr-inbox{height:36px!important;min-width:68px!important}
.desktop-weather-clock{display:none!important}
.topbar .theme-picker{height:36px!important;margin-left:auto!important}
}
/* v85 — approved Open Jobs redesign and menu-based theme control. */
.topbar .top-nav-btn[data-page="home"]{display:none!important}
.sidebar .sidebar-theme-mode{
position:static!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
width:100%!important;
height:auto!important;
min-height:46px!important;
margin:0!important;
padding:14px!important;
gap:0!important;
border:0!important;
border-radius:8px!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
color:#d9e6ed!important;
font-size:13px!important;
font-weight:600!important;
letter-spacing:0!important;
text-align:left!important;
}
.sidebar .sidebar-theme-mode:hover{background:rgba(38,126,178,.18)!important}
.sidebar .sidebar-theme-mode #themeIcon{margin-left:0!important;font-size:17px!important}
body.theme-day .sidebar .sidebar-theme-mode{color:#23495c!important}
body.theme-day .sidebar .sidebar-theme-mode:hover{background:rgba(11,105,174,.10)!important}
#jobs.page{
--open-cols:42px repeat(9,minmax(0,1fr)) 18px;
width:calc(100% - 120px)!important;
max-width:1100px!important;
margin:0 auto!important;
padding:118px 0 38px!important;
}
#jobs .open-jobs-toolbar{
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-start!important;
width:100%!important;
margin:0 0 14px!important;
}
#jobs .open-jobs-toolbar .open-job-tabs{display:flex!important;order:0!important;gap:8px!important;margin:0!important}
#jobs .open-job-tabs button{
min-width:94px!important;
height:42px!important;
padding:0 20px!important;
border:1px solid rgba(49,112,151,.40)!important;
border-radius:9px!important;
background:rgba(248,252,255,.84)!important;
color:#17394c!important;
font-size:14px!important;
font-weight:650!important;
box-shadow:0 3px 12px rgba(25,65,88,.06)!important;
}
#jobs .open-job-tabs button.selected{background:#0876bd!important;border-color:#0876bd!important;color:#fff!important}
#jobs .open-job-stats{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:0!important;
width:100%!important;
min-height:84px!important;
margin:0 0 14px!important;
padding:0!important;
overflow:hidden!important;
border:1px solid rgba(67,122,153,.34)!important;
border-radius:12px!important;
background:rgba(249,252,254,.90)!important;
box-shadow:0 8px 26px rgba(25,65,88,.09)!important;
backdrop-filter:blur(8px)!important;
}
#jobs .open-job-stats>div{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:16px!important;
min-width:0!important;
min-height:84px!important;
margin:0!important;
padding:12px 18px!important;
border:0!important;
border-right:1px solid rgba(67,103,124,.20)!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
}
#jobs .open-job-stats>div:last-child{border-right:0!important}
#jobs .open-job-stats>div img{display:block!important;width:44px!important;height:44px!important;object-fit:contain!important;flex:0 0 44px!important}
#jobs .open-job-stats>div span{display:flex!important;align-items:center!important;gap:11px!important;min-width:0!important}
#jobs .open-job-stats b{color:#0d3552!important;font-size:31px!important;line-height:1!important;font-weight:800!important}
#jobs .open-job-stats small{color:#244e68!important;font-size:11px!important;line-height:1.2!important;font-weight:800!important;white-space:nowrap!important}
#jobs .open-job-stats em{display:none!important}
#jobs .open-list-panel{
margin:0!important;
padding:0 16px 10px!important;
overflow:hidden!important;
border:1px solid rgba(67,122,153,.34)!important;
border-radius:13px!important;
background:rgba(249,252,254,.93)!important;
color:#17394c!important;
box-shadow:0 10px 30px rgba(25,65,88,.10)!important;
backdrop-filter:blur(9px)!important;
}
#jobs .open-list-head{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:20px!important;
min-height:70px!important;
padding:12px 0!important;
border-bottom:1px solid rgba(78,118,141,.22)!important;
}
#jobs .open-list-head h2{
display:flex!important;
align-items:center!important;
gap:14px!important;
margin:0!important;
color:#0d3552!important;
font-size:24px!important;
font-weight:750!important;
}
#jobs .open-list-head h2::before{content:'';display:block;width:5px;height:34px;border-radius:4px;background:#268ee5}
#jobs .open-list-controls{display:flex!important;align-items:center!important;gap:10px!important}
#jobs .open-list-controls button,#jobs .open-list-controls select{
height:42px!important;
margin:0!important;
padding:0 15px!important;
border:1px solid rgba(67,122,153,.32)!important;
border-radius:9px!important;
background:rgba(255,255,255,.78)!important;
color:#17394c!important;
font-size:13px!important;
font-weight:650!important;
box-shadow:none!important;
}
#jobs .open-list-controls select{min-width:118px!important}
#jobs .open-list-controls #refreshOpenJobs{
position:static!important;
inset:auto!important;
display:inline-grid!important;
place-items:center!important;
flex:0 0 42px!important;
width:42px!important;
min-width:42px!important;
height:42px!important;
padding:0!important;
font-size:18px!important;
line-height:1!important;
}
#jobs .open-job-columns{
display:grid!important;
grid-template-columns:var(--open-cols)!important;
align-items:center!important;
min-height:44px!important;
padding:0 4px!important;
border-bottom:1px solid rgba(78,118,141,.20)!important;
}
#jobs .open-job-columns span{display:flex!important;align-items:center!important;justify-content:center!important;padding:0 5px!important;color:#315a72;font-size:9px!important;font-weight:750;letter-spacing:.025em;white-space:nowrap;text-align:center!important}
#jobs .job-list{display:block!important;margin:0!important;padding:0!important;background:transparent!important}
#jobs .open-job-card{
position:relative!important;
display:grid!important;
grid-template-columns:var(--open-cols)!important;
grid-template-rows:84px!important;
align-items:stretch!important;
width:100%!important;
min-height:84px!important;
height:84px!important;
margin:0!important;
padding:0 4px!important;
overflow:visible!important;
border:0!important;
border-bottom:1px solid rgba(78,118,141,.20)!important;
border-radius:0!important;
background:transparent!important;
color:#17394c!important;
box-shadow:none!important;
cursor:pointer!important;
}
#jobs .open-job-card:last-child{border-bottom:0!important}
#jobs .open-job-card:hover{transform:none!important;background:rgba(222,241,251,.52)!important;border-color:rgba(78,118,141,.20)!important}
#jobs .open-job-card:focus-visible{outline:2px solid #1687d2!important;outline-offset:-2px!important}
#jobs .open-job-card>div,#jobs .open-job-card>.open-chevron{
display:flex!important;
align-items:center!important;
justify-content:center!important;
min-width:0!important;
min-height:0!important;
height:auto!important;
margin:0!important;
padding:8px!important;
border:0!important;
background:transparent!important;
color:#17394c!important;
}
#jobs .open-job-card>.open-status-icon{grid-column:1!important;grid-row:1!important}
#jobs .open-job-card>.open-job-number{grid-column:2!important;grid-row:1!important}
#jobs .open-job-card>.open-csr-number{grid-column:3!important;grid-row:1!important}
#jobs .open-job-card>.open-city-cell{grid-column:4!important;grid-row:1!important}
#jobs .open-job-card>.open-route-cell{grid-column:5!important;grid-row:1!important}
#jobs .open-job-card>.open-direction-cell{grid-column:6!important;grid-row:1!important}
#jobs .open-job-card>.open-travel{grid-column:7!important;grid-row:1!important}
#jobs .open-job-card>.open-status-cell{grid-column:8!important;grid-row:1!important}
#jobs .open-job-card>.open-priority-cell{grid-column:9!important;grid-row:1!important}
#jobs .open-job-card>.open-created-cell{grid-column:10!important;grid-row:1!important}
#jobs .open-job-card>.open-chevron{position:static!important;grid-column:11!important;grid-row:1!important;transform:none!important}
#jobs .open-job-card small{display:none!important}
#jobs .open-job-card b{color:#17394c!important;font-size:14px!important;font-weight:750!important;white-space:nowrap!important}
#jobs .open-status-icon{justify-content:center!important;padding-left:2px!important}
#jobs .open-status-icon img{display:block!important;width:42px!important;height:42px!important;object-fit:contain!important}
#jobs .open-city-cell>span{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}
#jobs .open-city-cell svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:#176aa0;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
#jobs .open-route-cell{justify-content:center!important}
#jobs .open-route-cell img{display:block!important;width:48px!important;height:48px!important;object-fit:contain!important}
#jobs .open-direction-cell{justify-content:center!important}
#jobs .open-travel{justify-content:center!important;text-align:center!important}
#jobs .open-travel b{display:block!important;width:100%!important;max-width:108px!important;margin:0 auto!important;padding:7px 6px!important;border:1px solid rgba(62,132,176,.20)!important;border-radius:7px!important;background:rgba(225,242,251,.68)!important;color:#0877bc!important;text-align:center!important}
#jobs .open-status-cell{justify-content:center!important}
#jobs .open-status-card{justify-content:center!important}
#jobs .open-status-badge{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
align-self:center!important;
justify-self:center!important;
width:auto!important;
min-width:68px!important;
max-width:none!important;
min-height:34px!important;
height:34px!important;
margin:0!important;
padding:0 12px!important;
border:0!important;
border-radius:7px!important;
color:#fff!important;
font-size:11px!important;
font-weight:800!important;
}
#jobs .open-priority-cell{justify-content:center!important;text-align:center!important}
#jobs .open-priority-cell .priority-text{color:#17394c!important;font-size:13px!important}
#jobs .open-created-cell{justify-content:center!important;text-align:center!important}
#jobs .open-chevron{justify-content:center!important;padding:0!important;color:#0877bc!important;font-size:27px!important;font-weight:400!important}
#jobs #jobMessage{margin:12px 0!important}
body.theme-night #jobs .open-job-tabs button{background:rgba(4,25,41,.86)!important;color:#dcecf5!important;border-color:rgba(105,158,188,.38)!important}
body.theme-night #jobs .open-job-tabs button.selected{background:#0876bd!important;color:#fff!important}
body.theme-night #jobs .open-list-controls #refreshOpenJobs{background:rgba(5,31,49,.88)!important;color:#dcecf5!important;border-color:rgba(105,158,188,.38)!important;box-shadow:0 3px 12px rgba(0,0,0,.12)!important}
body.theme-night #jobs .open-job-stats,body.theme-night #jobs .open-list-panel{background:rgba(3,22,37,.92)!important;border-color:rgba(93,148,178,.38)!important;color:#edf6fb!important;box-shadow:0 10px 30px rgba(0,0,0,.22)!important}
body.theme-night #jobs .open-job-stats>div{border-right-color:rgba(108,155,181,.25)!important}
body.theme-night #jobs .open-job-stats b,body.theme-night #jobs .open-job-stats small,body.theme-night #jobs .open-list-head h2,body.theme-night #jobs .open-job-card,body.theme-night #jobs .open-job-card>div,body.theme-night #jobs .open-job-card b,body.theme-night #jobs .open-priority-cell .priority-text{color:#edf6fb!important}
body.theme-night #jobs .open-job-columns span{color:#94b5c8!important}
body.theme-night #jobs .open-list-head,body.theme-night #jobs .open-job-columns,body.theme-night #jobs .open-job-card{border-color:rgba(108,155,181,.24)!important}
body.theme-night #jobs .open-list-controls button,body.theme-night #jobs .open-list-controls select{background:rgba(5,31,49,.88)!important;color:#edf6fb!important;border-color:rgba(105,158,188,.34)!important}
body.theme-night #jobs .open-job-card:hover{background:rgba(16,55,78,.55)!important}
body.theme-night #jobs .open-city-cell svg{stroke:#65b9ea!important}
body.theme-night #jobs .open-travel b{background:rgba(15,67,99,.54)!important;color:#6dc8ff!important;border-color:rgba(84,164,207,.28)!important}
@media(max-width:1050px){
#jobs.page{width:calc(100% - 28px)!important;padding:88px 0 28px!important}
#jobs .open-job-stats{grid-template-columns:repeat(4,minmax(150px,1fr))!important;overflow-x:auto!important}
#jobs .open-job-columns{display:none!important}
#jobs .open-job-card{grid-template-columns:48px repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(58px,auto))!important;height:auto!important;min-height:174px!important;padding-right:28px!important;border:1px solid rgba(78,118,141,.22)!important;border-radius:10px!important;margin:10px 0!important}
#jobs .open-job-card>div,#jobs .open-job-card>.open-chevron{grid-column:auto!important;grid-row:auto!important}
#jobs .open-job-card>div{min-height:58px!important;padding:9px 11px!important}
#jobs .open-job-card small{display:block!important;margin:0 0 5px!important;color:#668697!important;font-size:9px!important;font-weight:750!important}
#jobs .open-job-card>div:not(.open-status-icon){display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important}
#jobs .open-status-icon{grid-column:1!important;grid-row:1 / span 3!important;justify-content:center!important}
#jobs .open-route-cell img{width:40px!important;height:40px!important}
#jobs .open-status-cell,#jobs .open-priority-cell,#jobs .open-created-cell,#jobs .open-direction-cell,#jobs .open-travel{align-items:center!important;text-align:center!important}
#jobs .open-chevron{position:absolute!important;right:7px!important;top:50%!important;transform:translateY(-50%)!important}
}
/* v73 Completed Month: compact dashboard and stable six-week calendar */
#month.page.active{
width:100%!important;
max-width:none!important;
height:auto!important;
min-height:calc(100vh - 72px)!important;
padding:0!important;
overflow:visible!important;
}
#month .month-wrap{
display:block!important;
width:calc(100% - 120px)!important;
max-width:1040px!important;
height:auto!important;
min-height:0!important;
margin:0 auto!important;
padding:42px 0 28px!important;
}
#month .month-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
min-height:0!important;
margin:0 0 10px!important;
}
#month .month-head small{
display:block!important;
margin:0 0 5px!important;
color:#53b8ee!important;
font-size:11px!important;
font-weight:750!important;
letter-spacing:.12em!important;
}
#month .month-head h1{
margin:0!important;
font-size:24px!important;
line-height:1.08!important;
letter-spacing:.015em!important;
}
#month .month-head p{
margin:6px 0 0!important;
color:#9eb8c7!important;
font-size:12px!important;
}
#month .month-card{
display:block!important;
width:100%!important;
height:auto!important;
min-height:0!important;
padding:10px!important;
overflow:hidden!important;
border:1px solid rgba(78,139,171,.48)!important;
border-radius:14px!important;
background:rgba(3,25,41,.94)!important;
box-shadow:0 14px 34px rgba(0,0,0,.24)!important;
backdrop-filter:blur(9px)!important;
}
#month .month-nav{
display:grid!important;
grid-template-columns:44px minmax(0,1fr) 44px!important;
align-items:center!important;
width:100%!important;
height:36px!important;
margin:0 0 6px!important;
}
#month .month-nav h2{
margin:0!important;
color:#f4f8fb!important;
font-size:21px!important;
line-height:1!important;
text-align:center!important;
}
#month .month-nav button{
display:grid!important;
place-items:center!important;
width:34px!important;
height:34px!important;
padding:0!important;
border:1px solid transparent!important;
border-radius:9px!important;
background:transparent!important;
color:#3aaeff!important;
font-size:30px!important;
line-height:1!important;
}
#month .month-nav button:last-child{justify-self:end!important}
#month .month-nav button:hover{border-color:rgba(58,174,255,.35)!important;background:rgba(58,174,255,.10)!important}
#month .month-stats{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:8px!important;
width:100%!important;
margin:0 0 8px!important;
}
#month .month-stats>div{
display:grid!important;
grid-template-columns:30px auto!important;
grid-template-rows:auto auto!important;
align-items:center!important;
justify-content:center!important;
column-gap:10px!important;
min-width:0!important;
min-height:54px!important;
padding:7px 10px!important;
border:1px solid rgba(80,139,169,.42)!important;
border-radius:9px!important;
background:rgba(5,29,46,.82)!important;
text-align:left!important;
}
#month .month-stats span{
grid-column:1!important;
grid-row:1 / span 2!important;
display:grid!important;
place-items:center!important;
width:30px!important;
height:30px!important;
color:#68c7ff!important;
font-size:20px!important;
}
#month .month-stats b{
grid-column:2!important;
grid-row:1!important;
align-self:end!important;
color:#f5f9fc!important;
font-size:19px!important;
line-height:1!important;
}
#month .month-stats small{
grid-column:2!important;
grid-row:2!important;
align-self:start!important;
color:#9db6c5!important;
font-size:10px!important;
line-height:1.2!important;
white-space:nowrap!important;
}
#month .calendar-week,
#month .month-calendar{
display:grid!important;
grid-template-columns:repeat(7,minmax(0,1fr))!important;
width:100%!important;
gap:5px!important;
}
#month .calendar-week{margin:0 0 4px!important}
#month .calendar-week b{
display:grid!important;
place-items:center!important;
height:22px!important;
padding:0!important;
color:#9fb8c7!important;
font-size:10px!important;
letter-spacing:.08em!important;
}
#month .month-calendar{
flex:none!important;
grid-template-rows:repeat(6,44px)!important;
height:auto!important;
min-height:0!important;
}
#month .cal-day{
display:block!important;
width:auto!important;
height:44px!important;
min-height:44px!important;
margin:0!important;
padding:6px!important;
overflow:hidden!important;
border:1px solid rgba(74,127,156,.42)!important;
border-radius:8px!important;
background:rgba(4,27,43,.74)!important;
color:#e8f2f7!important;
box-shadow:none!important;
}
#month .cal-day.other{opacity:.38!important}
#month .cal-day .daynum{font-size:11px!important;line-height:1!important}
#month .cal-day .day-pill{
left:7px!important;
right:7px!important;
bottom:4px!important;
padding:2px 4px!important;
overflow:hidden!important;
font-size:7px!important;
line-height:1.1!important;
letter-spacing:.025em!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
#month .month-legend{
display:flex!important;
align-items:center!important;
gap:22px!important;
min-height:28px!important;
padding:8px 3px 0!important;
color:#b6c9d4!important;
font-size:10px!important;
}
#month .month-legend em{margin-left:auto!important;color:#819eaf!important}
#month .month-legend i{width:9px!important;height:9px!important;margin-right:6px!important}
body.theme-day #month .month-head h1{color:#113b56!important}
body.theme-day #month .month-head p{color:#456a7e!important}
body.theme-day #month .month-card{
background:rgba(249,252,254,.94)!important;
border-color:rgba(92,142,170,.36)!important;
box-shadow:0 14px 34px rgba(31,76,101,.12)!important;
}
body.theme-day #month .month-nav h2{color:#133e58!important}
body.theme-day #month .month-stats>div{background:rgba(255,255,255,.72)!important;border-color:rgba(92,142,170,.28)!important}
body.theme-day #month .month-stats b{color:#123d58!important}
body.theme-day #month .month-stats small,body.theme-day #month .calendar-week b{color:#496d80!important}
body.theme-day #month .cal-day{background:rgba(255,255,255,.72)!important;border-color:rgba(92,142,170,.28)!important;color:#153f58!important}
body.theme-day #month .cal-day.has-jobs{background:rgba(226,246,235,.88)!important}
body.theme-day #month .month-legend{color:#385f74!important}
body.theme-day #month .month-legend em{color:#648396!important}
@media(max-width:1050px){
#month .month-wrap{width:calc(100% - 28px)!important;padding:42px 0 28px!important}
}
@media(max-width:760px){
#month .month-wrap{width:calc(100% - 20px)!important;padding:72px 0 84px!important}
#month .month-head h1{font-size:22px!important}
#month .month-card{padding:10px!important;overflow-x:auto!important}
#month .month-nav,#month .month-stats,#month .calendar-week,#month .month-calendar,#month .month-legend{min-width:660px!important}
#month .month-stats>div{min-height:60px!important}
#month .month-calendar{grid-template-rows:repeat(6,62px)!important}
#month .cal-day{height:62px!important;min-height:62px!important}
}
@media(max-width:700px){
#jobs .open-list-head{align-items:flex-start!important;flex-direction:column!important;gap:10px!important}
#jobs .open-list-controls{width:100%!important;flex-wrap:wrap!important}
#jobs .open-list-controls button,#jobs .open-list-controls select{flex:1 1 auto!important}
#jobs .open-job-card{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-top:58px!important;grid-template-rows:none!important}
#jobs .open-status-icon{position:absolute!important;left:10px!important;top:7px!important;width:46px!important;height:46px!important}
#jobs .open-job-card>div{min-height:62px!important}
}
body.integrated-field-map-open main{margin:0!important}
/* v74 Header navigation: CSR Inbox belongs only on Home; Home replaces it everywhere else. */
.topbar .top-csr-inbox{display:none!important}
.topbar .top-nav-btn.top-home-btn{display:flex!important}
body.home-page .topbar .top-csr-inbox{display:flex!important}
body.home-page .topbar .top-nav-btn.top-home-btn{display:none!important}
/* v75 Completed Month: taller day boxes, growing upward while the bottom stays fixed. */
@media(min-width:761px){
#month .month-wrap{
padding-top:0!important;
transform:translateY(-18px)!important;
}
#month .month-calendar{grid-template-rows:repeat(6,54px)!important}
#month .cal-day{height:54px!important;min-height:54px!important}
}
/* v76 Daily Route: narrower centered workspace with restored vertical room. */
@media(min-width:761px){
#route.page.active:not(#home):not(#mapPage):not(#finishJob){
width:100%!important;
max-width:none!important;
height:100dvh!important;
max-height:100dvh!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
#route .route-wrap{
display:flex!important;
flex-direction:column!important;
width:calc(100% - 120px)!important;
max-width:1040px!important;
height:100dvh!important;
max-height:100dvh!important;
min-height:0!important;
margin:0 auto!important;
padding:96px 0 18px!important;
overflow:hidden!important;
}
#route .route-head{
flex:0 0 auto!important;
min-height:42px!important;
margin:0 0 8px!important;
}
#route .route-head h1{font-size:27px!important;line-height:1.05!important}
#route .route-head p{margin-top:5px!important;font-size:12px!important}
#route .route-head .secondary-btn{min-height:40px!important;padding:9px 16px!important;font-size:13px!important}
#route .route-summary{
flex:0 0 auto!important;
grid-template-columns:1.35fr repeat(4,minmax(0,1fr))!important;
min-height:62px!important;
margin:0 0 8px!important;
padding:5px!important;
gap:5px!important;
}
#route .route-summary>div{min-width:0!important;min-height:52px!important;padding:6px 9px!important}
#route .route-summary>div>b{font-size:19px!important;line-height:1!important}
#route .route-summary small{font-size:9px!important;line-height:1.1!important}
#route .route-date{display:grid!important;place-items:center!important;text-align:center!important}
#route .route-date>div{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:0!important}
#route #routeDow{display:block!important;margin:0 0 3px!important;color:#9db6c5!important;font-size:9px!important;line-height:1!important;letter-spacing:.08em!important}
#route .route-date b{display:block!important;font-size:16px!important;line-height:1.05!important;white-space:nowrap!important;text-align:center!important}
#route .route-date mark{margin:4px 2px 0!important;padding:2px 7px!important;font-size:8px!important}
#route .route-grid{
display:grid!important;
grid-template-columns:minmax(330px,36%) minmax(0,64%)!important;
flex:1 1 0!important;
width:100%!important;
height:0!important;
min-height:0!important;
max-height:none!important;
gap:10px!important;
overflow:hidden!important;
}
#route .route-list-card,
#route .route-map-card{
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
overflow:hidden!important;
}
#route .route-list-card{display:flex!important;flex-direction:column!important;padding:12px!important}
#route .route-card-title{flex:0 0 auto!important;min-height:48px!important}
#route .route-stops-list{flex:1 1 0!important;height:0!important;min-height:0!important;max-height:none!important;overflow-y:auto!important}
#route .route-day-summary{flex:0 0 auto!important;margin-top:8px!important;padding:10px!important;font-size:12px!important;line-height:1.55!important}
#route .route-map-card iframe{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important}
#route .route-map-legend{left:10px!important;right:10px!important;bottom:9px!important;padding:8px!important;font-size:10px!important}
#route .route-bottom{display:none!important}
}
@media(min-width:761px) and (max-width:1050px){
#route .route-wrap{width:calc(100% - 28px)!important;padding-top:82px!important}
}
/* v77 Completed Month: icon-free totals and slightly taller calendar growing downward. */
@media(min-width:761px){
#month .month-stats>div{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:3px!important;
text-align:center!important;
}
#month .month-stats b,
#month .month-stats small{
display:block!important;
grid-column:auto!important;
grid-row:auto!important;
align-self:auto!important;
text-align:center!important;
}
#month .month-calendar{grid-template-rows:repeat(6,60px)!important}
#month .cal-day{height:60px!important;min-height:60px!important}
}
/* v78 Complete Day styling for Daily Route and time-over-date header clock. */
.desktop-weather-clock .clock-now{
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
.desktop-weather-clock .clock-now #desktopTime{
order:1!important;
margin:0!important;
text-align:center!important;
}
.desktop-weather-clock .clock-now #desktopDate{
order:2!important;
margin:3px 0 0!important;
text-align:center!important;
}
body.theme-day #route .route-head h1{color:#123d58!important}
body.theme-day #route .route-head p{color:#55798c!important}
body.theme-day #route .route-summary{
background:rgba(249,252,254,.94)!important;
border-color:rgba(75,130,160,.36)!important;
box-shadow:0 8px 24px rgba(31,76,101,.10)!important;
}
body.theme-day #route .route-summary>div{
background:rgba(255,255,255,.82)!important;
border-color:rgba(75,130,160,.30)!important;
color:#123d58!important;
}
body.theme-day #route .route-summary>div>b,
body.theme-day #route .route-date b{color:#123d58!important}
body.theme-day #route .route-summary small,
body.theme-day #route #routeDow{color:#55798c!important}
body.theme-day #route .route-date mark{color:#fff!important}
body.theme-day #route .route-list-card{
background:rgba(249,252,254,.95)!important;
border-color:rgba(75,130,160,.36)!important;
color:#123d58!important;
box-shadow:0 10px 28px rgba(31,76,101,.10)!important;
}
body.theme-day #route .route-card-title{border-color:rgba(75,130,160,.28)!important}
body.theme-day #route .route-card-title h3{color:#123d58!important}
body.theme-day #route .route-stop{
background:rgba(255,255,255,.86)!important;
border-color:rgba(75,130,160,.28)!important;
color:#163f57!important;
box-shadow:0 3px 10px rgba(31,76,101,.05)!important;
}
body.theme-day #route .route-stop h4{color:#163f57!important}
body.theme-day #route .route-stop p,
body.theme-day #route .route-stop small{color:#587b8d!important}
body.theme-day #route .stop-open-hint{color:#0878bf!important}
body.theme-day #route .route-day-summary{
background:rgba(232,244,250,.88)!important;
border:1px solid rgba(75,130,160,.22)!important;
color:#163f57!important;
}
/* v79 Daily Route source colors: CSR, Freelance, Requests. */
#route .route-stop.route-source-csr .stop-num,
#route .source-badge.source-csr{background:#2f9d49!important}
#route .route-stop.route-source-freelance .stop-num,
#route .source-badge.source-freelance{background:#9a4dca!important}
#route .route-stop.route-source-request .stop-num,
#route .route-stop.route-source-callout .stop-num,
#route .source-badge.source-request,
#route .source-badge.source-callout{background:#ef7900!important}
/* v43 — iframe fullscreen fallback for iPad/iPhone where element Fullscreen API is unavailable. */
iframe.graffiti-map-frame-fullscreen{
position:fixed!important;inset:0!important;z-index:2147483000!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;background:#000!important;
}
body.graffiti-map-fullscreen-open{overflow:hidden!important}
/* v44 — Street View is hosted by the graffiti app, not nested inside a fullscreen map iframe. */
.graffiti-streetview-overlay{position:fixed!important;inset:0!important;z-index:2147483600!important;background:#fff!important}
.graffiti-streetview-overlay[hidden]{display:none!important}
.graffiti-streetview-overlay iframe{display:block!important;width:100%!important;height:100%!important;border:0!important;background:#fff!important}
.graffiti-streetview-back{position:absolute!important;left:max(12px,env(safe-area-inset-left))!important;top:max(12px,env(safe-area-inset-top))!important;z-index:2147483601!important;min-height:44px!important;padding:0 16px!important;border:1px solid #9db5c1!important;border-radius:12px!important;background:#fff!important;color:#0b4059!important;font-weight:900!important;box-shadow:0 4px 16px rgba(0,0,0,.22)!important}
body.graffiti-streetview-open{overflow:hidden!important}
/* Add CSR: balanced width, readable labels, and natural form height. */
#addcsr.page{width:calc(100% - 48px)!important;max-width:1100px!important;height:auto!important;min-height:0!important;margin:0 auto!important;padding:88px 0 24px!important;overflow:visible!important}
#addcsr .addcsr-wrap{width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;display:block!important}
#addcsr .addcsr-head{margin:0 0 14px!important}
#addcsr .addcsr-head h1{font-size:28px!important;line-height:1.2!important}
#addcsr .addcsr-head p{font-size:13px!important;margin:5px 0 0!important}
#addcsr .addcsr-grid{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)!important;gap:14px!important;align-items:start!important}
#addcsr .addcsr-card{min-width:0!important;border-radius:12px!important}
#addcsr .addcsr-card h3{font-size:15px!important;padding:12px!important}
#addcsr .csr-info-head{flex-wrap:wrap!important;gap:4px!important;padding:0 10px 0 0!important}
#addcsr .csr-top-actions{padding:6px 0!important;gap:6px!important;flex-wrap:wrap!important}
#addcsr .primary-btn,#addcsr .secondary-btn{padding:9px 12px!important;font-size:12px!important;min-height:36px!important}
#addcsr .addcsr-map{height:350px!important}
#addcsr .addcsr-map iframe{display:block;width:100%;height:100%}
#addcsr .addcsr-pad,#addcsr .addcsr-section,#addcsr .addcsr-left-photos{padding:10px 12px!important}
#addcsr .addcsr-help{font-size:12px!important;line-height:1.45!important;margin:0!important}
#addcsr .addcsr-pinmsg{font-size:12px!important;line-height:1.4!important;padding:9px 12px!important}
#addcsr .addcsr-section-title{font-size:13px!important;margin-bottom:8px!important;line-height:1.4!important}
#addcsr .addcsr-section-title small{font-size:11px!important}
#addcsr .addcsr-form label{font-size:11px!important;line-height:1.4!important}
#addcsr .addcsr-form-grid,#addcsr .addcsr-form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
#addcsr .addcsr-form input,#addcsr .addcsr-form select,#addcsr .addcsr-form textarea{font-size:12px!important;margin-top:4px!important;padding:9px!important;min-width:0!important;line-height:1.35!important}
#addcsr .addcsr-form textarea,#addcsr .csr-long-text textarea{height:62px!important;min-height:62px!important;max-height:none!important;resize:vertical!important}
#addcsr .csr-long-text{grid-column:1/-1!important}
#addcsr .addcsr-auto{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
#addcsr .auto-field{min-width:0!important;padding:8px!important}
#addcsr .auto-field span{font-size:9px!important;line-height:1.3!important}
#addcsr .auto-field b{font-size:11px!important;line-height:1.4!important;overflow-wrap:anywhere!important}
#addcsr .priority-check{font-size:11px!important;padding:0 8px!important;min-height:36px!important}
#addcsr .photo-inputs .photo-slot{flex:0 0 calc((100% - 20px)/3)!important;min-height:76px!important;aspect-ratio:4/3!important;font-size:12px!important}
body.theme-day #addcsr .addcsr-head p,body.theme-day #addcsr .addcsr-help{color:#526f80!important}
body.theme-day #addcsr .addcsr-form label,body.theme-day #addcsr .priority-check{color:#315468!important}
body.theme-day #addcsr .auto-field span{color:#526f80!important}
body.theme-day #addcsr .photo-slot{background:#eef6fa!important;color:#315d74!important;border-color:#77a5bd!important}
body.theme-day #addcsr .addcsr-pinmsg{color:#187742!important;border-color:#bfd2dd!important}
body.theme-day #addcsr .addcsr-left-photos,body.theme-day #addcsr .csr-info-head,body.theme-day #addcsr .addcsr-card h3{border-color:#bfd2dd!important}
body.theme-day #addcsr .secondary-btn{background:#edf6fb!important;color:#244c62!important;border-color:#96b9cd!important}
body.theme-day #addcsr .required::before{color:#b9510c!important}
@media(max-width:900px){
#addcsr.page{width:calc(100% - 24px)!important;padding-top:80px!important;padding-bottom:90px!important}
#addcsr .addcsr-grid{grid-template-columns:1fr!important}
#addcsr .addcsr-map{height:340px!important}
#addcsr .csr-priority-label{grid-column:auto!important}
}
@media(max-width:540px){
#addcsr .addcsr-auto{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#addcsr .addcsr-form-grid,#addcsr .addcsr-form-grid.three{grid-template-columns:1fr!important}
#addcsr .csr-info-head{padding:0 10px 8px!important}
#addcsr .csr-info-head h3{flex-basis:100%!important;padding-left:0!important}
#addcsr .coord-row{grid-template-columns:1fr!important}
}
/* Request form and ten-photo navigation. */
#request.page{width:calc(100% - 48px)!important;max-width:1100px!important;height:auto!important;min-height:0!important;margin:0 auto!important;padding:88px 0 24px!important;overflow:visible!important}
#request .request-wrap{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
#request .request-head{margin:0 0 14px!important}
#request .request-head h1{font-size:28px!important;line-height:1.2!important}
#request .request-head p{font-size:13px!important;margin-top:5px!important}
#request .request-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)!important;gap:14px!important;align-items:start!important}
#request .request-card{min-width:0!important;border-radius:12px!important}
#request .request-card h3{padding:12px!important;font-size:15px!important;line-height:1.3!important}
#request .request-form-head{flex-wrap:wrap!important;gap:4px!important;padding:0 10px 0 0!important}
#request .request-actions{position:static!important;background:transparent!important;flex-wrap:wrap!important;gap:6px!important;padding:6px 0!important}
#request .request-actions>span:empty{display:none!important}
#request .request-map{height:350px!important;min-height:0!important}
#request .request-map iframe{display:block;width:100%;height:100%}
#request .request-help,#request .request-pinmsg{font-size:12px!important;line-height:1.4!important;padding:9px 12px!important}
#request .request-fields{padding:12px!important;gap:10px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
#request label{font-size:11px!important;line-height:1.4!important}
#request input,#request select,#request textarea{min-width:0!important;font-size:12px!important;padding:9px!important;line-height:1.35!important}
#request textarea{height:64px!important;min-height:64px!important;resize:vertical!important}
#request .request-coordinates{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:10px 12px!important}
#request .request-photos{padding:10px 12px 12px!important}
#request .request-photo-title{font-size:12px!important;flex-wrap:wrap!important;gap:4px!important}
#request .request-photo-title small,#request .request-photo-title b{font-size:10px!important}
#request .request-photo-inputs{height:auto!important;min-height:0!important;gap:10px!important}
#request .request-photo-inputs .photo-slot{flex:0 0 calc((100% - 20px)/3)!important;height:auto!important;min-height:76px!important;max-height:none!important;aspect-ratio:4/3!important;font-size:12px!important}
#request .request-photo-controls{display:flex;align-items:center;gap:6px;margin:8px 0}
#request .request-photo-controls span{flex:1;color:#a8bfcc;font-size:10px}
#request .request-photo-controls button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #426579;border-radius:8px;background:#0a2d42;color:#dceff9;font-size:23px;cursor:pointer}
#request .request-photo-controls button:disabled{opacity:.35;cursor:default}
#request .primary-btn,#request .secondary-btn{width:auto!important;min-height:34px!important;padding:8px 11px!important;border-radius:8px!important;font-size:11px!important;font-weight:700!important;line-height:1.2!important;letter-spacing:0!important;box-shadow:0 2px 5px rgba(0,0,0,.09)!important}
#request .primary-btn{background:#087bbd!important;border:1px solid #2093cb!important;color:#fff!important}
#request .secondary-btn{background:#102f43!important;border:1px solid #416477!important;color:#dcebf3!important;box-shadow:none!important}
#request .primary-btn:hover{background:#0669a3!important}
#request button:focus-visible{outline:2px solid #40a9e5;outline-offset:3px}
body.theme-day #request .request-card{background:rgba(249,252,254,.96)!important;color:#173d52!important;border-color:#abc9d9!important}
body.theme-day #request .request-head p,body.theme-day #request .request-help{color:#526f80!important}
body.theme-day #request label,body.theme-day #request .request-photo-title b{color:#315468!important}
body.theme-day #request .request-pinmsg{color:#187742!important}
body.theme-day #request .photo-slot{background:#eef6fa!important;color:#315d74!important;border-color:#77a5bd!important}
body.theme-day #request .request-photo-controls span{color:#526f80!important}
body.theme-day #request .request-photo-controls button,body.theme-day #request .secondary-btn{background:#edf6fb!important;color:#244c62!important;border-color:#a5c3d4!important}
body.theme-day #request .request-form-head,body.theme-day #request .request-card h3,body.theme-day #request .request-pinmsg,body.theme-day #request .request-photos{border-color:#bfd2dd!important}
body.theme-day #request .required::before{color:#b9510c!important}
@media(max-width:900px){
#request.page{width:calc(100% - 24px)!important;padding-top:80px!important;padding-bottom:90px!important}
#request .request-grid{grid-template-columns:1fr!important}
#request .request-map{height:340px!important}
}
@media(max-width:540px){
#request .request-fields,#request .request-coordinates{grid-template-columns:1fr!important}
#request .request-form-head{padding:0 10px 8px!important}
#request .request-form-head h3{flex-basis:100%;padding-left:0!important}
}
/* Approved Job Details layout; lighter day backdrop across the app. */
body.theme-day .app-shell{background-image:linear-gradient(rgba(245,251,254,.07),rgba(245,251,254,.12)),url('assets/day-bg.png')!important}
#details.page,#details.page:has(.completed-summary){width:calc(100% - 48px)!important;max-width:1100px!important;margin:0 auto!important;padding:88px 0 28px!important;height:auto!important;overflow:visible!important}
#detailsBody{padding:16px!important;border:1px solid #31576b;border-radius:12px;background:rgba(4,25,39,.94)}
#details .detail-head{display:flex!important;justify-content:space-between!important;align-items:center!important;flex-wrap:wrap!important;gap:12px!important;margin:0 0 16px!important}
#details .detail-head h1{font-size:24px!important;line-height:1.25!important}
#details .detail-head .priority{font-size:10px!important;color:#a86600!important;background:#fff0bf!important;padding:5px 9px!important;border-radius:20px!important}
#details .detail-side-actions{display:flex!important;gap:8px!important;margin:0!important;grid-template-columns:none!important}
#details .detail-side-actions button{width:auto!important;min-height:34px!important;padding:8px 14px!important;font-size:12px!important;border:1px solid #55768a!important;border-radius:7px!important;background:#12364b!important;color:#e8f5fc!important}
#details .detail-side-actions .start{background:#218547!important;color:white!important;border-color:#218547!important}
#details .summary-strip{grid-template-columns:repeat(5,minmax(0,1fr))!important;margin-bottom:12px!important}
#details .summary-strip.completed-summary{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#details .summary-strip.freelance-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#details .summary-strip>div{padding:10px!important;text-align:center!important;min-width:0!important}
#details .type-chip{justify-content:center!important}
#details .type-chip span{font-size:12px!important;color:white!important}
#details .summary-strip b{font-size:13px!important;overflow-wrap:anywhere!important}
#details .detail-body{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr)!important;gap:12px!important;align-items:start!important}
#details .detail-left,#details .detail-body>div{min-width:0!important}
#details .panel{padding:12px!important}
#details .panel h3{font-size:13px!important;margin:0 0 12px!important}
#details .info-grid{gap:16px!important}
#details .info-grid b{font-size:12px!important;line-height:1.5!important}
#details .k{font-size:9px!important;line-height:1.4!important}
#details .detail-text-block{padding:12px!important;background:#102e41!important}
#details .detail-completion{margin-top:12px!important}
#details .detail-completion summary{cursor:pointer;font-size:12px;font-weight:700;padding:3px 0}
#details .detail-completion p{font-size:11px;color:#8eabba}
#details .completed-inline{margin:10px 0 0!important;padding-top:10px!important}
#details .completed-inline h4{display:none!important}
#details .complete-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
#details .location-title{padding:0!important;margin-bottom:10px!important}
#details .location-meta{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;padding:0 0 12px!important;gap:0!important;align-items:center!important}
#details .location-meta>div{min-width:0!important;padding:0 8px!important;min-height:48px!important;text-align:center!important;border-right:1px solid #7897a8!important}
#details .location-meta>div:last-child{border:0!important}
#details .location-meta b{font-size:11px!important;line-height:1.4!important;overflow-wrap:anywhere!important;display:block!important}
#details .location-meta .field-icon,#details .location-meta .city-logo{position:static!important;float:none!important;width:30px!important;height:28px!important;object-fit:contain!important;margin:0 auto 4px!important}
#details .location-meta .route-field-icon{width:42px!important;height:44px!important}
#details .city-logo-field{display:block!important}
#details .pm-field-icon{display:none!important}
#details .map-box{height:270px!important;min-height:0!important;margin:0!important}
#details .map-box iframe{height:100%!important;min-height:0!important;width:100%!important}
#details .photo-panel{margin-top:12px!important}
#details .completed-photos{min-height:0!important;gap:8px!important;padding:0!important}
#details .job-photo{width:140px!important;height:100px!important;border-radius:9px!important}
#details .photo-rail-arrow{width:28px!important;height:32px!important;font-size:22px!important}
body.theme-day #detailsBody{background:rgba(250,253,255,.95)!important;border-color:#abc8d8!important;color:#173d52!important}
body.theme-day #details .detail-text-block,body.theme-day #details .complete-stat{background:#eef6fb!important;color:#173d52!important;border-color:#c6dce9!important}
body.theme-day #details .detail-side-actions button:not(.start){background:#f5faff!important;color:#244d65!important;border-color:#9ebace!important}
body.theme-day #details .detail-completion p{color:#526f80!important}
@media(max-width:900px){
#details.page,#details.page:has(.completed-summary){width:calc(100% - 24px)!important;padding-top:80px!important;padding-bottom:90px!important}
#details .detail-body{grid-template-columns:1fr!important}
#details .detail-head h1{font-size:21px!important}
}
@media(max-width:540px){
#detailsBody{padding:10px!important}
#details .location-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
#details .summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Finish Job: consistent page spacing and readable completion form. */
#finishJob.page{width:calc(100% - 48px)!important;max-width:1100px!important;margin:0 auto!important;padding:88px 0 28px!important;height:auto!important;overflow:visible!important}
#finishJob .finish-wrap{max-width:none!important;width:100%!important;padding:0!important}
#finishJob .finish-head{gap:12px!important;flex-wrap:wrap!important;margin:0 0 14px!important}
#finishJob .finish-head small{display:none!important}
#finishJob .finish-head h1{font-size:28px!important;line-height:1.2!important;margin:0 0 5px!important}
#finishJob .finish-head p{font-size:13px!important;line-height:1.4!important}
#finishJob .finish-summary{grid-template-columns:.6fr 1.5fr 1.2fr .7fr!important;gap:10px!important;margin-bottom:12px!important}
#finishJob .finish-summary>div{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:0!important;padding:12px!important;text-align:center!important}
#finishJob .finish-summary span{font-size:10px!important}
#finishJob .finish-summary b{font-size:12px!important;line-height:1.4!important;white-space:normal!important;overflow-wrap:anywhere!important}
#finishJob .finish-card{border-radius:12px!important}
#finishJob .finish-card>h3{font-size:15px!important;padding:12px 16px!important}
#finishJob .finish-fields{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;padding:14px 16px!important}
#finishJob .finish-fields label{font-size:11px!important;line-height:1.4!important;min-width:0!important}
#finishJob .finish-fields input,#finishJob .finish-fields select,#finishJob .finish-fields textarea{font-size:12px!important;line-height:1.4!important;padding:9px 10px!important;margin-top:5px!important;min-width:0!important;border-radius:8px!important}
#finishJob .finish-fields textarea{height:66px!important;min-height:66px!important;resize:vertical!important}
#finishJob .finish-photo-sections{gap:16px!important;padding:14px 16px!important}
#finishJob .finish-photo-title{font-size:12px!important;align-items:center!important;margin-bottom:10px!important}
#finishJob .finish-photo-title b{font-size:11px!important}
#finishJob .finish-photo-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important;height:auto!important;min-height:0!important;padding:0!important;overflow:visible!important}
#finishJob .finish-photo-grid .photo-slot{width:100%!important;height:auto!important;min-height:78px!important;max-height:none!important;aspect-ratio:1!important;font-size:11px!important;border-radius:9px!important}
#finishJob .finish-actions{position:static!important;gap:8px!important;flex-wrap:wrap!important;padding:12px 16px!important;background:transparent!important}
#finishJob .primary-btn,#finishJob .secondary-btn{min-height:36px!important;padding:9px 13px!important;border-radius:8px!important;font-size:12px!important;line-height:1.2!important;font-weight:700!important}
#finishJob #finishOpenMaps{display:none!important}
#finishJob #finishSubmit{background:#218547!important;border-color:#218547!important;color:#fff!important}
#finishJob #finishSubmit:hover{background:#176d38!important}
#finishJob button:focus-visible{outline:2px solid #339cda;outline-offset:3px}
body.theme-day #finishJob .finish-head p,body.theme-day #finishJob .finish-summary span,body.theme-day #finishJob .finish-photo-title b{color:#526f80!important}
body.theme-day #finishJob .finish-fields label{color:#315468!important}
body.theme-day #finishJob .photo-slot{background:#eef6fa!important;color:#315d74!important;border-color:#77a5bd!important}
body.theme-day #finishJob .finish-card>h3,body.theme-day #finishJob .finish-photo-sections,body.theme-day #finishJob .finish-actions{border-color:#bfd2dd!important}
body.theme-day #finishJob .secondary-btn{background:#f4f9fd!important;border-color:#9cbdd0!important;color:#244c62!important}
body.theme-day #finishJob .required::before{color:#b9510c!important}
body.theme-day #finishJob #finishState{color:#315468!important}
@media(max-width:760px){
#finishJob.page{width:calc(100% - 24px)!important;padding:80px 0 90px!important}
#finishJob .finish-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#finishJob .finish-fields{grid-template-columns:1fr!important}
#finishJob .finish-photo-sections{grid-template-columns:1fr!important}
#finishJob .finish-head h1{font-size:24px!important}
}
@media(max-width:400px){
#finishJob .finish-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* Details: text-only location fields and aligned completed panels. */
#details .info-icon-field:not(:has(img)){min-height:0!important;padding:0!important;display:block!important}
#details .location-meta>div:not(.route-only-field){display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important}
#details .city-logo-field .k,#details .city-logo-field b{padding:0!important;margin-left:0!important}
#details .job-photo-gallery #downloadPhotos{padding:8px 12px!important;font-size:12px!important;border-radius:8px!important;min-height:34px!important}
body.theme-day #details #downloadPhotos{background:#edf6fb!important;color:#244c62!important;border-color:#9cbdd0!important}
@media(min-width:901px){
#details .completed-detail .detail-body{align-items:stretch!important}
#details .completed-detail .detail-left{display:flex!important;flex-direction:column!important}
#details .completed-detail .detail-completion{flex:1!important}
#details .completed-detail .detail-body>div:last-child{display:flex!important;flex-direction:column!important}
#details .completed-detail .job-photo-gallery{flex:1!important;display:flex!important;flex-direction:column!important;margin-bottom:0!important;min-height:0!important}
#details .completed-detail .before-after-grid{flex:1!important;min-height:0!important}
#details .completed-detail .photo-side{min-height:0!important}
}
/* Open Jobs: flexible travel badge, status space and map toggle. */
#jobs.page{--open-cols:34px .55fr .85fr 1fr .6fr .65fr 1.25fr 1.25fr .8fr 1fr 16px}
#jobs .open-travel{min-width:0!important;padding:8px!important;border:0!important}
#jobs .open-travel b{width:100%!important;max-width:none!important;box-sizing:border-box!important;white-space:normal!important;overflow-wrap:normal!important;font-size:12px!important;line-height:1.5!important;padding:7px!important}
#jobs .open-status-cell{min-width:0!important;padding:8px!important}
#jobs .open-status-badge{min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.35!important;padding:8px!important;font-size:10px!important}
#openJobsMapPanel[hidden]{display:none!important}
#openJobsMapPanel p{font-size:12px;color:#588499;margin:12px 0}
#openJobsMap{display:block;width:100%;height:480px;border:1px solid #86adc4;border-radius:10px}
#jobs.jobs-map-view .open-job-columns,#jobs.jobs-map-view #jobList,#jobs.jobs-map-view #jobMessage{display:none!important}
#jobs .open-list-controls{flex-wrap:wrap!important}
@media(max-width:760px){#openJobsMap{height:60vh}}
/* Fullscreen frames must escape containing blocks and ID-based inline dimensions. */
body.graffiti-map-fullscreen-open #app.app-shell.map-fullscreen-ancestor,
body.graffiti-map-fullscreen-open #app main.map-fullscreen-ancestor,
body.graffiti-map-fullscreen-open #app #jobs.page.map-fullscreen-ancestor,
body.graffiti-map-fullscreen-open #app #jobs .open-list-panel.map-fullscreen-ancestor,
body.graffiti-map-fullscreen-open #app #jobs #openJobsMapPanel.map-fullscreen-ancestor,
body.graffiti-map-fullscreen-open .map-fullscreen-ancestor{transform:none!important;filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;perspective:none!important;contain:none!important;will-change:auto!important;overflow:visible!important}
body #openJobsMap.graffiti-map-frame-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;max-height:none!important;border:0!important;border-radius:0!important;z-index:2147483000!important;margin:0!important}
body.graffiti-map-fullscreen-open .topbar,body.graffiti-map-fullscreen-open .bottom-nav{visibility:hidden!important}
/* Completed archive positioning, day surfaces, and filtered map view. */
#completed.page{padding-top:80px!important}
#completed .page-title{margin:0 0 10px!important}
#completed .completed-map-toggle{padding:9px 14px!important;font-size:12px!important;border-radius:8px!important}
#completed .completed-search{width:min(850px,100%)!important;justify-self:center!important;margin:0 auto!important}
#completed .completed-search-controls{grid-template-columns:minmax(0,1fr) 38px auto auto!important;align-items:center!important}
#completed .completed-search-controls button{white-space:nowrap!important}
@media(max-width:700px){
#completed .completed-search-controls{grid-template-columns:minmax(0,1fr) 38px!important}
#completed .completed-inline-clear{grid-column:auto!important;justify-self:stretch!important}
}
#completedList[hidden],#completedMapPanel[hidden]{display:none!important}
#completedMapCount{display:none!important;margin:0!important}
#completedJobsMap{display:block;width:100%;height:480px;border:1px solid #88aec3;border-radius:12px}
body #completedJobsMap.graffiti-map-frame-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;border:0!important;border-radius:0!important;z-index:2147483000!important}
body.graffiti-map-fullscreen-open #app #completed.map-fullscreen-ancestor,body.graffiti-map-fullscreen-open #app #completedMapPanel.map-fullscreen-ancestor{transform:none!important;filter:none!important;backdrop-filter:none!important;overflow:visible!important;contain:none!important}
body.theme-day #completed .completed-job-list{background:rgba(245,250,253,.75)!important;border-color:#aac8d8!important}
body.theme-day #completed .completed-browser,body.theme-day #completed .completed-countbar{background:rgba(249,252,254,.95)!important;color:#173d52!important;border-color:#aac8d8!important}
body.theme-day #completed .completed-job-card{background:rgba(250,253,255,.96)!important;color:#173d52!important;border-color:#b8d1df!important}
body.theme-day #completed .completed-job-card:hover{background:#edf6fc!important}
body.theme-day #completed .completed-map-toggle{background:#f4f9fd!important;color:#244c62!important;border-color:#9cbdd0!important}
body.theme-day #completedMapCount,body.theme-day #completed .completed-job-card small{color:#526f80!important}
@media(max-width:760px){#completed.page{padding-top:76px!important}#completedJobsMap{height:60vh}}
/* v80 — approved grouped navigation and in-app Settings. */
.sidebar{
display:flex!important;
flex-direction:column!important;
gap:0!important;
top:76px!important;
bottom:0!important;
width:286px!important;
padding:12px 14px!important;
overflow:hidden!important;
background:rgba(3,22,36,.98)!important;
border-right:1px solid rgba(91,145,174,.34)!important;
box-shadow:16px 0 38px rgba(0,0,0,.18)!important;
}
.sidebar span{margin-left:0!important}
.sidebar-brand{
flex:0 0 auto!important;
padding:6px 10px 12px!important;
border-bottom:1px solid rgba(118,164,188,.18)!important;
}
.sidebar-brand img{
display:block!important;
width:196px!important;
height:35px!important;
max-height:none!important;
margin:0!important;
object-fit:contain!important;
object-position:left center!important;
}
.sidebar-brand small{
display:block!important;
margin-top:3px!important;
color:#7ea7bb!important;
font-size:8px!important;
font-weight:800!important;
letter-spacing:.14em!important;
}
.sidebar-scroll{
flex:1 1 auto!important;
min-height:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
padding:9px 2px 12px!important;
scrollbar-width:none!important;
}
.sidebar-scroll::-webkit-scrollbar{display:none!important}
.sidebar button{
position:static!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
width:100%!important;
min-width:0!important;
min-height:40px!important;
height:auto!important;
margin:0 0 2px!important;
padding:8px 10px!important;
gap:10px!important;
border:1px solid transparent!important;
border-radius:9px!important;
background:transparent!important;
box-shadow:none!important;
color:#dce9ef!important;
font-size:12px!important;
font-weight:700!important;
letter-spacing:0!important;
line-height:1.15!important;
text-align:left!important;
backdrop-filter:none!important;
}
.sidebar button:hover{background:rgba(53,135,181,.13)!important;border-color:rgba(85,157,195,.15)!important}
.sidebar button.selected{
background:#0874bc!important;
border-color:#2697d8!important;
color:#fff!important;
box-shadow:0 7px 16px rgba(0,106,178,.20)!important;
}
.sidebar .side-icon{
display:grid!important;
place-items:center!important;
flex:0 0 24px!important;
width:24px!important;
height:24px!important;
margin:0!important;
color:#63b7e6!important;
font-size:17px!important;
font-weight:500!important;
line-height:1!important;
}
.sidebar button.selected .side-icon{color:#fff!important}
.sidebar .sidebar-view-mode{
min-height:40px!important;
padding:8px 10px!important;
gap:10px!important;
border:1px solid transparent!important;
border-radius:9px!important;
color:#dce9ef!important;
font-size:12px!important;
font-weight:700!important;
}
.sidebar-section-label{
display:flex!important;
align-items:center!important;
gap:9px!important;
margin:10px 8px 5px!important;
color:#708f9f!important;
font-size:8px!important;
font-weight:900!important;
letter-spacing:.16em!important;
line-height:1!important;
}
.sidebar-section-label::after{content:"";flex:1;height:1px;background:rgba(118,164,188,.17)}
.sidebar-section-label span{margin:0!important}
.sidebar-footer{
flex:0 0 auto!important;
padding:9px 2px 0!important;
border-top:1px solid rgba(118,164,188,.20)!important;
}
.sidebar-footer button{margin-bottom:4px!important;background:rgba(9,41,61,.72)!important;border-color:rgba(89,144,173,.20)!important}
.sidebar-footer button:last-child{margin-bottom:0!important}
.sidebar-settings>span:nth-child(2),.sidebar-profile>span:nth-child(2){display:flex!important;flex:1!important;min-width:0!important;flex-direction:column!important;gap:2px!important}
.sidebar-footer b{display:block!important;font-size:11px!important;color:inherit!important}
.sidebar-footer small{display:block!important;color:#83a4b5!important;font-size:8px!important;font-weight:600!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.sidebar .profile-avatar{
display:grid!important;
place-items:center!important;
flex:0 0 34px!important;
width:34px!important;
height:34px!important;
border-radius:50%!important;
background:#2875ba!important;
color:#fff!important;
font-size:10px!important;
font-weight:900!important;
}
.sidebar .profile-chevron{margin-left:auto!important;color:#6faaca!important;font-size:20px!important}
body.theme-day .sidebar{
background:rgba(247,251,253,.98)!important;
border-right-color:rgba(70,116,140,.22)!important;
box-shadow:16px 0 38px rgba(25,64,84,.10)!important;
}
body.theme-day .sidebar-brand{border-bottom-color:rgba(70,116,140,.15)!important}
body.theme-day .sidebar-brand img{filter:brightness(.42) saturate(.95)!important}
body.theme-day .sidebar-brand small{color:#7190a0!important}
body.theme-day .sidebar button,body.theme-day .sidebar .sidebar-view-mode{color:#24495b!important}
body.theme-day .sidebar button:hover{background:rgba(22,113,166,.08)!important;border-color:rgba(22,113,166,.10)!important}
body.theme-day .sidebar button.selected{background:#0b75ba!important;color:#fff!important;border-color:#0b75ba!important}
body.theme-day .sidebar .side-icon{color:#297da9!important}
body.theme-day .sidebar button.selected .side-icon{color:#fff!important}
body.theme-day .sidebar-section-label{color:#7893a1!important}
body.theme-day .sidebar-section-label::after{background:rgba(70,116,140,.14)!important}
body.theme-day .sidebar-footer{border-top-color:rgba(70,116,140,.16)!important}
body.theme-day .sidebar-footer button{background:#fff!important;border-color:rgba(70,116,140,.15)!important;color:#24495b!important}
body.theme-day .sidebar-footer small{color:#728f9e!important}
#settings.page{width:calc(100% - 80px)!important;max-width:1100px!important;margin:0 auto!important;padding:100px 0 40px!important}
.settings-wrap{width:100%!important}
.settings-head{margin:0 0 16px!important}
.settings-head small{color:#47b9ec!important;font-size:9px!important;font-weight:900!important;letter-spacing:.16em!important}
.settings-head h1{margin:4px 0!important;font-size:30px!important;letter-spacing:.02em!important}
.settings-head p{margin:0!important;color:#8ca8b7!important;font-size:12px!important}
.settings-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.settings-card{overflow:hidden!important;padding:14px!important;border:1px solid rgba(72,137,170,.36)!important;border-radius:14px!important;background:rgba(4,27,42,.94)!important;box-shadow:0 10px 28px rgba(0,0,0,.12)!important}
.settings-card-title{display:flex!important;align-items:center!important;gap:10px!important;padding:2px 2px 12px!important}
.settings-card-title>span{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;border-radius:9px!important;background:rgba(32,139,199,.15)!important;color:#51bbef!important;font-size:17px!important}
.settings-card-title h2{margin:0 0 2px!important;font-size:15px!important}
.settings-card-title p{margin:0!important;color:#7e9cab!important;font-size:9px!important}
.settings-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
width:100%!important;
min-height:54px!important;
gap:10px!important;
margin:0!important;
padding:9px 4px!important;
border:0!important;
border-top:1px solid rgba(101,153,179,.16)!important;
border-radius:0!important;
background:transparent!important;
color:#e8f1f5!important;
text-align:left!important;
text-decoration:none!important;
box-shadow:none!important;
}
.settings-row:has(>.settings-row-icon){grid-template-columns:30px minmax(0,1fr) auto!important}
.settings-row>span{margin:0!important;min-width:0!important}
.settings-row b,.settings-row small{display:block!important}
.settings-row b{font-size:11px!important}
.settings-row small{margin-top:3px!important;color:#7e9cab!important;font-size:8px!important;font-weight:500!important}
.settings-row-icon{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;border-radius:8px!important;background:rgba(53,151,201,.12)!important;color:#58bbed!important;font-size:13px!important}
#settings #themeMode{height:auto!important;min-width:0!important;justify-content:stretch!important;font-weight:inherit!important}
#settings #themeMode strong{color:#55bff1!important;font-size:10px!important}
.settings-row select{min-width:104px!important;height:32px!important;padding:0 27px 0 9px!important;border:1px solid rgba(86,145,175,.32)!important;border-radius:8px!important;background:#08263a!important;color:#eaf3f7!important;font-size:10px!important;font-weight:700!important}
.settings-row input[type="checkbox"]{appearance:none!important;-webkit-appearance:none!important;position:relative!important;width:34px!important;height:20px!important;margin:0!important;border:1px solid #4d7488!important;border-radius:999px!important;background:#163746!important;cursor:pointer!important}
.settings-row input[type="checkbox"]::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#a6bdc8;transition:.16s}
.settings-row input[type="checkbox"]:checked{background:#0b78bc!important;border-color:#31a6e2!important}
.settings-row input[type="checkbox"]:checked::after{left:16px;background:#fff}
.settings-link,.settings-mode-button{cursor:pointer!important}
.settings-link:hover,.settings-mode-button:hover{background:rgba(46,139,187,.07)!important}
.settings-good{color:#4fd17c!important}
.settings-row strong{font-size:10px!important}
.settings-action{width:100%!important;min-height:38px!important;margin-top:9px!important;border:1px solid #1886c1!important;border-radius:9px!important;background:#0874b8!important;color:#fff!important;font-size:10px!important;font-weight:900!important;cursor:pointer!important}
body.theme-day #settings{color:#173d52!important}
body.theme-day .settings-head p{color:#638295!important}
body.theme-day .settings-card{background:rgba(249,252,254,.96)!important;border-color:rgba(75,130,160,.28)!important;box-shadow:0 10px 28px rgba(28,73,97,.08)!important}
body.theme-day .settings-card-title h2,body.theme-day .settings-row{color:#173d52!important}
body.theme-day .settings-card-title p,body.theme-day .settings-row small{color:#668495!important}
body.theme-day .settings-row{border-top-color:rgba(75,130,160,.16)!important}
body.theme-day .settings-row select{background:#fff!important;color:#173d52!important;border-color:rgba(75,130,160,.27)!important}
body.theme-day #settings #themeMode{background:transparent!important;color:#173d52!important;border-top-color:rgba(75,130,160,.16)!important}
body.settings-large-text{font-size:17px!important}
body.settings-reduced-motion *,body.settings-reduced-motion *::before,body.settings-reduced-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
body.settings-high-contrast .settings-card,body.settings-high-contrast .sidebar{border-color:#58bff0!important}
@media(max-width:760px){
.sidebar{top:64px!important;bottom:68px!important;width:min(286px,88vw)!important;padding:10px 12px!important}
.sidebar-brand img{width:180px!important}
.sidebar button,.sidebar .sidebar-view-mode{min-height:38px!important;padding:7px 9px!important}
.sidebar-section-label{margin-top:8px!important}
#settings.page{width:100%!important;max-width:none!important;padding:78px 12px 90px!important}
.settings-grid{grid-template-columns:1fr!important}
.settings-head h1{font-size:24px!important}
}
/* Completed Month: extend the day grid downward with more space per date. */
@media(min-width:761px){
#month .month-calendar{grid-template-rows:repeat(6,clamp(76px,9.6vh,96px))!important}
#month .cal-day{height:clamp(76px,9.6vh,96px)!important;min-height:clamp(76px,9.6vh,96px)!important}
}
/* Calendar guidance directly on the background, with a larger month heading. */
body #month .month-head p{
display:block!important;
color:#fff!important;
background:transparent!important;
font-size:14px!important;
font-weight:700!important;
line-height:1.4!important;
padding:0!important;
margin:5px 0 0!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
text-shadow:0 1px 3px rgba(0,0,0,.75)!important;
}
body.theme-day #month .month-head p{
color:#153f58!important;
background:transparent!important;
text-shadow:0 1px 2px rgba(255,255,255,.8)!important;
}
#month .month-nav h2{font-size:32px!important;line-height:1.2!important;font-weight:800!important}
/* White job counts on all calendar status pills, in both themes. */
body #month .cal-day .day-pill{color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Keep embedded map fullscreen clear of card clipping and transforms. */
body.graffiti-map-fullscreen-open .map-fullscreen-ancestor{overflow:visible!important;transform:none!important;filter:none!important;backdrop-filter:none!important;contain:none!important}
/* Give dashboard labels a clear footer, separated from the decorative artwork. */
body #home .home-grid .dash-card>small{
position:absolute!important;left:0!important;right:0!important;bottom:0!important;
width:100%!important;margin:0!important;padding:10px 4px!important;
background:#f5faff!important;color:#153f58!important;font-size:12px!important;
font-weight:800!important;line-height:1.25!important;text-shadow:none!important;z-index:3!important;
border-top:1px solid #d3e2eb!important;
}
body:not(.theme-day) #home .home-grid .dash-card>small{background:#092b40!important;color:#fff!important;border-top-color:#34566b!important}
@media(min-width:901px){
#jobs.request-list-view .open-job-columns,#jobs.request-list-view .open-job-card{
grid-template-columns:42px minmax(110px,1.3fr) minmax(100px,1.2fr) minmax(100px,1.2fr) 65px 60px minmax(110px,1fr) 80px 80px 110px 18px!important;
}
#jobs.request-list-view .open-job-number b,#jobs.request-list-view .open-csr-number b{font-size:12px!important;white-space:normal!important;overflow-wrap:anywhere}
}
/* Preserve larger captions without a footer background. */
body #home .home-grid .dash-card>small,
body:not(.theme-day) #home .home-grid .dash-card>small{
background:transparent!important;border:0!important;box-shadow:none!important;
font-size:12px!important;
}
/* CSR Inbox: centered workspace and complete day-theme surfaces. */
body #csrinbox.page{
width:calc(100% - 32px)!important;max-width:1100px!important;
margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;
}
#csrinbox .page-title{align-items:flex-start}
#csrinbox .page-title p{line-height:1.45}
#csrinbox .csr-inbox-card{grid-template-columns:140px minmax(0,1fr) 112px 22px;gap:14px}
#csrinbox .csr-inbox-card>div{min-width:0}
#csrinbox .csr-inbox-card b{overflow-wrap:anywhere;line-height:1.35}
body.theme-day #csrinbox .csr-inbox-toolbar,
body.theme-day #csrinbox .csr-inbox-card,
body.theme-day #csrinbox .notice{
background:rgba(248,252,255,.96)!important;border-color:#b5cedd!important;
color:#153f58!important;box-shadow:0 3px 10px rgba(10,48,70,.08)!important;
}
body.theme-day #csrinbox .csr-inbox-toolbar span,
body.theme-day #csrinbox .csr-inbox-card small{color:#456477!important}
body.theme-day #csrinbox .csr-inbox-card .csr-opened{color:#09699b!important}
body.theme-day #csrinbox .csr-arrow,
body.theme-day #csrinbox .eyebrow{color:#0875ad!important}
body.theme-day #csrinbox .csr-inbox-card:hover{background:#edf7ff!important;border-color:#248ac1!important;filter:none!important}
@media(max-width:700px){
body #csrinbox.page{width:calc(100% - 24px)!important}
#csrinbox .csr-inbox-card{grid-template-columns:minmax(0,1fr) 24px}
}
#csrinbox #csrInboxRefresh{
width:auto!important;min-width:0!important;height:34px!important;min-height:34px!important;
padding:6px 12px!important;font-size:12px!important;line-height:1.2!important;
border-radius:7px!important;flex:none!important;align-self:flex-start!important;
}
#csrinbox .csr-inbox-toolbar{padding:10px 12px!important;gap:12px!important}
#csrinbox #csrInboxState{font-size:13px!important;line-height:1.4!important}
/* Daily Route: larger summary text and a wider, centered map workspace. */
@media(min-width:761px){
body #route .route-wrap{max-width:1180px!important;margin-left:auto!important;margin-right:auto!important}
body #route .route-grid{grid-template-columns:minmax(300px,32fr) minmax(0,68fr)!important}
body #route .route-summary>div>b{font-size:25px!important;line-height:1.15!important}
body #route .route-summary small{font-size:12px!important;line-height:1.25!important}
body #route #routeDow{font-size:12px!important;line-height:1.2!important}
body #route .route-date b{font-size:19px!important;line-height:1.2!important}
body #route .route-date mark{font-size:9px!important}
body #route .route-summary>div{min-height:66px!important;padding:7px 9px!important}
}
@media(max-width:760px){
body #route .route-summary>div>b{font-size:23px!important}
body #route .route-summary small{font-size:12px!important}
body #route #routeDow{font-size:12px!important}
body #route .route-date b{font-size:18px!important}
}
/* Match the calendar bottom clearance on desktop. */
@media(min-width:761px){
body #route .route-wrap{padding-bottom:56px!important}
}
/* Completed details: readable completion values and photo panels in day mode. */
body.theme-day #details .complete-stat b,
body.theme-day #details .detail-completion summary,
body.theme-day #details .completed-inline > .wide b{color:#173d52!important}
body.theme-day #details .complete-stat span,
body.theme-day #details .completed-inline .k{color:#456477!important}
body.theme-day #details .job-photo-gallery,
body.theme-day #details .job-photo-gallery .photo-side{background:#f8fcff!important;color:#173d52!important;border-color:#aac8d8!important}
body.theme-day #details .job-photo-gallery .photos-title-row h3,
body.theme-day #details .job-photo-gallery .photo-side-title h3{color:#173d52!important}
body.theme-day #details .job-photo-gallery .photos-title-row p,
body.theme-day #details .job-photo-gallery .photo-side-title small{color:#456477!important}
body.theme-day #details .job-photo-gallery .photo-side-title,
body.theme-day #details .detail-completion summary,
body.theme-day #details .completed-inline{border-color:#bfd2dd!important}
body.theme-day #details .job-photo-gallery .job-photo{background:#eef6fb!important;border-color:#aac8d8!important}
/* Add CSR reference photos: collapsible five-slot rail. */
#addcsr .addcsr-left-photos summary{cursor:pointer;display:list-item!important;margin-bottom:0!important}
#addcsr .addcsr-left-photos summary small{color:inherit;font-weight:400}
#addcsr #csrPhotoInputs{display:flex!important;overflow-x:auto!important;gap:10px!important;scroll-snap-type:x proximity}
#addcsr #csrPhotoInputs .photo-slot{flex:0 0 calc((100% - 20px)/3)!important;min-width:0!important;scroll-snap-align:start}
#addcsr .request-photo-controls{display:flex;align-items:center;gap:6px;margin:8px 0}
#addcsr .request-photo-controls span{flex:1;color:#a8bfcc;font-size:10px}
#addcsr .request-photo-controls button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #426579;border-radius:8px;background:#0a2d42;color:#dceff9;font-size:23px;cursor:pointer}
#addcsr .request-photo-controls button:disabled{opacity:.35;cursor:default}
body.theme-day #addcsr .request-photo-controls span{color:#526f80!important}
body.theme-day #addcsr .request-photo-controls button{background:#edf6fb!important;color:#244c62!important;border-color:#a5c3d4!important}
/* Requests: click to expand reference photos, matching Add CSR. */
#request .request-photos summary.request-photo-title{display:list-item!important;cursor:pointer;margin-bottom:0!important}
#request .request-photos summary.request-photo-title b{float:right;margin-left:8px}
/* Crew/tablet controls. */
body.crew-view .top-csr-inbox,body.crew-view .sidebar [data-page="csrinbox"],body.crew-view .sidebar [data-page="route"]{display:none!important}
body.crew-view .crew-freelance-mark{font-size:54px!important;font-weight:400!important}
/* Override home header visibility in crew mode, in both themes. */
body.crew-view #app .topbar .top-csr-inbox,
body.crew-view #app .topbar .mobile-menu{display:none!important}
/* Crew dashboard: separate live totals within one Open Jobs card. */
.crew-split-counts{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:18px 0 24px}
.crew-split-counts>span{display:flex;flex-direction:column;align-items:center;min-width:0}
.crew-split-counts>span+span{border-left:1px solid #668295}
.crew-dash-card .crew-split-counts b{font-size:48px;margin:0 0 8px}
.crew-dash-card .crew-split-counts small{font-size:11px;white-space:nowrap}
.crew-action-description{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:110px;font-size:14px;font-weight:700;color:#456477}
body:not(.theme-day) .crew-action-description{color:#b9c9d3}
.crew-teal em{background:#008e91}
.crew-dash-card.crew-teal .crew-card-icon{color:#00b5b8}
.sprayer-wrap{max-width:1000px;margin:0 auto;padding:100px 24px}
.sprayer-panel{padding:24px;border:1px solid #315d74;border-radius:14px;background:#061f30;color:#e4f1f8}
body.theme-day .sprayer-panel{background:#f5faff;color:#173d52;border-color:#aac8d8}
@media(max-width:760px){.crew-dash-card .crew-split-counts b{font-size:34px}.crew-dash-card .crew-split-counts small{font-size:9px}.crew-split-counts{margin:12px 0 18px}.crew-action-description{min-height:84px;font-size:11px}}
#app #navigation.page{width:100%!important;max-width:none!important;height:100dvh!important;margin:0!important;padding:72px 14px 90px!important;overflow:hidden!important}
#navigationFrame{width:100%;height:100%;border:1px solid #527185;border-radius:14px}
#app #beforeWork.page{max-width:1100px!important;margin:auto!important;padding:90px 20px 110px!important}
.before-work-wrap{padding:22px;background:#082537;border:1px solid #53778c;border-radius:14px;color:#e7f3fb}
.before-work-wrap p{line-height:1.5}
#beforeWorkPhotos .finish-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#beforeWorkPhotos .photo-slot{min-height:150px;position:relative}
#beginWork{min-height:50px;padding:12px 24px;background:#218547;color:white;border:0;border-radius:8px;font-size:17px;font-weight:700}
body.theme-day .before-work-wrap{background:#f5faff;color:#173d52}
@media(max-width:650px){#beforeWorkPhotos .finish-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#navigationSyncNotice:has(#navigationSyncState:empty){display:none}
#navigationSyncNotice{position:fixed;left:18px;bottom:150px;max-width:calc(100% - 36px);z-index:110;background:#082537;color:#fff;padding:10px 14px;border-radius:8px;font-size:13px}
#navigationSyncRetry{min-height:44px;margin-left:10px}
/* Navigation occupies the entire app viewport, including tablet mode. */
body:has(#navigation.active){overflow:hidden!important}
body:has(#navigation.active) #app #navigation.page{position:fixed!important;inset:0!important;z-index:2147483500!important;padding:0!important;height:100dvh!important;width:100vw!important;background:#e8eef0!important}
body:has(#navigation.active) #navigationFrame{display:block!important;border:0!important;border-radius:0!important;height:100%!important;width:100%!important}
body:has(#navigation.active) #navigationSyncNotice{display:none!important}
body:has(#navigation.active) .bottom-nav,body:has(#navigation.active) .topbar,body:has(#navigation.active) #activeJobBanner{display:none!important}
body:has(#navigation.active) #app,body:has(#navigation.active) #app main{transform:none!important;filter:none!important;backdrop-filter:none!important;contain:none!important}
/* v37 crew tablet: bottom Back control and compact headerless pages. */
body.crew-view #app>.topbar{display:none!important}
body.crew-view #app #navigationSyncNotice:has(#navigationSyncRetry[hidden]){display:none!important}
body.crew-view #app main>.page:not(#home):not(#navigation):not(#mapPage):not(#fieldMapPage){padding-top:20px!important}
body.crew-view #app #jobs.page,body.crew-view #app #details.page,body.crew-view #app #addcsr.page,body.crew-view #app #request.page{padding-top:20px!important}
body.crew-view #app #route .route-wrap{padding-top:20px!important}
body.crew-view #app #month .month-wrap,body.crew-view #app #completed .completed-wrap,body.crew-view #app #csrinbox .csr-inbox-wrap{padding-top:12px!important}
body.crew-view #app .bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}
body.crew-view #app .bottom-nav #crewBack{display:block!important}
body.crew-view #app .bottom-nav #crewBack>span{display:block!important}
body.crew-view #app #home.page.active{padding-top:18px!important}
body.crew-view #app #home .home-hero{height:218px!important;min-height:218px!important;padding-top:8px!important}
body.crew-view #app #home .crew-weather-slot{margin-top:8px!important}
body.crew-view #app .sidebar{top:0!important;bottom:70px!important}
@media(max-width:760px){body.crew-view #app #home.page.active{padding-top:8px!important}body.crew-view #app #home .home-hero{height:185px!important;min-height:185px!important}}