/* Pumps and shifts page: teal glass panel, fuel dispenser cards (one nozzle per fuel, drawn in the fuel colour),
   employee cards and the shift history card. Loaded after pumps-page.css and ui-system.css. */

#view-pumps {
  --dp-t: #14a3a0;
  --dp-t2: #5fd0cb;
  --dp-ink: var(--text1);
  --dp-soft: var(--text2);
  --dp-line: color-mix(in srgb, var(--dp-t) 24%, transparent);
  --dp-shadow: rgba(14, 90, 88, .14);
  --dp-hi: rgba(255, 255, 255, .9);
}

html[data-theme="dark"] #view-pumps {
  --dp-t: #4fd6d0;
  --dp-t2: #14a3a0;
  --dp-line: color-mix(in srgb, var(--dp-t) 22%, transparent);
  --dp-shadow: rgba(0, 0, 0, .5);
  --dp-hi: rgba(255, 255, 255, .08);
}

/* ---------- page layout: the site's normal content width, no outer frame ---------- */
#view-pumps > .content-wrap {
  display: grid;
  gap: 16px;
  align-content: start;
}

/* ---------- dispenser cards ---------- */
#view-pumps #pumpGrid.dsp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  align-items: start;
  gap: 22px;
  margin: 0 0 14px;
}

.dsp {
  max-width: 420px;
  --c: var(--petrol);
  --c2: color-mix(in srgb, var(--petrol) 55%, #fff);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  border-radius: 28px;
  color: var(--text1);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--c2) 22%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, var(--c) 9%, #fff), color-mix(in srgb, var(--c2) 6%, #fff) 60%, color-mix(in srgb, var(--c) 12%, #f4f7f8));
  box-shadow: 0 14px 34px var(--dp-shadow, rgba(14, 90, 88, .14)), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: dspRise .6s cubic-bezier(.2, .9, .3, 1.1) both;
}

html[data-theme="dark"] .dsp {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--c) 22%, transparent), transparent 55%),
    linear-gradient(165deg, #12282a, #0e1d1f);
}

.dsp.is-inactive { filter: grayscale(.55); opacity: .88; }

.dsp::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: -16px;
  left: 12%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 50, 48, .32), transparent 70%);
  filter: blur(5px);
  z-index: -1;
  pointer-events: none;
}

/* canopy */
.dsp-canopy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  color: #fff;
  background: linear-gradient(115deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 45%, var(--c2) 100%);
}

.dsp-canopy::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .15), rgba(255, 255, 255, .7));
  box-shadow: 0 0 14px rgba(255, 255, 255, .7);
}

.dsp-canopy::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
  animation: dspSheen 5s ease-in-out infinite;
  pointer-events: none;
}

.dsp-canopy > * { position: relative; z-index: 1; }

