:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#182c46;background:#f1f5fa}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;border-radius:8px;padding:10px 14px;background:#24549a;color:#fff;font-weight:600}button:hover{filter:brightness(.96)}button:disabled{opacity:.55;cursor:not-allowed}.ghost{background:#ecf2fb;color:#244b76}.danger{background:#aa3340;color:#fff}.muted{color:#698098}.tiny{font-size:12px}.strong{font-weight:700}#shell{display:flex;min-height:100vh}#sidebar{width:238px;flex-shrink:0;background:#10233d;color:#e8f1ff;display:flex;flex-direction:column;padding:20px 12px;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;align-items:center;gap:10px;padding:7px}.brand img{background:#fff;border-radius:8px;object-fit:contain;padding:3px}.brand strong{display:block;font-size:19px}.brand small{display:block;font-size:10px;color:#a2b9d5}.motto{font-size:10px;letter-spacing:1px;color:#8db1e1;margin:16px 9px}.navtitle{letter-spacing:1.2px;font-size:10px;font-weight:700;color:#8aadd5;margin:24px 10px 8px}.nav{background:transparent;color:#dce8f7;text-align:left;padding:12px 13px;margin:2px 0;font-weight:500;width:100%}.nav.active,.nav:hover{background:#2b5180;color:white}.sidebarfoot{margin-top:auto;padding:22px 10px 0;border-top:1px solid #284361;color:#a6b9d3;font-size:12px}.workspace{flex:1;min-width:0}header{padding:18px 28px;background:white;border-bottom:1px solid #dce5f0;display:flex;justify-content:space-between;align-items:center;gap:10px}header strong{display:block;font-size:19px}header span{display:block;font-size:12px;color:#68809e}.headeractions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.headeractions .mode{color:#227351;background:#e0f5eb;border-radius:15px;padding:7px 11px;font-weight:700;font-size:10px}main{max-width:1480px;margin:auto;padding:24px 28px}.notice{background:#fff8e6;border:1px solid #e9d9b2;border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:22px;line-height:1.5}.pagehead{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}h1{font-size:28px;margin:0 0 4px}h2{font-size:18px;margin:0 0 12px}h3{font-size:16px;margin:0 0 8px}p{line-height:1.5}.card,.panel{background:#fff;border:1px solid #dce5f0;border-radius:14px;padding:20px;margin-bottom:15px;box-shadow:0 2px 8px #19395b07}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.metric{font-weight:800;font-size:30px;margin:8px 0}.grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #edf0f5;padding:14px 0}.row:first-child{border-top:0}.pill{display:inline-block;background:#eaf0ff;color:#305e9e;border-radius:50px;padding:5px 9px;font-size:12px;font-weight:700}.pill.green{background:#e3f6ec;color:#227252}.pill.yellow{background:#fff2d3;color:#875a12}.actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.stack{display:grid;gap:12px}label{display:block;font-weight:700;font-size:13px;margin:0 0 6px}input,select,textarea{display:block;width:100%;padding:11px;border:1px solid #c7d5e6;border-radius:8px;background:white;color:#182c46}input:focus,select:focus,textarea:focus{outline:2px solid #b4cdf2;outline-offset:1px}input[readonly]{background:#eef3f8;color:#47617d}textarea{min-height:105px;resize:vertical}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.wide{grid-column:1/-1}.muteblock{background:#f3f7fc;border-radius:9px;padding:12px;color:#576e8b}.search{margin:12px 0 18px}.empty{border:1px dashed #cbd7e7;border-radius:12px;padding:35px;text-align:center;color:#607690;background:#fff}.fieldhelp{margin-top:5px;font-size:12px;color:#657b96}.searchresults{max-height:210px;overflow-y:auto;border:1px solid #dce5f0;border-radius:8px;margin-top:5px;padding:5px}.choice{display:block;text-align:left;width:100%;color:#213b59;background:#f4f7fc;border-radius:7px;margin:4px 0}.choice:hover{background:#e5eef9}.choice span{display:block;font-size:12px;color:#607898;font-weight:400;padding-top:4px}.toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:10px 0 20px}.toolbar input{max-width:580px}.details{border:1px solid #dce5f0;border-radius:12px;overflow:hidden;background:white;margin:17px 0}.details summary{font-size:18px;font-weight:800;cursor:pointer;padding:16px 18px}.details .inside{padding:0 18px 16px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left;font-size:13px}td,th{padding:12px 10px;border-bottom:1px solid #e7edf5}th{color:#637c98;font-size:12px}dialog{border:0;border-radius:15px;width:min(660px,95vw);max-height:90vh;overflow:auto;box-shadow:0 24px 80px #172e5444;padding:24px}dialog::backdrop{background:#142b46a1}dialog h2{font-size:22px}#toast{position:fixed;bottom:20px;right:20px;background:#142d49;color:white;padding:12px 20px;border-radius:9px;max-width:450px;display:none;z-index:10}#toast.visible{display:block}.hint{font-size:12px;color:#59738e;margin:3px 0 11px}.callout{border-left:4px solid #24549a;background:#f2f7fc;padding:13px 16px;margin:14px 0;border-radius:5px}.checkboxline{display:flex;gap:10px;align-items:center;margin:10px 0;font-weight:500}.checkboxline input{width:auto}.buttonlink{color:#24549a;background:none;padding:0;text-decoration:underline;font-weight:500}.counters{font-variant-numeric:tabular-nums} @media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}#sidebar{width:210px}header{padding:16px}}@media(max-width:700px){#shell{display:block}#sidebar{height:auto;width:100%;position:relative;padding:10px}.brand img{width:38px;height:38px}.navtitle,.motto,.sidebarfoot{display:none}.nav{display:inline-block;width:auto;margin:4px;padding:8px;font-size:13px}main{padding:14px}header{display:block}.headeractions{margin-top:10px}.stats,.formgrid{grid-template-columns:1fr}.wide{grid-column:auto}.pagehead,.toolbar{flex-wrap:wrap}h1{font-size:24px}}

