@import url('../../theme.css');
.top:after{display:none}.top .brand{min-width:0}.layout{display:block}.layout>aside{position:fixed;top:78px;bottom:0;left:0;width:218px;display:block;padding:14px 10px 0}.layout>main{margin-left:218px;padding:11px 17px 14px 18px;background:#fbfdff;min-height:calc(100vh - 78px);border-radius:6px 0 0}.head{height:59px;align-items:flex-start;flex-wrap:nowrap}.head h1{font-size:25px;margin:0;line-height:1.25}.head p{font-size:13px;color:#2b3c79;margin-top:2px}.head>.actions{flex-wrap:nowrap;gap:10px;margin-top:-11px}.head .btn{white-space:nowrap;font-size:11px;padding:8px 13px}.head #showMockup{font-size:19px;padding:3px 12px}.kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 9px}.kpi{height:95px;align-items:flex-start;padding:12px;gap:18px}.kicon{width:55px;height:55px;font-size:31px}.kpi label{font-size:11px;color:#263b77}.kpi strong{font-size:22px}.kpi small{margin-top:3px;font-size:10px}.workgrid{display:grid;grid-template-columns:252px minmax(0,1fr) 350px;gap:9px;align-items:start}.case-panel{grid-row:1/3;min-height:727px}.viewer-panel{grid-column:2;overflow:hidden}.editor-panel{grid-column:3}.validation-lower{grid-column:2/4;display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:9px}.validation-lower>.panel{margin:0!important}.panel{border-color:#e7effa;box-shadow:none;border-radius:5px;overflow:hidden}.panelhead{padding:8px 10px;min-height:32px}.panelhead h2{font-size:12px}.panelhead .small{font-size:9px}.case-panel>.body{padding:0 10px 7px}.itemsearch{margin:4px 0 8px}.itemsearch input{height:28px;font-size:10px}.filters button{padding:7px 2px;font-size:9px;border:0;background:#f2f6ff}.filters button.active{background:#0060ff;color:white}.filters button:last-child{grid-column:1/-1}.case{grid-template-columns:66px minmax(0,1fr);padding:9px 9px;gap:9px;min-height:102px;margin:0 5px}.case.selected{outline:1px solid #88b0ff;background:#edf5ff}.thumb{height:69px;background:url('../../../images/demo/inspection-pothole.png') 50% 65%/cover;border:1px solid #cad8ec}.thumb:after{display:none}.case:nth-child(2) .thumb{background-position:85% 50%;background-size:240%}.case:nth-child(3) .thumb{background-position:10% 35%;background-size:200%}.case:nth-child(4) .thumb{background-position:55% 85%;background-size:150%}.case:nth-child(5) .thumb{background-image:url('../../../images/demo/road-scene.png');background-position:50% 90%;background-size:220%}.case b,.case p{font-size:9px}.case p{color:#2d4785;line-height:1.35}.tag{font-size:9px;padding:1px 4px}.listfoot{padding:9px 10px;display:block;font-size:10px}.listfoot>span:last-child{display:flex;gap:5px;margin-top:8px}.viewerhead{padding:7px 10px;background:#001b35;min-height:34px}.viewerhead b{font-size:13px}.viewerhead select{padding:5px;font-size:9px}.road{height:324px;background:#485050;isolation:isolate}.road:before,.road:after,.crackline,.road>.mask{display:none!important}#inspectionPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .15s}.road .annotation{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible}.annotation [data-vertex]{cursor:grab;pointer-events:auto}.annotation [data-vertex]:active{cursor:grabbing}.annotation{pointer-events:none}.road.editing .annotation{pointer-events:auto;touch-action:none}.measure{font-size:11px;font-weight:600;padding:2px 5px}.measure.w{left:40%;top:20%}.measure.h{left:72%;top:51%}.measure.d{left:42%;top:83%}.labelbox{left:28%;top:40%;font-size:10px;padding:5px}.labelbox.green{left:77%;top:21%;font-size:9px}.toolrail{left:10px;gap:3px}.toolrail button{width:30px;height:29px;border:1px solid #d3def0;border-radius:3px}.toolrail button.active{background:#0060ff;color:white}.viewerfoot{font-size:9px;min-height:24px;padding:5px 10px;justify-content:center}.viewerfoot #viewStatus{display:none}.frames{padding:6px 28px;gap:6px}.frame{height:50px;background:url('../../../images/demo/road-scene.png') center/cover}.frame:first-of-type,.frame[data-frame="1"]{background-image:url('../../../images/demo/inspection-pothole.png')}.frame:before{display:none}.frame span{font-size:7px;opacity:0}.frame.active span,.frame:hover span{opacity:1}.frames>.btn{border:0;color:#064ee9;background:none;padding:0}.editor-panel .body{padding:8px 11px}.editor-panel .body>.field{display:grid;grid-template-columns:98px minmax(0,1fr);gap:6px;align-items:center;margin-bottom:7px}.editor-panel .body>.field label{font-size:9px;color:#203773;margin:0}.field input,.field select{padding:6px 8px;height:29px;font-size:10px;color:#071548;border-color:#d9e4fa}.field input:disabled{background:#f3f6fc;color:#32487a}.field .conf{align-self:center;padding:3px;white-space:nowrap;font-size:9px}.righttabs{gap:3px;margin:8px 0 12px}.righttabs .tab{padding:7px 4px;font-size:10px}.formgrid{gap:7px}.formgrid .field label{font-size:9px;white-space:nowrap;color:#2b3e77}.formgrid .field input{padding:6px}.evidence{grid-template-columns:1fr 1fr 1fr;gap:7px}.evphoto{height:78px;background:url('../../../images/demo/inspection-pothole.png') 45% 65%/250%;overflow:hidden}.evphoto:after{left:45%;width:10px;background:repeating-linear-gradient(to bottom,#f2e1a2 0 7px,#374552 7px 8px);border:1px solid #d7c185;transform:rotate(12deg)}.evphoto:nth-child(2){background-position:70% 55%}.evphoto:nth-child(2):after{transform:rotate(55deg)}.uploadbtn{height:78px!important;display:grid!important;place-content:center;cursor:pointer;color:#0060ff!important;border:1px dashed #79a7ff!important;background:#f9fbff!important;font-size:10px!important}.hint{font-size:8px}.editor-panel .notes-field{display:none!important}.editor-panel .body>.actions{display:none}.table-panel>.panelhead{padding:0 4px;border-bottom:1px solid #edf2fa}.tabs{flex-wrap:nowrap;gap:3px}.tabs .tab{font-size:9px;padding:8px 11px;border-radius:4px 4px 0 0;white-space:nowrap}.tabletools{padding:7px 8px}.tabletools input{height:27px;font-size:9px;width:50%}.tabletools>span{font-size:9px!important}.tablewrap{padding:0 7px;overflow:auto}.tablewrap table{font-size:9px}.tablewrap th{font-size:8px;padding:5px 3px;color:#071548}.tablewrap td{padding:5px 3px}.tablewrap .btn{padding:0 4px;border:0;background:none;color:#0060ff}.tablewrap .conf,.tablewrap .status{font-size:8px;padding:3px 5px}.reviewactions{border:0;padding:8px;gap:5px}.reviewactions .btn{font-size:9px;padding:5px}.metadata-panel .details{padding:7px 10px}.metadata-panel .details dl{grid-template-columns:77px minmax(0,1fr);gap:5px 7px;font-size:9px}.metadata-panel .details dd:nth-child(3n+2){display:none}.metadata-panel .details dt{color:#273d7a}.metadata-panel .details dd{color:#2a4281}.metadata-panel .details hr,.metadata-panel .details>p,.metadata-panel .progress{display:none}.metadata-panel .details>div:last-child{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px!important}.metadata-panel .details .btn{font-size:8px;padding:4px}.metadata-panel .status{display:none}.footnote{font-size:9px;color:#8394b0}.modalback{z-index:1500}.toast{z-index:1600}.uploaded-evidence{height:78px;width:100%;object-fit:cover;border-radius:4px}.annotation .validation-shape{fill:#ff283d66;stroke:#ff273a;stroke-width:3}.annotation .ai-shape{fill:#11d08522;stroke:#0eca74;stroke-width:2;stroke-dasharray:5 3}.annotation .dimension{stroke:white;stroke-width:2}.road.zoomed #inspectionPhoto,.road.zoomed .annotation{transform:scale(1.4);transform-origin:50% 60%}
@media(max-width:1400px){.head{height:auto;min-height:88px;display:block}.head>.actions{margin-top:8px}.workgrid{grid-template-columns:220px minmax(0,1fr) 320px}.kpi{gap:10px}.kicon{width:45px}.road{height:300px}.frames{padding:6px 12px}.tabs .tab{padding:8px 6px}}
@media(max-width:1150px){.workgrid{grid-template-columns:210px minmax(0,1fr)}.case-panel{grid-row:1/4}.viewer-panel{grid-column:2}.editor-panel{grid-column:2}.validation-lower{grid-column:2;grid-template-columns:1fr}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.metadata-panel .details dl{grid-template-columns:100px 1fr}}
@media(max-width:850px){.layout>aside{display:none}.layout>main{margin-left:0;padding:12px 12px 80px}.head>.actions{flex-wrap:wrap;gap:5px}.head .btn{font-size:10px;padding:7px 9px}.head h1{font-size:22px}.head{padding-bottom:12px}.workgrid{grid-template-columns:190px minmax(0,1fr)}.kpi{height:90px}.viewerhead b{font-size:10px}}
@media(max-width:600px){.workgrid{grid-template-columns:minmax(0,1fr)}.case-panel,.viewer-panel,.editor-panel,.validation-lower{grid-column:1;grid-row:auto}.case-panel{min-height:0}.case-panel #caseList{max-height:235px;overflow:auto}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi:last-child{grid-column:1/-1}.road{height:260px}.viewerhead{flex-direction:row;align-items:center}.viewerhead select{max-width:130px}.tabs{overflow:auto}.formgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.formgrid .field label{font-size:8px}.tabletools>span{white-space:normal}.head>.actions{margin-top:10px}.labelbox.green{left:74%;font-size:8px}.measure{font-size:9px}.toolrail button{width:25px;height:25px}}
.road .measure,.road .labelbox{pointer-events:none}.road .toolrail{z-index:8}.road.editing .annotation{z-index:6}
/* Keep the filmstrip and editor aligned with the reference. */
.frames{display:flex;flex-wrap:nowrap;grid-template-columns:none;gap:6px;padding:6px 28px;height:62px}.frames .frame{width:0;flex:1;min-width:0}.frames>.btn{flex:0 0 16px}.road{height:300px}.viewerhead{height:34px;min-height:34px;padding:5px 10px}.viewerfoot{height:24px}.editor-panel .field{margin:0 0 7px}.editor-panel .body>.field{margin:0 0 7px}.editor-panel .body{padding:8px 11px}.formgrid{margin:0}.validation-lower{align-items:start}.table-panel{min-height:0}.editor-panel #measurePanel>.field{margin-bottom:0}.editor-panel .field textarea{min-height:100px}.kicon .icon{width:31px;height:31px}.toolrail .icon{width:17px;height:17px}.editor-panel .evidence .uploadbtn{margin:0}.tablewrap tr[data-row]{cursor:pointer}.tablewrap tr[data-row]:hover{background:#eef5ff}
@media(max-width:600px){.frames{padding:6px 10px}.road{height:260px}.viewerhead{height:auto;min-height:34px}}
.editor-panel .body>.actions{display:flex;flex-wrap:wrap;margin-top:10px;gap:6px}