/* ============================================================================
   Cargo Planner — Performance tab. All rules scoped under #cpViewDelays (+ the
   body-level tooltip .cpp-tipbox). Own token set (--cpp-*), theme-aware via
   [data-theme] and prefers-color-scheme, marine palette to match the app.
   ============================================================================ */
#cpViewDelays{
  --cpp-ground:#eceff4; --cpp-card:#ffffff; --cpp-card2:#f5f8fb; --cpp-ink:#12283f; --cpp-muted:#5f7288; --cpp-faint:#8a9bb0;
  --cpp-line:#e3e9f0; --cpp-line2:#eef2f7; --cpp-brand:#0a5989; --cpp-brand2:#0d6db0; --cpp-brandsoft:#e7f0f7;
  --cpp-good:#15803d; --cpp-good-bg:#e7f6ec; --cpp-warn:#b45309; --cpp-warn-bg:#fbf0dd; --cpp-bad:#c2410c; --cpp-bad-bg:#fbeae0; --cpp-crit:#b91c1c; --cpp-crit-bg:#fbe7e7;
  --cpp-shadow:0 1px 2px rgba(20,50,90,.05); --cpp-shadow2:0 1px 3px rgba(20,50,90,.07),0 6px 20px rgba(20,50,90,.06);
  --cpp-grid:#eaeff5;
}
.cpp-tipbox{
  --cpp-card:#ffffff; --cpp-ink:#12283f; --cpp-muted:#5f7288; --cpp-line:#e3e9f0;
  --cpp-shadow2:0 1px 3px rgba(20,50,90,.07),0 6px 20px rgba(20,50,90,.06);
}
:root[data-theme="dark"] #cpViewDelays, :root[data-theme="dark"] .cpp-tipbox{
  --cpp-ground:#0b111d; --cpp-card:#151e2e; --cpp-card2:#1a2334; --cpp-ink:#e9eff7; --cpp-muted:#94a6bc; --cpp-faint:#647890;
  --cpp-line:rgba(255,255,255,.075); --cpp-line2:rgba(255,255,255,.045); --cpp-brand:#43a0d8; --cpp-brand2:#5cb2e2; --cpp-brandsoft:rgba(67,160,216,.13);
  --cpp-good:#4ade80; --cpp-good-bg:rgba(34,197,94,.14); --cpp-warn:#eab35a; --cpp-warn-bg:rgba(224,160,32,.14); --cpp-bad:#fb8c4f; --cpp-bad-bg:rgba(251,140,60,.13); --cpp-crit:#f87171; --cpp-crit-bg:rgba(248,113,113,.14);
  --cpp-shadow:0 1px 2px rgba(0,0,0,.28); --cpp-shadow2:0 1px 3px rgba(0,0,0,.32),0 8px 22px rgba(0,0,0,.28); --cpp-grid:rgba(255,255,255,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #cpViewDelays, :root:not([data-theme="light"]) .cpp-tipbox{
    --cpp-ground:#0b111d; --cpp-card:#151e2e; --cpp-card2:#1a2334; --cpp-ink:#e9eff7; --cpp-muted:#94a6bc; --cpp-faint:#647890;
    --cpp-line:rgba(255,255,255,.075); --cpp-line2:rgba(255,255,255,.045); --cpp-brand:#43a0d8; --cpp-brand2:#5cb2e2; --cpp-brandsoft:rgba(67,160,216,.13);
    --cpp-good:#4ade80; --cpp-good-bg:rgba(34,197,94,.14); --cpp-warn:#eab35a; --cpp-warn-bg:rgba(224,160,32,.14); --cpp-bad:#fb8c4f; --cpp-bad-bg:rgba(251,140,60,.13); --cpp-crit:#f87171; --cpp-crit-bg:rgba(248,113,113,.14);
    --cpp-shadow:0 1px 2px rgba(0,0,0,.28); --cpp-shadow2:0 1px 3px rgba(0,0,0,.32),0 8px 22px rgba(0,0,0,.28); --cpp-grid:rgba(255,255,255,.06);
  }
}

#cpViewDelays{ color:var(--cpp-ink); }
#cpViewDelays .cpp{ max-width:1160px; margin:0 auto; }
#cpViewDelays.cpp-loading, #cpViewDelays .cpp-loading{ opacity:.55; pointer-events:none; }
#cpViewDelays h2,#cpViewDelays h3{ font-family:'Space Grotesk',system-ui,sans-serif; margin:0; }
#cpViewDelays .num{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