.dsp-no {
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 14px;
  color: color-mix(in srgb, var(--c) 78%, #000);
  background: linear-gradient(180deg, #fff, #f3f6f7);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1), 0 6px 14px rgba(0, 0, 0, .2);
  font-size: 22px;
  font-weight: 900;
}

.dsp-titles { min-width: 0; }

.dsp-titles b {
  display: block;
  overflow: hidden;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  white-space: nowrap;
}

.dsp-titles small {
  display: block;
  margin-top: 1px;
  opacity: .95;
  font-size: 12px;
  font-weight: 700;
}

.dsp-led {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 99px;
  background: rgba(8, 30, 30, .3);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.dsp-led i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff8a6e;
  box-shadow: 0 0 12px #ff8a6e;
  animation: dspDot 1.6s ease-in-out infinite;
}

.dsp.free .dsp-led i { background: #7dffbd; box-shadow: 0 0 12px #7dffbd; animation: none; }
.dsp.is-inactive .dsp-led i { background: #ffd27a; box-shadow: 0 0 12px #ffd27a; animation: none; }

.dsp-edit {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 11px;
  color: #fff;
  background: rgba(255, 255, 255, .24);
  cursor: pointer;
  transition: transform .2s;
}

.dsp-edit:hover { transform: rotate(-12deg) scale(1.1); }

/* machine */
.dsp-machine {
  direction: ltr;
  display: grid;
  grid-template-columns: var(--lw, 56px) minmax(0, 1fr) var(--rw, 0px);
  gap: 2px;
  padding: 14px 10px 4px;
}

.dsp-body {
  direction: rtl;
  min-width: 0;
  position: relative;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--c) 32%, #fff);
  border-radius: 20px 20px 10px 10px;
  background: linear-gradient(165deg, #ffffff, color-mix(in srgb, var(--c) 7%, #eef2f4) 55%, color-mix(in srgb, var(--c) 16%, #dde4e7));
  box-shadow: inset 0 2px 0 #fff, inset 0 -10px 18px color-mix(in srgb, var(--c) 10%, transparent), 0 14px 28px rgba(20, 70, 68, .16);
}

html[data-theme="dark"] .dsp-body {
  border-color: color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(165deg, #1a3234, #12262a 55%, color-mix(in srgb, var(--c) 18%, #0f2022));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .07), 0 14px 28px rgba(0, 0, 0, .4);
}

.dsp-panel {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--c) 24%, #fff);
  border-radius: 14px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 13%, #fff), color-mix(in srgb, var(--c2) 11%, #fff));
  box-shadow: inset 0 1px 0 #fff;
}

html[data-theme="dark"] .dsp-panel {
  border-color: color-mix(in srgb, var(--c) 25%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 14%, #10272a), #0d1d20);
}

/* displays */
.dsp-screen {
  position: relative;
  min-width: 0;
  padding: 8px 10px 7px;
  overflow: hidden;
  border: 2px solid #20383a;
  border-radius: 14px;
  color: #7dffc1;
  background: radial-gradient(circle at 15% 0, #17413a, #082019 72%);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .65), 0 2px 0 rgba(255, 255, 255, .8), 0 8px 16px rgba(10, 60, 56, .25);
}

.dsp-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .14), transparent 38%);
  pointer-events: none;
}

.dsp-screen small {
  display: block;
  color: #9bf0cf;
  opacity: .85;
  font-size: 11px;
  font-weight: 700;
}

.dsp-digits {
  margin: 1px 0 2px;
  direction: ltr;
  font-family: Consolas, "Courier New", monospace;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 0 14px rgba(125, 255, 193, .75);
  font-variant-numeric: tabular-nums;
}

.dsp-digits.is-over { color: #ffab94; text-shadow: 0 0 14px rgba(255, 130, 100, .75); }
.dsp-screen.is-off .dsp-digits { color: #4f7771; text-shadow: none; }

.dsp-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  color: #9bf0cf;
  font-size: 10px;
  font-weight: 700;
}

.dsp-minis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dsp-mini {
  min-width: 0;
  padding: 6px 8px;
  border: 2px solid #20383a;
  border-radius: 11px;
  color: #7dffc1;
  background: radial-gradient(circle at 10% 0, #17413a, #082019 75%);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .6), 0 2px 0 rgba(255, 255, 255, .7);
}

.dsp-mini small {
  display: block;
  color: #9bf0cf;
  opacity: .85;
  font-size: 10px;
  font-weight: 700;
}

.dsp-mini b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 0 8px rgba(125, 255, 193, .6);
}

.dsp-mid {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.dsp-gauge {
  position: relative;
  width: 74px;
  height: 47px;
  color: var(--text1);
}

.dsp-gauge svg {
  width: 74px;
  height: 47px;
  overflow: visible;
}

.dsp-g-bg { stroke: color-mix(in srgb, var(--c) 20%, transparent); }

.dsp-g-fg {
  stroke: url(#dspGauge);
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--g, 50));
  animation: dspGauge 1.4s .3s cubic-bezier(.2, .9, .3, 1) both;
}

.dsp-gauge.is-over .dsp-g-fg { stroke: url(#dspGaugeOver); }

.dsp-needle {
  transform-origin: 43px 48px;
  transform: rotate(calc(var(--g, 50) * 1.8deg - 90deg));
  animation: dspNeedle 1.4s .3s cubic-bezier(.2, .9, .3, 1) both;
}

.dsp-grades {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.dsp-grade {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 65%, #fff), var(--gc));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--gc) 62%, #000), 0 10px 14px rgba(0, 0, 0, .14);
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.dsp-grade i { font-size: 15px; }

.dsp-attendant {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--c) 28%, #fff);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .9), color-mix(in srgb, var(--c2) 14%, #fff));
  box-shadow: 0 6px 14px rgba(20, 70, 68, .1);
}

html[data-theme="dark"] .dsp-attendant { background: linear-gradient(120deg, rgba(255, 255, 255, .07), color-mix(in srgb, var(--c) 14%, transparent)); }

.dsp-attendant > div { min-width: 0; }

.dsp-attendant small {
  display: block;
  color: var(--text2);
  font-size: 11px;
  font-weight: 700;
}

.dsp-attendant b {
  display: block;
  font-size: 13px;
  font-weight: 900;
}

.dsp-attendant.is-empty {
  justify-content: center;
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
}

.dsp-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #7f8cff, #4b5ed8);
  box-shadow: 0 6px 14px rgba(75, 94, 216, .35);
  font-size: 15px;
  font-weight: 800;
}

.dsp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* nozzles, hoses, connectors */
.dsp-side { position: relative; }

.dsp-side svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 216px;
  overflow: visible;
}

.dsp-side.is-right svg { transform: scaleX(-1); }

.dsp-nz { --k: var(--c); --k2: var(--c2); }
.dsp-bracket { fill: color-mix(in srgb, var(--k) 26%, #eef2f4); stroke: color-mix(in srgb, var(--k) 55%, #8b97a0); stroke-width: 1.6; }
.dsp-hose { fill: none; stroke: #2a3340; stroke-width: 9; stroke-linecap: round; }
html[data-theme="dark"] .dsp-hose { stroke: #5d6a7d; }
.dsp-hose-shine { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 2.2; stroke-linecap: round; transform: translate(-1.6px, -1px); }
.dsp-hose-flow { fill: none; stroke: var(--k2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 10; animation: dspHose 1s linear infinite; }
.dsp.free .dsp-hose-flow,
.dsp.is-inactive .dsp-hose-flow { display: none; }
.dsp-spout { fill: none; stroke: #59667a; stroke-width: 6; stroke-linecap: round; }

.dsp-tip {
  fill: none;
  stroke: var(--k);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--k2) 70%, transparent));
  animation: dspTip 2.4s ease-in-out infinite;
}

.dsp.free .dsp-tip,
.dsp.is-inactive .dsp-tip { animation: none; filter: none; }

.dsp-grip { fill: url(#dspGrip); stroke: color-mix(in srgb, var(--k) 45%, #2a3340); stroke-width: 1.4; }
.dsp-conn { fill: var(--k); stroke: color-mix(in srgb, var(--k) 60%, #000); stroke-width: 1.4; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.dsp-tag-bg { fill: var(--k); }
.dsp-tag-tx { fill: #fff; font-family: inherit; font-size: 10.5px; font-weight: 700; text-anchor: middle; }
.dsp-side.is-right .dsp-tag-tx { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }

/* base and lever */
.dsp-plinth {
  position: relative;
  height: 16px;
  margin: 0 12px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #4a5565, #232b36);
  box-shadow: 0 10px 16px rgba(10, 50, 48, .25);
}

.dsp-plinth::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 18px;
  left: 18px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--c2), transparent);
  opacity: .8;
}

.dsp-foot {
  display: grid;
  gap: 10px;
  padding: 14px 16px 18px;
}

.dsp-last {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
}

.dsp-last i { color: var(--c); font-size: 15px; }
.dsp-last b { color: var(--text1); font-weight: 900; }

.dsp-lever {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(180deg, #f3a0ad, #e0566b);
  box-shadow: 0 5px 0 #b13b50, 0 14px 24px rgba(224, 86, 107, .32);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.dsp-lever i { font-size: 22px; }

.dsp-lever::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: dspSheen 4s ease-in-out infinite;
}

.dsp-lever:hover { transform: translateY(-2px); }
.dsp-lever:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }

/* ---------- shared: gradient icon circles and tinted pills ---------- */
#mainContent #view-pumps .pumps-head-icon,
#mainContent #view-pumps .work-board-heading-icon {
  display: grid;
  flex: none;
  place-items: center;
  border: 2px solid var(--theme-stroke, rgba(255, 255, 255, .76));
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--board-tone, #2478e0) 65%, #fff), var(--board-tone, #2478e0));
  box-shadow: 0 8px 19px color-mix(in srgb, var(--board-tone, #2478e0) 28%, transparent);
}

#mainContent #view-pumps .work-board-heading-icon {
  width: 44px;
  height: 44px;
  font-size: 21px;
}

#view-pumps .pumps-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--k) 30%, transparent);
  border-radius: 99px;
  color: var(--k);
  background: color-mix(in srgb, var(--k) 12%, transparent);
  font-size: 12px;
  font-weight: 900;
}

#view-pumps .pumps-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

#view-pumps .pumps-pill.is-live i { animation: dspDot 1.6s ease-in-out infinite; }

/* ---------- page header and summary cards ---------- */
#view-pumps .tanks-topbar {
  --pt: #14a3a0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--pt) 20%, var(--theme-stroke, rgba(255, 255, 255, .78)));
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--pt) 15%, transparent), transparent 46%),
    radial-gradient(circle at 0 100%, color-mix(in srgb, #19a765 14%, transparent), transparent 44%),
    linear-gradient(145deg, var(--theme-glass, rgba(255, 255, 255, .62)), var(--theme-highlight, rgba(246, 249, 255, .34)));
  backdrop-filter: blur(9px) saturate(150%);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--pt) 10%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255, 255, 255, .92));
}

#view-pumps .tanks-topbar::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--pt) 16%, transparent), transparent 58%);
  opacity: .5;
  animation: dspGlowDrift 10s ease-in-out infinite alternate;
}

#view-pumps .pumps-head-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

#mainContent #view-pumps .pumps-head-icon {
  --board-tone: #2478e0;
  width: 54px;
  height: 54px;
  font-size: 26px;
}

#view-pumps .tanks-topbar .page-title {
  margin: 0;
  font-size: 21px;
  font-weight: 900;
}

#view-pumps .tanks-topbar .page-title::after { display: none; }

#view-pumps .tanks-topbar .page-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

#view-pumps .tanks-topbar .btn-primary {
  border: 0;
  color: var(--accent-ink);
  background: var(--accent-bg);
  animation: none;
}

