/*!
 * Copyright (c) 2026 Tekantis Limited. All rights reserved.
 * Icon Map (https://www.icon-map.com) is a trademark of Tekantis Limited.
 * Proprietary and confidential. This file and the methods in it are not licensed for copying, modification,
 * reuse or redistribution, in whole or in part, without written permission from Tekantis Limited.
 */
/* the logistics page (dc-page.js); the cards, bars and panel come from maritime.css and pro-page.css */
.sol-hero--logistics .sol-hero__shade { background: linear-gradient(90deg, rgba(10, 18, 30, 0.82) 0%, rgba(10, 18, 30, 0.55) 34%, rgba(10, 18, 30, 0) 62%); }
.dc-board { display: grid; gap: 6px; margin: 6px 0 10px; }
.dc-run { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.dc-run__id { font-weight: 700; color: inherit; white-space: nowrap; }
.dc-run__doors { display: flex; flex-wrap: wrap; gap: 2px; }
.dc-run__doors i { width: 6px; height: 10px; border-radius: 1.5px; background: rgba(148, 163, 184, 0.35); }
.dc-run__doors i.is-busy { background: #f2a900; }
.dc-run b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- the route and fuel optimization showcase (dc-routes.js) */
.rt-ops .pp-mapframe { position: relative; }
.rt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rt-plan { position: absolute; top: 12px; left: 12px; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18); z-index: 2; }
.rt-plan button { border: 0; background: transparent; color: #334155; font: 600 13px/1 inherit; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.rt-plan button[aria-pressed="true"] { background: #0f172a; color: #fff; }
.rt-plan button:focus-visible, .rt-clock button:focus-visible, .rt-bar:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.rt-clock { position: absolute; left: 12px; right: 12px; bottom: 34px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18); z-index: 2; font-size: 13px; color: #1e293b; }
.rt-clock__play { border: 0; border-radius: 8px; background: #0f172a; color: #fff; font: 600 12px/1 inherit; padding: 7px 10px; cursor: pointer; min-width: 56px; }
.rt-clock__time { flex: 1; display: flex; }
.rt-clock__time input { width: 100%; accent-color: #0f172a; }
.rt-clock b { font-variant-numeric: tabular-nums; min-width: 42px; }
.rt-clock__note { color: #64748b; white-space: nowrap; }
.rt-kpis .sol-kpi__value small { font-size: 0.6em; font-weight: 600; margin-left: 2px; color: #64748b; }
.rt-delta { display: block; font-size: 11.5px; font-weight: 600; color: #64748b; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rt-delta.is-good { color: #047857; }
.rt-delta.is-bad { color: #b91c1c; }
.rt-wf { display: grid; gap: 4px; margin: 4px 0 6px; }
.rt-wf__row { display: grid; grid-template-columns: minmax(110px, 44%) 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.rt-wf__label { color: #334155; line-height: 1.2; }
.rt-wf__track { position: relative; height: 12px; border-radius: 3px; background: #f1f5f9; }
.rt-wf__bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.rt-wf__bar--total { background: #334155; }
.rt-wf__bar--step { background: #10b981; }
.rt-wf__bar--total::before { content: ""; position: absolute; left: -1px; top: -2px; bottom: -2px; width: 3px; background: repeating-linear-gradient(180deg, #fff 0 2px, transparent 2px 4px); }
.rt-wf__row b { font-variant-numeric: tabular-nums; font-weight: 700; color: #0f172a; }
.rt-bars { display: grid; gap: 3px; max-height: 210px; overflow-y: auto; padding-right: 4px; margin: 4px 0 6px; }
.rt-bar { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 8px; border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; font: 12px/1.2 inherit; color: #1e293b; cursor: pointer; text-align: left; }
.rt-bar:hover, .rt-bar.is-on { background: #f1f5f9; }
.rt-bar__id { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.rt-bar__id i, .rt-card__head i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rt-bar__track { height: 9px; border-radius: 3px; background: #f1f5f9; overflow: hidden; }
.rt-bar__track i { display: block; height: 100%; border-radius: 3px; }
.rt-bar b { font-variant-numeric: tabular-nums; }
.rt-card { border: 1px solid var(--pp-border, #e2e8f0); border-radius: 12px; padding: 10px 12px; }
.rt-card__head { display: flex; align-items: center; gap: 8px; }
.rt-card__head span { margin-left: auto; color: #64748b; font-variant-numeric: tabular-nums; font-size: 12px; }
.rt-card p { margin: 4px 0 6px; font-size: 12px; color: #475569; }
.rt-stops { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 12px; max-height: 180px; overflow-y: auto; }
.rt-stops b { font-variant-numeric: tabular-nums; }
.rt-stops span { color: #64748b; }
.rt-stops li.is-late b { color: #b91c1c; }
@media (max-width: 640px) {
  .rt-plan { top: 8px; left: 8px; }
  .rt-plan button { padding: 7px 9px; font-size: 12px; }
  .rt-clock { left: 8px; right: 8px; bottom: 48px; gap: 6px; padding: 6px 8px; }
  .rt-clock__note { display: none; }
}