.requests-toolbar {
  margin-bottom: 1.25rem;
}

.requests-search {
  display: flex;
  gap: 0.75rem;
}

.requests-search input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text);
  font-size: 0.9rem;
}

.requests-search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.requests-search .btn {
  width: auto;
  padding: 0.6rem 1.25rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* Dense table: full-width container with thin glass edge, tight rows.
   On the requests page (.main--fill), the toolbar/metrics above stay their
   natural height and this area grows to fill the rest of the viewport, with
   only the table body scrolling internally — pagination always stays
   in view below it instead of requiring a page-level scroll. */

.requests-table-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.dense-table-wrap {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 4px 4px 0 0;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-sm);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.requests-table-area .pagination {
  flex-shrink: 0;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.data-table--dense thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
}

.data-table--dense th {
  padding: 0.4rem 0.75rem;
  font-size: 0.7rem;
}

.data-table--dense td {
  padding: 0.28rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.3;
}

.data-table--dense tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.data-table--dense tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.data-table--dense .status-pill,
.data-table--dense .attempts-badge {
  border-radius: 4px;
}

.data-table__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem 0;
}

.status-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-muted);
}

.status-pill--delivered,
.status-pill--completed {
  background: var(--good-soft);
  color: var(--good);
}

.status-pill--out-for-delivery,
.status-pill--received,
.status-pill--accepted {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-pill--delivery-attempted {
  background: var(--warn-soft);
  color: var(--warn);
  animation: status-pill-flash-amber 3.2s ease-in-out infinite;
}

.status-pill--unsuccessful {
  background: var(--bad-soft);
  color: var(--bad);
  animation: status-pill-flash-red 3.2s ease-in-out infinite;
}

@keyframes status-pill-flash-amber {
  0%, 100% {
    background: var(--warn-soft);
  }
  50% {
    background: color-mix(in srgb, var(--warn) 45%, var(--warn-soft));
  }
}

@keyframes status-pill-flash-red {
  0%, 100% {
    background: var(--bad-soft);
  }
  50% {
    background: color-mix(in srgb, var(--bad) 45%, var(--bad-soft));
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-pill--delivery-attempted,
  .status-pill--unsuccessful {
    animation: none;
  }
}

.status-pill--canceled,
.status-pill--cancelled-charged,
.status-pill--fleetable-rejected,
.status-pill--not-received {
  background: var(--bad-soft);
  color: var(--bad);
}

.status-pill--in-progress {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--accent-soft);
  color: var(--accent);
  z-index: 0;
  animation: status-pill-glow-text 2.2s ease-in-out infinite;
}

.status-pill--in-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--accent);
  opacity: 0;
  animation: status-pill-glow-fill 2.2s ease-in-out infinite;
}

@keyframes status-pill-glow-fill {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes status-pill-glow-text {
  0%,
  100% {
    color: var(--accent);
  }
  50% {
    color: var(--accent-contrast);
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-pill--in-progress {
    animation: none;
    background: var(--accent-soft);
  }
}

.attempts-badge {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.attempts-badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.leg-type-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-muted);
}

.leg-type-badge--final-mile {
  background: var(--accent-soft);
  color: var(--accent);
}