#view-pumps .tanks-topbar .btn-primary::before { display: none; }

#view-pumps .pumps-kpis { margin: 0; }

#view-pumps .pumps-kpi {
  --k: var(--kpi-tone);
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--k) 20%, var(--theme-stroke, rgba(255, 255, 255, .78)));
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--k) 16%, transparent), transparent 50%),
    linear-gradient(145deg, var(--theme-glass, rgba(255, 255, 255, .7)), var(--theme-highlight, rgba(246, 249, 255, .3)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--k) 10%, transparent);
  transition: transform .24s ease, box-shadow .24s ease;
}

#view-pumps .pumps-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--k) 22%, transparent);
}

#view-pumps .pumps-kpi-icon {
  width: 44px;
  height: 44px;
  border: 2px solid var(--theme-stroke, rgba(255, 255, 255, .76));
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--k) 65%, #fff), var(--k));
  box-shadow: 0 8px 19px color-mix(in srgb, var(--k) 28%, transparent);
}

#view-pumps .pumps-kpi b { color: var(--k); }

#view-pumps .pumps-section-heading,
#view-pumps .work-board-heading {
  font-size: 17px;
  font-weight: 900;
}

/* ---------- employees and history panels ---------- */
#mainContent #view-pumps .work-board-card,
#mainContent #view-pumps .shift-history-board {
  --pt: #2478e0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--pt) 20%, var(--theme-stroke, rgba(255, 255, 255, .78)));
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--pt) 15%, transparent), transparent 46%),
    radial-gradient(circle at 0 100%, color-mix(in srgb, #19a765 14%, transparent), transparent 44%),
    linear-gradient(145deg, var(--theme-glass, rgba(255, 255, 255, .62)), var(--theme-highlight, rgba(246, 249, 255, .34)));
  backdrop-filter: blur(9px) saturate(150%);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--pt) 10%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255, 255, 255, .92));
  opacity: 1;
  margin-top: 0;
}