/* Dev 3.6 unified Design v11 extensions */
.hero{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(112deg,#163859,#275987);color:white;border-radius:15px;padding:20px 24px;margin-bottom:16px;flex-wrap:wrap}
.hero b{font-size:24px}.hero p{margin:6px 0;color:#d7e9fa}.hero .pill{white-space:nowrap}
.details summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer}.details summary::-webkit-details-marker{display:none}.details summary:after{content:'⌄';font-size:24px;color:#235c9a;line-height:1}.details:not([open]) summary:after{transform:rotate(-90deg)}
.details[open] summary{border-bottom:1px solid #e8edf5}.details .inside{padding:18px}
.stats .card.kpi{padding:16px}.kpi span{display:block;font-size:12px;color:#6b7c91}.kpi strong{font-size:29px;display:block;margin:7px 0}
.progressbar{height:10px;border-radius:8px;background:#e5edf7;overflow:hidden;margin:10px 0}.progressbar>div{height:100%;background:#3279c5}
.foldertree{border:1px solid #dae6f3;border-radius:9px;background:#f5f8fc;padding:13px;margin:12px 0;font-size:13px}.folder{margin:9px 0 5px 20px;color:#4a6582}
@media(max-width:700px){.hero{padding:16px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Dev 3.7: visit close-out, signature, material rows, project documents and billing tracker */
.report-head{display:flex;align-items:center;justify-content:space-between}.report-layout .card{padding:16px}
.report-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:16px;font-size:13px}
.report-overview strong{display:block;color:#5e738b;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.material-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(75px,.6fr) minmax(75px,.6fr) minmax(0,1.2fr) 38px;align-items:end;gap:7px;padding:9px 0;border-bottom:1px solid #e6eef6}
.material-row label{font-size:11px}.material-row button{align-self:end;padding:10px}.sigbox{border:1px solid #aebfd3;border-radius:10px;background:repeating-linear-gradient(0deg,#fff,#fff 29px,#f8fbff 30px);overflow:hidden}.sigbox canvas{display:block;width:100%;height:165px;touch-action:none;cursor:crosshair}.sig-saved{padding:9px;border:1px solid #cbd8e8;border-radius:8px;margin:12px 0}.sig-saved img{display:block;max-height:140px;max-width:100%;background:white}.bill-tablewrap{padding:0;max-width:100%}.bill-tracker{min-width:2400px;white-space:normal}.bill-tracker td{min-width:105px;max-width:230px;vertical-align:top}.bill-tracker th{min-width:105px;background:#eef3fa;position:sticky;top:0;z-index:1}.bill-tracker th:nth-child(2){min-width:160px}.bill-tracker .numeric{text-align:right;white-space:nowrap}.bill-ready{background:#e7f7ec}.billing-result{padding:15px;border:1px solid #c5d6e9;border-radius:8px;margin:16px 0;display:flex;gap:20px;justify-content:space-between;font-size:18px}.billing-result strong{font-size:23px}
dialog:has(.report-layout){width:min(950px,96vw)}dialog:has(#projectFolderForm),dialog:has(#projectDocForm){width:min(680px,96vw)}
@media(max-width:700px){.material-row{grid-template-columns:1fr 1fr}.material-row>div:first-child{grid-column:1/-1}.material-row>div:nth-child(4){grid-column:1/-1}.report-overview{grid-template-columns:1fr}}

/* Dev 3.8 — per-system checklist and external support case */
.checklist-group{border:1px solid #dde8f4;border-radius:10px;margin:14px 0;overflow:hidden}
.checklist-group h4{margin:0;padding:11px 13px;background:#edf4fb;color:#274564;font-size:13px}
.checklist-item{padding:11px 13px;border-top:1px solid #e7eef7}
.checklist-item:first-of-type{border-top:0}
.check-title label{font-size:13px;font-weight:600;line-height:1.5;margin-bottom:8px}
.check-progress{border:1px solid #d6e5f5;background:#f2f7fd;border-radius:8px;padding:9px 12px;margin:10px 0;font-size:13px;font-weight:700}

/* Dev 3.8.2 — only checkmarks, with one Diagnostic Notes field */
.check-label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;margin:0;line-height:1.5}
.check-label input[type="checkbox"]{appearance:auto;display:block;flex:0 0 auto;width:21px;height:21px;margin:1px 0 0;padding:0;accent-color:#227553;cursor:pointer}
.check-label span{flex:1}
.checklist-item.check-passed{background:#f0faf3}
.checklist-item.check-passed .check-label span{color:#216441}

/* Dev 3.8.3 — visit timestamps and read-only computed time */
#actualTeamHours{font-variant-numeric:tabular-nums;background:#eef5fc;font-weight:700;color:#183b62}
#workStart,#workEnd{font-variant-numeric:tabular-nums}

/* Dev 3.8.4: parent-client service catalog editor */
.service-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px;background:#f5f8fc;border-radius:10px;padding:10px 16px;margin:12px 0 18px}
.service-options .checkboxline{margin:7px 0;font-size:12px}
.service-custom-row{border:1px solid #dbe6f3;border-radius:9px;padding:13px;margin:9px 0;background:#f8fbff}
.service-custom-row>div{margin-bottom:10px}
.service-custom-row textarea{min-height:85px}
@media(max-width:700px){.service-options{grid-template-columns:1fr}}

/* Dev 3.8.5 ticket photos */
.ticket-photo-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.ticket-photo{margin:0;border:1px solid #dfe3ea;border-radius:10px;overflow:hidden;padding:12px;min-width:0}
.photo-image{min-height:130px;display:flex;align-items:center;justify-content:center;background:#f5f7fa;margin-bottom:10px}
.photo-image img{max-width:100%;max-height:220px;object-fit:contain}
.ticket-photo figcaption b{display:block;overflow-wrap:anywhere}.ticket-photo textarea{width:100%;min-height:78px}.ticket-photo small{display:block;margin:8px 0}

/* Dev 3.8.6: Dashboard charts and unified Administration / Billing */
.dashboard-charts,.billing-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.chart-card{min-width:0;display:flex;flex-direction:column;gap:10px}.chart-card>button{align-self:flex-start;margin-top:auto}
.chart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.chart-heading h2{margin:5px 0}.eyebrow{color:#617890;font-size:10px;letter-spacing:1.4px;font-weight:800}
.chart-composition{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:18px;align-items:center}
.dashboard-ring{display:block;width:100%;max-width:180px;height:auto;flex-shrink:0}.ring-number{font-size:22px;fill:#183953;font-weight:800}.ring-label{font-size:9px;fill:#617890}
.chart-legend{padding:0;margin:0;list-style:none;font-size:12px}.chart-legend li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #edf1f6}.chart-legend li span{display:flex;align-items:center;gap:7px}
.chart-summary{font-weight:700;margin:4px 0}.project-summary{display:flex;align-items:center;gap:12px}.project-summary .dashboard-ring{max-width:145px}.project-progress-list{max-height:285px;overflow:auto;padding-right:4px}.project-progress-row{padding:10px 0;border-bottom:1px solid #edf1f6}.project-progress-row>div{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.project-progress-row button{text-align:left;overflow-wrap:anywhere}.project-progress-row strong{white-space:nowrap}.project-progress-row small{display:block;color:#607690;margin-top:4px}
.chart-bar{margin:12px 0}.chart-bar>div{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}.chart-bar small{font-weight:400;color:#607690}
.chart-bars progress,.project-progress-row progress{display:block;width:100%;height:11px;margin:7px 0 0;border:0;border-radius:8px;overflow:hidden;background:#e6edf5;appearance:none}.chart-bars progress::-webkit-progress-bar,.project-progress-row progress::-webkit-progress-bar{background:#e6edf5;border-radius:8px}.chart-bars progress::-webkit-progress-value{background:#2f6fbb;border-radius:8px}.project-progress-row progress::-webkit-progress-value{background:#22805b;border-radius:8px}.chart-bars progress::-moz-progress-bar{background:#2f6fbb}.project-progress-row progress::-moz-progress-bar{background:#22805b}
.chart-number{font-size:28px;font-weight:800;margin:10px 0}.chart-number span{font-size:12px;font-weight:400;color:#607690}.billing-chart-grid>.card{box-shadow:none;margin:0}.billing-navigation{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 22px}.billing-navigation .selected{background:#24549a;color:white}#billingContent{min-width:0}
@media(max-width:1000px){.dashboard-charts{grid-template-columns:1fr}}@media(max-width:700px){.billing-chart-grid{grid-template-columns:1fr}.chart-composition{grid-template-columns:minmax(90px,125px) 1fr;gap:12px}.chart-card{padding:16px}.project-summary .dashboard-ring{max-width:110px}.chart-legend{font-size:11px}}