#cpViewDelays .cpp-toolbar{ display:flex; flex-direction:column; align-items:stretch; gap:11px; margin:6px 0 4px; padding:11px 13px; background:var(--cpp-card); border:1px solid var(--cpp-line); border-radius:12px; box-shadow:var(--cpp-shadow); }
#cpViewDelays .cpp-toolrow{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
#cpViewDelays .cpp-carctl{ display:flex; align-items:flex-start; gap:11px; flex-wrap:wrap; padding-bottom:11px; border-bottom:1px solid var(--cpp-line2); }
#cpViewDelays .cpp-carctl-lab{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cpp-faint); font-weight:700; padding-top:6px; white-space:nowrap; }
#cpViewDelays .cpp-selchips{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
#cpViewDelays .cpp-selchip{ appearance:none; font:inherit; display:inline-flex; align-items:center; gap:6px; background:var(--cpp-card2); border:1px solid var(--cpp-line); border-radius:999px; padding:5px 11px 5px 8px; font-size:11.5px; cursor:pointer; color:var(--cpp-muted); transition:border-color .12s,background .12s; }
#cpViewDelays .cpp-selchip:hover{ border-color:var(--cpp-brand); color:var(--cpp-ink); }
#cpViewDelays .cpp-selchip.on{ background:var(--cpp-brandsoft); border-color:var(--cpp-brand); color:var(--cpp-ink); box-shadow:0 0 0 1px var(--cpp-brand) inset; }
#cpViewDelays .cpp-selchip .tk{ font-family:'JetBrains Mono',monospace; font-weight:700; width:11px; text-align:center; color:var(--cpp-faint); }
#cpViewDelays .cpp-selchip.on .tk{ color:var(--cpp-brand); }
#cpViewDelays .cpp-selchip .cd{ width:8px;height:8px;border-radius:50%; flex:none; }
#cpViewDelays .cpp-selchip .nm{ font-weight:700; }
#cpViewDelays .cpp-selchip .st{ color:var(--cpp-muted); font-size:10.5px; }
#cpViewDelays .cpp-seg{ display:inline-flex; background:var(--cpp-card2); border:1px solid var(--cpp-line); border-radius:9px; padding:2px; }
#cpViewDelays .cpp-seg button{ appearance:none; border:0; background:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--cpp-muted); padding:6px 14px; border-radius:7px; cursor:pointer; }
#cpViewDelays .cpp-seg button.on{ background:var(--cpp-card); color:var(--cpp-brand); box-shadow:var(--cpp-shadow); }
#cpViewDelays .cpp-fld{ display:inline-flex; align-items:center; gap:8px; background:var(--cpp-card2); border:1px solid var(--cpp-line); border-radius:9px; padding:6px 12px; font-size:12.5px; }
#cpViewDelays .cpp-fld label{ color:var(--cpp-muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
#cpViewDelays .dinp{ appearance:none; border:0; background:none; font:inherit; font-size:12px; font-weight:600; color:var(--cpp-ink); font-family:'JetBrains Mono',monospace; cursor:pointer; color-scheme:light dark; padding:0; max-width:118px; }
#cpViewDelays .dinp::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }
#cpViewDelays .dinp:hover{ color:var(--cpp-brand); }
#cpViewDelays .rsep{ color:var(--cpp-faint); font-size:11px; }
#cpViewDelays .cpp-sp{ flex:1; }

#cpViewDelays .cpp-sec{ display:flex; align-items:center; gap:12px; margin:24px 2px 12px; }
#cpViewDelays .cpp-sec h2{ font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--cpp-muted); font-weight:700; }
#cpViewDelays .cpp-sec .ln{ flex:1; height:1px; background:var(--cpp-line); }
#cpViewDelays .cpp-sec .hint{ font-size:11.5px; color:var(--cpp-faint); }

#cpViewDelays .cpp-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
#cpViewDelays .cpp-tile{ background:var(--cpp-card); border:1px solid var(--cpp-line); border-radius:14px; padding:15px 16px 14px; box-shadow:var(--cpp-shadow); }
#cpViewDelays .cpp-tile .top{ display:flex; align-items:center; gap:8px; }
#cpViewDelays .cpp-tile .dotk{ width:9px;height:9px;border-radius:3px; }
#cpViewDelays .cpp-tile.ok .dotk{ background:var(--cpp-good);} #cpViewDelays .cpp-tile.brand .dotk{ background:var(--cpp-brand);} #cpViewDelays .cpp-tile.warn .dotk{ background:var(--cpp-warn);} #cpViewDelays .cpp-tile.bad .dotk{ background:var(--cpp-crit);}
#cpViewDelays .cpp-tile .lbl{ font-size:11.5px; color:var(--cpp-muted); font-weight:600; }
#cpViewDelays .cpp-tile .big{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; font-size:33px; font-weight:600; line-height:1; margin:11px 0 7px; letter-spacing:-.03em; }
#cpViewDelays .cpp-tile .big .u{ font-size:15px; color:var(--cpp-muted); font-weight:500; margin-left:3px; }
#cpViewDelays .cpp-tile .foot{ font-size:11px; color:var(--cpp-faint); }

