/**
 * Premium App Shell — Internal product experience only.
 * Luxury gradient + branded imagery, glassmorphism, depth.
 * .app-shell acts as the background wrapper (gradient, image, overlay, wave).
 * Do not use on landing/marketing pages.
 */

/* ---------------------------------------------------------------------------
   Background image URLs (coastal road — desktop 16:9, mobile 9:16)
   --------------------------------------------------------------------------- */
:root {
  --app-shell-bg-desktop: url('/assets/images/desktop-coastal-bg.png');
  --app-shell-bg-mobile: url('/assets/images/mobile-coastal-bg.png');
  --app-shell-overlay: rgba(15, 23, 42, 0.55);
}

/* ---------------------------------------------------------------------------
   Base gradient system (sits under image for depth)
   --------------------------------------------------------------------------- */
.app-shell {
  min-height: 100vh;
  color: var(--text-primary);
  position: relative;
  overflow-x: hidden;
  background-color: #131b28;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(156, 197, 43, 0.22), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(90, 200, 250, 0.2), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(0, 122, 255, 0.12), transparent 55%),
    linear-gradient(180deg, #1a2332 0%, #131b28 50%, #0f172a 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

@media (min-width: 1024px) {
  .app-shell {
    background-attachment: fixed;
  }
}

@media (max-width: 1023px) {
  .app-shell {
    background-attachment: scroll;
  }
}

/* ---------------------------------------------------------------------------
   Background image layer + dark overlay (above gradient, below UI)
   Desktop: 16:9 coastal image. Mobile/tablet: 9:16 coastal image.
   --------------------------------------------------------------------------- */
.app-shell::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--app-shell-overlay), var(--app-shell-overlay)), var(--app-shell-bg-mobile);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  .app-shell::after {
    background-image: linear-gradient(var(--app-shell-overlay), var(--app-shell-overlay)), var(--app-shell-bg-desktop);
    background-attachment: fixed;
  }
}

@media (max-width: 1023px) {
  .app-shell::after {
    background-attachment: scroll;
  }
}

/* Subtle parallax-style drift (desktop only, respects reduced motion) */
@media (min-width: 1024px) {
  @media (prefers-reduced-motion: no-preference) {
    .app-shell::after {
      animation: app-shell-bg-drift 20s ease-in-out infinite;
    }
  }
}

@keyframes app-shell-bg-drift {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(4px) scale(1.002); }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Top light overlay + subtle animated wave / energy layer
   --------------------------------------------------------------------------- */
.app-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 55%),
    linear-gradient(105deg, transparent 0%, rgba(90, 200, 250, 0.03) 20%, transparent 40%, rgba(156, 197, 43, 0.02) 60%, transparent 80%, rgba(90, 200, 250, 0.03) 100%);
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .app-shell::before {
    animation: app-shell-wave 28s linear infinite;
  }
}

@keyframes app-shell-wave {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell::before {
    animation: none;
    background-size: 100% 100%, 100% 100%;
  }
}

@media (max-width: 1023px) {
  .app-shell::before {
    animation-duration: 40s;
  }
}

.app-shell__container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

@media (min-width: 768px) {
  .app-shell__container {
    padding: var(--space-8) var(--space-6);
  }
}

@media (min-width: 1024px) {
  .app-shell__container {
    padding: var(--space-10) var(--space-8);
  }
}

/* ---------------------------------------------------------------------------
   Page header — premium typography on gradient
   --------------------------------------------------------------------------- */
.app-shell__page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.app-shell__page-title {
  font-size: var(--font-2xl);
  font-weight: var(--weight-bold);
  color: rgba(255, 255, 255, 0.98);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: var(--line-tight);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.app-shell__page-subtitle {
  font-size: var(--font-base);
  color: rgba(255, 255, 255, 0.78);
  margin: var(--space-1) 0 0 0;
}

.app-shell__page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Premium glass cards — frosted, elevated, layered
   --------------------------------------------------------------------------- */
.app-shell__card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(90, 200, 250, 0.12);
  padding: var(--space-6);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.app-shell__card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(90, 200, 250, 0.18);
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .app-shell__card {
    padding: var(--space-8);
  }
}

