/* R5-33 pump statistics ("Dystrybutory"): the fourth tab of the station traffic view (PumpStatisticsSection), its
   charts (PumpCharts: inline SVG and the 7 x 24 grid) and the network block (PumpNetworkBlock). A site-wide sheet,
   not a scoped one, because much of what it styles is markup the component does not render itself: the SVG charts
   (a MarkupString), the chips over the station picture and the tooltip (pumpstats.js). Every class starts with pd-
   (Bootstrap is loaded on every page: a name such as fade, row or show would pick up its rules; a test holds this
   file to names Bootstrap does not use). Look and words: the approved mockup, R5-33-MOCKUPS (20.10.2026). */

.pd-section, .pd-net {
    --pd-q1: #184f95; --pd-q2: #256abf; --pd-q3: #3987e5; --pd-q4: #6da7ec; --pd-q5: #b7d3f6;
    --pd-card-b: rgba(100, 116, 139, .25);
    --pd-mono: "JetBrains Mono", Consolas, monospace;
}

/* the 5 step scale: the chip, the tag in the list, the bar, the legend swatch */
.pd-q1 { --pd-c: var(--pd-q1, #184f95); --pd-ink: #fff; }
.pd-q2 { --pd-c: var(--pd-q2, #256abf); --pd-ink: #fff; }
.pd-q3 { --pd-c: var(--pd-q3, #3987e5); --pd-ink: #06142a; }
.pd-q4 { --pd-c: var(--pd-q4, #6da7ec); --pd-ink: #06142a; }
.pd-q5 { --pd-c: var(--pd-q5, #b7d3f6); --pd-ink: #06142a; }

.pd-section { margin-top: .25rem; }
.pd-head { flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .9rem; }
.pd-sub { min-width: 0; }
.pd-metric { margin-left: auto; display: inline-flex; background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 3px; gap: 2px; }
.pd-metric-btn { min-height: 34px; padding: 0 .95rem; border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, .62); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pd-metric-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: #fff; }
.pd-metric-btn[aria-pressed="true"] { background: linear-gradient(135deg, rgba(59, 130, 246, .5), rgba(99, 102, 241, .5)); color: #fff; box-shadow: 0 2px 8px rgba(59, 130, 246, .3); }
.pd-metric-btn:disabled { color: rgba(255, 255, 255, .3); cursor: not-allowed; }
.pd-metric-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* the picture's panel */
.pd-stage-card { border: 1px solid var(--pd-card-b); border-radius: 12px; background: rgba(30, 41, 59, .62); overflow: hidden; }
.pd-stage-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(100, 116, 139, .2); }
.pd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .76rem; color: #cbd5e1; }
.pd-leg-t { font-weight: 600; color: #fff; }
.pd-leg-s { display: inline-flex; flex-wrap: wrap; gap: .3rem .75rem; }
.pd-leg-i { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-leg-i i { width: 18px; height: 12px; border-radius: 3px; background: var(--pd-c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pd-hint { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .74rem; color: #94a3b8; }
.pd-hint-phone { display: none; }
.pd-hint-nostays { color: #fde68a; }
.pd-stage-wrap { position: relative; overflow: hidden; }
.pd-stage { position: relative; transform-origin: 0 0; }
.pd-scene { position: relative; min-height: 200px; }
/* the scene's own lane captions: the chips carry the numbers, the scene keeps its lane line */
.pd-scene .fsa-lb b { visibility: hidden; }
.pd-over { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.pd-bay { position: absolute; pointer-events: auto; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 10px; margin: 0; border: 0; border-radius: 10px 10px 4px 4px; cursor: pointer;
    background: linear-gradient(to top, color-mix(in srgb, var(--pd-c) 46%, transparent) 0%, color-mix(in srgb, var(--pd-c) 14%, transparent) 70%, transparent 100%);
    box-shadow: inset 0 -3px 0 var(--pd-c); transition: box-shadow .15s; }
.pd-bay:hover { box-shadow: inset 0 -3px 0 var(--pd-c), inset 0 0 0 1px rgba(255, 255, 255, .35); }
.pd-bay:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pd-bay.pd-on { box-shadow: inset 0 -3px 0 #fff, inset 0 0 0 2px #fff; }
.pd-bay.pd-isl { box-shadow: inset 0 -3px 0 var(--pd-c), inset 0 0 0 2px rgba(147, 197, 253, .85); }
.pd-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 74px; padding: 4px 10px 5px; border-radius: 9px; background: var(--pd-c); color: var(--pd-ink);
    box-shadow: 0 0 0 2px rgba(8, 13, 26, .9), 0 6px 16px rgba(0, 0, 0, .5); line-height: 1.15; }
.pd-chip b { font: 800 15px/1.2 Montserrat, sans-serif; letter-spacing: .04em; white-space: nowrap; }
.pd-chip span { font: 700 12.5px/1.25 Montserrat, sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-bay.pd-on .pd-chip { box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(0, 0, 0, .5); }
.pd-chip.pd-mini { min-width: 0; padding: .05em .3em; border-radius: .35em; font-family: Montserrat, sans-serif; font-weight: 800; line-height: 1.3; letter-spacing: 0; box-shadow: 0 0 0 .15em rgba(8, 13, 26, .9); }
.pd-bay.pd-tiny { padding-bottom: 4px; border-radius: 6px 6px 2px 2px; }
.pd-scene-failed { padding: .6rem 1rem; font-size: .8rem; color: #fde68a; }
.pd-under { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.5rem; padding: .7rem 1rem; border-top: 1px solid rgba(100, 116, 139, .2); font-size: .8rem; color: #cbd5e1; }
.pd-quiet b { color: #fff; font-weight: 600; }
.pd-under-note { color: #94a3b8; font-size: .74rem; }
.pd-linkbtn { padding: 0; border: 0; background: none; color: #93c5fd; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pd-linkbtn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 3px; }

/* the administrator's block */
.pd-admin { margin-top: 12px; padding: .8rem 1rem .9rem; border: 1px solid rgba(129, 140, 248, .4); border-left: 4px solid #818cf8; border-radius: 12px; background: rgba(67, 56, 202, .1); font-size: .82rem; }
.pd-admin.pd-in-card { margin-top: 1rem; }
.pd-admin-h { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-bottom: .55rem; }
.pd-admin-h > b { color: #fff; font-weight: 600; }
.pd-admin-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; background: rgba(129, 140, 248, .2); color: #c7d2fe; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pd-admin-tag .oi { font-size: .65rem; }
.pd-dq { display: inline-flex; flex-wrap: wrap; gap: .25rem 1rem; color: #cbd5e1; }
.pd-dq b { color: #fff; font-variant-numeric: tabular-nums; }
.pd-admin code, .pd-flag code { font-family: var(--pd-mono); font-size: .76rem; color: #e0e7ff; background: rgba(15, 23, 42, .6); padding: .05rem .3rem; border-radius: 4px; }
.pd-flag { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: .2rem 0 .65rem; padding: .5rem .75rem; border: 1px solid rgba(251, 191, 36, .45); border-radius: 9px; background: rgba(251, 191, 36, .08); color: #fde68a; }
.pd-flag b { color: #fef3c7; }
.pd-flag-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #f59e0b; color: #1c1403; font-weight: 800; font-size: .78rem; }
.pd-flag .pd-linkbtn { margin-left: auto; color: #fde68a; }
.pd-admin-line { margin: .2rem 0 .6rem; color: #cbd5e1; }
.pd-admin-ul { margin: 0; padding-left: 1.1rem; color: #cbd5e1; }
.pd-admin-months { margin-top: 1rem; }
.pd-admin-tw { overflow-x: auto; }
.pd-admin-t th[scope="row"] { color: #cbd5e1; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .8rem; white-space: nowrap; }
.pd-admin-t thead th { text-transform: none; font-size: .76rem; }
.pd-admin-t thead th.n, .pd-admin-t td.n { min-width: 52px; }
.pd-admin-t td { font-weight: 600; }
.pd-admin .pd-warn, .pd-admin-t td.pd-warn { color: #fbbf24; }
.pd-admin .pd-ok { color: #86efac; }
.pd-z { color: rgba(255, 255, 255, .3); font-weight: 400; }
.pd-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem 1.5rem; align-items: start; max-width: 760px; }
.pd-admin-list { grid-column: 1 / -1; overflow-x: auto; margin-top: .4rem; }
.pd-admin-k { color: #c7d2fe; font-size: .75rem; }
.pd-admin-v { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.3; }
.pd-admin-s { color: #cbd5e1; font-size: .78rem; }
.pd-admin-list .ti-table td, .pd-admin-list .ti-table th { padding: .3rem .45rem; }

/* the card under the picture (the live page's rule: full width, a real Zamknij button) */
.pd-card { margin-top: 12px; padding: 0 0 1rem; border: 1px solid rgba(96, 165, 250, .45); border-radius: 12px; background: rgba(30, 41, 59, .72); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); scroll-margin: 60px; }
.pd-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(100, 116, 139, .25); }
.pd-card-t { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.pd-card-t h3 { margin: 0 0 .1rem; font-size: 1.05rem; font-weight: 600; color: #fff; }
.pd-card-t h3:focus { outline: none; }
.pd-card-t h3:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 3px; }
.pd-card-t .pd-lane-tag { flex: none; height: 34px; min-width: 56px; font-size: .95rem; border-radius: 8px; }
.pd-card-a { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.pd-close { min-height: 36px; padding: 0 1rem; border: 1px solid rgba(100, 116, 139, .45); border-radius: 9px; background: rgba(51, 65, 85, .7); color: #fff; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.pd-close:hover { background: rgba(71, 85, 105, .9); }
.pd-close:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
/* R5 rev 2 (C5): the lane card's previous and next arrows around its tag and title, in the forecourt's order. At an
   end the arrow stays where it is, disabled, so nothing moves under the finger; the title may shrink and wrap. */
.pd-step-prev, .pd-step-next { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(100, 116, 139, .45); border-radius: 9px; background: rgba(51, 65, 85, .7); color: #e2e8f0; font-size: .72rem; line-height: 1; cursor: pointer; }
.pd-step-prev:hover:not(:disabled), .pd-step-next:hover:not(:disabled) { background: rgba(71, 85, 105, .9); color: #fff; }
.pd-step-prev:focus-visible, .pd-step-next:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.pd-step-prev:disabled, .pd-step-next:disabled { opacity: .35; cursor: default; }
.pd-card-tt { min-width: 0; }
.pd-card-tt h3 { overflow-wrap: anywhere; }
/* the next arrow keeps its place from one lane to the next (most titles and their lines are narrower than this) */
.pd-card .pd-steps .pd-card-tt { min-width: 15rem; }
.pd-card-body > :not(.pd-card-h) { margin-left: 1rem; margin-right: 1rem; }
.pd-lane-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--pd-c, rgba(148, 163, 184, .3)); color: var(--pd-ink, #fff); font-weight: 800; font-size: .8rem; letter-spacing: .03em; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.pd-lane-tag.pd-isl-tag { background: rgba(148, 163, 184, .18); color: #e2e8f0; }
.pd-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.pd-kpis.pd-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; }
.pd-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); min-width: 0; }
.pd-kpi-l { font-size: .68rem; line-height: 1.25; letter-spacing: .4px; text-transform: uppercase; color: rgba(255, 255, 255, .6); font-weight: 500; min-height: 2.5em; }
.pd-kpi-l sup { color: #93c5fd; margin-left: 1px; }
.pd-kpi-v { font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-kpi-s { font-size: .72rem; color: rgba(255, 255, 255, .55); line-height: 1.3; }
.pd-stay-note { margin-top: .5rem; font-size: .74rem; color: #94a3b8; }
.pd-stay-note sup { color: #93c5fd; }
.pd-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-top: 1rem; }
.pd-fig { margin: 0; padding: .75rem .85rem .6rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(15, 23, 42, .35); min-width: 0; }
.pd-fig.pd-w2 { grid-column: span 2; }
.pd-fig.pd-w3 { grid-column: 1 / -1; }
.pd-fig figcaption { margin-bottom: .45rem; font-size: .85rem; font-weight: 600; color: #fff; }
.pd-fig figcaption span { margin-left: .4rem; font-size: .72rem; font-weight: 400; color: #94a3b8; }
.pd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pd-fig-note { margin-top: .25rem; font-size: .7rem; color: #94a3b8; line-height: 1.35; }
.pd-svg .pd-ax { font: 500 10px Montserrat, sans-serif; fill: rgba(203, 213, 225, .75); font-variant-numeric: tabular-nums; }
.pd-svg .pd-ax.pd-on { fill: #fff; font-weight: 700; }
.pd-svg .pd-ax.pd-amb { fill: #fbbf24; font-weight: 600; }
.pd-svg .pd-lbl { font: 700 10.5px Montserrat, sans-serif; fill: #fff; font-variant-numeric: tabular-nums; }
.pd-svg .pd-lbl.pd-dim { fill: rgba(226, 232, 240, .7); font-weight: 600; }
.pd-svg [data-tip] { cursor: default; }
.pd-heat { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; padding-bottom: 2px; }
.pd-heat-row { display: grid; grid-template-columns: 44px repeat(24, minmax(14px, 1fr)); gap: 2px; }
.pd-heat-row > span { font-size: .68rem; color: rgba(203, 213, 225, .75); display: flex; align-items: center; }
.pd-heat-row.pd-hd > span { justify-content: flex-start; height: 16px; }
.pd-heat-row i { height: 22px; border-radius: 3px; }
.pd-heat-row i:hover { box-shadow: 0 0 0 2px #fff; }
.pd-heat.pd-compact .pd-heat-row { grid-template-columns: 34px repeat(24, minmax(9px, 1fr)); gap: 1.5px; }
.pd-heat.pd-compact .pd-heat-row i { height: 16px; border-radius: 2px; }
.pd-heat-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: .5rem; font-size: .7rem; color: #94a3b8; }
.pd-heat-leg i { width: 18px; height: 10px; border-radius: 2px; }
.pd-heat-leg span:first-child { margin-right: 4px; }
.pd-heat-leg span:nth-last-child(2) { margin-left: 4px; }
.pd-heat-max { margin-left: auto !important; }
.pd-series-leg { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; font-size: .78rem; color: #cbd5e1; }
.pd-series-leg i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: .4rem; vertical-align: middle; }
.pd-cmp { position: relative; margin-top: 1rem; overflow-x: auto; }
.pd-cmp-t th[scope="row"] { color: #cbd5e1; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .82rem; width: 26%; white-space: nowrap; }
.pd-cmp-v { display: block; font-weight: 700; color: #fff; margin-bottom: .25rem; }
.pd-cmp-t .pd-sharebar { max-width: 280px; }
.pd-lanehead { display: inline-flex; align-items: center; gap: .45rem; padding: 0; border: 0; background: none; color: #93c5fd; font: inherit; font-size: .78rem; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
.pd-lanehead i { width: 12px; height: 12px; border-radius: 3px; }

/* every lane: a table on a computer, a list on a phone */
.pd-all { margin-top: 1rem; }
.pd-all-desk { position: relative; overflow-x: auto; }
.pd-all-t td:first-child { white-space: nowrap; }
.pd-all-t .pd-isl-row td { padding-top: .7rem; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; }
.pd-isl-figures { margin-left: .4rem; }
/* R5 rev 2 (C5): the island over its lanes is a badge like the lane tags (.pd-lane-tag.pd-isl-tag), not a plain link;
   "on" while its card is open */
.pd-isl-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 28px; padding: 0 .55rem 0 .65rem; border: 1px solid rgba(148, 163, 184, .3); border-radius: 6px; background: rgba(148, 163, 184, .18); color: #e2e8f0; font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s; }
.pd-isl-btn .oi { font-size: .55rem; opacity: .7; }
.pd-isl-btn:hover { background: rgba(148, 163, 184, .28); border-color: rgba(148, 163, 184, .5); color: #fff; }
.pd-isl-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.pd-isl-btn.pd-on { background: rgba(59, 130, 246, .26); border-color: rgba(96, 165, 250, .75); color: #fff; }
.pd-isl-btn.pd-on .oi { opacity: 1; }
.pd-group-name { font-weight: 600; color: #cbd5e1; }
/* R5 rev 3 (A9/A10): the whole lane row opens its card (the end column's arrow is gone). Hover and the keyboard's focus
   (on the row's badge) light the row; the row whose card is open stays lit. */
.pd-all-t .pd-lane-row { cursor: pointer; }
.pd-all-t .pd-lane-row td { transition: background-color .15s; }
.pd-all-t .pd-lane-row:hover td, .pd-all-t .pd-lane-row:focus-within td { background: rgba(148, 163, 184, .09); }
.pd-all-t tr.pd-on td { background: rgba(59, 130, 246, .12); }
.pd-all-t .pd-lane-row.pd-on:hover td, .pd-all-t .pd-lane-row.pd-on:focus-within td { background: rgba(59, 130, 246, .18); }
/* the visible cue: the lane's number as a button in the island badge's form (border, chevron, hover, a ring while its
   card is open), filled with the lane's heat colour (--pd-c from the cell's pd-q class) */
.pd-lane-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 56px; min-height: 28px; padding: 0 .5rem 0 .6rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; background: var(--pd-c, rgba(148, 163, 184, .3)); color: var(--pd-ink, #fff); font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; cursor: pointer; transition: filter .15s, border-color .15s, box-shadow .15s; }
.pd-lane-btn .oi { font-size: .55rem; opacity: .7; }
.pd-lane-btn:hover, .pd-lane-row:hover .pd-lane-btn { filter: brightness(1.12); border-color: rgba(255, 255, 255, .6); }
.pd-lane-btn:hover .oi, .pd-lane-row:hover .pd-lane-btn .oi { opacity: 1; }
.pd-lane-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.pd-lane-row.pd-on .pd-lane-btn { border-color: rgba(191, 219, 254, .95); box-shadow: 0 0 0 2px rgba(59, 130, 246, .6); }
.pd-lane-row.pd-on .pd-lane-btn .oi { opacity: 1; }
.pd-col-bar { width: 26%; }
.pd-barcell { display: flex; align-items: center; gap: .6rem; }
.pd-barcell .pd-sharebar { flex: 1; }
.pd-barcell b { min-width: 3.6rem; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.pd-sharebar { position: relative; display: block; height: 8px; border-radius: 4px; background: rgba(148, 163, 184, .14); overflow: hidden; min-width: 60px; }
.pd-sharebar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--pd-c, #3b82f6); }
.pd-quiet-tag { margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, .35); color: #cbd5e1; font-size: .68rem; white-space: nowrap; }
.pd-nolane-row td { color: rgba(255, 255, 255, .6); }
/* R5 rev 2 (C5): under "Bez dystrybutora", from which day the dispenser data is complete (it wraps, unlike the lanes) */
.pd-all-t .pd-nolane-note td { padding-top: 0; white-space: normal; font-size: .74rem; line-height: 1.4; color: #94a3b8; }
.pd-list-nolane-note { padding: 0 .3rem .6rem; font-size: .72rem; line-height: 1.4; color: #94a3b8; }
.pd-list { display: none; list-style: none; margin: 0; padding: 0; }

/* the one tooltip (pumpstats.js) */
.pd-tip { position: fixed; z-index: 1080; max-width: 280px; padding: .35rem .6rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 7px; background: #0f172a; color: #f1f5f9; font-size: .76rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); pointer-events: none; }

/* the phone's bottom sheet */
.pd-sheet-back { position: fixed; inset: 0; z-index: 1070; background: rgba(2, 6, 23, .55); }
.pd-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1071; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; border-radius: 16px 16px 0 0; border-top: 1px solid rgba(96, 165, 250, .5); background: #16213a; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); padding-bottom: 1.2rem; }
.pd-grab { width: 44px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: rgba(148, 163, 184, .5); }
.pd-sheet-in .pd-card-body > :not(.pd-card-h) { margin-left: .85rem; margin-right: .85rem; }
.pd-sheet .pd-card-h { padding: .5rem .85rem .7rem; position: sticky; top: 0; z-index: 2; background: #16213a; }
.pd-sheet .pd-card-t { gap: .5rem; }
/* a lane's sheet: the arrows at the two ends of the first line, so a finger finds them at the same place on every
   lane; Zamknij goes to the line under them */
.pd-sheet .pd-card-t.pd-steps { flex: 1 1 100%; }
.pd-sheet .pd-steps .pd-card-tt { flex: 1 1 auto; }
.pd-sheet .pd-card-t .pd-lane-tag { min-width: 44px; height: 30px; font-size: .86rem; }
.pd-sheet .pd-card-t h3 { font-size: .98rem; }
.pd-sheet .pd-card-t .section-subtitle { font-size: .72rem; }
.pd-sheet .pd-kpis, .pd-sheet .pd-kpis.pd-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.pd-sheet .pd-kpi { padding: .55rem .65rem; }
.pd-sheet .pd-kpi-l { min-height: 0; font-size: .64rem; }
.pd-sheet .pd-kpi-v { font-size: 1.12rem; }
.pd-sheet .pd-charts { grid-template-columns: 1fr; gap: .6rem; margin-top: .75rem; }
.pd-sheet .pd-fig { grid-column: auto; padding: .6rem .6rem .5rem; }
.pd-sheet .pd-fig figcaption span { display: block; margin: .1rem 0 0; }
.pd-sheet .pd-cmp-t th[scope="row"] { white-space: normal; }
.pd-sheet .pd-admin-grid { grid-template-columns: 1fr 1fr; }
body.pd-noscroll { overflow: hidden; }

/* the network block on the client's network traffic page */
.pd-net { margin: 1.5rem 0; }
.pd-net .section-header { flex-wrap: wrap; margin-bottom: .35rem; }
.pd-net-scope { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font-size: .8rem; color: #cbd5e1; }
.pd-net-scope i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(96, 165, 250, .18); color: #93c5fd; font-style: normal; font-weight: 800; font-size: .7rem; }
/* position: a visually hidden header (Bootstrap places it absolutely) stays inside the scroller, not past the page */
.pd-net-wrap { position: relative; overflow-x: auto; }
.pd-net-t td { padding-top: .6rem; padding-bottom: .6rem; vertical-align: middle; }
.pd-net-st b { display: block; color: #fff; font-weight: 600; }
.pd-net-st span { color: #94a3b8; font-size: .75rem; }
.pd-net-lane { display: grid; grid-template-columns: 60px minmax(80px, 1fr) 4rem; align-items: center; gap: .65rem; }
.pd-net-lane .pd-lane-tag { justify-self: start; }
.pd-net-lane b { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.pd-net-go { display: inline-flex; align-items: center; gap: .3rem; min-height: 34px; padding: 0 .8rem; border: 1px solid rgba(100, 116, 139, .35); border-radius: 8px; background: rgba(51, 65, 85, .45); color: #e2e8f0; font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pd-net-go:hover { background: rgba(71, 85, 105, .8); color: #fff; }
.pd-net-go:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.pd-net-leg { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-top: .8rem; font-size: .74rem; color: #cbd5e1; }
.pd-net-leg i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; background: var(--pd-c); margin-right: .35rem; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pd-net-th-sub { display: block; text-transform: none; letter-spacing: 0; font-size: .7rem; color: rgba(255, 255, 255, .42); }
.pd-net-none { color: rgba(255, 255, 255, .45); font-size: .8rem; }
.pd-net-msg { padding: .75rem 0; color: rgba(255, 255, 255, .6); font-size: .85rem; }
/* a station link elsewhere (the station details page): the tab one click away, no figures */
.pd-link { display: inline-flex; align-items: center; gap: .35rem; color: #93c5fd; font-weight: 600; text-decoration: none; }
.pd-link:hover { color: #bfdbfe; text-decoration: underline; }

@media (max-width: 1199.98px) {
    .pd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pd-admin-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767.98px) {
    .pd-head .pd-metric { margin-left: 0; width: 100%; }
    .pd-metric-btn { flex: 1; min-height: 44px; }
    .pd-stage-top { padding: .6rem .75rem; }
    .pd-legend { font-size: .7rem; gap: .3rem .6rem; }
    .pd-leg-t { flex-basis: 100%; }
    .pd-leg-s { gap: .25rem .55rem; }
    .pd-hint-desk { display: none; }
    .pd-hint-phone { display: inline; }
    .pd-under { padding: .6rem .75rem; font-size: .76rem; }
    .pd-all { padding: .75rem .6rem; }
    .pd-all-desk { display: none; }
    .pd-list { display: block; }
    .pd-list li { margin: 0; }
    .pd-list-isl-btn { display: flex; justify-content: space-between; align-items: center; gap: .5rem; width: 100%; min-height: 44px; padding: .5rem .3rem .3rem; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); background: none; color: #93c5fd; font: inherit; font-size: .82rem; font-weight: 700; text-align: left; cursor: pointer; }
    .pd-list-isl-btn.pd-on { background: rgba(59, 130, 246, .14); color: #bfdbfe; }
    .pd-list-group { display: block; padding: .6rem .3rem .3rem; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #cbd5e1; font-size: .82rem; font-weight: 700; }
    .pd-list-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 14px; align-items: center; gap: .65rem; width: 100%; min-height: 58px; padding: .45rem .3rem; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .05); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
    .pd-list-row.pd-on { background: rgba(59, 130, 246, .14); }
    .pd-list-row .pd-lane-tag { min-width: 54px; height: 30px; font-size: .86rem; }
    .pd-list-mid { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
    .pd-list-sub { font-size: .7rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pd-list-v { font-size: .9rem; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pd-list-go { color: #64748b; font-size: 1.1rem; }
    .pd-list-nolane { display: flex; justify-content: space-between; gap: .5rem; padding: .6rem .3rem; font-size: .8rem; color: #cbd5e1; }
    .pd-admin { padding: .65rem .7rem; }
    /* a finger's target: the arrows of the sheet's lane card */
    .pd-step-prev, .pd-step-next { width: 40px; height: 40px; font-size: .8rem; }
    .pd-flag .pd-linkbtn { margin-left: 0; }
    .pd-net-t { min-width: 640px; }
}