@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Noto+Sans+Thai:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700&display=swap";
:root{--brand:#006b68;--bg:#f5faf9;--surface:#fff;--fg:#142321;--fg2:#40514e;--muted:#5c6d69;--line:#dce8e5;--ok:#087a42;--okbg:#e7f4ec;--warn:#a56a00;--warnbg:#fbf1de;--bad:#c4473d;--badbg:#fbebea;--busy:#52635f;--busybg:#edf3f1}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0;font-family:Noto Sans Thai,sans-serif;line-height:1.6}.shell{grid-template-columns:236px 1fr;min-height:100vh;display:grid}aside{color:#efeff5;background:#181925;flex-direction:column;padding:22px 14px;display:flex}.wordmark{align-items:center;gap:11px;padding:0 8px 25px;display:flex}.brandIcon{border-radius:10px;flex:0 0 38px;width:38px;height:38px}.wordmark .bolt{background:var(--brand);border-radius:12px;place-items:center;width:38px;height:38px;font-size:25px;display:grid}.wordmark b,.wordmark small{display:block}.wordmark small{color:#a6a7b6;font:11px Plus Jakarta Sans}nav{gap:5px;display:grid}nav a{color:#c9cad6;cursor:default;border-radius:10px;gap:12px;padding:10px 13px;text-decoration:none;display:flex}nav a.active{color:#b9beea;background:#2a2d52;font-weight:700}nav a.locked{color:#777989}.alpha{color:#b9beea;border:1px solid #3a3b4a;border-radius:11px;margin-top:auto;padding:10px 12px;font:11px IBM Plex Mono}.alpha small{color:#8f90a2}main{width:100%;max-width:1500px;padding:28px 34px}header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}header p{color:var(--muted);margin:0;font-size:12px}h1{letter-spacing:-.025em;margin:0;font-size:27px}.env{color:#2b3070;background:repeating-linear-gradient(135deg,#e9eaf6,#e9eaf6 7px,#dedff0 7px 14px);border:1px solid #c5c9e6;border-radius:9px;padding:8px 12px;font:700 12px Plus Jakarta Sans}.kpis{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;display:grid}.kpis article,.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px}.kpis article{padding:16px 17px}.kpis span,.kpis small{color:var(--muted);font-size:12px;display:block}.kpis strong{margin:6px 0;font:700 28px Plus Jakarta Sans;display:block}.panel{overflow:hidden}.panelHead{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:17px 19px;display:flex}.panelHead h2{margin:0;font-size:17px}.panelHead p,.panelHead small{color:var(--muted);margin:1px 0 0;font-size:12px}.tr{border-bottom:1px solid var(--line);grid-template-columns:1.4fr 1fr 1fr .7fr;align-items:center;min-height:52px;padding:0 19px;font-size:13px;display:grid}.tr:last-child{border:0}.th{letter-spacing:.04em;text-transform:uppercase;min-height:38px;color:var(--muted);background:#f8f8fb;font:700 10.5px Plus Jakarta Sans}.provider{align-items:center;gap:10px;display:flex}.provider i{color:#2b3070;background:#e9eaf6;border-radius:9px;place-items:center;width:31px;height:31px;font:700 10px Plus Jakarta Sans;display:grid}.tr em{border-radius:999px;padding:4px 8px;font-size:11.5px;font-style:normal}.tr em.ok{background:var(--okbg);color:var(--ok)}.tr em.warn{background:var(--warnbg);color:var(--warn)}.tr em.busy{background:var(--busybg);color:var(--busy)}.mono{font:12px IBM Plex Mono}.banner{border-radius:11px;margin-bottom:16px;padding:12px 14px}.banner small{display:block}.banner.bad{background:var(--badbg);color:var(--bad)}footer{color:var(--muted);text-align:right;margin-top:18px;font-size:11px}.periods{gap:7px;margin:-8px 0 18px;display:flex}.periods a{border:1px solid var(--line);color:var(--fg2);background:#fff;border-radius:999px;padding:6px 13px;font-size:12px;text-decoration:none}.periods a.selected{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}.analyticsPanel{margin-bottom:18px}.corridorGrid{grid-template-columns:repeat(5,1fr);gap:12px;padding:16px;display:grid}.corridorCard{border:1px solid var(--line);background:#fbfdfc;border-radius:12px;padding:14px}.corridorCard>div:first-child{justify-content:space-between;align-items:start;gap:8px;display:flex}.corridorCard h3{margin:0;font-size:13px}.corridorCard b{color:var(--brand);font:700 20px Plus Jakarta Sans}.meter{background:#e4eeeb;border-radius:9px;height:5px;margin:8px 0;overflow:hidden}.meter i{background:linear-gradient(90deg,var(--brand),var(--mint,#39d6a2));border-radius:9px;height:100%;display:block}.corridorCard dl{gap:4px;margin:10px 0;display:grid}.corridorCard dl div{justify-content:space-between;font-size:11px;display:flex}.corridorCard dt{color:var(--muted)}.corridorCard dd{margin:0;font-weight:600}.corridorCard>small{color:var(--muted);font-size:10px}.hourChart{align-items:end;gap:5px;height:210px;padding:18px 20px 30px;display:flex}.hourChart>div{flex-direction:column;flex:1;justify-content:end;align-items:center;gap:5px;height:100%;display:flex}.hourChart i{background:linear-gradient(#39d6a2,#006b68);border-radius:4px 4px 1px 1px;width:100%;min-height:2px;display:block}.hourChart small{height:10px;color:var(--muted);font:9px IBM Plex Mono}.demandTable{overflow-x:auto}.demandRow{border-bottom:1px solid var(--line);grid-template-columns:minmax(260px,2.1fr) repeat(7,minmax(82px,.7fr));align-items:center;min-width:1000px;min-height:58px;padding:7px 18px;font-size:12px;display:grid}.demandRow>span:first-child b,.demandRow>span:first-child small{display:block}.demandRow>span:first-child small{color:var(--muted);font-size:10px}.demandHead{min-height:38px;color:var(--muted);background:#f8f8fb;font:700 10px Plus Jakarta Sans}.demandRow .meter{width:72px;margin:3px 0}.methodNote,.empty{color:var(--fg2);background:#edf7f4;border:1px solid #d6e6e2;border-radius:11px;padding:12px 15px;font-size:11px}.empty{margin:16px}.analyticsKpis strong{white-space:nowrap}.focusBox{border:1px solid var(--line);background:#fff;border-radius:14px;grid-template-columns:minmax(360px,1fr) 120px 190px;align-items:end;gap:12px;margin-bottom:18px;padding:14px 16px;display:grid}.focusBox label,.coordinates span{color:var(--muted);margin-bottom:5px;font-size:11px;display:block}.focusSearch{position:relative}.focusInput{background:#fff;border:1px solid #cfdedb;border-radius:10px;align-items:center;display:flex;overflow:hidden}.focusInput>span{color:var(--brand);padding-left:11px}.focusInput input{border:0;outline:0;width:100%;padding:9px;font:13px Noto Sans Thai}.focusInput button{border:0;border-left:1px solid var(--line);color:var(--brand);white-space:nowrap;cursor:pointer;background:#f1f8f6;padding:9px 12px;font:600 11px Noto Sans Thai}.radiusSelect select{width:100%;color:var(--fg);background:#fff;border:1px solid #cfdedb;border-radius:10px;padding:9px;font:13px Noto Sans Thai}.coordinates{padding-bottom:7px}.coordinates b{font:12px IBM Plex Mono}.suggestions{z-index:20;border:1px solid var(--line);background:#fff;border-radius:10px;position:absolute;top:65px;left:0;right:0;overflow:hidden;box-shadow:0 12px 30px #14232120}.suggestions button{text-align:left;border:0;border-bottom:1px solid var(--line);cursor:pointer;background:#fff;width:100%;padding:9px 12px;display:block}.suggestions button:hover{background:#f1f8f6}.suggestions b,.suggestions small{display:block}.suggestions b{font:600 12px Noto Sans Thai}.suggestions small{color:var(--muted);font:10px Noto Sans Thai}.focusError{color:var(--bad);margin-top:5px;display:block}.stationFilters{grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(150px,.7fr)) auto;gap:8px;padding:14px 18px 8px;display:grid}.stationFilters select,.stationFilters>button,.stationSearch{min-height:38px;color:var(--fg);background:#fff;border:1px solid #cfdedb;border-radius:9px;font:11px Noto Sans Thai}.stationFilters select{padding:7px}.stationFilters>button{color:var(--brand);cursor:pointer;padding:7px 12px}.stationSearch{align-items:center;padding-left:10px;display:flex}.stationSearch input{border:0;outline:0;width:100%;padding:8px;font:12px Noto Sans Thai}.stationResult{color:var(--muted);padding:0 18px 10px;font-size:11px}.stationResult b{color:var(--brand);font-size:14px}.stationResult span{float:right}.stationDataRow{grid-template-columns:minmax(280px,2.4fr) minmax(110px,.8fr) 75px 70px 90px 115px repeat(4,78px) 70px 90px 65px;min-width:1470px}.demandHead button{text-align:left;color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0;font:700 10px Plus Jakarta Sans}.stationDataRow>span:first-child small{white-space:nowrap;text-overflow:ellipsis;max-width:360px;overflow:hidden}.stationDataRow .mono{font-size:10px}.stationPagination{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;font-size:11px;display:flex}.stationPagination label{align-items:center;gap:6px;display:flex}.stationPagination select,.stationPagination button{color:var(--fg);background:#fff;border:1px solid #cfdedb;border-radius:8px;padding:6px 9px;font:11px Noto Sans Thai}.stationPagination div{align-items:center;gap:5px;display:flex}.stationPagination button{cursor:pointer}.stationPagination button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}.stationPagination button:disabled{opacity:.4;cursor:not-allowed}.stationPagination div b{text-align:center;min-width:82px;color:var(--fg)}.stationProvider{align-items:center;gap:7px;min-width:0;font-family:Plus Jakarta Sans;display:flex}.stationProvider img,.stationProviderFallback{border:1px solid var(--line);object-fit:contain;background:#fff;border-radius:7px;flex:0 0 27px;width:27px;height:27px}.stationProviderFallback{color:var(--brand);place-items:center;font-size:8px;display:grid}.stationProvider>span{text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}a[href],button:not(:disabled),label[for],select{cursor:pointer}.liveAvailable,.liveBusy,.liveStale,.freshness{flex-direction:column;gap:1px;display:flex}.liveAvailable b{color:#087a54}.liveBusy b{color:#bd5d16}.liveStale b,.freshness.stale b{color:var(--muted)}.liveAvailable small,.liveBusy small,.liveStale small,.freshness small{color:var(--muted);font-size:9px}.freshness b{color:var(--fg2);font-size:10px}.heatmapPanel{margin-bottom:18px}.heatmapWrap{position:relative}.heatmapCanvas{background:#e8efed;height:480px}.heatmapError{color:var(--bad);background:#f7f9f8;place-items:center;display:grid;position:absolute;inset:0}.heatLegend{z-index:500;color:var(--fg2);background:#fffffff2;border-radius:9px;align-items:center;gap:7px;padding:7px 10px;font-size:9px;display:flex;position:absolute;bottom:14px;right:14px;box-shadow:0 3px 14px #162b2830}.heatLegend i{background:linear-gradient(90deg,#57c7ff,#36d19c,#ffd166,#f77f00,#d62828);border-radius:8px;width:120px;height:8px;display:block}.serverFilters{grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(145px,.65fr)) auto}.loadingText{color:var(--brand)!important}.tableLoading{opacity:.55;pointer-events:none;transition:opacity .15s}.providerPin{background:0 0!important;border:0!important}.providerMapMarker{background:#fff;border:3px solid #fff;border-radius:50%;place-items:center;width:38px;height:38px;display:grid;position:relative;box-shadow:0 3px 9px #10282470}.providerMapMarker:after{content:"";z-index:-1;background:#fff;width:14px;height:14px;position:absolute;bottom:-8px;left:9px;transform:rotate(45deg);box-shadow:3px 3px 5px #10282440}.providerMapMarker img{object-fit:contain;background:#fff;border-radius:50%;width:31px;height:31px}.providerMapMarker b{color:var(--brand);font:700 9px Plus Jakarta Sans}.stationNameLink{color:var(--brand);text-align:left;text-underline-offset:2px;cursor:pointer;background:0 0;border:0;padding:0;font:700 12px Noto Sans Thai;-webkit-text-decoration:underline #006b6840;text-decoration:underline #006b6840;display:block}.stationNameLink:hover{color:#004d4a;text-decoration-color:currentColor}.stationMapPopup{flex-direction:column;gap:4px;min-width:210px;font-family:Noto Sans Thai,sans-serif;display:flex}.stationMapPopup>b{color:var(--fg);font-size:13px}.stationMapPopup>span{color:var(--fg2);font-size:11px}.stationMapPopup>small{color:var(--muted);padding-top:3px;font-size:9px}.stationMapPopup .popupAvailable{color:#087a54;font-weight:700}.stationMapPopup .popupBusy{color:#bd5d16;font-weight:700}.stationSearchAutocomplete{position:relative}.stationSuggestions{z-index:1000;border:1px solid var(--line);background:#fff;border-radius:10px;max-height:330px;position:absolute;top:42px;left:-1px;right:-1px;overflow:auto;box-shadow:0 14px 32px #132a2630}.stationSuggestions>button{border:0;border-bottom:1px solid var(--line);text-align:left;background:#fff;width:100%;padding:9px 12px;display:block}.stationSuggestions>button:hover{background:#edf7f4}.stationSuggestions b,.stationSuggestions span{display:block}.stationSuggestions b{color:var(--fg);font:600 11px Noto Sans Thai}.stationSuggestions span{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font:9px Noto Sans Thai;overflow:hidden}.stationSuggestions>small{color:var(--muted);padding:12px;display:block}.stationMapPopup .googleMapsLink{background:var(--brand);color:#fff;text-align:center;border-radius:8px;margin-top:5px;padding:7px 10px;font-size:11px;font-weight:700;text-decoration:none;display:block}.stationMapPopup .googleMapsLink:hover{color:#fff;background:#004d4a}.dateKpi{font-size:20px!important}@media (max-width:1200px){.corridorGrid{grid-template-columns:repeat(3,1fr)}}@media (max-width:1024px){.shell{grid-template-columns:64px 1fr}aside{padding:18px 8px}.wordmark div,nav span,.alpha{display:none}.wordmark{padding:0 5px 22px}.wordmark .bolt{width:38px}nav a{justify-content:center}.kpis{grid-template-columns:repeat(2,1fr)}main{padding:24px}.tr{grid-template-columns:1.4fr 1fr 1fr}.tr>span:last-child{display:none}}@media (max-width:700px){.shell{display:block}aside{display:none}main{padding:16px}.kpis{grid-template-columns:1fr 1fr}.tr{grid-template-columns:1.3fr 1fr}.tr>span:nth-child(3){display:none}.corridorGrid{grid-template-columns:1fr}.analyticsKpis{grid-template-columns:1fr 1fr}.hourChart{gap:2px;height:160px;padding-left:10px;padding-right:10px}.focusBox{grid-template-columns:1fr}.coordinates{padding:0}.focusInput button{padding-left:8px;padding-right:8px}.stationFilters,.serverFilters{grid-template-columns:1fr}.stationResult span{display:none}.stationPagination{flex-wrap:wrap;align-items:flex-start}.stationPagination>span{order:3;width:100%}.stationPagination div button:nth-child(2),.stationPagination div button:nth-child(4){font-size:0}.stationPagination div button:nth-child(2):after{content:"‹";font-size:14px}.stationPagination div button:nth-child(4):after{content:"›";font-size:14px}.heatmapCanvas{height:360px}.heatLegend{left:10px;right:auto}.heatLegend i{width:80px}}
.providerLogoEditor{align-items:center;gap:10px;min-width:0;display:flex}.providerLogoEditor>span:nth-child(2){min-width:0}.providerLogoEditor small{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:9px;display:block;overflow:hidden}.providerLogo{border:1px solid var(--line);background:#fff;border-radius:11px;flex:0 0 42px;place-items:center;width:42px;height:42px;display:grid;overflow:hidden}.providerLogo img{object-fit:contain;width:100%;height:100%}.providerLogo b{color:#2b3070;font:700 10px Plus Jakarta Sans}.upload{color:#2b3070;cursor:pointer;white-space:nowrap;background:#f4f4ff;border:1px solid #c5c9e6;border-radius:8px;margin-left:auto;padding:5px 8px;font-size:10px;font-weight:700}.upload input{display:none}.upload.disabled{opacity:.55;cursor:wait}