.app-shell__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-shell__card-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Stat cards — glass panels with subtle glow
   --------------------------------------------------------------------------- */
.app-shell__stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
  .app-shell__stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.app-shell__stat-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: var(--space-5);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(90, 200, 250, 0.1);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.app-shell__stat-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.4),
    0 0 32px rgba(90, 200, 250, 0.14);
  transform: translateY(-2px);
}

.app-shell__stat-label {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.app-shell__stat-value {
  font-size: var(--font-2xl);
  font-weight: var(--weight-bold);
  color: rgba(255, 255, 255, 0.98);
  letter-spacing: -0.02em;
  line-height: var(--line-tight);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.app-shell__stat-value--accent {
  color: #7dd3fc;
  text-shadow: 0 0 20px rgba(125, 211, 252, 0.25);
}

/* ---------------------------------------------------------------------------
   Section block
   --------------------------------------------------------------------------- */
.app-shell__section {
  margin-bottom: var(--space-8);
}

.app-shell__section-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 var(--space-4) 0;
}

.app-shell__section-content {
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Empty state — premium glass panel
   --------------------------------------------------------------------------- */
.app-shell__empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(90, 200, 250, 0.1);
}

.app-shell__empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.7;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.app-shell__empty-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 var(--space-2) 0;
}

.app-shell__empty-description {
  font-size: var(--font-base);
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 var(--space-6) 0;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.app-shell__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ---------------------------------------------------------------------------
   List / delivery cards — glass, premium shadow, hover glow
   --------------------------------------------------------------------------- */
.app-shell__list {
  display: grid;
  gap: var(--space-4);
}

.app-shell__list-item {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: var(--space-5);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(90, 200, 250, 0.1);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.app-shell__list-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    0 0 36px rgba(90, 200, 250, 0.14);
  transform: translateY(-2px);
}

/* Delivery cards from ui-components inside app-shell list */
.app-shell .app-shell__list > .delivery-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: var(--space-5);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(90, 200, 250, 0.1);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.app-shell .app-shell__list > .delivery-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    0 0 36px rgba(90, 200, 250, 0.14);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Top nav — translucent, branded, gradient shows through
   --------------------------------------------------------------------------- */
/* Delivery tracking page: content must sit above fixed background (::before/::after at z-index: 0) */
.app-shell .tracking-container {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.app-shell .nav {
  position: relative;
  z-index: 10;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.app-shell .nav__link,
.app-shell .nav__user-name,
.app-shell .nav__user-role {
  color: rgba(255, 255, 255, 0.9);
}

.app-shell .nav__link:hover {
  color: #7dd3fc;
}

.app-shell .nav__logo-mark {
  color: #9cc52b;
  text-shadow: 0 0 12px rgba(156, 197, 43, 0.4);
}

.app-shell .nav--landing-premium .nav__logo-mark,
.app-shell.landing-page .nav__logo-mark {
  color: #9cc52b;
}

/* ---------------------------------------------------------------------------
   Driver shell variant
   --------------------------------------------------------------------------- */
.app-shell--driver .app-shell__card,
.app-shell--driver .app-shell__stat-card,
.app-shell--driver .app-shell__empty {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
}

.app-shell--driver .main-content {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell--driver .welcome-card,
.app-shell--driver .pickup-queue-card,
.app-shell--driver .quick-action-card,
.app-shell--driver .queue-item {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(90, 200, 250, 0.1);
}

.app-shell--driver .welcome-card:hover,
.app-shell--driver .pickup-queue-card:hover,
.app-shell--driver .quick-action-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 36px rgba(90, 200, 250, 0.14);
}

.app-shell--driver .load-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(90, 200, 250, 0.1);
}

/* ---------------------------------------------------------------------------
   Profile page — mobile-responsive (driver + customer)
   --------------------------------------------------------------------------- */
.app-shell #profile-content,
.app-shell .profile-grid {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.app-shell #profile-content .card {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .app-shell #profile-content .profile-photo-row {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: var(--space-4);
  }
  .app-shell #profile-content .profile-photo-row__avatar {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-3);
  }
  .app-shell #profile-content .profile-photo-row__actions {
    flex: none;
    min-width: 0;
    width: 100%;
  }
  .app-shell #profile-content .account-type-row__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .app-shell #profile-content .account-type-row__inner .badge {
    width: 100%;
    margin-bottom: var(--space-2);
  }
  .app-shell #profile-content #switch-to-driver-btn,
  .app-shell #profile-content #switch-to-customer-btn {
    min-width: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }
  .app-shell .profile-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: 0;
  }
  .app-shell .dashboard {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  /* Prevent text truncation in profile cards */
  .app-shell #profile-content .card {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .app-shell #profile-content .card h2 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
  }
  .app-shell #profile-content .card p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
  }
  .app-shell #profile-content .dashboard-stats {
    grid-template-columns: 1fr;
  }
  .app-shell #profile-content .stat-card {
    min-width: 0;
  }
  .app-shell #profile-content .stat-card h3,
  .app-shell #profile-content .stat-card .value {
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
  }
  .app-shell #profile-content .delete-account-section .btn-delete-account {
    min-height: 48px;
  }
}