#cpViewDelays .cpp-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#cpViewDelays .cpp-card{ background:var(--cpp-card); border:1px solid var(--cpp-line); border-radius:14px; box-shadow:var(--cpp-shadow); overflow:hidden; }
#cpViewDelays .cpp-card > .ch{ display:flex; align-items:baseline; gap:9px; padding:15px 17px 3px; }
#cpViewDelays .cpp-card .ch h3{ font-size:14.5px; letter-spacing:-.01em; }
#cpViewDelays .cpp-card .ch .cs{ font-size:11.5px; color:var(--cpp-muted); }
#cpViewDelays .cpp-card .ch .rt{ margin-left:auto; font-size:10.5px; color:var(--cpp-faint); font-family:'JetBrains Mono',monospace; }
#cpViewDelays .cpp-card .cb{ padding:8px 16px 16px; }

#cpViewDelays .cpp-cbar{ display:grid; grid-template-columns:150px 1fr 58px; align-items:center; gap:12px; padding:9px 8px; border-radius:9px; cursor:default; }
#cpViewDelays .cpp-cbar:hover{ background:var(--cpp-card2); }
#cpViewDelays .cpp-cbar.on{ background:var(--cpp-brandsoft); box-shadow:0 0 0 1px var(--cpp-brand) inset; }
#cpViewDelays .cpp-cbar .nm{ font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cpViewDelays .cpp-cbar .nm .cd{ width:8px;height:8px;border-radius:50%; flex:none; }
#cpViewDelays .cpp-cbar .ot{ display:block; font-size:10.5px; color:var(--cpp-muted); font-weight:500; margin-top:1px; padding-left:15px; }
#cpViewDelays .cpp-cbar .track{ height:15px; background:var(--cpp-card2); border-radius:6px; position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px var(--cpp-line2); }
#cpViewDelays .cpp-cbar .fill{ position:absolute; left:0; top:0; bottom:0; border-radius:6px; transition:width .3s ease; }
#cpViewDelays .cpp-cbar .val{ text-align:right; font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; }
#cpViewDelays .cpp-caradd{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:11px 8px 3px; margin-top:5px; border-top:1px dashed var(--cpp-line); }
#cpViewDelays .cpp-addlab{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cpp-faint); font-weight:700; }
#cpViewDelays .cpp-addnone{ font-size:11px; color:var(--cpp-faint); padding:3px 0; }
#cpViewDelays .cpp-addchip{ appearance:none; font:inherit; display:inline-flex; align-items:center; gap:6px; background:none; border:1px dashed var(--cpp-line); border-radius:999px; padding:4px 10px; font-size:11.5px; font-weight:600; color:var(--cpp-muted); cursor:pointer; }
#cpViewDelays .cpp-addchip:hover{ border-style:solid; border-color:var(--cpp-brand); color:var(--cpp-brand); }
#cpViewDelays .cpp-addchip .cd{ width:8px;height:8px;border-radius:50%; flex:none; }
#cpViewDelays .cpp-addchip .pl{ font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--cpp-brand); }

#cpViewDelays .cpp-distbar{ display:flex; height:30px; border-radius:9px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--cpp-line2); }
#cpViewDelays .cpp-distbar > div{ display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; min-width:0; transition:flex .3s ease; }
:root[data-theme="dark"] #cpViewDelays .cpp-distbar > div{ color:#0a1420; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #cpViewDelays .cpp-distbar > div{ color:#0a1420; } }
#cpViewDelays .cpp-distrow{ display:grid; grid-template-columns:1fr auto 48px; gap:10px; align-items:center; font-size:12.5px; padding:8px 4px; border-radius:7px; }
#cpViewDelays .cpp-distrow:hover{ background:var(--cpp-card2); }
#cpViewDelays .cpp-distrow .kk{ display:flex; align-items:center; gap:8px; }
#cpViewDelays .cpp-distrow .rng{ color:var(--cpp-faint); font-size:11px; }
#cpViewDelays .cpp-distrow .dot{ width:10px;height:10px;border-radius:3px; }
#cpViewDelays .cpp-distrow .cnt{ font-family:'JetBrains Mono',monospace; font-weight:600; } #cpViewDelays .cpp-distrow .pc{ color:var(--cpp-muted); font-family:'JetBrains Mono',monospace; text-align:right; }

