@import url('../../theme.css');
.main{margin-left:218px;padding:11px 17px 12px 16px;min-height:calc(100vh - 78px)}.heading{height:63px}.heading h1{font-size:25px}.heading p{font-size:13px}.actions{gap:9px}.kpis{grid-template-columns:1.08fr 1fr .98fr .93fr .94fr 1.3fr;gap:8px;margin-bottom:9px}.kpi{height:105px;padding:12px 10px;align-items:flex-start;gap:15px}.kpi strong{font-size:21px;line-height:1.2;display:block}.kpi-unit{display:block;font-size:10px}.kpi small{margin-top:4px}.kpi small span{display:block;padding-left:19px;font-size:9px}.ico{width:55px;height:54px}.ico.amber{color:#ffb900;background:#fff9eb}.ico.orange{color:#ff8519;background:#fff4ec}.authority-kpi{gap:12px}.authority-kpi dl{display:grid;grid-template-columns:1fr auto;gap:3px 12px;margin:4px 0;font-size:11px}.authority-kpi dd{margin:0;text-align:right}.road-layout{display:grid;grid-template-columns:216px minmax(0,1fr) 344px;gap:9px;align-items:start}.center-column,.right{min-width:0}.panel{border:1px solid #e7effa;border-radius:6px;background:linear-gradient(120deg,#fff,#fbfdff);overflow:hidden}.ph{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;min-height:33px}.ph h2{margin:0;font-size:12px}.pb{padding:0 10px 6px}.text-btn{border:0;background:none;color:#0060ff;padding:0;font-size:10px}.text-btn .icon{width:15px;height:15px}.field{margin:0 0 9px}.field label{display:block;font-size:11px;margin-bottom:2px}.field select,.field input{width:100%;height:29px;border:1px solid #d1dff4;border-radius:4px;padding:5px 8px;background:white;color:#061449}.filterbtn{width:100%;justify-content:center;margin:0 0 5px;height:30px}.map-title{display:flex;justify-content:space-between;gap:8px;align-items:center;background:#00213d;color:white;padding:8px 10px;min-height:39px}.map-title h2{font-size:14px;white-space:nowrap;margin:0}.map-selects{display:flex;gap:5px;min-width:0}.map-selects select{max-width:118px;font-size:8px;padding:5px;background:#052c45;color:#fff;border-color:#698397}.map-selects .btn{font-size:9px;padding:5px;gap:4px}.map-selects .icon{width:13px;height:13px}.maparea .sijantan-osm-map{height:330px!important;min-height:330px!important}.maparea .osm-toolbar{padding:4px 8px;font-size:9px}.maparea .osm-note{font-size:9px;padding:4px 8px;line-height:1.3}.maparea .osm-legacy{display:none}.tablepanel{margin-top:10px;padding-bottom:12px}.tabs{display:flex;gap:4px;border-bottom:1px solid #e7effa}.tab{border:0;padding:8px 16px;font-size:10px;border-radius:5px 5px 0 0;background:#edf4ff;color:#061449}.tab.active{background:#0060ff;color:white}.tools{display:flex;gap:8px;align-items:center;padding:4px 7px}.table-search{display:flex;align-items:center;border:1px solid #e1eaf8;padding:4px 6px;border-radius:4px;max-width:255px;flex:1;min-width:60px}.table-search .icon{width:14px;height:14px}.table-search input{border:0;background:none;font-size:9px;width:100%;min-width:0}.table-meta{font-size:9px;margin-left:auto;white-space:nowrap}.tools select{padding:3px 8px}.scroll{overflow:auto;padding:0 7px}table{font-size:10px}th{font-size:9px}td{padding:3px 4px}tbody tr.sel{background:#f0f6ff}.status{white-space:nowrap}.status:before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:#08b979}.status.minor:before{background:#ffc000}.status.medium:before{background:#ff8b16}.status.severe:before{background:#ff3043}.pill{background:#c9f3e2;color:#00a56b;padding:2px 8px;border-radius:14px;font-size:10px;white-space:nowrap}.row-view{border:0;background:none;color:#0060ff;padding:0 5px;font-size:15px}.pagination{align-items:center;justify-content:flex-end;gap:8px;padding:8px;font-size:10px}.pagination:not([hidden]){display:flex}.small{padding:4px 14px;font-size:10px}.small .icon{width:12px;height:12px}.detailtitle{display:flex;align-items:center;gap:8px;padding:2px 12px 10px}.roadicon{color:#005dff;background:#eff5ff;padding:6px;border-radius:4px}.roadicon .icon{width:32px;height:32px}.detail-name{flex:1;min-width:0}.detail-name small{font-size:10px;display:block}.detail-name strong{display:block;font-size:13px;line-height:1.3}.dtabs{display:flex;border-bottom:1px solid #e7effa;padding:0 7px}.dtabs button{flex:1;font-size:10px;background:none;border:0;border-bottom:2px solid transparent;padding:7px 2px;white-space:nowrap;color:#253672}.dtabs button.active{border-color:#0060ff;color:#0060ff}.details{padding:5px 7px 7px}.detail-row{display:grid;grid-template-columns:116px 8px minmax(0,1fr);font-size:10px;min-height:20px;align-items:center;padding:2px 6px;color:#263673}.detail-row:nth-child(odd){background:#f3f6fa}.detail-row>span:last-child{overflow-wrap:anywhere}.copy{border:0;background:none;color:#0060ff;padding:0 4px;font-size:12px}#extra{padding:16px;min-height:285px;line-height:1.8}#extra p{margin-top:12px}.condition-chart,.history-panel{margin-top:9px}.condition-chart .ph h2{font-size:11px}.chart-legend{display:flex;justify-content:space-around;font-size:8px;padding:3px 10px 7px}.chart-legend span:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color);margin-right:4px}.chart-area{height:116px;position:relative;padding:8px 20px 26px 48px}.chart-axis-title{position:absolute;left:-1px;top:45px;transform:rotate(-90deg);font-size:8px}.chart-area .yaxis{left:28px;top:4px;bottom:24px}.road-bars{display:flex;align-items:end;gap:12px;height:100%;border-left:1px solid #d6e3f5;border-bottom:1px solid #d6e3f5;background:repeating-linear-gradient(to top,transparent 0 26px,#edf2fa 26px 27px)}.road-bar{flex:1;position:relative;display:flex;flex-direction:column-reverse;min-width:0}.road-bar i{display:block}.road-bar small{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);font-size:8px;white-space:nowrap}.timeline{display:flex;justify-content:space-between;padding:10px 12px 14px;font-size:8px;text-align:center;position:relative}.timeline:before{content:'';height:3px;background:#d1def0;position:absolute;top:15px;left:25px;right:25px}.timeline span{position:relative;z-index:1}.timeline i{display:block;width:12px;height:12px;border:3px solid var(--color);background:white;border-radius:50%;margin:0 auto 5px}.timeline b{display:block;font-weight:400;color:var(--color);margin-top:2px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.modal{width:560px}.modalback{place-items:center}#formError{color:#c42538;font-size:12px}dialog{border:1px solid #d1dff4;border-radius:10px;padding:22px;max-width:min(560px,90vw);color:#061449}dialog::backdrop{background:#00182f88}.info-head{display:flex;gap:20px;align-items:center;justify-content:space-between}.info-head h2{font-size:18px}#infoBody{line-height:1.8}.empty{text-align:center;padding:24px;color:#65789a}
@media(max-width:1430px){.heading{height:auto;min-height:80px}.road-layout{grid-template-columns:195px minmax(0,1fr) 300px}.map-title{flex-wrap:wrap}.detail-row{grid-template-columns:100px 8px 1fr}.kpi{gap:8px}.ico{width:43px}.authority-kpi dl{gap:2px 5px;font-size:10px}}
@media(max-width:1200px){.road-layout{grid-template-columns:195px minmax(0,1fr)}.right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:9px}.detail-panel{grid-row:span 2}.condition-chart,.history-panel{margin-top:0}.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.main{margin-left:0;padding:12px 12px 75px}.heading{min-height:100px}.right{display:block}.right .panel{margin-top:9px}.kpis{grid-template-columns:repeat(3,1fr)}.road-layout{grid-template-columns:180px minmax(0,1fr)}.table-meta{display:none}.map-title h2{font-size:12px}}
@media(max-width:600px){.road-layout{grid-template-columns:minmax(0,1fr)}.right{grid-column:auto}.filters .pb{display:grid;grid-template-columns:1fr 1fr;gap:6px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi:last-child{grid-column:auto}.kpi{height:105px}.map-selects{flex-wrap:wrap}.heading h1{font-size:22px}.actions .btn{padding:6px 8px;font-size:10px}.form-grid{grid-template-columns:1fr}.detail-row{grid-template-columns:116px 8px 1fr}}
/* Match the reference's compact desktop density. */
.filters .field{margin-bottom:5px}.row-view{line-height:14px;font-size:14px}.scroll td{padding-top:3px;padding-bottom:3px}.maparea .sijantan-osm-map{height:300px!important;min-height:300px!important}.maparea .osm-toolbar button,.maparea .osm-toolbar a{padding:3px 6px}.maparea .osm-note{font-size:8px}.maparea .osm-note .osm-legend{margin-top:2px}