#mainContent #view-pumps .shift-history-board { --pt: #7c5cfc; --board-tone: #7c5cfc; }
#mainContent #view-pumps .work-board-card { --board-tone: #2478e0; }

#mainContent #view-pumps .work-board-card::before,
#mainContent #view-pumps .shift-history-board::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--pt) 16%, transparent), transparent 58%);
  opacity: .5;
  animation: dspGlowDrift 10s ease-in-out infinite alternate;
}

#view-pumps .work-board-section-head,
#view-pumps .shift-history-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#view-pumps .work-board-section-head .section-count {
  padding: 5px 13px;
  border: 1px solid color-mix(in srgb, #2478e0 30%, transparent);
  border-radius: 99px;
  color: #2478e0;
  background: color-mix(in srgb, #2478e0 12%, transparent);
  font-size: 12px;
  font-weight: 900;
}

/* ---------- employee cards: three per row ---------- */
#view-pumps #employeeTable {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

#mainContent #view-pumps .work-board-employee {
  --k: #2478e0;
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 14px 16px 14px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--k) 22%, var(--theme-stroke, rgba(255, 255, 255, .78)));
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--k) 17%, transparent), transparent 52%),
    linear-gradient(145deg, var(--theme-glass, rgba(255, 255, 255, .7)), var(--theme-highlight, rgba(246, 249, 255, .35)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--k) 10%, transparent), inset 0 1px 0 var(--theme-highlight, #fff);
  transition: transform .24s ease, box-shadow .24s ease;
}

#mainContent #view-pumps .work-board-employee:hover {
  transform: translateY(-4px);
  box-shadow: 0 17px 34px color-mix(in srgb, var(--k) 22%, transparent);
}

#mainContent #view-pumps .work-board-employee.is-working { --k: #19a765; }
#mainContent #view-pumps .work-board-employee.long-shift-alert { --k: #e0564b; }

#view-pumps .work-board-employee .employee-row-left {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline-end: 76px;
}

#view-pumps .work-board-employee .employee-avatar {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  border: 2px solid var(--theme-stroke, #fff);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--k) 65%, #fff), var(--k));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--k) 28%, transparent);
  font-size: 18px;
  font-weight: 900;
  animation: none;
}

#view-pumps .work-board-employee .employee-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

#view-pumps .work-board-employee.is-working .employee-avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid color-mix(in srgb, var(--k) 45%, transparent);
  border-radius: 50%;
  animation: dspPulseRing 2.2s ease-out infinite;
}

#view-pumps .work-board-employee .employee-name {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-pumps .work-board-employee .employee-duty-line {
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 700;
}

#view-pumps .work-board-employee .dsp-emp-state {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  margin: 0;
  padding: 3px 11px;
  border: 1px solid color-mix(in srgb, var(--k) 30%, transparent);
  border-radius: 99px;
  color: var(--k);
  background: color-mix(in srgb, var(--k) 12%, transparent);
  font-size: 11.5px;
  font-weight: 900;
}

#view-pumps .work-board-employee.is-working .dsp-emp-state i { animation: dspDot 1.6s ease-in-out infinite; }

/* one box per running shift */
.dsp-shifts {
  display: grid;
  gap: 8px;
}

#view-pumps .work-board-employee .dsp-shift {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--k) 22%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--k) 8%, rgba(255, 255, 255, .4));
}

.dsp-shift-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dsp-shift-pump {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 800;
}

.dsp-shift-pump i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ffb648, #f58a1f);
  font-size: 14px;
}