#cpViewDelays #cppTrendWrap{ position:relative; }
#cpViewDelays #cppTrendWrap svg{ display:block; width:100%; height:210px; overflow:visible; }
#cpViewDelays .cpp-empty{ padding:40px 0; text-align:center; color:var(--cpp-faint); font-size:12.5px; }
#cpViewDelays .gridln{ stroke:var(--cpp-grid); stroke-width:1; }
#cpViewDelays .axlbl{ fill:var(--cpp-faint); font-size:10px; font-family:'JetBrains Mono',monospace; }
#cpViewDelays .trendline{ fill:none; stroke:var(--cpp-brand); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
#cpViewDelays .trenddot{ fill:var(--cpp-card); stroke:var(--cpp-brand); stroke-width:2; }
#cpViewDelays .crosshair{ stroke:var(--cpp-brand); stroke-width:1; stroke-dasharray:3 4; opacity:.55; }
#cpViewDelays .hoverpt{ fill:var(--cpp-brand); stroke:var(--cpp-card); stroke-width:2.5; }

#cpViewDelays .cpp-tblhead{ display:flex; align-items:center; gap:10px; padding:15px 17px 10px; }
#cpViewDelays .cpp-tblhead h3{ font-size:14.5px; } #cpViewDelays .cpp-tblhead .cs{ font-size:11.5px; color:var(--cpp-muted); }
#cpViewDelays .cpp-tblhead input{ margin-left:auto; font:inherit; font-size:12.5px; background:var(--cpp-card2); border:1px solid var(--cpp-line); color:var(--cpp-ink); border-radius:9px; padding:7px 12px; width:250px; max-width:45vw; }
#cpViewDelays .cpp-xfilters{ padding:2px 16px 13px; display:flex; flex-direction:column; gap:10px; border-bottom:1px solid var(--cpp-line); }
#cpViewDelays .xflab{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cpp-faint); font-weight:700; margin-bottom:6px; }
#cpViewDelays .cpp-cchips,#cpViewDelays .cpp-qchips{ display:flex; flex-wrap:wrap; gap:7px; }
#cpViewDelays .cpp-cchip{ appearance:none; font:inherit; display:inline-flex; align-items:center; gap:7px; background:var(--cpp-card2); border:1px solid var(--cpp-line); border-radius:999px; padding:5px 11px 5px 10px; font-size:11.5px; cursor:pointer; color:var(--cpp-ink); }
#cpViewDelays .cpp-cchip:hover{ border-color:var(--cpp-brand); }
#cpViewDelays .cpp-cchip.on{ background:var(--cpp-brandsoft); border-color:var(--cpp-brand); box-shadow:0 0 0 1px var(--cpp-brand) inset; }
#cpViewDelays .cpp-cchip .cd{ width:8px;height:8px;border-radius:50%; flex:none; }
#cpViewDelays .cpp-cchip .nm{ font-weight:700; }
#cpViewDelays .cpp-cchip .st{ color:var(--cpp-muted); font-family:'JetBrains Mono',monospace; font-size:11px; }
#cpViewDelays .cpp-cchip .av{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:11px; }
#cpViewDelays .cpp-qchip{ appearance:none; font:inherit; background:none; border:1px solid var(--cpp-line); border-radius:8px; padding:5px 11px; font-size:12px; font-weight:600; color:var(--cpp-muted); cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
#cpViewDelays .cpp-qchip:hover{ color:var(--cpp-ink); }
#cpViewDelays .cpp-qchip.on{ color:var(--cpp-brand); border-color:var(--cpp-brand); background:var(--cpp-brandsoft); }
#cpViewDelays .cpp-qchip.today.on{ color:var(--cpp-crit); border-color:var(--cpp-crit); background:var(--cpp-crit-bg); }
#cpViewDelays .cpp-qchip .qn{ font-family:'JetBrains Mono',monospace; background:var(--cpp-card2); border:1px solid var(--cpp-line); border-radius:999px; padding:0 7px; font-size:10.5px; font-weight:700; }
#cpViewDelays .cpp-qchip.on .qn{ background:var(--cpp-card); }

