/* Pumps and shifts page: summary strip, tinted pump cards, employee cards, clearer history. */

#view-pumps {
  --pp-glass: rgba(255, 255, 255, .58);
  --pp-glass-soft: rgba(255, 255, 255, .46);
  --pp-edge: rgba(255, 255, 255, .85);
  --pp-ink: var(--text1);
  --pp-ink-soft: #2f3a4d;
}

html[data-theme="dark"] #view-pumps {
  --pp-glass: rgba(34, 42, 84, .56);
  --pp-glass-soft: rgba(255, 255, 255, .08);
  --pp-edge: rgba(255, 255, 255, .16);
  --pp-ink: #ffffff;
  --pp-ink-soft: #dbe3ee;
}

#view-pumps .page-title,
#view-pumps .page-sub {
  color: var(--pp-ink);
}

#view-pumps .page-sub {
  color: var(--pp-ink-soft);
  font-weight: 700;
}

/* ---------- summary strip ---------- */
.pumps-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.pumps-kpi {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--pp-edge);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .28)),
    var(--pp-glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 16px 36px rgba(31, 38, 90, .12),
    inset 0 1px 0 rgba(255, 255, 255, .85);
  animation: ppRise .55s cubic-bezier(.2, .9, .3, 1.1) both;
}

html[data-theme="dark"] .pumps-kpi {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .07)),
    var(--pp-glass);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.pumps-kpi-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  font-size: 22px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--kpi-tone) 70%, #fff), var(--kpi-tone));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--kpi-tone) 30%, transparent);
}

.pumps-kpi b {
  display: block;
  color: var(--pp-ink);
  font-size: 1.6em;
  font-weight: 800;
  line-height: 1.2;
}

.pumps-kpi small {
  color: var(--pp-ink-soft);
  font-weight: 700;
}

@keyframes ppRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- pump cards ---------- */
#view-pumps .pump-card {
  --pp-tone: #c08a1e;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pp-tone) 28%, var(--pp-edge));
  border-radius: 24px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--pp-tone) 12%, transparent), transparent 60%),
    var(--pp-glass-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.1), box-shadow .35s ease;
}

#view-pumps .pump-card.fuel-diesel {
  --pp-tone: #2fa96d;
}

#view-pumps .pump-card.fuel-cng {
  --pp-tone: #3b82f6;
}

#view-pumps .pump-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 34px color-mix(in srgb, var(--pp-tone) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}

#view-pumps .pump-card .pump-fuel-icon-circle {
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--pp-tone) 70%, #fff), var(--pp-tone));
  animation: ppFloat 3.6s ease-in-out infinite;
}

#view-pumps .pump-card .pump-fuel-icon-circle i {
  color: #fff;
}

@keyframes ppFloat {
  50% {
    transform: translateY(-3px) rotate(-3deg);
  }
}

#view-pumps .pump-card .pump-name,
#view-pumps .pump-card .pump-card-employee-copy strong,
#view-pumps .pump-card .pump-card-metric strong {
  color: var(--pp-ink);
  font-weight: 800;
}

#view-pumps .pump-card .pump-type,
#view-pumps .pump-card .pump-card-employee-copy span,
#view-pumps .pump-card .pump-card-metric span {
  color: var(--pp-ink-soft);
  font-weight: 700;
}

#view-pumps .pump-card .pump-card-accent span {
  background: linear-gradient(90deg, var(--pp-tone), color-mix(in srgb, var(--pp-tone) 40%, #fff));
}

#view-pumps .pump-card.busy .pump-card-accent span {
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, var(--pp-tone), color-mix(in srgb, var(--pp-tone) 30%, #fff), var(--pp-tone));
  animation: ppFlow 2s linear infinite;
}

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

#view-pumps .pump-status-pill {
  font-weight: 800;
}

#view-pumps .pump-status-pill .status-dot {
  animation: ppLive 1.8s ease-in-out infinite;
}

@keyframes ppLive {
  50% {
    transform: scale(1.4);
    opacity: .6;
  }
}

html[data-theme="dark"] #view-pumps .pump-status-pill.free {
  color: #7ff0b2;
}

html[data-theme="dark"] #view-pumps .pump-status-pill.busy {
  color: #ffd685;
}

html[data-theme="dark"] #view-pumps .pump-status-pill.is-inactive {
  color: #ffa08a;
}

/* ---------- employees as compact cards ---------- */
#view-pumps .work-board-card,
#view-pumps .shift-history-board {
  border: 1px solid var(--pp-edge);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .28)),
    var(--pp-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 24px 60px rgba(31, 38, 90, .14),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}

html[data-theme="dark"] #view-pumps .work-board-card,
html[data-theme="dark"] #view-pumps .shift-history-board {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .07)),
    var(--pp-glass);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

#view-pumps #employeeTable {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

#view-pumps #employeeTable .empty {
  grid-column: 1 / -1;
}

#view-pumps .employee-row.work-board-employee {
  display: grid;
  align-content: start;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--pp-glass-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.1), border-color .3s ease;
}

#view-pumps .employee-row.work-board-employee:hover {
  transform: translateY(-3px);
}

#view-pumps .employee-row.work-board-employee.is-working {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

#view-pumps .employee-row.work-board-employee .employee-row-left {
  min-width: 0;
}

#view-pumps .employee-row.work-board-employee .employee-name {
  color: var(--pp-ink);
  font-weight: 800;
}

#view-pumps .employee-row.work-board-employee .employee-status {
  color: var(--pp-ink-soft);
  font-weight: 700;
}

#view-pumps .employee-row.work-board-employee .employee-row-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  width: 100%;
  gap: 8px;
}

#view-pumps .employee-row.work-board-employee .employee-row-actions .btn {
  width: 100% !important;
  max-width: none;
  justify-self: stretch;
  min-height: 46px;
  border-radius: 14px;
  font-weight: 800;
}

/* ---------- shift history ---------- */
#view-pumps .shift-history-board .work-record-row {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--pp-glass-soft);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.1);
}

#view-pumps .shift-history-board .work-record-row:hover {
  transform: translateX(-4px);
}

#view-pumps .shift-history-board .work-record-title {
  color: var(--pp-ink);
  font-weight: 800;
}

#view-pumps .shift-history-board .work-record-time {
  color: var(--pp-ink-soft);
  font-weight: 700;
}

.work-record-auto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 99px;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  font-size: .8em;
  font-weight: 800;
}

html[data-theme="dark"] .work-record-auto {
  color: #ffd685;
}

html[data-theme="dark"] #view-pumps .shift-history-board .work-record-amount:not([style*="danger"]) {
  color: #cfd6ff !important;
}

@media (max-width: 760px) {
  .pumps-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pumps-kpi,
  #view-pumps .pump-card .pump-fuel-icon-circle,
  #view-pumps .pump-card.busy .pump-card-accent span,
  #view-pumps .pump-status-pill .status-dot {
    animation: none !important;
  }
}