#view-pumps .work-board-employee .dsp-shift .timer-chip {
  padding: 0;
  border: 0;
  background: none;
  color: var(--k);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .5px;
}

.dsp-shift-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text1) 8%, transparent);
}

.dsp-shift-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--k) 55%, #fff), var(--k), color-mix(in srgb, var(--k) 55%, #fff));
  background-size: 200% 100%;
  animation: dspBarFlow 4s linear infinite;
}

.dsp-shift-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 700;
}

.dsp-shift-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e0564b;
  font-size: 12px;
  font-weight: 900;
}

#view-pumps .work-board-employee .dsp-shift .btn-end-shift {
  flex: none;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--danger);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--danger) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--danger) 22%, transparent);
  font-size: 12.5px;
  font-weight: 900;
}

#view-pumps .work-board-employee .employee-row-actions { display: flex; }

#view-pumps .work-board-employee .employee-row-actions .btn {
  flex: 1 1 auto;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  color: var(--accent-ink);
  background: var(--accent-bg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-solid) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--accent-solid) 22%, transparent);
  font-weight: 900;
}

/* ---------- employee card corrections: same as the approved design ---------- */
#view-pumps .work-board-employee::before { display: none; }

#view-pumps .work-board-heading-text {
  display: grid;
  gap: 2px;
}

#view-pumps .work-board-heading-text small {
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
}

#view-pumps .work-board-section-head .section-count {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: none;
}

#mainContent #view-pumps .work-board-employee {
  grid-template-rows: auto 1fr;
  align-content: stretch;
}

#view-pumps .work-board-employee .employee-row-left {
  align-items: center;
  padding-inline-end: 0;
}

#view-pumps .work-board-employee .employee-row-left > div:nth-child(2) { min-width: 0; flex: 1; }

#view-pumps .work-board-employee .employee-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

#view-pumps .work-board-employee .dsp-emp-state {
  position: static;
  flex: none;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#view-pumps .work-board-employee .dsp-emp-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

#view-pumps .work-board-employee .employee-row-actions { align-self: stretch; }

#view-pumps .work-board-employee .employee-row-actions .btn { height: 100%; }

.dsp-shift-bar.is-open i {
  opacity: .45;
  background-size: 120px 100%;
}

/* ---------- shift history ---------- */
.shift-history-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.shift-history-count {
  padding: 5px 13px;
  border: 1px solid color-mix(in srgb, #7c5cfc 30%, transparent);
  border-radius: 99px;
  color: #7c5cfc;
  background: color-mix(in srgb, #7c5cfc 12%, transparent);
  font-size: 12.5px;
  font-weight: 900;
}

#view-pumps .shift-history-board .work-record-list {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

#view-pumps .shift-history-board .work-record-day-divider {
  --k: #14a3a0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 10px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--k) 25%, transparent);
  border-radius: 14px;
  color: var(--text1);
  background: linear-gradient(120deg, color-mix(in srgb, var(--k) 18%, transparent), color-mix(in srgb, var(--k) 5%, transparent));
  font-weight: 900;
}

#view-pumps .shift-history-board .work-record-day-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text1);
  font-size: 13.5px;
  font-weight: 900;
}

#view-pumps .shift-history-board .work-record-day-label i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--theme-stroke, rgba(255, 255, 255, .76));
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--k) 65%, #fff), var(--k));
  font-size: 15px;
}

#view-pumps .shift-history-board .work-record-day-count {
  padding: 3px 12px;
  border: 1px solid color-mix(in srgb, var(--k) 30%, transparent);
  border-radius: 99px;
  color: var(--k);
  background: color-mix(in srgb, var(--k) 12%, transparent);
  font-size: 12px;
  font-weight: 900;
}

#mainContent #view-pumps .shift-history-board .work-record-row {
  --k: #19a765;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 0;
  margin-bottom: 8px;
  padding: 10px 16px 10px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--k) 18%, var(--theme-stroke, rgba(255, 255, 255, .78)));
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--k) 10%, transparent), transparent 45%),
    linear-gradient(145deg, var(--theme-glass, rgba(255, 255, 255, .7)), var(--theme-highlight, rgba(246, 249, 255, .3)));
  transition: transform .24s ease, box-shadow .24s ease;
}

#mainContent #view-pumps .shift-history-board .work-record-row::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--k);
;display:none!important;}

#mainContent #view-pumps .shift-history-board .work-record-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--k) 16%, transparent);
}

#view-pumps .shift-history-board .work-record-num { display: none; }

#view-pumps .shift-history-board .work-record-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid var(--theme-stroke, rgba(255, 255, 255, .76));
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--k) 65%, #fff), var(--k)) !important;
  box-shadow: 0 8px 19px color-mix(in srgb, var(--k) 28%, transparent);
  font-size: 19px;
}

#view-pumps .shift-history-board .work-record-title {
  font-size: 14px;
  font-weight: 900;
}

#view-pumps .shift-history-board .work-record-pump {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  border-radius: 99px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent);
  font-size: 11px;
  font-weight: 800;
}

#view-pumps .shift-history-board .work-record-time {
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 700;
}

