/* Housecall-style office layer in RAD black and gold. */

/* Tablet widths: list pages hide navigation for tablet shells that newer renderers no longer draw. Restore the standard navigation when no shell is present. */
@media(min-width:901px) and (max-width:1100px){
 body:has(#customers.active):not(:has(#customers .rad-customers-tablet)) .side,
 body:has(#jobs.active):not(:has(#jobs .rad-jobs-tablet)) .side,
 body:has(#estimates.active):not(:has(#estimates .rad-estimates-tablet)) .side,
 body:has(#invoices.active):not(:has(#invoices .rad-invoices-tablet)) .side{display:flex!important}
 body:has(#customers.active):not(:has(#customers .rad-customers-tablet)) .app,
 body:has(#jobs.active):not(:has(#jobs .rad-jobs-tablet)) .app,
 body:has(#estimates.active):not(:has(#estimates .rad-estimates-tablet)) .app,
 body:has(#invoices.active):not(:has(#invoices .rad-invoices-tablet)) .app{grid-template-columns:220px minmax(0,1fr)!important}
}
@media(min-width:701px) and (max-width:900px){
 body:has(#customers.active):not(:has(#customers .rad-customers-tablet)) .mobile-bar,
 body:has(#jobs.active):not(:has(#jobs .rad-jobs-tablet)) .mobile-bar,
 body:has(#estimates.active):not(:has(#estimates .rad-estimates-tablet)) .mobile-bar,
 body:has(#invoices.active):not(:has(#invoices .rad-invoices-tablet)) .mobile-bar{display:flex!important}
 body:has(#customers.active):not(:has(#customers .rad-customers-tablet)) .mobile,
 body:has(#jobs.active):not(:has(#jobs .rad-jobs-tablet)) .mobile,
 body:has(#estimates.active):not(:has(#estimates .rad-estimates-tablet)) .mobile,
 body:has(#invoices.active):not(:has(#invoices .rad-invoices-tablet)) .mobile{display:grid!important}
}
@media(min-width:701px) and (max-width:1100px){
 body:has(#customers.active):not(:has(#customers .rad-customers-tablet)) main,
 body:has(#jobs.active):not(:has(#jobs .rad-jobs-tablet)) main,
 body:has(#estimates.active):not(:has(#estimates .rad-estimates-tablet)) main,
 body:has(#invoices.active):not(:has(#invoices .rad-invoices-tablet)) main{padding:16px!important}
}

/* Job Details: workflow stepper sits directly under the title, as the primary actions. */
.job-workspace>.rad-hcp-stepper{max-width:1450px;margin:14px auto 0;box-sizing:border-box;width:calc(100% - 36px)}
@media(max-width:720px){.job-workspace>.rad-hcp-stepper{width:calc(100% - 20px);margin-top:10px}}
.job-ws-top [data-archive-job]{background:#151515;color:#e9a0a0;border:1px solid #5a2a2a;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}
.rad-hcp-parties{margin:6px 0 4px;border-top:1px solid #222;padding-top:6px}
.rad-hcp-parties .job-contact-row span:last-child{text-align:right;color:#eee}
.job-ws-left .job-contact-row>span:first-child{flex:0 0 auto;white-space:nowrap}
.job-ws-left .job-contact-row>:last-child{min-width:0;text-align:right;overflow-wrap:anywhere}
.rad-hcp-textbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}
.rad-hcp-textbar .mini-btn{min-height:44px;border-color:#5a4a1a;color:var(--gold);font-size:12px}
.rad-hcp-textbar .mini-btn:hover{background:#17140b}

/* Company profile: bill-to, service properties and contacts. */
.rad-hcp-company{display:grid;gap:10px}
.rad-hcp-billto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rad-hcp-billto>div,.rad-hcp-property{background:#0b0b0b;border:1px solid #2a2a2a;border-radius:12px;padding:12px;min-width:0}
.rad-hcp-billto span{display:block;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:4px}
.rad-hcp-billto b,.rad-hcp-property b{display:block;color:#fff;font-size:14px}
.rad-hcp-billto small,.rad-hcp-property small{display:block;color:#aaa;font-size:12px;margin-top:3px;overflow-wrap:anywhere}
.rad-hcp-properties{display:grid;gap:8px}
.rad-hcp-property{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.rad-hcp-property .rad-hcp-notes{color:#d9c58a}
.rad-hcp-property-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:420px}
/* 44×44 minimum hit targets for the office controls at every width. */
.rad-hcp-property-actions .mini-btn,.rad-hcp-contacts .mini-btn,.rad-hcp-tap,#jobs [data-hcp-text=row]{min-height:44px;min-width:44px}
.rad-hcp-property-actions .mini-btn:first-child{border-color:var(--gold);color:var(--gold)}
.rad-hcp-contacts .customer-command-row{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:700px){
 .rad-hcp-billto{grid-template-columns:1fr}
 .rad-hcp-property{grid-template-columns:1fr}
 .rad-hcp-property-actions{justify-content:flex-start;max-width:none}
 .rad-hcp-property-actions .mini-btn{flex:1 1 30%}
}

/* Jobs: visible views, property line and quick Text. Every view tab stays on screen: wrapping rows, and a 3×2 grid on phones. */
.rad-hcp-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 10px}
.rad-hcp-tabs button{flex:0 0 auto;border:1px solid #333;background:#0d0d0d;color:#ccc;border-radius:999px;padding:8px 14px;font-weight:750;font-size:12px;cursor:pointer;min-height:44px}
.rad-hcp-tabs button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#000}
.rad-hcp-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:700px){.rad-hcp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.rad-hcp-tabs button{min-width:0;padding:8px 4px}}
.rad-hcp-view-select{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.rad-hcp-site{display:block;color:#9a9a9a;font-size:11px;margin-top:2px;overflow-wrap:anywhere}

.rad-native-text .rad-text-line{color:#d9c58a;font-size:12px}
/* Text dialog: 44×44 controls at every width (the shared review-dialog rule only applies below 767px). */
.rad-native-text :is(button,select,input){min-height:44px;min-width:44px}
/* iOS draws appearance:auto selects at a fixed native height and ignores min-height, so the recipient picker uses the same unstyled control as phone portrait, with a gold chevron. */
.rad-native-text select{-webkit-appearance:none;appearance:none;height:auto;font-size:16px;line-height:1.3;padding-right:36px;background-color:#222;background-image:linear-gradient(45deg,transparent 50%,#e5c158 50%),linear-gradient(135deg,#e5c158 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;background-size:6px 6px;background-repeat:no-repeat}

/* iPhone landscape: keep the shell clear of the camera housing and rounded corners. The insets are 0 in portrait, on iPad and on desktop, so nothing else moves. */
#appShell{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);box-sizing:border-box}
@media(max-width:1100px){body .mobile-bar{padding-right:12px!important}}
@media(orientation:landscape) and (max-height:500px){
 body #mobile{padding-left:max(4px,env(safe-area-inset-left,0px))!important;padding-right:max(4px,env(safe-area-inset-right,0px))!important}
 /* The customer/company profile opens in #modal, outside #appShell; its 96vw width is bounded by the safe area instead. */
 #modal:has(>.customer-command-modal){padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
 #modal>.customer-command-modal{width:min(1050px,96vw,100%)!important}
}

/* Job Financials: amounts never split mid-number. Narrow cards (iPad portrait, iPhone landscape) list the figures as label/amount rows; wide cards keep three tiles. */
.job-workspace .job-card-body:has(>.job-three){container-type:inline-size}
.job-workspace .job-kpi strong{white-space:nowrap;overflow-wrap:normal;word-break:normal;font-variant-numeric:tabular-nums}
@media(min-width:721px){.job-workspace .job-kpi strong{font-size:clamp(13px,3.8cqi,18px)}}
@media(min-width:721px){@container (max-width:479px){
 .job-workspace .job-three{grid-template-columns:minmax(0,1fr);gap:6px}
 .job-workspace .job-kpi{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px}
 .job-workspace .job-kpi strong{margin:0;font-size:17px}
}}

/* Jobs row More menu (iPad/desktop): an open menu takes its own line inside the row card instead of widening the last column past the card edge. */
@media(min-width:761px){
 #jobs .rad-job-table-row:has(>.rad-job-table-actions details[open])>.rad-job-table-actions{grid-column:1/-1;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start}
 #jobs .rad-job-table-row details[open]{text-align:right;max-width:100%}
 #jobs .rad-job-table-row details[open]>summary{width:max-content;margin-left:auto}
 #jobs .rad-job-table-row details[open]>button{display:inline-block;margin:6px 0 0 6px;min-height:44px;vertical-align:top;max-width:100%}
}
/* Jobs rows by available list width. The desktop row needs ~805pt on iOS (fixed columns 550 + Open Job/More 171 + gaps 56 + padding 28). Lists under 760 (iPhone landscape within the camera insets, Max-size sidebar layout) use the existing phone row layout; 760–860 (iPad portrait) keeps the desktop row with narrower minimum columns. */
#jobs .rad-job-table{container-type:inline-size}
@container (min-width:760px) and (max-width:860px){
 #jobs .rad-job-table-row{grid-template-columns:minmax(170px,2fr) minmax(120px,1.1fr) minmax(110px,1fr) minmax(90px,.7fr) auto}
}
@container (max-width:759px){
 #jobs .rad-job-table-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:12px}
 #jobs .rad-job-table-row>div:first-child,#jobs .rad-job-table-actions{grid-column:1/-1}
}

/* Job Details beside the sidebar (desktop and iPad landscape); the sidebar stays usable. */
.job-workspace.rad-hcp-docked{right:0;width:auto;box-shadow:-1px 0 0 #2a2a2a}
.rad-hcp-return{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:9400;min-height:44px;padding:10px 14px;border-radius:999px;border:1px solid var(--gold);background:#17140b;color:var(--gold);font-weight:800;cursor:pointer;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:1101px){.rad-hcp-return{bottom:calc(16px + env(safe-area-inset-bottom,0px))}}

/* Segment tabs: one parent job, one tab per segment. */
.rad-hcp-segments{box-sizing:border-box;min-width:0;margin:0 0 12px}
.rad-hcp-seghdr{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px}
.rad-hcp-segcount{flex:1 1 auto;color:#bbb;font-size:12px;font-weight:700;white-space:nowrap}
.rad-hcp-seghdr .mini-btn{flex:0 0 auto;min-height:44px;min-width:44px}
.rad-hcp-segstep{font-size:20px;line-height:1}
.rad-hcp-segstep:disabled{opacity:.35;cursor:default}
.rad-hcp-segstrip{position:relative;min-width:0}
.rad-hcp-segstrip::before,.rad-hcp-segstrip::after{content:"";position:absolute;top:0;bottom:3px;width:32px;pointer-events:none;opacity:0;transition:opacity .15s}
.rad-hcp-segstrip::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.rad-hcp-segstrip::after{right:0;background:linear-gradient(270deg,#000,transparent)}
.rad-hcp-segstrip.more-left::before,.rad-hcp-segstrip.more-right::after{opacity:1}
.rad-hcp-segtabs{position:relative;display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;border-bottom:1px solid #3a3320;scrollbar-width:thin}
.rad-hcp-segtab{flex:0 0 auto;display:grid;gap:2px;text-align:left;min-height:44px;min-width:44px;padding:8px 12px;border:1px solid #333;border-bottom:0;border-radius:10px 10px 0 0;background:#0d0d0d;color:#ddd;cursor:pointer;max-width:240px}
.rad-hcp-segtab b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rad-hcp-segtab small{color:#9a9a9a;font-size:11px;white-space:nowrap}
.rad-hcp-segtab[aria-selected="true"]{border-color:var(--gold);background:#17140b;color:#fff}
.rad-hcp-segbadges i{font-style:normal;font-size:10px;font-weight:800;border-radius:999px;padding:1px 6px;margin-right:4px}
.rad-hcp-segbadges .pend{color:#e9a64a;border:1px solid #6e5226}
.rad-hcp-segbadges .billed{color:#7fb2e5;border:1px solid #2f4f6e}
.rad-hcp-segpanel{border:1px solid #3a3320;border-top:0;border-radius:0 0 12px 12px;background:#0b0b0b;padding:12px 14px;display:grid;gap:8px}
.rad-hcp-seghead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.rad-hcp-seghead h3{margin:0;color:#fff;font-size:16px}
.rad-hcp-seghead small{color:#9a9a9a}
.rad-hcp-segfacts{display:flex;flex-wrap:wrap;gap:6px}
.rad-hcp-segfacts span{border:1px solid #333;border-radius:999px;padding:4px 10px;font-size:12px;color:#ddd;white-space:nowrap}
.rad-hcp-segnotes,.rad-hcp-seglegend{margin:0;color:#bbb;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.rad-hcp-seglegend{color:#8f8a7a}
.rad-hcp-segactions{display:flex;flex-wrap:wrap;gap:6px}
.rad-hcp-segactions .mini-btn{min-height:44px;min-width:44px}

/* Contacts that serve several properties. */
.rad-hcp-contact-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.rad-hcp-contact-actions .mini-btn{min-height:44px;min-width:44px}
.rad-hcp-check{display:flex!important;align-items:center;gap:10px;min-height:44px}
.rad-hcp-check input{width:20px;height:20px;accent-color:var(--gold)}

/* Payments: Stripe actual fees and net. */
.rad-hcp-settlements{margin-top:18px;display:grid;gap:10px}
.rad-hcp-feepolicy{margin:0;color:#d9c58a;font-size:13px}
.rad-hcp-feetotals{display:flex;flex-wrap:wrap;gap:8px}
.rad-hcp-feetotals span{border:1px solid #333;border-radius:10px;padding:8px 12px;color:#aaa;font-size:12px}
.rad-hcp-feetotals b{display:block;color:var(--gold);font-size:15px;font-variant-numeric:tabular-nums}
.rad-hcp-feetable td small{display:block;color:#9a9a9a}