/* Outbound Logistics — Semen Padang. Visual language from concept_v3 (SIG Brand Guidelines v1.0):
   white dominant, black/grey secondary, SIG red #F5333F only as accent/CTA. */
:root{
  --red:#F5333F; --white:#FFFFFF; --black:#000000;
  --gray-l:#F1F1F1; --gray-d:#4D4D4D; --sub:#6E6E6E; --line:#E3E3E3;
  --green:#1A7A42; --green-bg:#EAF6EF; --amber:#8A5A00; --amber-bg:#FCF1DD; --red-bg:#FCE9E9;
  --none:#C9CDCE;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--white);color:var(--black);font-family:Arial,"Helvetica Neue",sans-serif;}
a{color:inherit;text-decoration:none;}
[hidden]{display:none !important;}

/* ---------- Gate ---------- */
#gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;}
.gate-bg{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.25)),url('assets/hero-logistik.jpg') center/cover;}
.gate-card{position:relative;background:#fff;width:min(360px,calc(100% - 32px));padding:30px 28px 24px;border-top:4px solid var(--red);box-shadow:0 20px 50px rgba(0,0,0,.3);text-align:center;}
.gate-card img{height:64px;}
.gate-title{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-top:12px;}
.gate-sub{font-size:12px;color:var(--sub);margin:4px 0 20px;}
.gate-card input{width:100%;font-size:15px;padding:11px 12px;border:1px solid var(--line);border-radius:2px;}
.gate-card button{width:100%;margin-top:10px;font-size:14px;font-weight:700;padding:11px;border:0;border-radius:2px;background:var(--black);color:#fff;cursor:pointer;}
.gate-card button:disabled{opacity:.6;cursor:wait;}
.gate-msg{min-height:18px;font-size:12.5px;color:var(--red);margin-top:10px;}

/* ---------- Header / nav ---------- */
header{position:sticky;top:0;z-index:50;background:#fff;display:flex;align-items:stretch;justify-content:space-between;padding:0 40px;border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:12px;padding:10px 0;}
.brand img{height:46px;width:auto;display:block;}
.brand .name{font-size:14.5px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;}
.brand .name small{display:block;font-weight:400;font-size:11px;color:var(--sub);text-transform:none;letter-spacing:0;}
nav{display:flex;align-items:stretch;gap:4px;font-size:13.5px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.02em;margin-left:20px;}
.navitem{position:relative;display:flex;}
.navitem>.navbtn{display:flex;align-items:center;gap:5px;padding:0 14px;cursor:pointer;border-bottom:3px solid transparent;user-select:none;}
.navitem>.navbtn .caret{font-size:9px;transform:translateY(1px);transition:transform .15s;}
.navitem.open>.navbtn .caret{transform:translateY(1px) rotate(180deg);}
.navitem.on>.navbtn,.navitem:hover>.navbtn,.navitem.open>.navbtn{color:var(--black);}
.navitem.on>.navbtn{border-bottom-color:var(--red);}
.headerright{display:flex;align-items:center;gap:18px;margin-left:auto;}
.daylabel{font-size:12px;color:var(--sub);white-space:nowrap;}

.dropdown,.mega,.filter-panel{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.08);text-transform:none;letter-spacing:0;}
.navitem.open .dropdown,.navitem.open .mega,.navitem.open .filter-panel{display:block;animation:dropIn .14s ease both;}
@keyframes dropIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.dropdown{min-width:240px;padding:8px;}
.dropdown a{display:block;padding:9px 12px;font-size:13px;font-weight:600;color:var(--black);border-radius:2px;}
.dropdown a:hover{background:var(--gray-l);}
.dropdown a small{display:block;font-weight:400;font-size:11.5px;color:var(--sub);margin-top:2px;}
.mega{width:620px;padding:22px 24px;}
.mega-eksp{width:480px;}
.mega-title{font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;}

.mega-list a{display:block;padding:7px 0;font-size:13px;font-weight:600;color:var(--black);border-bottom:1px solid var(--line);}
.mega-list a:last-child{border-bottom:none;}
.mega-list a:hover{color:var(--red);}
.mega-list a span{float:right;color:var(--sub);font-weight:400;font-size:12px;}
.mega-foot{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--red);}
.eksp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;}
.eksp-item{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:2px;}
.eksp-item:hover{background:var(--gray-l);}
.eksp-item .en{font-size:13px;font-weight:700;color:var(--black);}
.eksp-item .ep{font-size:12px;font-weight:800;}
.gran-chips{display:flex;gap:6px;flex-wrap:wrap;}
.gran-chips a,.gran-chips span{font-size:12.5px;font-weight:700;color:var(--black);border:1px solid var(--line);padding:7px 14px;border-radius:2px;cursor:pointer;text-transform:none;}
.gran-chips .on{background:var(--black);color:#fff;border-color:var(--black);}


.filter-panel{width:560px;padding:22px 24px;}
.fp-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px;}
.fp-group label.fl{display:block;font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.fp-chips{display:flex;flex-wrap:wrap;gap:6px;}
.fp-chips span{font-size:12px;font-weight:600;color:var(--black);border:1px solid var(--line);padding:5px 10px;border-radius:2px;cursor:pointer;}
.fp-chips span.on{background:var(--black);color:#fff;border-color:var(--black);}
.fp-select{width:100%;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:2px;color:var(--black);background:#fff;}
.fp-check{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--black);padding:3px 0;cursor:pointer;}
.fp-check small{color:var(--sub);font-weight:400;}
.fp-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;}
.fp-reset{font-size:12.5px;color:var(--sub);font-weight:700;cursor:pointer;}
.fp-apply{font-size:12.5px;color:#fff;background:var(--black);font-weight:700;padding:9px 18px;cursor:pointer;border-radius:2px;}
.filter-strip{background:var(--gray-l);border-bottom:1px solid var(--line);padding:7px 40px;font-size:12px;color:var(--gray-d);display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.filter-strip b{color:var(--black);}
.filter-strip .tag{background:#fff;border:1px solid var(--line);padding:2px 8px;border-radius:2px;}
.filter-strip .edit{color:var(--red);font-weight:700;cursor:pointer;margin-left:auto;}

/* search */
.search{position:relative;}
.search input{width:190px;font-size:13px;padding:8px 10px 8px 30px;border:1px solid var(--line);border-radius:2px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 9px center no-repeat;}
.search-results{display:none;position:absolute;right:0;top:calc(100% + 4px);width:320px;max-height:380px;overflow:auto;background:#fff;border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.1);z-index:60;}
.search-results.show{display:block;}
.search-results a{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;font-size:13px;border-bottom:1px solid var(--line);}
.search-results a:hover,.search-results a.sel{background:var(--gray-l);}
.search-results a small{color:var(--sub);font-size:11px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
.search-results .none{padding:12px;font-size:12.5px;color:var(--sub);}

/* ---------- Hero ---------- */
.hero{position:relative;height:360px;overflow:hidden;}
.hero img{width:100%;height:100%;object-fit:cover;display:block;}







.wrap{padding:30px 40px 56px;max-width:1280px;margin:0 auto;}
.data-asof{font-size:11.5px;color:var(--sub);margin:-14px 0 22px;}

.attn{display:flex;gap:14px;align-items:flex-start;background:var(--gray-l);border-left:4px solid var(--red);padding:16px 20px;margin-bottom:34px;}
.attn .t1{font-size:13.5px;font-weight:700;margin-bottom:3px;text-transform:uppercase;letter-spacing:.02em;}
.attn .t1 .dot{display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;margin-right:8px;animation:pulseAttn 1.8s ease-in-out infinite;}
.attn .t2{font-size:13px;color:var(--gray-d);line-height:1.55;}
.attn .cta{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--red);white-space:nowrap;flex:none;align-self:center;}

.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;gap:12px;}
.section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}

.section-link{font-size:12.5px;color:var(--red);font-weight:700;white-space:nowrap;}

/* map */
.map-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:28px;background:var(--gray-l);border:1px solid var(--line);border-radius:3px;padding:20px 22px;margin-bottom:8px;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.map-svg{width:100%;height:auto;display:block;border-radius:2px;}
.map-region{transition:filter .15s ease, stroke-width .15s ease;}
.map-region.live{cursor:pointer;}
.map-region.live:hover{filter:brightness(1.12) drop-shadow(0 3px 6px rgba(0,0,0,.3));stroke:#000;stroke-width:1.6;}
.map-lbl{font-size:11px;font-weight:700;fill:#fff;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.25);stroke-width:2px;}
.map-lbl.out,.map-pct.out{fill:#000;stroke:#fff;stroke-width:3px;}
.map-lbl.dim{fill:#8C9293;stroke:none;font-weight:600;font-size:10.5px;}
.map-pct{font-size:13px;font-weight:800;fill:#fff;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.3);stroke-width:2.5px;}
.sea-lbl{font-size:10px;letter-spacing:.25em;fill:#A9BCC6;font-weight:700;pointer-events:none;}
.map-pin{cursor:default;}
.pin-lbl{font-size:9.5px;font-weight:700;fill:#000;paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none;}
.map-key{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--sub);padding:12px 4px 0;}
.map-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;}
.map-key i.pin{border-radius:50%;background:#fff;border:2px solid #000;box-shadow:inset 0 0 0 2px var(--red);}
@keyframes pulseAttn{0%,100%{opacity:1;}50%{opacity:.5;}}
.map-region.is-attn{animation:pulseAttn 1.8s ease-in-out infinite;}
.map-legend{max-height:none;}
.map-row{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line);}
.map-row:last-child{border-bottom:none;}
.map-row:hover{background:#fff;}
.map-row .dot{width:9px;height:9px;border-radius:2px;flex:none;}
.map-row .nm{flex:1;font-size:12.5px;font-weight:700;}
.map-row .tn{font-size:11.5px;color:var(--sub);margin-right:4px;white-space:nowrap;}
.map-row .pc{font-size:12.5px;font-weight:800;width:48px;text-align:right;}
.map-row.muted .nm,.map-row.muted .pc{color:var(--sub);font-weight:600;}
.dmap .map-svg{max-height:560px;width:100%;}
.dmap .map-lbl,.dmap .map-pct{stroke-width:.25em;}
.dmap .pin-lbl{font-weight:700;fill:#000;paint-order:stroke;stroke:#fff;stroke-width:.25em;}
.dmap .map-legend{max-height:560px;overflow:auto;}
.map-row.is-sel{background:#fff;box-shadow:inset 3px 0 0 #000;}
.map-region.is-sel{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));}
.map-row .so{font-size:12px;font-weight:700;width:56px;text-align:right;flex:none;color:var(--gray-d);}
.map-row.map-head{border-bottom:1px solid var(--line);padding-top:0;}
.map-row.map-head span{font-size:10.5px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;}
.map-row.map-head:hover{background:none;}
.mh-so{text-align:right;font-weight:700;font-size:12px;color:#C9D3D9;}
.mh-row.mh-head{font-size:10px;font-weight:700;color:#7F8E97;text-transform:uppercase;letter-spacing:.04em;padding-top:2px;}
.mh-row.mh-head span{color:#7F8E97;}
.mh-row.mh-head:hover{background:none;}
.rate-row .rso{width:62px;text-align:right;font-size:12px;font-weight:700;flex:none;color:var(--gray-d);}
.rate-row .rso small{font-size:9.5px;font-weight:700;color:var(--sub);}
.pt-sub{float:right;font-size:10.5px;font-weight:600;color:var(--sub);text-transform:none;letter-spacing:0;}
.map-tip{position:fixed;pointer-events:none;background:#000;color:#fff;font-size:12px;padding:7px 10px;border-radius:2px;z-index:90;display:none;line-height:1.45;}












@keyframes growX{from{transform:scaleX(0);}to{transform:scaleX(1);}}













.kpi-row,.dp-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.dp-grid4{margin-bottom:34px;}
.kpi{background:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px;}
a.kpi:hover{background:#FAFAFA;}
.kpi-ic{width:34px;height:34px;flex:none;border-radius:50%;background:var(--gray-l);display:flex;align-items:center;justify-content:center;padding:7px;}
.kpi-ic svg{width:100%;height:100%;display:block;}
.kpi .lbl{font-size:11.5px;color:var(--sub);margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em;}
.kpi .val{font-size:20px;font-weight:800;}
.kpi .val small{font-size:11.5px;color:var(--sub);font-weight:400;}
.kpi .hint{font-size:11px;color:var(--sub);margin-top:3px;}

.note{margin-top:40px;font-size:11.5px;color:var(--sub);border-top:1px solid var(--line);padding-top:16px;line-height:1.6;}
.note b{color:var(--black);}

/* ---------- Detail pages ---------- */
.crumb{font-size:12px;color:var(--sub);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:18px;}
.crumb a:hover{color:var(--black);}
.crumb .sep{margin:0 6px;color:var(--line);}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:14px;}
.dp-head .nm{font-size:28px;font-weight:800;letter-spacing:-.01em;}
.dp-head .sub{font-size:13px;color:var(--sub);margin-top:4px;font-weight:600;}
.badges{display:flex;gap:10px;flex-wrap:wrap;}
.dp-badge{font-size:13px;font-weight:800;padding:8px 16px;border-radius:2px;background:var(--gray-l);white-space:nowrap;}
.dp-badge.good{background:var(--green-bg);color:var(--green);}
.dp-badge.mid{background:var(--amber-bg);color:var(--amber);}
.dp-badge.bad{background:var(--red-bg);color:var(--red);}
.dp-review{font-size:13px;color:var(--gray-d);background:var(--gray-l);padding:13px 16px;border-radius:2px;margin-bottom:28px;line-height:1.55;}
.dp-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;margin-bottom:34px;}
.dp-cols.even{grid-template-columns:1fr 1fr;}
.dp-panel{border:1px solid var(--line);border-radius:2px;padding:20px 22px;min-width:0;}
.dp-panel .pt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.dp-panel .empty{font-size:12.5px;color:var(--sub);}

.bars{display:flex;align-items:flex-end;gap:8px;height:170px;}
.bars .bcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;}
.bars .bcol.click{cursor:pointer;}
.bars .bcol.click:hover .b{filter:brightness(1.15);}
.bars .bcol.sel .blabel{color:var(--black);}
.bars .bwrap{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;}
@keyframes growUp{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.bars .b{width:60%;background:var(--black);border-radius:2px 2px 0 0;min-height:3px;transform-origin:bottom center;animation:growUp .5s cubic-bezier(.2,.8,.2,1) both;}
.bars .tick{position:absolute;left:12%;right:12%;border-top:2px dashed var(--gray-d);pointer-events:none;}
.bars .blabel{font-size:10.5px;color:var(--sub);margin-top:8px;font-weight:700;white-space:nowrap;}
.bars .bval{font-size:10.5px;font-weight:700;margin-bottom:4px;white-space:nowrap;}
.bars .bpct{font-size:10px;font-weight:800;margin-bottom:2px;}
.trend-legend{display:flex;gap:16px;margin-top:14px;font-size:11px;color:var(--sub);flex-wrap:wrap;}
.trend-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle;}
.trend-legend i.dash{width:14px;height:0;border-top:2px dashed var(--gray-d);border-radius:0;}
.trend-detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--gray-d);min-height:18px;}

.rate-row{display:flex;align-items:center;gap:12px;margin-bottom:13px;}
.rate-row:last-child{margin-bottom:0;}
a.rate-row:hover .rl{color:var(--red);}
.rate-row .rl{width:150px;font-size:12.5px;color:var(--gray-d);font-weight:600;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rate-row .rtrack{flex:1;height:6px;background:var(--gray-l);border-radius:3px;overflow:hidden;}
.rate-row .rfill{height:100%;transform-origin:left;animation:growX .6s cubic-bezier(.2,.8,.2,1) both;}
.rate-row .rv{width:52px;text-align:right;font-size:12.5px;font-weight:800;flex:none;}

.prog-row{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:34px;flex-wrap:wrap;}
.prog-cell{flex:1;min-width:150px;background:#fff;padding:16px 18px;}
.prog-cell .pl{font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;}
.prog-cell .pv{font-size:18px;font-weight:800;}
.prog-cell .pd{font-size:11px;color:var(--sub);margin-top:4px;}

.tgt-panel{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:2px;padding:20px 22px;margin-bottom:34px;flex-wrap:wrap;gap:18px;}
.tgt-item .tl{font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
.tgt-item .tv{font-size:19px;font-weight:800;}
.tgt-item .tv.bad{color:var(--red);}
.tgt-item .tv.good{color:var(--green);}

/* tables */
.tbl-wrap{border:1px solid var(--line);border-radius:2px;overflow:auto;margin-bottom:34px;}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.tbl th{background:var(--gray-l);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.03em;color:var(--sub);text-align:left;padding:10px 12px;white-space:nowrap;position:sticky;top:0;cursor:pointer;user-select:none;}
.tbl th.num,.tbl td.num{text-align:right;}
.tbl th:hover{color:var(--black);}
.tbl th .arr{font-size:8px;margin-left:3px;}
.tbl td{padding:10px 12px;border-top:1px solid var(--line);white-space:nowrap;}
.tbl tr.go{cursor:pointer;}
.tbl tr.go:hover td{background:#FAFAFA;}
.tbl td.rank{font-weight:800;width:44px;}
.tbl td.name{font-weight:700;white-space:normal;min-width:150px;}
.tbl td.name small{display:block;color:var(--sub);font-weight:400;font-size:11px;}
.tbl td.pc{font-weight:800;}
.tbl td.note-c{color:var(--sub);white-space:normal;min-width:200px;}
.tbl tr.total td{font-weight:800;background:var(--gray-l);}





.foot{border-top:1px solid var(--line);padding:16px 40px 28px;font-size:11.5px;color:var(--sub);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.foot a{color:var(--red);font-weight:700;cursor:pointer;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.page-fade{animation:fadeInUp .35s ease both;}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  header{padding:0 20px;flex-wrap:wrap;}
  nav{margin-left:0;order:3;width:100%;overflow-x:auto;}
  .headerright{padding:8px 0;}
  .wrap{padding:24px 20px 48px;}
  .filter-strip,.foot{padding-left:20px;padding-right:20px;}
  
  .mega,.mega-eksp,.filter-panel,.dropdown{position:fixed;left:16px !important;right:16px !important;width:auto;top:118px;max-height:calc(100vh - 140px);overflow:auto;}
  nav{white-space:nowrap;scrollbar-width:none;}
  nav::-webkit-scrollbar{display:none;}
}
@media(max-width:860px){
  .map-wrap{grid-template-columns:1fr;}
  .dp-cols,.dp-cols.even{grid-template-columns:1fr;}
  
  .kpi-row,.dp-grid4{grid-template-columns:1fr 1fr;}
  .hero{height:300px;}
  
  .fp-row{grid-template-columns:1fr;}
}
@media(max-width:560px){
  header{padding:0 16px;}
  .brand .name{display:none;}
  .search input{width:140px;}
  .daylabel{display:none;}
  nav{font-size:12px;}
  .navitem>.navbtn{padding:10px 9px;}
  .wrap{padding:20px 16px 40px;}
  .filter-strip,.foot{padding-left:16px;padding-right:16px;}
  
  
  .attn{flex-wrap:wrap;}
  .attn .cta{margin-left:0;}
  .bars .bval{font-size:9px;}
}

/* ---------- Compare + drill-down ---------- */
.pt-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.cmp-sel{font-size:12px;font-weight:600;padding:6px 8px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--black);max-width:220px;text-transform:none;letter-spacing:0;}
.bars.pair .bwrap{gap:3px;}
.bars.pair .b{width:38%;}
.bars .b.b2{background:#BCC3C5;}
.bars .bcmp{font-size:9.5px;font-weight:800;margin-bottom:2px;white-space:nowrap;}
.bars.dense{gap:3px;}
.bars.dense .bval,.bars.dense .bpct,.bars.dense .bcmp{visibility:hidden;}
.bars.dense .bcol:hover .bval,.bars.dense .bcol:hover .bpct,.bars.dense .bcol:hover .bcmp,
.bars.dense .bcol:last-child .bval,.bars.dense .bcol:last-child .bpct,.bars.dense .bcol:last-child .bcmp,
.bars.dense .bcol.sel .bval,.bars.dense .bcol.sel .bpct{visibility:visible;}
.bars.dense .blabel{font-size:9.5px;}
.bars .bcol.sel .b{outline:2px solid #000;outline-offset:1px;}
.main-chart{margin-bottom:34px;}
.main-chart .bars{height:220px;}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;animation:dropIn .15s ease both;}
.modal{background:#fff;width:min(1040px,100%);max-height:88vh;overflow:auto;border-top:4px solid var(--red);box-shadow:0 24px 60px rgba(0,0,0,.35);padding:20px 24px 24px;}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;}
.modal-title{font-size:19px;font-weight:800;}
.modal-sub{font-size:12px;color:var(--sub);margin-top:3px;}
.modal-x{border:0;background:var(--gray-l);width:34px;height:34px;font-size:22px;line-height:1;cursor:pointer;border-radius:2px;flex:none;}
.modal-x:hover{background:var(--line);}
.modal .tbl-wrap{max-height:52vh;}
@media(max-width:560px){.modal{padding:16px;}.modal-title{font-size:16px;}.cmp-sel{max-width:150px;}}

/* ---------- Map hero (home) ---------- */
.map-hero{position:relative;background:#0F1A21;color:#fff;overflow:hidden;}
.mh-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,26,33,.97) 0%,rgba(15,26,33,.88) 42%,rgba(15,26,33,.55) 100%),url('assets/hero-logistik.jpg') center/cover;opacity:1;}
.mh-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 45%,rgba(245,51,63,.10),transparent 55%);}
.mh-inner{position:relative;display:grid;grid-template-columns:minmax(340px,1fr) minmax(0,1.25fr);gap:28px;max-width:1360px;margin:0 auto;padding:34px 40px 30px;align-items:center;}
.mh-left .eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FF8A92;margin-bottom:10px;}
.mh-left h1{font-size:25px;font-weight:800;line-height:1.35;margin:0 0 20px;letter-spacing:-.01em;}
.mh-left h1 b{color:#FFB4B8;}
.mh-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);margin-bottom:20px;}
.mh-chip{background:rgba(15,26,33,.75);padding:11px 12px;}
.mh-chip .l{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#9FB0BA;margin-bottom:5px;}
.mh-chip .v{font-size:19px;font-weight:800;}
.mh-chip .v small{font-size:11px;color:#9FB0BA;font-weight:400;}
.mh-chip .s{font-size:10.5px;color:#9FB0BA;margin-top:3px;}
.mh-list{border-top:1px solid rgba(255,255,255,.14);}
.mh-lh{display:flex;justify-content:space-between;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#9FB0BA;padding:10px 2px 4px;font-weight:700;}
.mh-lh a{color:#FF8A92;text-transform:none;letter-spacing:0;font-size:12px;}
.mh-row{display:grid;grid-template-columns:22px 1fr 70px 50px 56px;gap:8px;align-items:center;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;}
.mh-row:hover{background:rgba(255,255,255,.06);}
.mh-rk{color:#9FB0BA;font-weight:800;font-size:12px;}
.mh-nm{font-weight:700;position:relative;padding-bottom:5px;}
.mh-nm i{position:absolute;left:0;bottom:0;height:2px;border-radius:2px;opacity:.85;}
.mh-tn{color:#C9D3D9;text-align:right;font-size:12px;}
.mh-pc{text-align:right;font-weight:800;}
.mh-key{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#9FB0BA;margin-top:14px;}
.mh-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;}
.mh-key i.pin{border-radius:50%;background:#fff;border:2px solid #000;box-shadow:inset 0 0 0 2px var(--red);}
.mh-map{position:relative;}
.mh-map .map-svg{filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));}
.mh-hint{position:absolute;right:6px;bottom:2px;font-size:11px;color:#7F929D;}
.map-hero .sea-lbl{fill:#4C6472;}
.map-hero .map-lbl.dim{fill:#7F8E97;}
.map-hero .map-lbl.out{fill:#fff;stroke:rgba(0,0,0,.7);}
.map-hero .map-pct.out{stroke:rgba(0,0,0,.7);}
.map-hero .pin-lbl{fill:#fff;stroke:#0F1A21;}
.map-hero .map-region.live:hover,.map-hero .map-region.hl{filter:brightness(1.18) drop-shadow(0 0 10px rgba(255,255,255,.35));stroke:#fff;stroke-width:1.8;}
@media(max-width:980px){
  .mh-inner{grid-template-columns:1fr;padding:24px 20px;}
  .mh-map{order:-1;}
  .mh-left h1{font-size:21px;}
}
@media(max-width:560px){
  .mh-inner{padding:18px 16px;}
  .mh-chips{grid-template-columns:1fr 1fr;}
  .mh-hint{position:static;text-align:center;margin-top:4px;}
}

/* ---------- Navigation v2: one place per function ---------- */
.dd-list{min-width:300px;padding:16px 18px;}
.dd-hint{font-size:11.5px;color:var(--sub);margin-top:10px;line-height:1.5;}
.filter-strip{position:sticky;top:67px;z-index:45;}
.fs-summary{display:flex;gap:8px;flex-wrap:wrap;align-items:center;width:100%;}
.filter-strip .edit{background:#fff;border:1px solid var(--red);padding:3px 10px;border-radius:2px;}
.filter-strip.open .edit{background:var(--red);color:#fff;}
.filter-strip .filter-panel{left:auto;right:40px;top:100%;z-index:60;}
.filter-strip.open .filter-panel{display:block;animation:dropIn .14s ease both;}
@media(max-width:1100px){
  .filter-strip{position:relative;top:auto;}
  .filter-strip .filter-panel{position:fixed;left:16px !important;right:16px !important;width:auto;max-height:calc(100vh - 160px);overflow:auto;}
}

/* ---------- Destination tree ---------- */
.tree-tools{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--sub);margin:-6px 0 8px;}
.tree-tools a{color:var(--red);font-weight:700;cursor:pointer;}
table.tree th{cursor:default;}
table.tree tr.tr-hide{display:none;}
table.tree tr.has-kids{cursor:pointer;}
table.tree tr.has-kids:hover td{background:#FAFAFA;}
table.tree tr.lv0 td{font-weight:700;}
table.tree tr.lv0 td.name{font-weight:800;}
table.tree tr.lv1 td{background:#FCFCFC;}
table.tree tr.lv2 td,table.tree tr.lv3 td{background:#F7F8F8;font-size:12px;}
table.tree td.name{white-space:normal;min-width:240px;}
table.tree td.name small{display:block;color:var(--sub);font-weight:400;font-size:11px;margin-left:20px;}
.caret-t{display:inline-block;width:20px;color:var(--red);font-size:11px;}
.t-cnt{margin-left:8px;font-size:10.5px;color:var(--sub);font-weight:600;background:var(--gray-l);padding:1px 6px;border-radius:2px;white-space:nowrap;}
.t-unk{color:var(--sub);font-style:italic;font-weight:600;}
.t-go{display:inline-block;width:24px;height:24px;line-height:22px;text-align:center;border:1px solid var(--line);border-radius:2px;color:var(--red);font-weight:800;}
.t-go:hover{background:var(--red);color:#fff;border-color:var(--red);}
.search-results{width:380px;}
.search-results a{flex-direction:column;gap:2px;line-height:1.35;}
.search-results a small{white-space:normal;}

/* ---------- Period picker ---------- */
.fp-note{font-size:12.5px;color:var(--gray-d);background:var(--gray-l);padding:9px 10px;border-radius:2px;}
.fp-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.fp-dates label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.03em;}
.fp-dates input{font-size:13px;padding:7px 8px;border:1px solid var(--line);border-radius:2px;font-family:inherit;color:var(--black);}