#view-pumps .shift-history-board .work-record-times {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 230px;
}

#view-pumps .shift-history-board .work-record-times span {
  display: grid;
  gap: 1px;
  text-align: center;
}

#view-pumps .shift-history-board .work-record-times small {
  color: var(--text2);
  font-size: 10.5px;
  font-weight: 700;
}

#view-pumps .shift-history-board .work-record-times b {
  font-size: 12.5px;
  font-weight: 900;
}

.work-record-arrow {
  flex: 1;
  min-width: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--k, #19a765) 20%, transparent), var(--k, #19a765));
}

#view-pumps .shift-history-board .work-record-amount {
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--k) 35%, transparent);
  border-radius: 99px;
  color: var(--k) !important;
  background: color-mix(in srgb, var(--k) 12%, transparent);
  font-size: 12.5px;
  font-weight: 900;
  white-space: nowrap;
}

#view-pumps .shift-history-board .work-record-amount i { margin-inline-end: 5px; }

/* full history view: statistic cards */
#view-pumps .work-record-stats-panel {
  border: 1px solid color-mix(in srgb, #7c5cfc 18%, var(--theme-stroke, rgba(255, 255, 255, .78)));
  border-radius: 20px;
  background: linear-gradient(145deg, var(--theme-glass, rgba(255, 255, 255, .7)), var(--theme-highlight, rgba(246, 249, 255, .3)));
}

#view-pumps .work-record-stat-item {
  --k: #7c5cfc;
  border: 1px solid color-mix(in srgb, var(--k) 20%, var(--theme-stroke, rgba(255, 255, 255, .78)));
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--k) 14%, transparent), transparent 50%),
    linear-gradient(145deg, var(--theme-glass, rgba(255, 255, 255, .7)), var(--theme-highlight, rgba(246, 249, 255, .3)));
  transition: transform .24s ease;
}

#view-pumps .work-record-stat-item:hover { transform: translateY(-2px); }

#view-pumps .work-record-stat-item .work-record-stat-icon {
  border: 2px solid var(--theme-stroke, rgba(255, 255, 255, .76));
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--k) 65%, #fff), var(--k));
  box-shadow: 0 8px 19px color-mix(in srgb, var(--k) 28%, transparent);
}

#view-pumps .work-record-stat-item .work-record-stat-value { color: var(--k) !important; }

#view-pumps .work-record-stat-item.is-total {
  color: var(--text1);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--k) 14%, transparent), transparent 50%),
    linear-gradient(145deg, var(--theme-glass, rgba(255, 255, 255, .7)), var(--theme-highlight, rgba(246, 249, 255, .3)));
}

#view-pumps .work-record-stat-item.is-total .work-record-stat-label { color: var(--text2); }

@media (max-width: 1100px) {
  #view-pumps #employeeTable { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  #view-pumps #employeeTable { grid-template-columns: minmax(0, 1fr); }
  #mainContent #view-pumps .shift-history-board .work-record-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  #view-pumps .shift-history-board .work-record-times { grid-column: 2 / 4; min-width: 0; }
  #view-pumps .tanks-topbar { padding: 14px; }
}

@keyframes dspPulseRing {
  0% { transform: scale(.9); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

@keyframes dspBarFlow { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  #view-pumps .tanks-topbar::before,
  #mainContent #view-pumps .work-board-card::before,
  #mainContent #view-pumps .shift-history-board::before,
  .dsp-shift-bar i,
  #view-pumps .work-board-employee.is-working .employee-avatar::after { animation: none; }
}

/* ---------- pump cards: tank-card look, equal heights, flat site buttons ---------- */
#view-pumps {
  --petrol: #f58a1f;
  --diesel: #19a765;
  --cng: #2478e0;
}

#view-pumps #pumpGrid.dsp-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* ---- card: the tank card recipe (fuel tint in two corners, soft glass, drifting glow) ---- */
.dsp {
  max-width: none;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--theme-stroke, rgba(255, 255, 255, .78)));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--c) 17%, transparent), transparent 46%),
    radial-gradient(circle at 0 100%, color-mix(in srgb, var(--c2) 20%, transparent), transparent 44%),
    linear-gradient(145deg, var(--theme-glass, rgba(255, 255, 255, .62)), var(--theme-highlight, rgba(246, 249, 255, .34)));
  backdrop-filter: blur(9px) saturate(150%);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--c) 12%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255, 255, 255, .92));
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.dsp:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c) 42%, var(--border));
  box-shadow: 0 17px 38px rgba(20, 24, 60, .12), 0 8px 25px color-mix(in srgb, var(--c) 30%, transparent);
}

.dsp::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
  border-radius: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 20%, transparent), transparent 58%);
  opacity: .5;
  animation: dspGlowDrift 9s ease-in-out infinite alternate;
}

.dsp::after { display: none; }

/* ---- header: tank-card style, no coloured band ---- */
.dsp .dsp-canopy {
  padding: 16px 16px 8px;
  border-radius: 0;
  color: var(--text1);
  background: none;
  animation: none;
  overflow: visible;
}

