#dwt-ui-root { color: #17384b; font-family: "Segoe UI Variable", "Segoe UI", sans-serif; }
#dwt-ui-root button, #dwt-ui-root input, #dwt-ui-root select { font: inherit; }
#dwt-ui-root button:focus-visible, #dwt-ui-root input:focus-visible, #dwt-ui-root select:focus-visible, #dwt-ui-root summary:focus-visible {
  outline: 3px solid rgba(8, 127, 140, .34);
  outline-offset: 2px;
}

.dwt-mode-toggle {
  position: fixed;
  z-index: 8;
  top: 12px;
  right: 12px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid #aac8cb;
  border-radius: 10px;
  color: #17384b;
  background: rgba(250, 253, 252, .96);
  box-shadow: 0 12px 30px -18px rgba(31, 74, 88, .5);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}
.dwt-mode-toggle span { width: 10px; height: 10px; border: 2px solid #087f8c; border-radius: 50%; }
.dwt-mode-toggle[aria-pressed="true"] { color: white; border-color: #087f8c; background: #087f8c; }
.dwt-mode-toggle[aria-pressed="true"] span { border-color: white; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }

.dwt-drawer {
  position: fixed;
  z-index: 7;
  top: 56px;
  right: 12px;
  bottom: 12px;
  width: 310px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(197, 216, 216, .94);
  border-radius: 14px;
  background: rgba(250, 253, 252, .97);
  box-shadow: 0 18px 50px -24px rgba(31, 74, 88, .4);
  backdrop-filter: blur(18px) saturate(1.05);
}
.dwt-drawer[hidden] { display: none; }
.dwt-content { padding: 15px 16px 18px; }
.dwt-content-head, .dwt-port-head { margin-bottom: 12px; }
.dwt-content h2, .dwt-port-head h2 { margin: 2px 0; font-size: 20px; letter-spacing: -.035em; }
.dwt-global-title { font-size: 18px !important; line-height: 1.25; }
.dwt-content h3 { margin: 18px 0 8px; font-size: 13px; }
.dwt-eyebrow { margin: 0; color: #087f8c; font: 700 11px/1.3 Consolas, monospace; letter-spacing: .12em; }
.dwt-outside-port { margin: 0 0 12px; padding: 9px 11px; border: 1px solid #d8c78e; border-radius: 8px; color: #735c12; background: #fff9df; font-size: 12px; }

.dwt-filters {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
  margin: 0 -16px 14px;
  padding: 10px 16px;
  border-top: 1px solid #d8e3e4;
  border-bottom: 1px solid #c9d8d9;
  background: rgba(244, 249, 248, .98);
}
.dwt-field { display: grid; gap: 5px; color: #617783; font-size: 11px; font-weight: 700; }
.dwt-field select, .dwt-search input { min-height: 32px; border: 1px solid #bfd0d2; border-radius: 7px; color: #17384b; background: #fff; }
.dwt-field select { padding: 0 8px; }
.dwt-type-filter { position: relative; align-self: end; }
.dwt-type-filter summary { min-height: 32px; display: flex; justify-content: space-between; align-items: center; padding: 0 9px; border: 1px solid #bfd0d2; border-radius: 7px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.dwt-type-options { position: absolute; top: 41px; right: 0; width: 260px; max-height: 280px; overflow: auto; padding: 10px; border: 1px solid #bfd0d2; border-radius: 10px; background: #fff; box-shadow: 0 15px 35px -20px #17384b; }
.dwt-type-options label { display: block; padding: 6px; font-size: 12px; }
.dwt-vessel-toggle { grid-column: 1 / -1; min-height: 30px; display: flex; align-items: center; gap: 7px; padding: 4px 8px; border: 1px solid #bfd0d2; border-radius: 7px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.dwt-vessel-toggle input { margin: 0; accent-color: #17384b; }
.dwt-vessel-toggle span { width: 8px; height: 8px; border: 1px solid #fff; border-radius: 50%; background: #17384b; box-shadow: 0 0 0 1px #17384b; }

.dwt-vessel-popup { min-width: 210px; color: #17384b; font-family: "Segoe UI Variable", "Segoe UI", sans-serif; }
.dwt-vessel-popup > strong { display: block; margin-bottom: 8px; font-size: 14px; }
.dwt-vessel-popup dl { margin: 0; }
.dwt-vessel-popup dl div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 3px 0; font-size: 11px; }
.dwt-vessel-popup dt { color: #617783; }
.dwt-vessel-popup dd { margin: 0; overflow-wrap: anywhere; font-weight: 650; }

.dwt-kpis { display: grid; grid-template-columns: 1.4fr .8fr .8fr; border: 1px solid #c9d8d9; border-radius: 12px; overflow: hidden; }
.dwt-kpis div { min-width: 0; padding: 9px; border-right: 1px solid #d8e3e4; }
.dwt-kpis div:last-child { border-right: 0; }
.dwt-kpis strong, .dwt-kpis span { display: block; }
.dwt-kpis strong { overflow: hidden; font: 700 15px/1.2 Consolas, monospace; text-overflow: ellipsis; }
.dwt-kpis span { margin-top: 4px; color: #617783; font-size: 10px; }

.dwt-top-ports { max-height: min(46dvh, 460px); margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; counter-reset: port; border-bottom: 1px solid #d8e3e4; }
.dwt-top-ports li { counter-increment: port; border-top: 1px solid #d8e3e4; }
.dwt-top-ports button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 9px 4px; border: 0; text-align: left; background: transparent; cursor: pointer; }
.dwt-top-ports button:hover { background: #edf7f6; }
.dwt-top-ports button span:first-child::before { content: counter(port, decimal-leading-zero); margin-right: 9px; color: #799097; font: 11px Consolas, monospace; }
.dwt-top-ports strong { margin-right: 6px; }
.dwt-top-ports button span:last-child { text-align: right; font: 700 11px/1.35 Consolas, monospace; }
.dwt-top-ports small { color: #617783; font-weight: 400; }

.dwt-port-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.dwt-port-head > button { padding: 5px 7px; border: 0; border-radius: 7px; background: #edf5f4; cursor: pointer; font-size: 11px; }
.dwt-port-head p:last-child { margin: 3px 0 0; color: #617783; font-size: 12px; }
.dwt-focus-port { color: #087f8c; font-weight: 700; }
.dwt-membership-fact { display: flex; align-items: center; gap: 7px; margin: -5px 0 12px; color: #3c626b; font-size: 12px; }
.dwt-membership-fact span { width: 8px; height: 8px; border-radius: 50%; background: #087f8c; }

.dwt-section-title { display: flex; align-items: baseline; justify-content: space-between; }
.dwt-section-title h3 { margin-bottom: 8px; }
.dwt-section-title button { border: 0; color: #087f8c; background: transparent; cursor: pointer; font-size: 11px; }
.dwt-bar { width: 100%; display: grid; grid-template-columns: 82px 1fr 62px; gap: 7px; align-items: center; padding: 5px 3px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; }
.dwt-bar:hover, .dwt-bar.active { background: #eaf5f4; }
.dwt-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.dwt-bar-track { height: 7px; overflow: hidden; border-radius: 999px; background: #dbe8e8; }
.dwt-bar-track i { display: block; height: 100%; border-radius: inherit; background: #087f8c; }
.dwt-bar strong { text-align: right; font: 700 10px Consolas, monospace; }
.dwt-chart-note { margin: 5px 0 0; color: #799097; font-size: 10px; }

.dwt-search { display: grid; gap: 5px; color: #617783; font-size: 11px; font-weight: 700; }
.dwt-search input { padding: 0 10px; }
.dwt-vessel-list { margin-top: 10px; }
.dwt-vessel-card { padding: 10px 0; border-top: 1px solid #d8e3e4; }
.dwt-vessel-title { display: flex; justify-content: space-between; gap: 10px; }
.dwt-vessel-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.dwt-vessel-title span { color: #087f8c; white-space: nowrap; font: 700 11px Consolas, monospace; }
.dwt-vessel-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin: 9px 0 0; }
.dwt-vessel-card dl div { display: grid; grid-template-columns: auto 1fr; gap: 6px; font-size: 10px; }
.dwt-vessel-card dl .wide { grid-column: 1 / -1; }
.dwt-vessel-card dt { color: #799097; }
.dwt-vessel-card dd { min-width: 0; margin: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, monospace; }
.dwt-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid #d8e3e4; }
.dwt-pagination button { padding: 6px 12px; border: 1px solid #bfd0d2; border-radius: 7px; background: #fff; cursor: pointer; }
.dwt-pagination button:disabled { opacity: .45; cursor: default; }
.dwt-pagination span { font: 11px Consolas, monospace; }

.dwt-disclosure { padding: 10px 14px 14px; border-top: 1px solid #c9d8d9; color: #617783; font-size: 9px; line-height: 1.5; }
.dwt-disclosure span { font-family: Consolas, monospace; }
.dwt-empty { padding: 16px 2px; color: #617783; font-size: 12px; }
.dwt-message { min-height: 220px; display: grid; place-content: center; gap: 10px; padding: 24px; text-align: center; }
.dwt-message p { max-width: 310px; margin: 0; color: #617783; font-size: 12px; }
.dwt-message button { justify-self: center; padding: 8px 14px; border: 1px solid #087f8c; border-radius: 8px; color: white; background: #087f8c; cursor: pointer; }
.dwt-spinner { justify-self: center; width: 22px; height: 22px; border: 3px solid #c9d8d9; border-top-color: #087f8c; border-radius: 50%; animation: dwt-spin .7s linear infinite; }
@keyframes dwt-spin { to { transform: rotate(360deg); } }

body:has(#dwt-drawer:not([hidden])) .maplibregl-ctrl-top-right,
body:has(#dwt-drawer:not([hidden])) .maplibregl-ctrl-bottom-right { right: 334px; }
body:has(#dwt-drawer:not([hidden])) .floating-status { right: 170px; }
body:has(#dwt-drawer:not([hidden])) .overview-button { right: 334px; }

@media (max-width: 1099px) {
  .dwt-mode-toggle { top: 10px; right: 10px; }
  .dwt-drawer { top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; max-height: min(64dvh, 650px); border-radius: 16px; }
  body:has(#dwt-drawer:not([hidden])) .maplibregl-ctrl-top-right,
  body:has(#dwt-drawer:not([hidden])) .maplibregl-ctrl-bottom-right { right: 0; }
  body:has(#dwt-drawer:not([hidden])) .floating-status { right: 170px; }
  body:has(#dwt-drawer:not([hidden])) .overview-button { right: 10px; }
}

@media (max-width: 520px) {
  .dwt-filters { grid-template-columns: 1fr 1fr; }
  .dwt-content { padding: 16px; }
  .dwt-kpis strong { font-size: 14px; }
  .dwt-port-head { grid-template-columns: auto 1fr; }
  .dwt-focus-port { grid-column: 2; justify-self: start; }
  .dwt-bar { grid-template-columns: 80px 1fr 60px; }
}

@media (prefers-reduced-motion: reduce) { .dwt-spinner { animation: none; } }