/* Screenshot-inspired dashboard refinement; existing functionality is preserved. */
:root{--green:#0dc76b;--panel:#fff;--bg:#f5f8f8;--text:#143a30;--line:#e3ece8;--shadow:0 8px 22px #0c48230b}
body{background:#f7faf9}
.sidebar{background-color:#064b36;background-image:radial-gradient(circle at center,#1ea26f45 1.1px,transparent 1.6px),linear-gradient(160deg,#08553e 0%,#064431 62%,#073f31 100%);background-size:24px 24px,100% 100%;border-right:0;box-shadow:5px 0 25px #0d352b12}
.brand{padding-top:11px;padding-bottom:28px}.brand-mark{background:#054732;border:2px solid #e2ab22;color:#f6c24a;border-radius:15px;box-shadow:inset 0 0 0 3px #095d43;width:47px;height:47px;padding:8px}.brand-mark svg{width:100%;height:100%}
.brand b{font-size:21px;font-weight:600}.brand em{color:#fbd166}.event-chip{background:#07432fbb;border:1px solid #2d8464;box-shadow:0 4px 15px #032b2115}.event-chip b{letter-spacing:.1px}
.nav-item{gap:12px;border-radius:12px;font-size:13px;min-height:54px;padding:10px 12px;color:#e6f9ee}.nav-item small{font-size:10px;color:#b1d9c4}.nav-item:hover,.nav-item.active{background:#0c9b87;color:#fff}.nav-item.active{box-shadow:inset 3px 0 #f3bf44,0 4px 14px #002a2318}
.nav-ico{background:transparent!important;width:34px!important;height:34px;border-radius:10px;border:1px solid #ffffff27;color:#d9f8e8!important;padding:7px}.nav-item.active .nav-ico{border-color:#dbfff080;color:white!important;background:#ffffff11!important}.nav-ico svg{display:block;width:100%;height:100%;flex:none}.nav-group summary .nav-ico{background:#ffffff0b!important}.nav-group summary{border-radius:10px}.nav-group summary:hover{background:#ffffff15}.nav-group{border-color:#ffffff22}
.topbar{background:#fff;border-bottom:1px solid #e5eeeb;box-shadow:none}.topbar h1{font:650 24px Kanit;color:#0b513e}.eyebrow{color:#399570}.live-pill{border:1px solid #b8ebd0;background:#e2faec;color:#0a6540;font-weight:700}.clock{background:#f0f6f6;color:#315c57}.user-pill{background:#e3f6eb;color:#0b6844;border-color:#b6e4ce}
.content{background:#f8fbfa;max-width:1680px;padding-top:20px}
.hero{background:linear-gradient(95deg,#fbfefd 0%,#f2faf4 65%,#e8f8ed 100%);border:1px solid #deede5;border-radius:20px;padding:25px 28px;box-shadow:none}.hero:before{width:30%;opacity:.48;right:2%;pointer-events:none}.hero h2{color:#064e39;font-size:27px}.hero .tag{background:#d7f9e5;border-color:#b3ebc9;color:#0b754d}.hero p{color:#507d68}.date-hero{color:#0a6945!important}.stats{gap:14px}.stat{background:white!important;border:1px solid #e6ecea;border-radius:20px;box-shadow:0 5px 16px #0b462808;min-height:150px;padding:21px}.stat .label{color:#71858a;font-size:12px}.stat .value{font:700 36px Kanit;color:#142e38}.stat .sub{font-size:11px;color:#7d9293;margin-top:7px}.stat:nth-child(1){border-color:#cce8dc}.stat:nth-child(2){border-color:#c2edd5}.stat:nth-child(3){border-color:#cde1f2}.stat:nth-child(4){border-color:#f6dfaa}.stat:nth-child(5){border-color:#f8c7d0}.stat:nth-child(1) .value{color:#14394a}.stat:nth-child(2) .value{color:#00ae61}.stat:nth-child(3) .value{color:#2d90c6}.stat:nth-child(4) .value{color:#d48413}.stat:nth-child(5) .value{color:#e53256}
/* Route telemetry is the dominant visual section, as in the example screenshot. */
.overview-map-feature{margin-top:2px;background:#fff;border:1px solid #d9e9e2;border-radius:23px;overflow:hidden;box-shadow:0 12px 32px #0a452514}.overview-map-feature-header{padding:23px 24px;background-color:#07543d;background-image:radial-gradient(circle,#2cb67b42 1px,transparent 1.5px),linear-gradient(125deg,#064d38,#076548);background-size:20px 20px,100% 100%;color:#fff}.overview-map-feature-header .eyebrow{display:inline-block;background:#06c567;color:#fff;border-radius:99px;padding:5px 13px;letter-spacing:.5px}.overview-map-feature-header h3{font:600 21px Kanit;margin:12px 0 3px;color:white}.overview-map-feature-header p{font-size:11px;color:#c9ecdd;margin:0}.overview-map-feature-body{padding:19px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:20px}.overview-map-feature .map{height:410px;background:#f2f7f4;border:1px solid #d8e9de}.overview-map-feature .route-list{align-content:start}.overview-map-feature .route-item{background:#f8fcfa;border:1px solid #e2efe7}
.overview-lower{margin-top:20px}.weather-card{margin-top:20px}
@media(max-width:1080px){.overview-map-feature-body{grid-template-columns:1fr}.overview-map-feature .map{height:340px}}
@media(max-width:720px){.hero h2{font-size:20px}.hero{padding:17px}.hero:before{opacity:.15}.stat{min-height:112px;padding:14px}.stat .value{font-size:27px}.stat .label{font-size:10px}.overview-map-feature-header{padding:17px}.overview-map-feature-header h3{font-size:17px}.overview-map-feature-body{padding:12px}.overview-map-feature .map{height:300px}.sidebar{background-size:24px 24px,100% 100%}}
/* Make the route/telemetry section echo the reference's forest-green map panel. */
.content > .grid.two-col > div:first-child > .panel:first-child{padding:0;overflow:hidden;border-color:#cce7d9;box-shadow:0 10px 27px #0c482313}
.content > .grid.two-col > div:first-child > .panel:first-child > .panel-head{background-color:#06583f;background-image:radial-gradient(circle,#42c58b50 1px,transparent 1.5px),linear-gradient(110deg,#064c38,#086547);background-size:21px 21px,100% 100%;padding:20px 21px;margin:0;min-height:81px}
.content > .grid.two-col > div:first-child > .panel:first-child > .panel-head h3{font-size:21px;color:#fff}
.content > .grid.two-col > div:first-child > .panel:first-child > .panel-head .text-btn{color:#e0ffeb;font-weight:700}
.content > .grid.two-col > div:first-child > .panel:first-child > .map{margin:17px 17px 8px;width:calc(100% - 34px)}
.content > .grid.two-col > div:first-child > .panel:first-child > .map-legend{padding:0 17px 12px}
@media(max-width:720px){.content > .grid.two-col > div:first-child > .panel:first-child > .panel-head h3{font-size:17px}}

/* Menu repair v4 — correct native button appearance, legibility, and refined line icons */
.sidebar .brand b, .sidebar .event-chip b {color:#f2fff8!important}
.sidebar .brand span {color:#d1eddf!important}
.sidebar .event-chip small {color:#b6dbca!important}
.sidebar .nav-item{
  appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:12px;
  width:100%;margin:2px 0;padding:10px 12px;
  text-align:left;text-decoration:none;cursor:pointer;
  background:transparent;color:#e8f8ef;border:1px solid transparent;
  border-radius:12px;font:500 13px 'IBM Plex Sans Thai',sans-serif;
  line-height:1.5;min-height:48px;transition:background-color .15s,border-color .15s;
}
.sidebar .nav-item>div{min-width:0;flex:1}
.sidebar .nav-item small{color:#add8c5;font-size:10px;margin:1px 0 0}
.sidebar .nav-item:hover,.sidebar .nav-item:focus-visible{
  background:#ffffff16;color:#fff;border-color:#ffffff24;
}
.sidebar .nav-item.active{
  background:#0d9b84!important;color:white!important;border-color:#52d0ad55!important;
  box-shadow:inset 3px 0 #f5bd4a;
}
.sidebar .nav-item.active small{color:#e3fff4}
.sidebar .nav-ico{display:grid!important;place-items:center!important;flex:0 0 34px!important;
  width:34px!important;height:34px!important;padding:7px;border:1px solid #ffffff26;
  border-radius:10px;background:#ffffff0d!important;color:#d8ffee!important;
}
.sidebar .nav-ico svg{width:100%!important;height:100%!important;stroke:currentColor!important}
.sidebar .ico-green{color:#83ecc3!important;border-color:#67d8aa44}
.sidebar .ico-blue{color:#9bd9ff!important;border-color:#78c6ff44}
.sidebar .ico-amber{color:#ffe0a1!important;border-color:#eac47744}
.sidebar .ico-red{color:#ffbdc6!important;border-color:#f4a6b444}
.sidebar .ico-purple{color:#d5c0ff!important;border-color:#cbb3f344}
.sidebar .nav-item.active .nav-ico{color:#fff!important;background:#ffffff1d!important}
.sidebar .nav-group{padding-top:7px;margin-top:4px}
.sidebar .nav-group summary{color:#e6f8ec;min-height:48px;padding:9px 10px}
.sidebar .nav-group summary b{color:#ebfff2;font-size:12px}
.sidebar .nav-group .nav-item{margin-top:2px;margin-left:0;padding-left:20px}
.sidebar .nav-group .nav-item>div{white-space:normal;overflow-wrap:anywhere}
.sidebar .brand b{color:#f2fff8!important}
@media(max-width:720px){
 .sidebar .nav-item{min-height:46px}
 .sidebar .nav-group .nav-item{padding-left:15px}
}

/* Google Earth map full-width workspace */
.route-layout{display:grid;grid-template-columns:minmax(0,3.5fr) minmax(230px,1fr);gap:16px;align-items:start}
.route-layout>.panel,.route-layout>div>.panel,.route-layout>aside>.panel{margin-bottom:12px}
.route-layout .map-expanded{height:min(73vh,850px);min-height:540px;border-radius:15px}
.map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:12px;color:#37775f;flex-wrap:wrap}
.earth-point-list{max-height:66vh;overflow:auto;display:grid;gap:5px}
.earth-point{appearance:none;border:1px solid #d6e9dd;border-radius:9px;background:#f9fffb;color:#124e3c;text-align:left;padding:9px;display:flex;align-items:center;gap:8px;cursor:pointer;font:500 11px 'IBM Plex Sans Thai',sans-serif}
.earth-point:hover{background:#e2f5e8}
.earth-point-dot{display:block;width:9px;height:9px;flex:none;background:#2788ae;border-radius:50%}.earth-point-dot.danger{background:#dd534c}
.route-layout .leaflet-control-layers{font-size:11px;max-height:45vh;overflow:auto}
@media(max-width:980px){.route-layout{grid-template-columns:1fr}.route-layout .map-expanded{height:65vh;min-height:430px}.earth-point-list{max-height:250px}}
@media(max-width:640px){.route-layout .map-expanded{height:58vh;min-height:360px}}