.dsp .dsp-canopy::before,
.dsp .dsp-canopy::after { display: none; }

.dsp .dsp-no {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 2px solid var(--theme-stroke, rgba(255, 255, 255, .76));
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 65%, #fff), var(--c));
  box-shadow: 0 8px 19px color-mix(in srgb, var(--c) 28%, transparent);
  font-size: 19px;
  transition: transform .22s ease;
}

.dsp:hover .dsp-no { transform: scale(1.08) rotate(-3deg); }

.dsp .dsp-titles b { font-size: 16px; text-shadow: none; }
.dsp .dsp-titles small { color: var(--text2); opacity: 1; }

.dsp .dsp-led {
  border: 1px solid color-mix(in srgb, #19a765 30%, transparent);
  color: #19a765;
  background: color-mix(in srgb, #19a765 12%, transparent);
  backdrop-filter: none;
}

.dsp.busy .dsp-led {
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 11%, transparent);
}

.dsp .dsp-led i { box-shadow: none; background: currentColor; }
.dsp.free .dsp-led i,
.dsp.is-inactive .dsp-led i { background: currentColor; box-shadow: none; }

.dsp .dsp-edit {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text2);
  background: var(--theme-glass, rgba(255, 255, 255, .7));
}

.dsp .dsp-edit:hover { color: var(--c); border-color: color-mix(in srgb, var(--c) 40%, var(--border)); transform: none; }

/* ---- machine: light frosted body, dark screen stays ---- */
.dsp-machine { align-items: stretch; padding-top: 8px; }

.dsp .dsp-body {
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--c) 18%, rgba(255, 255, 255, .8));
  background: linear-gradient(165deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .3) 60%, color-mix(in srgb, var(--c2) 12%, rgba(255, 255, 255, .2)));
  box-shadow: inset 0 1px 0 #fff, 0 10px 22px color-mix(in srgb, var(--c) 12%, transparent);
}

.dsp .dsp-panel {
  height: 100%;
  align-content: space-between;
  border: 1px solid color-mix(in srgb, var(--c) 14%, rgba(255, 255, 255, .7));
  background: linear-gradient(170deg, rgba(255, 255, 255, .5), color-mix(in srgb, var(--c) 8%, rgba(255, 255, 255, .25)));
  box-shadow: none;
}

.dsp-screen {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c2) 35%, transparent), 0 8px 20px color-mix(in srgb, var(--c) 22%, transparent), inset 0 0 22px rgba(0, 0, 0, .35);
}

.dsp.busy .dsp-screen { animation: dspScreen 3s ease-in-out infinite; }

/* same rows in every state */
.dsp-minis.is-idle .dsp-mini { opacity: .55; }
.dsp-gauge.is-idle { opacity: .45; filter: saturate(.5); }

/* ---- flat chips and buttons, like the rest of the site ---- */
.dsp .dsp-grade {
  border: 1px solid color-mix(in srgb, var(--gc) 32%, transparent);
  border-radius: 99px;
  color: var(--gc);
  background: color-mix(in srgb, var(--gc) 13%, transparent);
  box-shadow: none;
  text-shadow: none;
  animation: none;
}

.dsp .dsp-lever {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--danger);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--danger) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--danger) 22%, transparent);
  font-size: 14px;
  text-shadow: none;
}

.dsp .dsp-lever i { font-size: 18px; }
.dsp .dsp-lever:hover { transform: translateY(-1px); box-shadow: 0 2px 4px color-mix(in srgb, var(--danger) 40%, transparent), 0 10px 24px color-mix(in srgb, var(--danger) 32%, transparent); }
.dsp .dsp-lever:active { transform: scale(.97); box-shadow: none; }
.dsp .dsp-lever::after { display: none; }

.dsp .dsp-lever.is-idle {
  color: var(--text2);
  background: var(--panel);
  border: 1.5px solid var(--border-strong);
  box-shadow: 0 2px 10px rgba(20, 24, 60, .06);
}

.dsp .dsp-lever.is-idle i { animation: dspBreathe 2.4s ease-in-out infinite; }

.dsp .dsp-plinth {
  height: 6px;
  margin: 0 14px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--c), var(--c2));
  box-shadow: none;
}

.dsp .dsp-plinth::before { display: none; }

/* employee cards: the site's normal buttons */
#view-pumps .work-board-employee .employee-row-actions .btn,
#view-pumps .work-board-employee .dsp-shift .btn-end-shift {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-solid) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--accent-solid) 22%, transparent);
}

#view-pumps .work-board-employee .employee-row-actions .btn { background: var(--accent-bg); color: var(--accent-ink); border: 0; border-radius: 12px; min-height: 42px; }

#view-pumps .work-board-employee .dsp-shift .btn-end-shift {
  background: var(--danger);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--danger) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--danger) 22%, transparent);
}

/* dark theme */
html[data-theme="dark"] .dsp {
  border-color: rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--c) 18%, transparent), transparent 46%),
    radial-gradient(circle at 0 100%, color-mix(in srgb, var(--c2) 16%, transparent), transparent 44%),
    linear-gradient(145deg, rgba(35, 42, 54, .68), rgba(17, 22, 30, .52));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .dsp .dsp-body {
  border-color: rgba(255, 255, 255, .12);
  background: linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 60%, color-mix(in srgb, var(--c) 14%, rgba(255, 255, 255, .02)));
}