#cpViewDelays .cpp-tscroll{ overflow-x:auto; }
#cpViewDelays table.cpp-x{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:920px; }
#cpViewDelays table.cpp-x thead th{ text-align:left; font-weight:700; color:var(--cpp-muted); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:9px 14px; border-top:1px solid var(--cpp-line); border-bottom:1px solid var(--cpp-line); white-space:nowrap; background:var(--cpp-card2); }
#cpViewDelays table.cpp-x tbody td{ padding:10px 14px; border-bottom:1px solid var(--cpp-line2); vertical-align:middle; }
#cpViewDelays table.cpp-x tbody tr:hover{ background:var(--cpp-card2); }
#cpViewDelays table.cpp-x td.ref b{ font-family:'JetBrains Mono',monospace; font-size:12px; } #cpViewDelays table.cpp-x td.ref .d{ display:block; font-size:10px; color:var(--cpp-faint); margin-top:1px; }
#cpViewDelays table.cpp-x td.prod .b{ color:var(--cpp-muted); font-size:11px; }
#cpViewDelays .carrp{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; }
#cpViewDelays .carrp .cd{ width:8px;height:8px;border-radius:50%; }
#cpViewDelays table.cpp-x td.time b{ font-weight:600; } #cpViewDelays table.cpp-x td.time .dd{ color:var(--cpp-faint); font-size:10.5px; }
#cpViewDelays .cpp-delay{ display:inline-flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; padding:3px 9px; border-radius:999px; white-space:nowrap; }
#cpViewDelays .cpp-delay.ok{ color:var(--cpp-good); background:var(--cpp-good-bg);} #cpViewDelays .cpp-delay.sm{ color:var(--cpp-warn); background:var(--cpp-warn-bg);} #cpViewDelays .cpp-delay.md{ color:var(--cpp-bad); background:var(--cpp-bad-bg);} #cpViewDelays .cpp-delay.lg{ color:var(--cpp-crit); background:var(--cpp-crit-bg);}
#cpViewDelays .cpp-tblfoot{ padding:11px 17px; font-size:11.5px; color:var(--cpp-muted); border-top:1px solid var(--cpp-line2); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#cpViewDelays .cpp-tblfoot b{ color:var(--cpp-ink); font-weight:600; }
#cpViewDelays .cpp-morebtn{ appearance:none; font:inherit; font-size:12px; font-weight:700; color:var(--cpp-brand); background:var(--cpp-brandsoft); border:1px solid var(--cpp-brand); border-radius:9px; padding:7px 16px; cursor:pointer; }
#cpViewDelays .cpp-morebtn:hover{ background:var(--cpp-brand); color:#fff; }
#cpViewDelays .cpp-morebtn .num{ opacity:.7; font-weight:600; }

#cpViewDelays .cpp-note{ font-size:11.5px; color:var(--cpp-faint); margin-top:22px; line-height:1.6; padding:14px 16px; background:var(--cpp-card); border:1px solid var(--cpp-line); border-radius:12px; }
#cpViewDelays .cpp-note code{ font-family:'JetBrains Mono',monospace; font-size:11px; background:var(--cpp-card2); padding:1px 5px; border-radius:4px; color:var(--cpp-brand); }
#cpViewDelays .cpp-note b{ color:var(--cpp-ink); }

@media(max-width:860px){ #cpViewDelays .cpp-row2{ grid-template-columns:1fr; } #cpViewDelays .cpp-tiles{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:440px){ #cpViewDelays .cpp-tiles{ grid-template-columns:1fr;} }

.cpp-tipbox{ position:fixed; z-index:60; pointer-events:none; background:var(--cpp-card); color:var(--cpp-ink); border:1px solid var(--cpp-line); box-shadow:var(--cpp-shadow2); border-radius:9px; padding:8px 11px; font-size:11.5px; max-width:280px; line-height:1.45; font-family:'Inter',system-ui,sans-serif; }
.cpp-tipbox b{ font-family:'Space Grotesk',sans-serif; }
.cpp-tipbox .kv{ color:var(--cpp-muted); }
.cpp-tipbox .hh{ font-family:'JetBrains Mono',monospace; font-weight:700; }
.cpp-tipbox .cpp-tbrk{ margin-top:7px; padding-top:6px; border-top:1px solid var(--cpp-line); display:flex; flex-direction:column; gap:3px; }
.cpp-tipbox .cpp-tbrk .tbh{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--cpp-muted); font-weight:700; margin-bottom:1px; }
.cpp-tipbox .tcrow{ display:flex; align-items:center; gap:6px; }
.cpp-tipbox .tcrow .cd{ width:7px;height:7px;border-radius:50%; flex:none; }
.cpp-tipbox .tcrow .tcn{ font-weight:700; }
.cpp-tipbox .tcrow .tch{ font-family:'JetBrains Mono',monospace; font-weight:700; margin-left:auto; padding-left:10px; }
.cpp-tipbox .tcrow .tcl{ font-size:10px; color:var(--cpp-muted); }
.cpp-tipbox[hidden]{ display:none; }