/* Mobile-safe page container (320px–414px) — Profile & any app-shell page */
@media (max-width: 413px) {
  .app-shell .dashboard {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------------------------------------------------------------------------
   Legacy .card and .dashboard-header → premium glass + light text
   --------------------------------------------------------------------------- */
.app-shell .card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(90, 200, 250, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.app-shell .card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(90, 200, 250, 0.18);
}

.app-shell .dashboard-header h1,
.app-shell .dashboard-header .dashboard-header__title {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.02em;
}

.app-shell .dashboard-header p,
.app-shell .dashboard-header .dashboard-header__subtitle {
  margin-top: var(--space-2);
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* Dashboard wrapper (delivery-history, payments, profile) — same as container */
.app-shell .dashboard {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
@media (min-width: 768px) {
  .app-shell .dashboard { padding: var(--space-8) var(--space-6); }
}
@media (min-width: 1024px) {
  .app-shell .dashboard { padding: var(--space-10) var(--space-8); }
}

/* Delivery history list cards — premium glass + ultra readability */
.app-shell .deliveries-list .delivery-card {
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(90, 200, 250, 0.1),
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
  padding: var(--space-6);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
@media (min-width: 768px) {
  .app-shell .deliveries-list .delivery-card {
    padding: var(--space-8);
  }
}
.app-shell .deliveries-list .delivery-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(90, 200, 250, 0.14),
    0 1px 0 0 rgba(255, 255, 255, 0.08) inset;
  transform: translateY(-2px);
}

/* Delivery history card — header (title + status pill) */
.app-shell .deliveries-list .delivery-card .delivery-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.app-shell .deliveries-list .delivery-card .delivery-header h3 {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.98);
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Delivery history card — body (from/to, distance, price, date) */
.app-shell .deliveries-list .delivery-card .delivery-body {
  display: grid;
  gap: var(--space-2);
}
.app-shell .deliveries-list .delivery-card .delivery-body p {
  margin: 0;
  font-size: var(--font-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.app-shell .deliveries-list .delivery-card .delivery-body p strong {
  color: rgba(255, 255, 255, 0.72);
  font-weight: var(--weight-semibold);
  margin-right: 0.35em;
}

/* Status badges (ui-components uses .status-badge .status-pending etc.) — gradient pills */
.app-shell .status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.app-shell .status-badge.status-pending {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.55), rgba(245, 158, 11, 0.5));
  color: #fef3c7;
  box-shadow: 0 2px 12px rgba(251, 191, 36, 0.3);
}
.app-shell .status-badge.status-accepted {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.5), rgba(0, 122, 255, 0.45));
  color: #e0f2fe;
  box-shadow: 0 2px 12px rgba(56, 189, 248, 0.25);
}
.app-shell .status-badge.status-picked-up {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.5), rgba(0, 122, 255, 0.45));
  color: #e0f2fe;
  box-shadow: 0 2px 12px rgba(56, 189, 248, 0.25);
}
.app-shell .status-badge.status-in-transit {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.5), rgba(34, 197, 94, 0.45));
  color: #dcfce7;
  box-shadow: 0 2px 12px rgba(52, 199, 89, 0.25);
}
.app-shell .status-badge.status-delivered {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.55), rgba(34, 197, 94, 0.5));
  color: #dcfce7;
  box-shadow: 0 2px 12px rgba(52, 199, 89, 0.3);
}
.app-shell .status-badge.status-cancelled {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.5), rgba(239, 68, 68, 0.45));
  color: #fee2e2;
  box-shadow: 0 2px 12px rgba(248, 113, 113, 0.25);
}
.app-shell .status-badge.status-unknown {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

/* Form groups (Profile, settings) — dark translucent inputs */
.app-shell .form-group input,
.app-shell .form-group select,
.app-shell .form-group textarea {
  color: #1a1a2e;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.app-shell .form-group input:focus,
.app-shell .form-group select:focus,
.app-shell .form-group textarea:focus {
  outline: none;
  border-color: rgba(0, 122, 255, 0.6);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}
.app-shell .form-group input::placeholder,
.app-shell .form-group textarea::placeholder {
  color: #64748b;
}
.app-shell .form-group input:disabled,
.app-shell .form-group select:disabled,
.app-shell .form-group textarea:disabled {
  background: #f1f5f9;
  color: #475569;
  opacity: 0.9;
}
.app-shell .form-group label {
  color: rgba(255, 255, 255, 0.9);
}

/* Delivery card text inside app shell */
.app-shell .app-shell__list-item.delivery-card {
  cursor: pointer;
}

.app-shell .delivery-card__header,
.app-shell .delivery-card__info,
.app-shell .delivery-card__meta {
  color: inherit;
}

.app-shell .delivery-card__id {
  color: rgba(255, 255, 255, 0.6) !important;
}

.app-shell .delivery-card__route {
  color: rgba(255, 255, 255, 0.95) !important;
}

.app-shell .delivery-card__meta {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ---------------------------------------------------------------------------
   Status pills — stronger, more alive, subtle glow
   --------------------------------------------------------------------------- */
.app-shell .badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.app-shell .badge--pending {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.5), rgba(245, 158, 11, 0.45));
  color: #fef3c7;
  box-shadow: 0 2px 12px rgba(251, 191, 36, 0.25);
}

.app-shell .badge--accepted {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.45), rgba(0, 122, 255, 0.4));
  color: #e0f2fe;
  box-shadow: 0 2px 12px rgba(56, 189, 248, 0.2);
}