html[data-theme="dark"] .dsp .dsp-panel {
  border-color: rgba(255, 255, 255, .1);
  background: linear-gradient(170deg, rgba(255, 255, 255, .06), color-mix(in srgb, var(--c) 10%, rgba(255, 255, 255, .02)));
}

@keyframes dspGlowDrift {
  0% { transform: translate3d(-22%, -18%, 0) scale(1); }
  100% { transform: translate3d(14%, 16%, 0) scale(1.12); }
}

@keyframes dspScreen { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c2) 70%, transparent), 0 10px 28px color-mix(in srgb, var(--c2) 45%, transparent), inset 0 0 22px rgba(0, 0, 0, .35); } }
@keyframes dspBreathe { 50% { transform: scale(1.18); opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  .dsp::before, .dsp.busy .dsp-screen, .dsp .dsp-lever.is-idle i { animation: none; }
}

@keyframes dspRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dspFlow { to { background-position: 250% 0; } }
@keyframes dspSheen { 60%, 100% { left: 120%; } }
@keyframes dspDrift { to { transform: translate(-60px, 50px) scale(1.15); } }
@keyframes dspDot { 50% { opacity: .35; transform: scale(1.4); } }
@keyframes dspHose { to { stroke-dashoffset: -26; } }
@keyframes dspTip { 50% { filter: drop-shadow(0 0 9px var(--k2)); } }
@keyframes dspGauge { from { stroke-dashoffset: 100; } }
@keyframes dspNeedle { from { transform: rotate(-90deg); } }
@keyframes dspRing { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, #2fa96d 15%, transparent); } }

@media (max-width: 760px) {
  #view-pumps #pumpGrid.dsp-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #view-pumps .tanks-topbar .btn-primary,
  #view-pumps .tanks-topbar .btn-primary::before,
  .dsp,
  .dsp-canopy::after,
  .dsp-led i,
  .dsp-hose-flow,
  .dsp-tip,
  .dsp-g-fg,
  .dsp-needle,
  .dsp-lever::after,
  .is-working .employee-avatar,
  .is-working .dsp-emp-state i { animation: none; }
}
/* Pump cards: light screens in the light theme, a clearly outlined machine body */

/* ---- light theme: pale glass screens ---- */
html:not([data-theme="dark"]) .dsp-screen {
    border: 2px solid color-mix(in srgb, var(--c) 38%, #c6dedb);
    color: #0d5f58;
    background:
        radial-gradient(circle at 12% 0%, #ffffff, transparent 55%),
        linear-gradient(165deg, #f4fbfa, #e1f2ef 60%, color-mix(in srgb, var(--c2) 14%, #dcefec));
    box-shadow:
        inset 0 2px 10px rgba(20, 90, 86, .12),
        inset 0 0 0 1px rgba(255, 255, 255, .85),
        0 6px 14px color-mix(in srgb, var(--c) 14%, transparent);
}

html:not([data-theme="dark"]) .dsp-screen::after {
    background: linear-gradient(115deg, rgba(255, 255, 255, .55), transparent 40%);
}

html:not([data-theme="dark"]) .dsp-screen small,
html:not([data-theme="dark"]) .dsp-sub {
    color: #2a7e76;
    opacity: 1;
}

html:not([data-theme="dark"]) .dsp-digits {
    color: #0d6b62;
    text-shadow: none;
}

html:not([data-theme="dark"]) .dsp-digits.is-over {
    color: #c2410c;
    text-shadow: none;
}

html:not([data-theme="dark"]) .dsp-screen.is-off .dsp-digits {
    color: #86a8a3;
}

html:not([data-theme="dark"]) .dsp-mini {
    border: 2px solid color-mix(in srgb, var(--c) 30%, #c6dedb);
    color: #0d6b62;
    background:
        radial-gradient(circle at 10% 0%, #ffffff, transparent 60%),
        linear-gradient(165deg, #f4fbfa, #e3f3f0);
    box-shadow: inset 0 2px 8px rgba(20, 90, 86, .1), inset 0 0 0 1px rgba(255, 255, 255, .85);
}

html:not([data-theme="dark"]) .dsp-mini small {
    color: #2a7e76;
    opacity: 1;
}

html:not([data-theme="dark"]) .dsp-mini b {
    color: #0d6b62;
    text-shadow: none;
}

/* ---- the machine body is outlined so each pump reads as one device ---- */
.dsp .dsp-body {
    border: 2px solid color-mix(in srgb, var(--c) 45%, rgba(120, 140, 145, .35));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--c) 9%, transparent),
        inset 0 1px 0 #fff,
        0 12px 24px color-mix(in srgb, var(--c) 16%, transparent);
}

html[data-theme="dark"] .dsp .dsp-body {
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 12px 24px rgba(0, 0, 0, .4);
}