.app-shell .badge--picked-up {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.45), rgba(0, 122, 255, 0.4));
  color: #e0f2fe;
  box-shadow: 0 2px 12px rgba(56, 189, 248, 0.2);
}

.app-shell .badge--in-transit {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.45), rgba(34, 197, 94, 0.4));
  color: #dcfce7;
  box-shadow: 0 2px 12px rgba(52, 199, 89, 0.2);
}

.app-shell .badge--delivered {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.5), rgba(34, 197, 94, 0.45));
  color: #dcfce7;
  box-shadow: 0 2px 12px rgba(52, 199, 89, 0.25);
}

.app-shell .badge--cancelled {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.45), rgba(239, 68, 68, 0.4));
  color: #fee2e2;
  box-shadow: 0 2px 12px rgba(248, 113, 113, 0.2);
}

/* ---------------------------------------------------------------------------
   Payments / balance and transaction cards — glass
   --------------------------------------------------------------------------- */
.app-shell .balance-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(90, 200, 250, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.app-shell .balance-amount {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.app-shell .balance-label {
  color: rgba(255, 255, 255, 0.72);
}

.app-shell .transaction-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(90, 200, 250, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

.app-shell .transaction-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    0 0 36px rgba(90, 200, 250, 0.14);
}

.app-shell .transaction-title {
  color: rgba(255, 255, 255, 0.95);
}

.app-shell .transaction-date {
  color: rgba(255, 255, 255, 0.65);
}

.app-shell .empty-state {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(90, 200, 250, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

/* Delivery history empty state — premium panel */
.app-shell .deliveries-list .empty-state {
  padding: var(--space-14) var(--space-8);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.app-shell .deliveries-list .empty-state .empty-state-icon {
  font-size: 3.5rem;
  margin-bottom: var(--space-4);
  opacity: 0.85;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}
.app-shell .deliveries-list .empty-state h3 {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.98);
  margin-bottom: var(--space-3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.app-shell .deliveries-list .empty-state p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-6);
  font-size: var(--font-base);
}
.app-shell .deliveries-list .empty-state .btn-primary {
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
}

/* ---------------------------------------------------------------------------
   Buttons in app shell — ensure primary/secondary/ghost work on dark
   --------------------------------------------------------------------------- */
.app-shell .btn-glass,
.app-shell .btn-ghost {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.app-shell .btn-glass:hover,
.app-shell .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.app-shell .btn-secondary {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.5);
  background: rgba(125, 211, 252, 0.12);
}

.app-shell .btn-secondary:hover {
  background: rgba(125, 211, 252, 0.22);
  border-color: rgba(125, 211, 252, 0.6);
  color: #e0f2fe;
}

/* Card header links (View all, etc.) */
.app-shell .app-shell__card-header .btn,
.app-shell .app-shell__card-header a {
  color: rgba(255, 255, 255, 0.85);
}

.app-shell .app-shell__card-header a:hover {
  color: #7dd3fc;
}

/* Settings page — glass panels and light text */
.app-shell .settings-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(90, 200, 250, 0.12);
}

.app-shell .settings-card h2 {
  color: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.app-shell .settings-row label {
  color: rgba(255, 255, 255, 0.9);
}

.app-shell .settings-row .muted {
  color: rgba(255, 255, 255, 0.6);
}

.app-shell .settings-row:not(:last-child) {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.app-shell .settings-row .toggle-wrap {
  align-items: center;
  justify-content: flex-end;
}

.app-shell .settings-row .toggle-wrap .muted {
  color: rgba(255, 255, 255, 0.75);
}

.app-shell .back-link {
  color: rgba(255, 255, 255, 0.85);
}

.app-shell .back-link:hover {
  color: #7dd3fc;
}

/* Delivery history — filters section glass */
.app-shell .filters-section {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(90, 200, 250, 0.1),
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
}
.app-shell .filters-section .form-label {
  display: block;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-2);
}
.app-shell .filters-section select {
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  color: #fff;
}

.app-shell .filters-section label,
.app-shell .filters-section select,
.app-shell .filters-section input {
  color: rgba(255, 255, 255, 0.9);
}

.app-shell .filters-section select,
.app-shell .filters-section input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Form inputs in app shell — dark translucent, native to glass system */
.app-shell input[type="text"],
.app-shell input[type="email"],
.app-shell input[type="number"],
.app-shell input[type="password"],
.app-shell select,
.app-shell textarea {
  color: #1a1a2e;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.app-shell input::placeholder,
.app-shell textarea::placeholder {
  color: #64748b;
}

/* Footer in app shell — glass bar, light links */
.app-shell footer {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: var(--space-8);
}

.app-shell footer a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.app-shell footer a:hover {
  color: #7dd3fc !important;
}

.app-shell footer p {
  color: rgba(255, 255, 255, 0.6) !important;
}