/* Travel-Drip navigation layers: keep controls above content and decorative surfaces click-safe. */
:root {
  --z-content: 1;
  --z-banner: 10;
  --z-sticky-nav: 30;
  --z-toolbar: 40;
  --z-dropdown: 60;
  --z-modal: 100;
  --z-toast: 120;
}

.hero::before,
.hero::after,
.destination-banner::before,
.destination-banner::after,
.global-destination-header::before,
.global-destination-header::after {
  pointer-events: none;
}

body.signed-in-shell .sidebar {
  position: sticky;
  z-index: var(--z-toolbar);
  pointer-events: auto;
}

body.signed-in-shell .topbar {
  z-index: var(--z-toolbar);
}

body.signed-in-shell .global-destination-header:not([hidden]) {
  z-index: var(--z-banner);
}

body.signed-in-shell main > .trip-tab-bar {
  z-index: var(--z-sticky-nav);
}

body.signed-in-shell .mobile-nav,
body.signed-in-shell .mobile-nav button {
  z-index: var(--z-toolbar);
}

body.signed-in-shell main > :not(.topbar):not(.global-destination-header):not(.trip-tab-bar) {
  position: relative;
  z-index: var(--z-content);
}

/* Smart Dashboard sizing: each card owns its footprint instead of stretching to a shared row height. */
.smart-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 20px) !important;
  align-items: start !important;
  min-width: 0;
}

.smart-dashboard-grid > * {
  grid-column: span 4 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.smart-dashboard-grid > .smart-widget--small {
  grid-column: span 3 !important;
}

.smart-dashboard-grid > .smart-widget--medium {
  grid-column: span 4 !important;
}

.smart-dashboard-grid > .smart-widget--wide,
.smart-dashboard-grid > .is-large,
.smart-dashboard-grid > .featured,
.smart-dashboard-grid > .travel-dashboard-card--overview,
.smart-dashboard-grid > .travel-dashboard-card--weather {
  grid-column: span 6 !important;
}

.smart-dashboard-grid > .smart-widget--large {
  grid-column: span 8 !important;
}

.smart-dashboard-grid > .smart-widget--full,
.smart-dashboard-grid > .single-focus-pass,
.smart-dashboard-grid > .itinerary-timeline-dashboard {
  grid-column: 1 / -1 !important;
}

.smart-dashboard-grid :where(
  h1, h2, h3, h4, h5, h6, p, span, strong, small, em, dt, dd, li, label,
  button, a
) {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.4;
}

.smart-dashboard-grid :where(button, .primary-button, .ghost-button) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

.smart-dashboard-grid :where(.widget-toolbar, .button-row, .itinerary-action-row) {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.smart-dashboard-grid :where(.widget-meta, .status-row, .card-meta) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 1024px) {
  .smart-dashboard-grid > * {
    grid-column: span 6 !important;
  }

  .smart-dashboard-grid > .smart-widget--full,
  .smart-dashboard-grid > .single-focus-pass,
  .smart-dashboard-grid > .itinerary-timeline-dashboard {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .smart-dashboard-grid {
    gap: 14px !important;
  }

  .smart-dashboard-grid > * {
    grid-column: 1 / -1 !important;
  }
}

/* Remove visible outer shells around route widgets; keep the cards inside each shell intact. */
body.app-routed .content-grid,
body.app-routed .main-stack,
body.app-routed .right-stack {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.app-routed [data-route-component]:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--td-layout-gap, 20px) !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 0 var(--td-section-gap, 32px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-routed [data-route-component]:not([hidden]) > :where(
  .messages-hub,
  .daily-memory-panel,
  .social-media-hub,
  .ai-planner-shell,
  .ai-generated-trip,
  .travel-workspace,
  .ride-hub-redesign,
  .reservation-reminder-panel,
  .wallet-redesign-shell,
  .memories-gallery-shell,
  .settings-shell,
  .admin-settings-shell
) {
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Layout groups keep their grid role but never render as a second dashboard card. */
body.app-routed [data-route-component]:not([hidden]) :where(
  .dashboard-section,
  .widget-group,
  .dashboard-panel,
  .parent-widget,
  .outer-card,
  .smart-dashboard-grid,
  .widget-grid,
  .travel-dashboard-sections,
  .travel-booking-summary,
  .travel-transport-summary,
  .wallet-dashboard-sections,
  .wallet-section-card-grid,
  .messages-layout,
  .memory-gallery-grid,
  .settings-main-panel
) {
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#dashboardWidgets,
#dashboardWidgets .section-heading,
.dashboard-widgets {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#dashboardWidgets {
  padding: 0 !important;
}

@media (max-width: 1024px) {
  body.app-routed [data-route-component]:not([hidden]) {
    gap: 16px !important;
    margin-bottom: 24px !important;
  }
}

/* Dashboard-only content must never leak into another route. */
body.app-routed[data-active-route]:not([data-active-route="dashboardHome"]) [data-dashboard-only] {
  display: none !important;
}

/* Keep copy readable inside every independent widget, including route-specific grids. */
body.app-routed :where(
  .smart-widget,
  .travel-widget,
  [data-widget],
  .smart-dashboard-grid > *,
  .widget-grid > *,
  .event-experience-card,
  .metrics > *,
  .travel-social-strip > *
) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: auto;
  align-self: start;
  overflow: hidden;
}

body.app-routed :where(
  .smart-widget,
  .travel-widget,
  [data-widget],
  .event-experience-card,
  .metrics > *,
  .travel-social-strip > *
) :where(h1, h2, h3, h4, h5, h6, p, dt, dd, li) {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.4;
}

body.app-routed :where(
  .smart-widget,
  .travel-widget,
  [data-widget],
  .event-experience-card,
  .metrics > *,
  .travel-social-strip > *
) :where(span, strong, small, em, label, button, a) {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.4;
}

body.app-routed :where(
  .smart-widget,
  .travel-widget,
  [data-widget],
  .event-experience-card,
  .metrics > *,
  .travel-social-strip > *
) :where(.widget-toolbar, .button-row, .hero-actions, .widget-meta, .status-row, .card-meta) {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.app-routed :where(.smart-widget, .travel-widget, [data-widget]) :where(button, .primary-button, .ghost-button) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

/* Required Travel Documents: keep each record as a readable horizontal card. */
#importantInfo .travel-documents-section {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#importantInfo .travel-documents-section > summary {
  padding-inline: 0 !important;
}

#importantInfo .travel-documents-section > .travel-documents-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

#importantInfo .travel-document-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  justify-content: flex-start !important;
  padding: 22px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

#importantInfo .travel-document-card__heading {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#importantInfo .travel-document-card__icon {
  display: grid !important;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: #e9f8f6;
  font-size: 21px;
}

#importantInfo .travel-document-card__title,
#importantInfo .travel-document-card__description,
#importantInfo .travel-document-card__due,
#importantInfo .travel-document-card__status {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.4 !important;
}

#importantInfo .travel-document-card__title {
  width: auto !important;
  margin: 0 !important;
  color: #102033 !important;
  font-size: 1.1rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

#importantInfo .travel-document-card__description {
  flex: 0 0 auto;
  color: #617286 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

#importantInfo .travel-document-card__due {
  color: #617286 !important;
  font-size: 0.875rem !important;
}

#importantInfo .travel-document-card__status {
  width: fit-content !important;
  min-height: 30px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 0.875rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

#importantInfo .travel-document-card > button {
  align-self: flex-start;
  margin-top: 2px;
  max-width: 100%;
}

@media (max-width: 1100px) {
  #importantInfo .travel-documents-section > .travel-documents-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #importantInfo .travel-documents-section > .travel-documents-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Full-width Smart Dashboard pass: let every authenticated tab use the space beside the sidebar. */
body.app-routed main,
body.signed-in-shell main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.app-routed main > :where(.content-grid, .dashboard-widgets, .metrics, .travel-social-strip, [data-route-component]),
body.app-routed .content-grid,
body.app-routed .dashboard-widgets,
body.app-routed .widget-grid,
body.app-routed .smart-dashboard-grid {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.smart-dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: start !important;
}

.smart-dashboard-grid > *,
.widget-grid > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  box-sizing: border-box !important;
}

body.app-routed :where(.smart-widget, .travel-widget, [data-widget]) {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  gap: 12px;
  box-sizing: border-box !important;
  overflow: hidden;
}

body.app-routed :where(.smart-widget, .travel-widget, [data-widget]) :where(
  h1, h2, h3, h4, h5, h6,
  .smart-widget__title,
  .widget-title,
  .card-title,
  .section-title,
  strong,
  p,
  span,
  small,
  em,
  label,
  button,
  a
) {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.4;
}

body.app-routed :where(.smart-widget, .travel-widget, [data-widget]) :where(
  h1, h2, h3, h4, h5, h6,
  .smart-widget__title,
  .widget-title,
  .card-title,
  .section-title
) {
  display: block;
  width: 100%;
  margin-block: 0;
  line-height: 1.25;
}

body.app-routed :where(.smart-widget, .travel-widget, [data-widget]) :where(
  .widget-toolbar,
  .widget-meta,
  .button-row,
  .hero-actions,
  .status-row,
  .card-meta
) {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.app-routed :where(.smart-widget, .travel-widget, [data-widget]) :where(
  button,
  .primary-button,
  .ghost-button
) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .smart-dashboard-grid > * {
    grid-column: span 6 !important;
  }
}

@media (max-width: 640px) {
  body.app-routed main {
    padding: 16px !important;
  }

  .smart-dashboard-grid > * {
    grid-column: 1 / -1 !important;
  }
}

/* App-wide route typography: headings always use the full card width and remain readable. */
body.app-routed [data-route-component]:not([hidden]) :where(
  h1, h2, h3, h4, h5, h6,
  .smart-widget__title,
  .widget-title,
  .card-title,
  .section-title,
  .travel-document-card__title
) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.25 !important;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  p, span, strong, small, em, label, dt, dd, li, button, a
) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  .section-heading,
  .card-heading,
  .widget-toolbar,
  .widget-meta,
  .ride-card-heading,
  .social-card-header,
  .settings-row,
  .travel-focus-header,
  .travel-command-header,
  .wallet-dashboard-header,
  .guest-access-heading
) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  .section-heading > *,
  .card-heading > *,
  .widget-toolbar > *,
  .widget-meta > *,
  .ride-card-heading > *,
  .social-card-header > *,
  .settings-row > *,
  .travel-focus-header > *,
  .travel-command-header > *,
  .wallet-dashboard-header > *,
  .guest-access-heading > *
) {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Navigation tabs remain compact controls; card and section titles use the normal flow above. */
body.app-routed main :where(
  .trip-tab-bar button,
  .tabs .tab,
  .message-tabs button,
  .split-mode-tabs button,
  .transport-tabs button,
  .explore-tabs button,
  .event-dashboard-tabs button,
  .travel-section-nav button,
  .pass-filter-row button,
  .travel-pass-filters button,
  .travel-search-suggestions button
) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

/* Corporate entry points stay visible so the secure verification gate is reachable. */
.corporate-entry-nav {
  border-color: rgba(18, 96, 126, 0.22);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.08), rgba(245, 158, 11, 0.08));
}

.corporate-entry-nav summary {
  color: #0f4c5c;
  font-weight: 900;
}

.corporate-entry-nav button {
  min-width: 0;
  white-space: normal;
}

.trip-tab-bar .corporate-tab {
  border-color: rgba(18, 96, 126, 0.26);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.1), rgba(245, 158, 11, 0.1));
  color: #0f4c5c;
  font-weight: 850;
}

.trip-tab-bar .corporate-tab:hover,
.trip-tab-bar .corporate-tab:focus-visible,
.trip-tab-bar .corporate-tab.active {
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.18), rgba(245, 158, 11, 0.18));
  border-color: rgba(18, 96, 126, 0.42);
}

/* Focused route polish: keep itinerary, events, memories, wallet, and search compact. */
#eventsPanel .event-dashboard-tabs {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px !important;
  width: 100%;
  min-width: 0;
}

#eventsPanel .event-dashboard-tabs button {
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 6px 9px !important;
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  text-align: center;
}

#eventsPanel .event-dashboard-cards,
#eventsPanel .event-experience-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px !important;
  align-items: start;
  width: 100%;
}

#eventsPanel .event-experience-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 158px !important;
  height: auto !important;
  padding: 13px !important;
}

#eventsPanel .event-experience-card span {
  padding: 4px 7px !important;
  font-size: 0.62rem !important;
  line-height: 1.15 !important;
}

#eventsPanel .event-experience-card strong {
  width: 100%;
  font-size: 0.98rem !important;
  line-height: 1.2 !important;
}

#eventsPanel .event-experience-card small,
#eventsPanel .event-experience-card i {
  font-size: 0.7rem !important;
  line-height: 1.25 !important;
}

#eventsPanel .event-experience-card i {
  width: auto;
  max-width: 100%;
  padding: 4px 7px !important;
}

#eventsPanel .event-operations-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
}

#eventsPanel .event-operations-grid button {
  min-height: 0 !important;
  padding: 11px !important;
  gap: 4px !important;
}

#eventsPanel .event-operations-grid strong {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}

#eventsPanel .event-operations-grid span {
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
}

#itineraryAlerts .itinerary-dashboard {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100%;
}

#itineraryAlerts .itinerary-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
}

#itineraryAlerts .itinerary-card--featured {
  grid-column: span 2 !important;
}

#itineraryAlerts .itinerary-card h3,
#itineraryAlerts .itinerary-card p {
  width: 100%;
  margin: 0;
}

#itineraryAlerts .itinerary-card--featured h3 {
  font-size: clamp(1.12rem, 1.8vw, 1.55rem) !important;
  line-height: 1.18 !important;
}

#itineraryAlerts .itinerary-card p {
  font-size: 0.8rem;
  line-height: 1.35;
}

#itineraryAlerts .itinerary-card button,
#itineraryAlerts .itinerary-action-row button,
#itineraryAlerts .upcoming-reservation-grid button {
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: 0.74rem;
  line-height: 1.2;
}

#itineraryAlerts .itinerary-timeline-dashboard {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  padding: 14px !important;
}

#itineraryAlerts .itinerary-timeline-list details summary {
  display: grid;
  grid-template-columns: 24px 74px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

#itineraryAlerts .itinerary-timeline-list details summary strong,
#itineraryAlerts .itinerary-timeline-list details summary em {
  min-width: 0;
  overflow-wrap: break-word;
}

#memoriesPanel .memories-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  width: 100%;
  overflow: visible !important;
  padding: 4px !important;
}

#memoriesPanel .memories-toolbar button {
  flex: 0 1 auto !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

#memoriesPanel .memories-gallery-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100%;
}

#memoriesPanel .memory-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100%;
  align-items: start;
}

#memoriesPanel .memory-media-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  align-self: start !important;
}

#memoriesPanel .memory-media-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

#memoriesPanel .memory-media-card > div:not(.memory-card-actions) {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px 8px !important;
}

#memoriesPanel .memory-media-card strong {
  font-size: 0.92rem;
  line-height: 1.25;
}

#memoriesPanel .memory-media-card small {
  font-size: 0.72rem;
  line-height: 1.3;
}

#memoriesPanel .memory-card-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  width: 100%;
  padding: 0 12px 12px !important;
}

#memoriesPanel .memory-card-actions button {
  flex: 1 1 90px;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 5px 8px !important;
  font-size: 0.7rem;
  line-height: 1.15;
}

#memoriesPanel .memory-comments-panel {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

#walletPanel .wallet-dashboard-header {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100%;
}

#walletPanel .wallet-dashboard-header > article {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 13px !important;
}

#walletPanel .wallet-dashboard-header > article span {
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
}

#walletPanel .wallet-dashboard-header > article strong {
  font-size: 1.04rem !important;
  line-height: 1.2 !important;
}

#walletPanel .wallet-dashboard-header > article small {
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
}

#walletPanel .wallet-smart-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100%;
}

#walletPanel .wallet-smart-actions button {
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 7px 9px !important;
  font-size: 0.74rem;
  line-height: 1.15;
  white-space: normal !important;
}

#walletPanel .wallet-home-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#walletPanel .wallet-home-grid > * {
  min-width: 0 !important;
  height: auto !important;
  align-self: start !important;
}

#walletPanel .wallet-balance-hero {
  grid-column: span 2;
}

#walletPanel :where(.wallet-balance-hero, .wallet-summary-card, .wallet-trip-tile, .wallet-virtual-preview) {
  min-height: 0 !important;
  padding: 14px !important;
}

#walletPanel .wallet-dashboard-sections,
#walletPanel .wallet-section-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#walletPanel .wallet-dashboard-sections > *,
#walletPanel .wallet-section-card-grid > * {
  min-width: 0 !important;
  height: auto !important;
  align-self: start !important;
}

#rideShareHub .travel-smart-search-row {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  min-width: 0;
}

#rideShareHub .travel-search-icon {
  position: relative;
  flex: 0 0 20px;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #0f766e;
  border-radius: 50%;
  background: transparent !important;
  box-sizing: border-box;
}

#rideShareHub .travel-search-icon::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -3px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: #0f766e;
  transform: rotate(45deg);
  transform-origin: left center;
}

#rideShareHub .travel-smart-search-row input {
  flex: 1 1 auto;
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  #eventsPanel .event-dashboard-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #eventsPanel .event-dashboard-cards,
  #eventsPanel .event-experience-grid,
  #memoriesPanel .memory-gallery-grid,
  #walletPanel .wallet-dashboard-sections,
  #walletPanel .wallet-section-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #walletPanel .wallet-dashboard-header {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #eventsPanel .event-dashboard-cards,
  #eventsPanel .event-experience-grid,
  #memoriesPanel .memory-gallery-grid,
  #walletPanel .wallet-dashboard-sections,
  #walletPanel .wallet-section-card-grid,
  #walletPanel .wallet-home-grid {
    grid-template-columns: 1fr !important;
  }

  #eventsPanel .event-dashboard-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #itineraryAlerts .itinerary-dashboard {
    grid-template-columns: 1fr !important;
  }

  #itineraryAlerts .itinerary-card--featured,
  #walletPanel .wallet-balance-hero {
    grid-column: auto !important;
  }

  #itineraryAlerts .itinerary-timeline-list details summary {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  #itineraryAlerts .itinerary-timeline-list details summary time {
    grid-column: 2;
    grid-row: 2;
  }

  #itineraryAlerts .itinerary-timeline-list details summary strong {
    grid-column: 2;
    grid-row: 1;
  }

  #itineraryAlerts .itinerary-timeline-list details summary em {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  #walletPanel .wallet-dashboard-header,
  #walletPanel .wallet-smart-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Corporate employee access and event workspace. */
#accountWorkspaceControl.account-workspace-control {
  display: inline-grid;
  grid-template-columns: auto minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #355963;
  font-size: 0.76rem;
  font-weight: 900;
}

#accountWorkspaceControl select {
  min-height: 40px;
  min-width: 0;
  border: 1px solid #cce2e5;
  border-radius: 7px;
  padding: 0 34px 0 10px;
  background: #fff;
  color: #123541;
  font: inherit;
}

#corporateEmployeeInvites {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#corporateEmployeeInvites .corporate-employee-invite-row {
  grid-template-columns: minmax(260px, 1.4fr) minmax(220px, 0.9fr) minmax(280px, auto) !important;
  width: 100% !important;
  min-height: 76px !important;
}

#corporateEmployeeInvites .corporate-employee-invite-row > span,
#corporateEmployeeInvites .corporate-employee-invite-row :where(strong, small, b, button) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

#corporateEmployeeInvites .corporate-invite-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

#corporateEmployeeInvites .corporate-invite-actions button {
  width: auto !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
}

#corporateEmployeeInvites .danger-button {
  border-color: #e7aaa2 !important;
  background: #fff7f5 !important;
  color: #9b3428 !important;
}

body.employee-portal-active .auth-landing-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
  padding: 24px clamp(16px, 4vw, 52px) 48px !important;
}

body.employee-portal-active .auth-carousel {
  display: none !important;
}

body.employee-portal-active .auth-landing .auth-card {
  width: min(1180px, 100%) !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
  border-radius: 8px !important;
  padding: clamp(18px, 3vw, 32px) !important;
  box-shadow: 0 18px 54px rgba(19, 46, 55, 0.18) !important;
}

body.employee-portal-active .auth-card > :not(#guestPortalPanel):not(.auth-switch):not(#authMessage) {
  display: none !important;
}

.guest-portal-panel,
.guest-portal-panel :where(header, nav, section, article, div, span, strong, small, h2, h3, p, label, input, button) {
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
}

.guest-portal-panel {
  display: grid !important;
  gap: 18px !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.employee-portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #d9e8e8;
  padding: 0 0 18px;
}

.employee-portal-header > div {
  display: grid;
  gap: 4px;
}

.employee-portal-header > div > span,
.employee-pane-heading span,
.employee-event-hero > div > span,
.corporate-event-spotlight span {
  color: #008eb8 !important;
  font-size: 0.76rem !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.employee-portal-header #guestPortalTitle {
  color: #102b39;
  font-size: 2rem;
  line-height: 1.08;
}

.employee-attendance-badge,
.corporate-event-spotlight > b {
  flex: 0 0 auto;
  border: 1px solid #a6dfca;
  border-radius: 999px;
  padding: 9px 13px;
  background: #e8f8ef;
  color: #176b50;
  font-size: 0.82rem;
  text-transform: capitalize;
}

.employee-portal-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.employee-portal-tabs button {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid #cae2e5;
  border-radius: 7px;
  padding: 0 15px;
  background: #fff;
  color: #315965;
  font: inherit;
  font-weight: 900;
}

.employee-portal-tabs button.active {
  border-color: #08aeb4;
  background: #e7f9f7;
  color: #086872;
}

.employee-portal-pane {
  display: grid;
  gap: 16px;
}

.employee-event-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  min-height: 190px;
  border-left: 6px solid #06aeb5;
  border-radius: 8px;
  padding: clamp(22px, 4vw, 42px);
  background: #dff7f5;
  color: #123744;
}

.employee-event-hero h2 {
  max-width: 18ch;
  margin: 8px 0 5px;
  color: #102938;
  font-size: 3.75rem;
  line-height: 0.98;
  letter-spacing: 0;
}

.employee-event-hero p {
  margin: 0;
  color: #4a6871;
  font-size: 1.05rem;
}

.employee-event-hero > strong {
  align-self: start;
  border-radius: 7px;
  padding: 12px 14px;
  background: #ff8c72;
  color: #fff;
  font-size: 1rem;
}

.employee-event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.employee-event-tags b {
  border-radius: 7px;
  padding: 8px 10px;
  background: #fff;
  color: #365d67;
  font-size: 0.78rem;
}

.employee-dashboard-metrics,
.employee-detail-grid,
.employee-wallet-grid,
.corporate-employee-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.employee-dashboard-metrics article,
.employee-detail-grid article,
.employee-wallet-grid article,
.corporate-employee-detail-grid article,
.employee-rideshare-list article,
.employee-event-history article,
.employee-empty-state {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 112px;
  border: 1px solid #d6e6e7;
  border-radius: 8px;
  padding: 15px;
  background: #fff;
}

.employee-dashboard-metrics article:nth-child(2),
.employee-detail-grid article:nth-child(3),
.corporate-employee-detail-grid article:nth-child(2),
.corporate-employee-detail-grid article:nth-child(5) {
  border-top: 5px solid #ff967c;
}

.employee-dashboard-metrics article:nth-child(3),
.employee-detail-grid article:nth-child(2),
.corporate-employee-detail-grid article:nth-child(3),
.corporate-employee-detail-grid article:nth-child(6) {
  border-top: 5px solid #f2c54d;
}

.employee-dashboard-metrics article > span,
.employee-detail-grid article > span,
.employee-wallet-grid article > span,
.corporate-employee-detail-grid article > span,
.employee-rideshare-list article > span,
.employee-event-history article > span {
  color: #537079 !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.employee-dashboard-metrics article > strong,
.employee-detail-grid article > strong,
.employee-wallet-grid article > strong,
.corporate-employee-detail-grid article > strong,
.employee-rideshare-list article > strong,
.employee-event-history article > strong {
  color: #143340 !important;
  font-size: 1.08rem !important;
  line-height: 1.2 !important;
}

.employee-pane-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dce9e9;
}

.employee-pane-heading h2,
.employee-bill-splitter h3 {
  margin: 3px 0 0;
  color: #143340;
}

.employee-rideshare-list,
.employee-event-history {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.employee-wallet-actions,
.corporate-home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.employee-wallet-actions label {
  display: grid;
  gap: 5px;
  color: #44666f;
  font-size: 0.75rem;
  font-weight: 900;
}

.employee-wallet-actions input {
  width: 150px;
  min-height: 42px;
  border: 1px solid #cfe1e3;
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
  font: inherit;
}

.employee-bill-splitter {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(120px, 0.3fr) minmax(110px, 0.25fr) auto;
  align-items: end;
  gap: 12px;
  border: 1px solid #eadba9;
  border-radius: 8px;
  padding: 16px;
  background: #fff9e9;
}

.employee-bill-splitter label {
  display: grid;
  gap: 5px;
  color: #536b72;
  font-size: 0.75rem;
  font-weight: 900;
}

.employee-bill-splitter input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #decf9b;
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
  font: inherit;
}

.employee-bill-splitter > strong {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  padding: 0 12px;
  background: #143340;
  color: #fff !important;
  white-space: nowrap;
}

.corporate-mode-home {
  display: grid;
  gap: 16px;
  border-top: 6px solid #08b7b5;
  background: #fbfefe;
}

.corporate-event-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-radius: 8px;
  padding: 18px;
  background: #e3f7f5;
}

.corporate-event-spotlight > div {
  display: grid;
  gap: 5px;
}

.corporate-event-spotlight strong {
  color: #123542;
  font-size: 2rem;
}

.corporate-event-spotlight small {
  color: #52717a;
}

body.corporate-employee-mode :where(.pwa-panel, #dashboardHome, .destination-insights, .metrics, .travel-social-strip, #dashboardWidgets) {
  display: none !important;
}

body.corporate-employee-mode #corporateHome:not([hidden]) {
  display: grid !important;
  width: 100% !important;
}

.corporate-event-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.85fr) minmax(240px, 0.8fr);
  gap: 14px;
  align-items: stretch;
}

.employee-event-context {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.75fr);
  gap: 14px;
}

.corporate-event-plan,
.corporate-event-essentials,
.corporate-event-attendees {
  min-width: 0;
  border: 1px solid #d4e5e7;
  border-radius: 8px;
  padding: 18px;
  background: #fff;
}

.corporate-event-plan {
  display: grid;
  gap: 15px;
  border-top: 5px solid #18b9ae;
}

.corporate-event-plan > div:first-child > span,
.corporate-event-essentials span,
.corporate-event-attendees > div:first-child > span {
  color: #078db1;
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.corporate-event-plan h3,
.corporate-event-attendees h3 {
  margin: 4px 0;
  color: #123542;
}

.corporate-event-plan p {
  margin: 0;
  color: #587078;
  line-height: 1.45;
}

.corporate-event-plan-list {
  display: grid;
  gap: 2px;
}

.corporate-event-plan-list > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #e2ecec;
}

.corporate-event-plan-list time {
  color: #087b85;
  font-size: 0.78rem;
  font-weight: 900;
}

.corporate-event-plan-list span,
.corporate-event-plan-list strong,
.corporate-event-plan-list small {
  min-width: 0;
  writing-mode: horizontal-tb;
  overflow-wrap: break-word;
}

.corporate-event-plan-list span {
  display: grid;
  gap: 3px;
}

.corporate-event-essentials {
  display: grid;
  align-content: start;
  gap: 0;
  border-top: 5px solid #ff9478;
}

.corporate-event-essentials > div {
  display: grid;
  gap: 5px;
  padding: 13px 0;
  border-bottom: 1px solid #e8ecec;
}

.corporate-event-essentials > div:last-child {
  border-bottom: 0;
}

.corporate-event-essentials strong {
  color: #173744;
  font-size: 1rem;
}

.corporate-event-essentials small {
  color: #63777d;
  line-height: 1.4;
}

.corporate-event-attendees {
  display: grid;
  align-content: start;
  gap: 12px;
  border-top: 5px solid #efc34f;
}

.corporate-event-attendees > div:first-child {
  display: grid;
  gap: 3px;
}

.corporate-event-attendees > div:first-child b {
  color: #786018;
  font-size: 0.8rem;
}

.corporate-attendee-list {
  display: grid;
  gap: 8px;
}

.corporate-attendee-list > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.corporate-attendee-list > div > b {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e6f7f5;
  color: #087780;
  font-size: 0.72rem;
}

.corporate-attendee-list > div > span {
  display: grid;
  min-width: 0;
}

.corporate-attendee-list strong,
.corporate-attendee-list small {
  min-width: 0;
  writing-mode: horizontal-tb;
  overflow-wrap: break-word;
}

.corporate-attendee-list strong {
  color: #173744;
  font-size: 0.86rem;
}

.corporate-attendee-list small,
.corporate-attendee-empty,
.corporate-event-plan-empty small {
  color: #667b81;
  font-size: 0.76rem;
}

body.corporate-employee-mode[data-active-route="walletPanel"] #walletPanel {
  display: grid !important;
  gap: 14px !important;
}

body.corporate-employee-mode[data-active-route="walletPanel"] #employeeWalletSummary {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}

body.corporate-employee-mode[data-active-route="walletPanel"] #virtualCard > :not(.virtual-card),
body.corporate-employee-mode[data-active-route="walletPanel"] .audit-panel[data-route-support*="walletPanel"] {
  display: none !important;
}

body.corporate-employee-mode[data-active-route="transportationPanel"] #transportationPanel > :not(.transportation-advanced-details),
body.corporate-employee-mode[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary,
body.corporate-employee-mode[data-active-route="transportationPanel"] #transportationPanel .transportation-more-tabs,
body.corporate-employee-mode[data-active-route="transportationPanel"] #transportationWorkspaceMount > :not(.ride-hub-redesign),
body.corporate-employee-mode[data-active-route="transportationPanel"] #transportationPanel .corporate-meal-rules {
  display: none !important;
}

body.corporate-employee-mode[data-active-route="transportationPanel"] #transportationPanel > .transportation-advanced-details,
body.corporate-employee-mode[data-active-route="transportationPanel"] #transportationWorkspaceMount,
body.corporate-employee-mode[data-active-route="transportationPanel"] #transportationWorkspaceMount > .ride-hub-redesign {
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 980px) {
  #corporateEmployeeInvites .corporate-employee-invite-row,
  .employee-dashboard-metrics,
  .employee-detail-grid,
  .employee-wallet-grid,
  .corporate-employee-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .corporate-event-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-event-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .corporate-event-plan {
    grid-column: 1 / -1;
  }

  .employee-bill-splitter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #accountWorkspaceControl.account-workspace-control,
  #corporateEmployeeInvites .corporate-employee-invite-row,
  .employee-event-hero,
  .employee-dashboard-metrics,
  .employee-detail-grid,
  .employee-wallet-grid,
  .corporate-employee-detail-grid,
  .employee-rideshare-list,
  .employee-event-history,
  .employee-bill-splitter,
  .corporate-event-spotlight {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .corporate-event-overview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .employee-event-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .corporate-event-plan {
    grid-column: auto;
  }

  #corporateEmployeeInvites .corporate-invite-actions {
    justify-content: flex-start !important;
  }

  .employee-portal-header,
  .employee-pane-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .employee-event-hero h2 {
    font-size: 2.35rem !important;
  }

  .employee-bill-splitter > strong {
    width: 100%;
  }
}

/* Keep Travel discovery media compact even before route state finishes loading. */
#rideShareHub .travel-discovery-feed > .travel-feed-card {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#rideShareHub .travel-discovery-feed > .travel-feed-card > img {
  display: block !important;
  width: 100% !important;
  height: 150px !important;
  min-height: 0 !important;
  max-height: 150px !important;
  object-fit: cover !important;
}

#rideShareHub .travel-discovery-feed > .travel-feed-card > .travel-feed-card__body {
  height: auto !important;
  min-height: 0 !important;
}

#corporateTravelerCare,
#corporateEmployeeInvites {
  scroll-margin-top: 112px;
}

#corporateTravelerCare:focus-visible,
#corporateEmployeeInvites:focus-visible {
  outline: 3px solid rgba(0, 150, 199, 0.45);
  outline-offset: 4px;
}

#corporateEmployeeInvites .section-heading {
  margin-bottom: 14px;
}

#corporateEmployeeInvites .corporate-employee-invite-form {
  margin-bottom: 14px;
}

#corporateEmployeeInvites .corporate-employee-invite-list {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}

#corporateEmployeeInvites .corporate-employee-invite-row,
#corporateEmployeeInvites .corporate-employee-invite-empty {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(150px, 0.8fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(23, 110, 122, 0.13);
  border-radius: 7px;
  background: #f9fcfc;
}

#corporateEmployeeInvites .corporate-employee-invite-row span,
#corporateEmployeeInvites .corporate-employee-invite-empty {
  min-width: 0;
}

#corporateEmployeeInvites .corporate-employee-invite-row strong,
#corporateEmployeeInvites .corporate-employee-invite-row small,
#corporateEmployeeInvites .corporate-employee-invite-empty strong,
#corporateEmployeeInvites .corporate-employee-invite-empty span {
  display: block;
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

#corporateEmployeeInvites .corporate-employee-invite-row small,
#corporateEmployeeInvites .corporate-employee-invite-empty span {
  margin-top: 3px;
  color: #6a838a;
  font-size: 0.75rem;
}

#corporateEmployeeInvites .corporate-employee-invite-row b {
  width: fit-content;
  padding: 5px 9px;
  color: #17684e;
  background: #e5f8ed;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: capitalize;
}

#corporateEmployeeInvites .corporate-employee-invite-empty {
  grid-template-columns: minmax(0, 1fr);
}

#corporateEmployeeInvites .corporate-access-management-title {
  margin: 18px 0 10px;
}

@media (max-width: 720px) {
  #corporateEmployeeInvites .corporate-employee-invite-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Transportation dashboard refresh: show the next movement first and keep detail tools opt-in. */
body.app-routed main > #transportationPanel:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  align-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed #transportationPanel > .section-heading {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 17px 19px !important;
  background: linear-gradient(135deg, #effbfd 0%, #fff7ef 100%) !important;
  border: 1px solid #d5e8ec !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #transportationPanel > .section-heading > div,
body.app-routed #transportationPanel > .section-heading h2,
body.app-routed #transportationPanel > .section-heading p {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #transportationPanel > .section-heading h2 {
  margin: 2px 0 4px !important;
  color: #102f3d !important;
  font-size: clamp(1.25rem, 2vw, 1.8rem) !important;
  line-height: 1.12 !important;
}

body.app-routed #transportationPanel > .section-heading p:not(.eyebrow) {
  margin: 0 !important;
  color: #5f7782 !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
}

body.app-routed #transportationPanel .transportation-header-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .transportation-header-actions button {
  min-height: 35px !important;
  padding: 8px 11px !important;
  white-space: nowrap !important;
}

body.app-routed #transportationPanel > .transportation-summary-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed #transportationPanel .transportation-summary-grid article {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
}

body.app-routed #transportationPanel .transportation-summary-grid :where(span, strong, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #transportationPanel .transportation-summary-grid span {
  color: #3b6c78 !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.app-routed #transportationPanel .transportation-summary-grid strong {
  color: #102f3d !important;
  font-size: 1.08rem !important;
  line-height: 1.2 !important;
}

body.app-routed #transportationPanel .transportation-summary-grid small {
  color: #617985 !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

body.app-routed #transportationPanel > .flight-tracking-card {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header > div,
body.app-routed #transportationPanel .flight-tracking-card__header :where(h3, p) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header h3 {
  margin: 2px 0 4px !important;
  color: #102f3d !important;
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header p:not(.eyebrow) {
  max-width: 760px !important;
  margin: 0 !important;
  color: #617985 !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}

body.app-routed #transportationPanel .provider-badge {
  flex: 0 0 auto !important;
  padding: 6px 9px !important;
  color: #087082 !important;
  background: #e4f8f5 !important;
  border: 1px solid #c7e9e6 !important;
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body.app-routed #transportationPanel .flight-tracking-form {
  display: grid !important;
  grid-template-columns: minmax(140px, 0.8fr) minmax(150px, 1fr) minmax(140px, 0.8fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .flight-tracking-form label {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  color: #466b78 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

body.app-routed #transportationPanel .flight-tracking-form input,
body.app-routed #transportationPanel .transportation-table-toolbar input,
body.app-routed #transportationPanel .transportation-table-toolbar select {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  color: #102f3d !important;
  background: #f8fbfc !important;
  border: 1px solid #cfe2e7 !important;
  border-radius: 9px !important;
  font: inherit !important;
}

body.app-routed #transportationPanel .flight-tracking-form input {
  padding: 10px 11px !important;
}

body.app-routed #transportationPanel .flight-tracking-form button {
  min-height: 40px !important;
  white-space: nowrap !important;
}

body.app-routed #transportationPanel #flightTrackingStatus {
  margin: 0 !important;
  color: #617985 !important;
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
}

body.app-routed #transportationPanel > .transportation-table-section {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 11px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 15px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #transportationPanel .transportation-table-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) !important;
  gap: 10px !important;
  align-items: end !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .transportation-table-toolbar label {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  color: #466b78 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

body.app-routed #transportationPanel .transportation-table-toolbar input,
body.app-routed #transportationPanel .transportation-table-toolbar select {
  min-height: 39px !important;
  padding: 9px 10px !important;
}

body.app-routed #transportationPanel .transportation-table-wrap {
  min-width: 0 !important;
  overflow-x: auto !important;
  border: 1px solid #e0edf0 !important;
  border-radius: 11px !important;
}

body.app-routed #transportationPanel .transportation-table {
  min-width: 680px !important;
  color: #102f3d !important;
}

body.app-routed #transportationPanel .transportation-table :where(th, td) {
  min-width: 0 !important;
  padding: 10px 11px !important;
  border-color: #e2edef !important;
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
}

body.app-routed #transportationPanel .transportation-table thead th {
  color: #567481 !important;
  background: #f3f8f8 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
}

body.app-routed #transportationPanel .transportation-table th[scope="row"] strong {
  color: #102f3d !important;
  font-size: 0.86rem !important;
  line-height: 1.25 !important;
}

body.app-routed #transportationPanel .transportation-table th[scope="row"] span {
  color: #087f8c !important;
  font-size: 0.66rem !important;
}

body.app-routed #transportationPanel .transportation-table th[scope="row"] small,
body.app-routed #transportationPanel .transportation-table td {
  color: #617985 !important;
  font-size: 0.74rem !important;
  line-height: 1.3 !important;
}

body.app-routed #transportationPanel .transportation-status {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 4px 7px !important;
  font-size: 0.66rem !important;
  line-height: 1.2 !important;
}

body.app-routed #transportationPanel > .transportation-advanced-details {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: #f8fbfc !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

body.app-routed #transportationPanel .transportation-advanced-details > summary {
  padding: 12px 14px !important;
  color: #185465 !important;
  font-size: 0.82rem !important;
}

body.app-routed #transportationPanel .transportation-advanced-details[open] > summary {
  border-bottom: 1px solid #dbe9ed !important;
}

body.app-routed #transportationPanel #transportationWorkspaceMount {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 14px !important;
}

@media (max-width: 820px) {
  body.app-routed #transportationPanel > .section-heading,
  body.app-routed #transportationPanel .flight-tracking-card__header {
    display: grid !important;
    align-items: start !important;
  }

  body.app-routed #transportationPanel .transportation-header-actions {
    justify-content: flex-start !important;
  }

  body.app-routed #transportationPanel .flight-tracking-form,
  body.app-routed #transportationPanel .transportation-table-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-routed #transportationPanel .flight-tracking-form button {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  body.app-routed #transportationPanel > .transportation-summary-grid,
  body.app-routed #transportationPanel .flight-tracking-form,
  body.app-routed #transportationPanel .transportation-table-toolbar {
    grid-template-columns: 1fr !important;
  }

  body.app-routed #transportationPanel .transportation-summary-grid article {
    padding: 12px !important;
  }
}

/* Event invitation studio: an Evite-inspired authoring widget without a large parent wrapper. */
#eventsPanel .event-invite-studio {
  display: grid !important;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
  align-items: start !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 14px 0 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(16, 47, 61, 0.07) !important;
}

#eventsPanel .event-invite-studio,
#eventsPanel .event-invite-studio :where(*, label, p, h3, h4, span, strong, button, input, textarea, select) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  min-width: 0 !important;
}

#eventsPanel .event-invite-studio__controls,
#eventsPanel .event-invite-studio__preview {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#eventsPanel .event-invite-studio .section-heading {
  margin: 0 !important;
  padding: 0 !important;
}

#eventsPanel .event-invite-studio .section-heading h3 {
  margin: 2px 0 5px !important;
  color: #10202f !important;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important;
  line-height: 1.2 !important;
}

#eventsPanel .event-invite-studio .section-heading p:not(.eyebrow) {
  max-width: 52ch !important;
  margin: 0 !important;
  color: #607280 !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

#eventsPanel .event-invite-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#eventsPanel .event-invite-form-grid label {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  color: #365463 !important;
  font-size: 0.73rem !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}

#eventsPanel .event-invite-form-grid label.wide {
  grid-column: 1 / -1 !important;
}

#eventsPanel .event-invite-form-grid :where(input, select, textarea) {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 9px 10px !important;
  color: #10202f !important;
  background: #f8fbfc !important;
  border: 1px solid #cfe1e6 !important;
  border-radius: 9px !important;
  font: inherit !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

#eventsPanel .event-invite-form-grid textarea {
  min-height: 62px !important;
  resize: vertical !important;
}

#eventsPanel .event-invite-actions,
#eventsPanel .event-invite-preview-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#eventsPanel .event-invite-actions .small {
  flex: 1 1 180px !important;
  color: #607280 !important;
  font-size: 0.73rem !important;
  line-height: 1.35 !important;
}

#eventsPanel .event-invite-studio button {
  min-height: 36px !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  line-height: 1.2 !important;
}

#eventsPanel .event-invite-preview-card {
  display: grid !important;
  gap: 9px !important;
  align-content: start !important;
  min-width: 0 !important;
  padding: 16px !important;
  color: #10202f !important;
  background: linear-gradient(145deg, #f0fbfb 0%, #fff9ef 100%) !important;
  border: 1px solid #cfe1e6 !important;
  border-radius: 14px !important;
}

#eventsPanel .event-invite-preview-card__topline,
#eventsPanel .event-invite-preview-card__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: #607280 !important;
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
}

#eventsPanel .event-invite-preview-card__topline span:first-child {
  color: #087f8c !important;
  font-weight: 800 !important;
}

#eventsPanel .event-invite-preview-card .eyebrow {
  margin: 5px 0 0 !important;
  color: #ef6f61 !important;
  font-size: 0.68rem !important;
}

#eventsPanel .event-invite-preview-card h4 {
  margin: 0 !important;
  color: #10202f !important;
  font-size: clamp(1.35rem, 2.6vw, 2rem) !important;
  line-height: 1.08 !important;
}

#eventsPanel .event-invite-preview-card p:not(.eyebrow) {
  margin: 0 !important;
  color: #365463 !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

#eventsPanel .event-invite-preview-meta {
  min-width: 0 !important;
  padding: 9px 10px !important;
  color: #185465 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(207, 225, 230, 0.9) !important;
  border-radius: 9px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#eventsPanel .event-invite-preview-card__footer {
  align-items: start !important;
  padding-top: 3px !important;
  color: #185465 !important;
}

#eventsPanel .event-invite-preview-card__footer strong {
  color: #087f8c !important;
  font-size: 0.78rem !important;
}

#eventsPanel .event-invite-studio.is-focused {
  outline: 3px solid rgba(0, 150, 199, 0.2) !important;
  outline-offset: 3px !important;
}

@media (max-width: 820px) {
  #eventsPanel .event-invite-studio {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  #eventsPanel .event-invite-studio {
    padding: 12px !important;
  }

  #eventsPanel .event-invite-form-grid {
    grid-template-columns: 1fr !important;
  }

  #eventsPanel .event-invite-form-grid label.wide {
    grid-column: auto !important;
  }

  #eventsPanel .event-invite-preview-card__topline,
  #eventsPanel .event-invite-preview-card__footer {
    align-items: start !important;
    flex-direction: column !important;
  }
}

@media (max-width: 480px) {
  #eventsPanel .event-dashboard-tabs,
  #walletPanel .wallet-dashboard-header,
  #walletPanel .wallet-smart-actions {
    grid-template-columns: 1fr !important;
  }

  #rideShareHub .travel-smart-search-row {
    flex-wrap: wrap;
  }

  #rideShareHub .travel-smart-search-row input {
    order: 1;
    flex-basis: calc(100% - 34px);
  }

  #rideShareHub .travel-smart-search-row button {
    flex: 1 1 100px;
  }
}

/* Itinerary Dashboard redesign: a wide daily focus with compact supporting widgets. */
#itineraryAlerts > .section-heading {
  align-items: end;
  padding-bottom: 2px;
}

#itineraryAlerts > .section-heading h2 {
  max-width: 700px;
  font-size: clamp(1.45rem, 2.5vw, 2.15rem) !important;
  letter-spacing: -0.01em;
}

#itineraryAlerts > .section-heading p:not(.eyebrow) {
  max-width: 680px;
  font-size: 0.86rem;
  line-height: 1.45;
}

#itineraryAlerts .itinerary-dashboard {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  align-items: start !important;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card {
  grid-column: span 4 !important;
  min-height: 158px !important;
  border-radius: 18px !important;
  padding: 16px !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07) !important;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card--today {
  grid-column: span 6 !important;
  min-height: 218px !important;
  justify-content: flex-end;
  padding: 20px !important;
  border-color: rgba(14, 116, 144, 0.22) !important;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14) !important;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card--route,
#itineraryAlerts .itinerary-dashboard > .itinerary-card--weather {
  grid-column: span 3 !important;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card--transport,
#itineraryAlerts .itinerary-dashboard > .itinerary-card--alerts,
#itineraryAlerts .itinerary-dashboard > .itinerary-card--progress {
  grid-column: span 4 !important;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card:not(.itinerary-card--today) {
  background: #ffffff;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card--route {
  border-top: 3px solid #0891b2;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card--weather {
  border-top: 3px solid #f59e0b;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card--transport {
  border-top: 3px solid #10b981;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card--alerts {
  border-top: 3px solid #f97316;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card--progress {
  border-top: 3px solid #8b5cf6;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card > span {
  font-size: 0.66rem !important;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card > h3 {
  font-size: 1.02rem !important;
  line-height: 1.2 !important;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card--today > h3 {
  font-size: clamp(1.35rem, 2.3vw, 1.9rem) !important;
  line-height: 1.14 !important;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card > p {
  font-size: 0.76rem !important;
  line-height: 1.38 !important;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card > button,
#itineraryAlerts .itinerary-dashboard .itinerary-action-row button {
  margin-top: auto;
  min-height: 34px !important;
  border-radius: 10px;
  padding: 7px 11px !important;
  font-size: 0.72rem;
}

#itineraryAlerts .itinerary-dashboard .route-preview-line {
  width: 100%;
  height: 34px;
  margin: 1px 0;
  border-radius: 11px;
}

#itineraryAlerts .itinerary-dashboard .weather-orb {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

#itineraryAlerts .itinerary-timeline-dashboard {
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

#itineraryAlerts .itinerary-timeline-dashboard > .section-heading {
  margin: 0;
  align-items: center;
}

#itineraryAlerts .itinerary-timeline-dashboard > .section-heading h3 {
  font-size: 1.12rem !important;
}

#itineraryAlerts .itinerary-timeline-list {
  gap: 9px;
}

#itineraryAlerts .itinerary-timeline-list details {
  border-color: rgba(15, 23, 42, 0.1);
  background: #ffffff;
}

#itineraryAlerts .itinerary-timeline-list details[open] {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

#itineraryAlerts .itinerary-timeline-list summary {
  min-height: 48px;
  padding: 10px 12px;
}

#itineraryAlerts .itinerary-timeline-list details p {
  font-size: 0.78rem;
  line-height: 1.4;
}

#itineraryAlerts .upcoming-reservation-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

#itineraryAlerts .upcoming-reservation-grid article {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px !important;
  min-width: 0;
  min-height: 0;
  padding: 14px !important;
  border-radius: 16px;
}

#itineraryAlerts .upcoming-reservation-grid article button {
  margin-top: auto;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 0.7rem;
}

#itineraryAlerts .security-note {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #0891b2;
  background: #effafe;
  color: #285b6b;
  font-size: 0.76rem;
  line-height: 1.4;
}

#itineraryAlerts .alert-category-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px !important;
  margin: 0;
}

#itineraryAlerts .alert-category-grid label {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
  color: #526477;
  font-size: 0.71rem;
  line-height: 1.3;
}

#itineraryAlerts .delivery-preferences {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

#itineraryAlerts .delivery-preferences label {
  padding: 6px 9px;
  border: 1px solid rgba(8, 127, 140, 0.14);
  border-radius: 999px;
  background: #ffffff;
  color: #285b6b;
  font-size: 0.71rem;
}

#itineraryAlerts .alert-preview-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px !important;
  margin: 0;
}

#itineraryAlerts .alert-preview-list > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 11px;
  border-radius: 12px;
  background: #f8fafc;
}

#itineraryAlerts .alert-preview-list strong {
  font-size: 0.76rem;
  line-height: 1.2;
}

#itineraryAlerts .alert-preview-list span {
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.35;
}

#itineraryAlerts .reservation-reminder-panel {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#itineraryAlerts .reservation-reminder-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px !important;
}

#itineraryAlerts .reservation-reminder-card {
  min-width: 0;
  min-height: 0;
  padding: 14px !important;
  border-radius: 16px;
}

#itineraryAlerts .reservation-reminder-card h4 {
  font-size: 0.98rem;
  line-height: 1.2;
}

#itineraryAlerts .reservation-reminder-card p,
#itineraryAlerts .reservation-reminder-card li {
  font-size: 0.72rem;
  line-height: 1.35;
}

#itineraryAlerts .smart-departure-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e0f7fa, #fff7ed);
}

#itineraryAlerts .smart-departure-card > div {
  min-width: 0;
}

#itineraryAlerts .smart-departure-card h4,
#itineraryAlerts .smart-departure-card p {
  margin: 0;
}

#itineraryAlerts .smart-departure-card h4 {
  font-size: 1rem;
}

#itineraryAlerts .smart-departure-card p:not(.eyebrow) {
  color: #526477;
  font-size: 0.74rem;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  #itineraryAlerts .itinerary-dashboard > .itinerary-card,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--today,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--route,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--weather,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--transport,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--alerts,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--progress {
    grid-column: span 6 !important;
  }

  #itineraryAlerts .upcoming-reservation-grid,
  #itineraryAlerts .reservation-reminder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #itineraryAlerts .alert-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #itineraryAlerts .itinerary-dashboard {
    grid-template-columns: 1fr !important;
  }

  #itineraryAlerts .itinerary-dashboard > .itinerary-card,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--today,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--route,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--weather,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--transport,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--alerts,
  #itineraryAlerts .itinerary-dashboard > .itinerary-card--progress {
    grid-column: 1 / -1 !important;
  }

  #itineraryAlerts .upcoming-reservation-grid,
  #itineraryAlerts .reservation-reminder-grid,
  #itineraryAlerts .alert-category-grid,
  #itineraryAlerts .alert-preview-list {
    grid-template-columns: 1fr !important;
  }

  #itineraryAlerts .smart-departure-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Wallet content consolidation: one visual home for each balance and workflow. */
body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-home-grid,
body[data-active-route="walletPanel"] #walletPanel .wallet-home-grid {
  grid-template-columns: minmax(280px, 1.35fr) repeat(2, minmax(190px, 0.8fr)) !important;
  align-items: start !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections,
body[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections {
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  align-items: start !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview,
body[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview {
  grid-column: span 2 !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-metric-list,
body[data-active-route="walletPanel"] #walletPanel .wallet-metric-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading,
body[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading {
  display: block !important;
  min-width: 0 !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(23, 110, 122, 0.13) !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading :where(h3, p),
body[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading :where(h3, p) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 760px !important;
  margin: 0 !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading h3,
body[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading h3 {
  margin-top: 3px !important;
  color: #10202f !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading p:not(.eyebrow),
body[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading p:not(.eyebrow) {
  margin-top: 5px !important;
  color: #607280 !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 1050px) {
  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-home-grid,
  body[data-active-route="walletPanel"] #walletPanel .wallet-home-grid,
  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections,
  body[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-home-grid,
  body[data-active-route="walletPanel"] #walletPanel .wallet-home-grid,
  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections,
  body[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections,
  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-metric-list,
  body[data-active-route="walletPanel"] #walletPanel .wallet-metric-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview,
  body[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview {
    grid-column: 1 !important;
  }
}

/* Final Travel Home flow: keep navigation and active content in separate grid
   cells after every legacy dashboard override. */
html body.app-routed[data-active-route="rideShareHub"] #rideShareHub,
html body[data-active-route="rideShareHub"] #rideShareHub {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell,
html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell {
  display: grid !important;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: 18px !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: auto !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main,
html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  z-index: auto !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel.active,
html body[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel.active {
  grid-column: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  z-index: auto !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel[hidden],
html body[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell,
  html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
  html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
  html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main,
  html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Final Travel Home flow: keep category navigation and active content in
   separate grid cells after every legacy dashboard override. */
html body.app-routed[data-active-route="rideShareHub"] #rideShareHub,
html body[data-active-route="rideShareHub"] #rideShareHub {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell,
html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell {
  display: grid !important;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: 18px !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: auto !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main,
html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  z-index: auto !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel.active,
html body[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel.active {
  grid-column: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  z-index: auto !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel[hidden],
html body[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell,
  html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
  html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
  html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main,
  html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Travel workspace overlap guard. Global dashboard rules make shell children
   span every column; restore explicit placement and normal document flow here. */
body.app-routed[data-active-route="rideShareHub"] #rideShareHub,
body[data-active-route="rideShareHub"] #rideShareHub {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell,
body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell {
  display: grid !important;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: relative !important;
  isolation: isolate;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main,
body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav,
body[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav,
body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav details,
body[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav details {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav summary,
body[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav summary,
body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav button,
body[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav button {
  position: relative !important;
  inset: auto !important;
  float: none !important;
  z-index: auto !important;
  max-width: 100% !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel.active,
body[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel.active {
  grid-column: 1 !important;
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel[hidden],
body[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell,
  body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
  body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
  body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main,
  body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Destination insight grid hard stop: this component also receives the shared
   12-column dashboard class, so define its own tracks independent of route state. */
html body .destination-insights {
  height: auto !important;
  min-height: 0 !important;
  align-content: start !important;
}

html body .destination-insights > .section-heading {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr) !important;
  align-items: end !important;
  gap: 14px !important;
}

html body .destination-insights .destination-chooser {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 2px 8px !important;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
}

html body .destination-insights .destination-chooser > button {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  scroll-snap-align: start;
}

html body .destination-insights > .destination-fact-grid.smart-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  gap: 12px !important;
}

html body .destination-insights > .destination-fact-grid.smart-dashboard-grid > article {
  grid-column: span 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

@media (max-width: 900px) {
  html body .destination-insights > .section-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  html body .destination-insights > .destination-fact-grid.smart-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .destination-insights > .destination-fact-grid.smart-dashboard-grid > article:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  html body .destination-insights > .destination-fact-grid.smart-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .destination-insights > .destination-fact-grid.smart-dashboard-grid > article:last-child {
    grid-column: span 1 !important;
  }
}

/* Wallet route placement: wallet components are mounted in right-stack. Keep the
   physical Trip Wallet Card at the route's top-left and the workspace beside it. */
body.app-routed[data-active-route="walletPanel"] .content-grid > .right-stack,
body[data-active-route="walletPanel"] .content-grid > .right-stack {
  display: grid !important;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
}

body.app-routed[data-active-route="walletPanel"] .right-stack > #virtualCard:not([hidden]),
body[data-active-route="walletPanel"] .right-stack > #virtualCard:not([hidden]) {
  order: -20 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed[data-active-route="walletPanel"] .right-stack > #walletPanel:not([hidden]),
body[data-active-route="walletPanel"] .right-stack > #walletPanel:not([hidden]) {
  order: -10 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed[data-active-route="walletPanel"] .right-stack > .audit-panel:not([hidden]),
body[data-active-route="walletPanel"] .right-stack > .audit-panel:not([hidden]) {
  order: 0 !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed[data-active-route="walletPanel"] #virtualCard > .virtual-card,
body[data-active-route="walletPanel"] #virtualCard > .virtual-card {
  order: -30 !important;
  width: 100% !important;
  max-width: 380px !important;
  justify-self: start !important;
  margin: 0 !important;
}

body.app-routed[data-active-route="walletPanel"] #virtualCard > .section-heading,
body[data-active-route="walletPanel"] #virtualCard > .section-heading {
  order: -20 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 2px 0 0 !important;
  margin: 0 !important;
}

body.app-routed[data-active-route="walletPanel"] #virtualCard > .section-heading h2,
body[data-active-route="walletPanel"] #virtualCard > .section-heading h2 {
  font-size: 1rem !important;
  line-height: 1.25 !important;
}

body.app-routed[data-active-route="walletPanel"] #virtualCard > .wallet-access-banner,
body[data-active-route="walletPanel"] #virtualCard > .wallet-access-banner {
  order: -10 !important;
}

@media (max-width: 980px) {
  body.app-routed[data-active-route="walletPanel"] .content-grid > .right-stack,
  body[data-active-route="walletPanel"] .content-grid > .right-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-routed[data-active-route="walletPanel"] .right-stack > #virtualCard:not([hidden]),
  body[data-active-route="walletPanel"] .right-stack > #virtualCard:not([hidden]),
  body.app-routed[data-active-route="walletPanel"] .right-stack > #walletPanel:not([hidden]),
  body[data-active-route="walletPanel"] .right-stack > #walletPanel:not([hidden]),
  body.app-routed[data-active-route="walletPanel"] .right-stack > .audit-panel:not([hidden]),
  body[data-active-route="walletPanel"] .right-stack > .audit-panel:not([hidden]) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 520px) {
  body.app-routed[data-active-route="walletPanel"] #virtualCard > .virtual-card,
  body[data-active-route="walletPanel"] #virtualCard > .virtual-card {
    max-width: none !important;
  }
}

/* Wallet tab: organized balance, actions, workspace, and operations sections. */
#walletPanel {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-content: start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#walletPanel > .section-heading,
#walletPanel > .wallet-dashboard-header,
#walletPanel > .wallet-smart-actions,
#walletPanel > .wallet-redesign-shell,
#walletPanel > .wallet-operations-panel {
  grid-column: 1 / -1 !important;
  min-width: 0;
  margin: 0 !important;
}

#walletPanel > .section-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 13px 15px !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

#walletPanel > .section-heading h2 {
  margin: 0 !important;
  max-width: none !important;
  font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
  line-height: 1.15 !important;
}

#walletPanel > .section-heading p:not(.eyebrow) {
  max-width: 720px !important;
  margin-top: 4px !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}

#walletPanel > .wallet-dashboard-header {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 10px !important;
  align-items: start !important;
}

#walletPanel > .wallet-dashboard-header > article {
  display: grid !important;
  grid-column: auto !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.05) !important;
}

#walletPanel > .wallet-dashboard-header > article:nth-child(3n + 1) {
  background: linear-gradient(135deg, #e7fbff, #ffffff 72%) !important;
}

#walletPanel > .wallet-dashboard-header > article:nth-child(3n + 2) {
  background: linear-gradient(135deg, #ecfdf5, #ffffff 72%) !important;
}

#walletPanel > .wallet-dashboard-header > article:nth-child(3n + 3) {
  background: linear-gradient(135deg, #fff7ed, #ffffff 72%) !important;
}

#walletPanel > .wallet-dashboard-header > article span {
  color: #567084 !important;
  font-size: 0.65rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#walletPanel > .wallet-dashboard-header > article strong {
  margin: 0 !important;
  color: #0f2f3a !important;
  font-size: 1.08rem !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere;
}

#walletPanel > .wallet-dashboard-header > article small {
  color: #64788a !important;
  font-size: 0.67rem !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
}

#walletPanel > .wallet-smart-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

#walletPanel > .wallet-smart-actions button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

#walletPanel > .wallet-redesign-shell {
  display: grid !important;
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#walletPanel > .wallet-redesign-shell > .wallet-section-nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0;
  padding: 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.04) !important;
}

#walletPanel > .wallet-redesign-shell > .wallet-section-nav button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 7px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #526477 !important;
  font-size: 0.69rem !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
}

#walletPanel > .wallet-redesign-shell > .wallet-section-nav button.active,
#walletPanel > .wallet-redesign-shell > .wallet-section-nav button:hover,
#walletPanel > .wallet-redesign-shell > .wallet-section-nav button:focus-visible {
  border-color: rgba(8, 127, 140, 0.16) !important;
  background: #e9fbfd !important;
  color: #087f8c !important;
}

#walletPanel > .wallet-redesign-shell > .wallet-home-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0;
  margin: 0 !important;
}

#walletPanel .wallet-home-grid > * {
  grid-column: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

#walletPanel .wallet-home-grid > .wallet-balance-hero {
  grid-column: span 2 !important;
  background: linear-gradient(135deg, #e6fbff, #ffffff 72%) !important;
}

#walletPanel .wallet-home-grid > .wallet-summary-card {
  display: grid !important;
  gap: 5px !important;
}

#walletPanel .wallet-home-grid :where(span, small) {
  overflow-wrap: anywhere;
}

#walletPanel .wallet-home-grid strong {
  font-size: 1rem !important;
  line-height: 1.15 !important;
}

#walletPanel .wallet-home-grid small {
  font-size: 0.68rem !important;
  line-height: 1.3 !important;
}

#walletPanel > .wallet-redesign-shell .wallet-trip-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0;
  grid-column: 2;
  margin: 0 !important;
}

#walletPanel > .wallet-redesign-shell .wallet-trip-card-grid > * {
  grid-column: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

#walletPanel > .wallet-redesign-shell .wallet-trip-card-grid .wallet-trip-tile {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center;
}

#walletPanel > .wallet-redesign-shell .wallet-trip-card-grid .wallet-trip-tile img {
  width: 72px !important;
  height: 72px !important;
  aspect-ratio: 1 !important;
  border-radius: 10px;
  object-fit: cover;
}

#walletPanel > .wallet-redesign-shell .wallet-trip-card-grid .wallet-trip-tile button {
  grid-column: 1 / -1;
  width: auto !important;
  justify-self: start;
  min-height: 30px;
  padding: 6px 8px;
  font-size: 0.67rem;
}

#walletPanel > .wallet-redesign-shell .wallet-virtual-preview {
  display: grid !important;
  gap: 6px !important;
}

#walletPanel .wallet-virtual-preview .wallet-mini-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px !important;
}

#walletPanel .wallet-virtual-preview .wallet-mini-actions button {
  width: auto !important;
  min-height: 29px;
  padding: 5px 7px;
  font-size: 0.65rem;
}

#walletPanel > .wallet-redesign-shell .wallet-dashboard-sections,
#walletPanel > .wallet-redesign-shell .wallet-section-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 9px !important;
  align-items: start !important;
  min-width: 0;
  margin: 0 !important;
}

#walletPanel > .wallet-redesign-shell .wallet-dashboard-sections > *,
#walletPanel > .wallet-redesign-shell .wallet-section-card-grid > * {
  grid-column: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  padding: 11px !important;
  border-radius: 13px !important;
}

#walletPanel > .wallet-redesign-shell .wallet-dashboard-sections > article:first-child {
  grid-column: span 2 !important;
}

#walletPanel > .wallet-redesign-shell .wallet-dashboard-sections > article:not(:first-child),
#walletPanel > .wallet-redesign-shell .wallet-section-card-grid > article {
  display: grid !important;
  gap: 5px !important;
}

#walletPanel > .wallet-redesign-shell :where(.wallet-dashboard-sections, .wallet-section-card-grid) strong {
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
}

#walletPanel > .wallet-redesign-shell :where(.wallet-dashboard-sections, .wallet-section-card-grid) small {
  font-size: 0.67rem !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
}

#walletPanel > .wallet-redesign-shell :where(.wallet-dashboard-sections, .wallet-section-card-grid) button {
  width: auto !important;
  justify-self: start;
  min-height: 29px !important;
  margin-top: 3px;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  font-size: 0.65rem !important;
}

#walletPanel > .wallet-redesign-shell .wallet-quick-actions-redesign {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  min-width: 0;
  margin: 0 !important;
}

#walletPanel > .wallet-redesign-shell .wallet-quick-actions-redesign button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 6px 7px !important;
  border-radius: 9px !important;
  font-size: 0.67rem !important;
  white-space: normal !important;
}

#walletPanel > .wallet-operations-panel {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#walletPanel > .wallet-operations-panel > .trip-wallet-card {
  grid-column: span 8 !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 11px !important;
  border-radius: 13px !important;
}

#walletPanel > .wallet-operations-panel > .trip-wallet-card img {
  width: 78px !important;
  height: 58px !important;
  aspect-ratio: auto !important;
  border-radius: 9px;
  object-fit: cover;
}

#walletPanel > .wallet-operations-panel > .wallet-total {
  grid-column: span 4 !important;
  display: flex !important;
  min-width: 0;
  min-height: 0 !important;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 11px !important;
  border-radius: 13px !important;
}

#walletPanel > .wallet-operations-panel > .wallet-total strong {
  font-size: 1.35rem;
  line-height: 1.1;
}

#walletPanel > .wallet-operations-panel > .security-note,
#walletPanel > .wallet-operations-panel > #walletMessage {
  grid-column: 1 / -1 !important;
  min-width: 0;
  margin: 0 !important;
  padding: 9px 11px !important;
  font-size: 0.69rem !important;
  line-height: 1.35 !important;
}

#walletPanel > .wallet-operations-panel > .wallet-breakdown {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

#walletPanel > .wallet-operations-panel > .wallet-breakdown > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px !important;
  border-radius: 11px;
}

#walletPanel > .wallet-operations-panel > .wallet-action-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

#walletPanel > .wallet-operations-panel > .wallet-action-grid button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 66px !important;
  padding: 9px !important;
  border-radius: 11px !important;
  text-align: left;
}

#walletPanel > .wallet-operations-panel > .range-wrap,
#walletPanel > .wallet-operations-panel > .funds-form {
  min-width: 0;
  min-height: 0;
  padding: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 11px;
  background: #ffffff;
}

#walletPanel > .wallet-operations-panel > .range-wrap {
  grid-column: span 5 !important;
}

#walletPanel > .wallet-operations-panel > .funds-form {
  grid-column: span 7 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: end;
}

#walletPanel > .wallet-operations-panel > .funds-form button {
  width: auto !important;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.68rem;
}

#walletPanel > .wallet-operations-panel > .shared-wallet-ledger {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0;
}

#walletPanel > .wallet-operations-panel > .shared-wallet-ledger > div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0;
  padding: 9px !important;
  border-radius: 11px !important;
  background: #ffffff;
}

#walletPanel > .wallet-operations-panel > .budget-line,
#walletPanel > .wallet-operations-panel > .bar {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

#walletPanel > .wallet-operations-panel > .budget-line {
  display: flex !important;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 9px 9px 0 0;
  background: #ffffff;
  font-size: 0.72rem;
}

#walletPanel > .wallet-operations-panel > .bar {
  height: 6px;
  margin-top: -10px !important;
  border-radius: 0 0 9px 9px;
}

@media (max-width: 1050px) {
  #walletPanel > .wallet-dashboard-header,
  #walletPanel > .wallet-redesign-shell .wallet-home-grid,
  #walletPanel > .wallet-redesign-shell .wallet-dashboard-sections,
  #walletPanel > .wallet-redesign-shell .wallet-section-card-grid,
  #walletPanel > .wallet-operations-panel > .wallet-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #walletPanel > .wallet-redesign-shell .wallet-home-grid > .wallet-balance-hero,
  #walletPanel > .wallet-redesign-shell .wallet-dashboard-sections > article:first-child {
    grid-column: span 2 !important;
  }

  #walletPanel > .wallet-redesign-shell .wallet-trip-card-grid,
  #walletPanel > .wallet-redesign-shell .wallet-quick-actions-redesign,
  #walletPanel > .wallet-operations-panel > .wallet-action-grid,
  #walletPanel > .wallet-operations-panel > .shared-wallet-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 780px) {
  #walletPanel > .section-heading {
    flex-direction: column !important;
  }

  #walletPanel > .wallet-dashboard-header,
  #walletPanel > .wallet-smart-actions,
  #walletPanel > .wallet-redesign-shell,
  #walletPanel > .wallet-redesign-shell .wallet-home-grid,
  #walletPanel > .wallet-redesign-shell .wallet-trip-card-grid,
  #walletPanel > .wallet-redesign-shell .wallet-dashboard-sections,
  #walletPanel > .wallet-redesign-shell .wallet-section-card-grid,
  #walletPanel > .wallet-redesign-shell .wallet-quick-actions-redesign,
  #walletPanel > .wallet-operations-panel,
  #walletPanel > .wallet-operations-panel > .wallet-breakdown,
  #walletPanel > .wallet-operations-panel > .wallet-action-grid,
  #walletPanel > .wallet-operations-panel > .shared-wallet-ledger {
    grid-template-columns: 1fr !important;
  }

  #walletPanel > .wallet-redesign-shell .wallet-home-grid > .wallet-balance-hero,
  #walletPanel > .wallet-redesign-shell .wallet-dashboard-sections > article:first-child,
  #walletPanel > .wallet-redesign-shell .wallet-trip-card-grid,
  #walletPanel > .wallet-redesign-shell .wallet-quick-actions-redesign,
  #walletPanel > .wallet-operations-panel > .trip-wallet-card,
  #walletPanel > .wallet-operations-panel > .wallet-total,
  #walletPanel > .wallet-operations-panel > .range-wrap,
  #walletPanel > .wallet-operations-panel > .funds-form {
    grid-column: 1 / -1 !important;
  }

  #walletPanel > .wallet-redesign-shell > .wallet-section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #walletPanel > .wallet-redesign-shell .wallet-trip-card-grid .wallet-trip-tile {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  #walletPanel > .wallet-operations-panel > .funds-form {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  #walletPanel > .wallet-smart-actions,
  #walletPanel > .wallet-redesign-shell > .wallet-section-nav {
    grid-template-columns: 1fr !important;
  }

  #walletPanel > .wallet-operations-panel > .trip-wallet-card {
    grid-template-columns: 1fr !important;
  }

  #walletPanel > .wallet-operations-panel > .trip-wallet-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 7 !important;
  }
}

/* App-wide text containment: titles and descriptions never live in a narrow side column. */
body.app-routed [data-route-component]:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .memory-media-card,
  .event-experience-card,
  .itinerary-card,
  .travel-document-card,
  .travel-dashboard-card,
  .travel-provider-card,
  .travel-result-card,
  .reservation-reminder-card,
  .transport-record-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-virtual-preview,
  .profile-card-grid article,
  .photo-editor-card,
  .photo-privacy-card,
  .settings-row,
  .social-card
) {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  .memory-media-card,
  .event-experience-card,
  .itinerary-card,
  .travel-document-card,
  .travel-dashboard-card,
  .travel-provider-card,
  .travel-result-card,
  .reservation-reminder-card,
  .transport-record-card,
  .wallet-summary-card,
  .wallet-virtual-preview,
  .profile-card-grid article,
  .photo-editor-card,
  .photo-privacy-card
) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 10px;
  grid-template-columns: none !important;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  .memory-media-card,
  .event-experience-card,
  .itinerary-card,
  .travel-document-card,
  .travel-dashboard-card,
  .travel-provider-card,
  .travel-result-card,
  .reservation-reminder-card,
  .transport-record-card,
  .wallet-summary-card,
  .wallet-virtual-preview,
  .profile-card-grid article,
  .photo-editor-card,
  .photo-privacy-card
) :where(
  h1, h2, h3, h4, h5, h6,
  p, strong, small, span, em, label,
  dt, dd, li
) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.4;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  .memory-media-card img,
  .cover-photo-card img,
  .photo-audience-card img,
  .profile-photo-preview img,
  .travel-provider-card img,
  .travel-result-card img
) {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  object-fit: cover;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  .memory-card-actions,
  .itinerary-action-row,
  .button-row,
  .hero-actions,
  .mini-action-row,
  .corporate-card-actions,
  .wallet-mini-actions,
  .platform-actions,
  .explore-card-actions
) {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 8px;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  .memory-card-actions > *,
  .itinerary-action-row > *,
  .button-row > *,
  .hero-actions > *,
  .mini-action-row > *,
  .corporate-card-actions > *,
  .wallet-mini-actions > *,
  .platform-actions > *,
  .explore-card-actions > *
) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Photo captions use a full content row below the image, never a 92px thumbnail column. */
body.app-routed [data-route-component]:not([hidden]) .memory-media-card {
  grid-template-columns: none !important;
}

body.app-routed [data-route-component]:not([hidden]) .memory-media-card > :where(div, strong, small, span) {
  width: 100% !important;
  min-width: 0 !important;
}

body.app-routed [data-route-component]:not([hidden]) .memory-media-card > div:not(.memory-card-actions) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px;
  padding-inline: 0;
}

/* Chat redesign: conversation list, message thread, and details stay distinct. */
#socialHub .messages-hub {
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#socialHub .message-search-row {
  display: flex !important;
  align-items: end;
  gap: 10px !important;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

#socialHub .message-search-row label {
  flex: 1 1 auto;
  min-width: 0;
}

#socialHub .message-search-row input {
  width: 100%;
  min-height: 42px;
  padding-inline: 13px;
  border-radius: 11px;
}

#socialHub .message-search-row #messageAiButton {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 7px 12px;
  font-size: 0.76rem;
}

#socialHub .message-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  background: #f1f8f7;
}

#socialHub .message-tabs button {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 0.74rem;
  line-height: 1.15;
}

#socialHub .messages-layout {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.7fr) minmax(220px, 0.8fr) !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100%;
  min-width: 0;
}

#socialHub .conversation-list,
#socialHub .chat-workspace,
#socialHub .conversation-details-panel {
  min-width: 0 !important;
  height: auto !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06) !important;
}

#socialHub .conversation-list {
  display: grid !important;
  gap: 0 !important;
  align-content: start;
  max-height: 620px;
  overflow: auto;
  padding: 5px !important;
}

#socialHub .conversation-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 68px !important;
  padding: 9px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 11px !important;
  background: transparent !important;
}

#socialHub .conversation-card:last-child {
  border-bottom: 0 !important;
}

#socialHub .conversation-card:hover,
#socialHub .conversation-card:focus-visible,
#socialHub .conversation-card.active {
  border-color: rgba(8, 127, 140, 0.18) !important;
  background: #effaf7 !important;
  outline: none;
}

#socialHub .conversation-card img,
#socialHub .conversation-card .message-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

#socialHub .conversation-card > span:not(.message-avatar) {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

#socialHub .conversation-card strong,
#socialHub .conversation-card small,
#socialHub .conversation-card em {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.3;
}

#socialHub .conversation-card strong {
  font-size: 0.78rem;
}

#socialHub .conversation-card small,
#socialHub .conversation-card em {
  font-size: 0.67rem;
}

#socialHub .conversation-card em {
  grid-column: auto;
  justify-self: end;
  width: auto !important;
  max-width: 72px;
  text-align: right;
}

#socialHub .chat-workspace {
  display: grid !important;
  grid-template-rows: auto auto minmax(320px, auto) auto auto auto !important;
  gap: 11px !important;
  min-height: 620px !important;
  padding: 14px !important;
}

#socialHub .chat-header {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

#socialHub .chat-header > div:first-child {
  min-width: 0;
}

#socialHub .chat-header h3,
#socialHub .chat-header span {
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
}

#socialHub .chat-header h3 {
  font-size: 1.1rem;
  line-height: 1.2;
}

#socialHub .chat-header span {
  font-size: 0.7rem;
  line-height: 1.35;
}

#socialHub .chat-header .mini-action-row {
  flex: 0 1 auto;
  width: auto !important;
}

#socialHub .chat-header .mini-action-row button,
#socialHub .chat-tool-row button {
  min-height: 31px;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: 0.68rem;
}

#socialHub .pinned-message {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 11px;
  font-size: 0.72rem;
  line-height: 1.35;
}

#socialHub .pinned-message > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

#socialHub .modern-messages {
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
  min-height: 320px !important;
  max-height: 420px;
  overflow: auto;
  padding: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fdff, #fffaf5);
}

#socialHub .modern-messages .msg {
  width: fit-content;
  max-width: min(88%, 560px);
  padding: 9px 11px;
  border-radius: 14px;
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#socialHub .chat-tool-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100%;
  overflow: visible;
}

#socialHub .chat-form {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  min-width: 0;
}

#socialHub .chat-form input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0 !important;
  min-height: 42px;
  border-radius: 11px;
}

#socialHub .chat-form button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 0.76rem;
}

#socialHub .typing-indicator {
  padding-left: 2px;
  font-size: 0.68rem;
}

#socialHub .conversation-details-panel {
  display: grid !important;
  gap: 12px !important;
  align-content: start;
  padding: 14px !important;
}

#socialHub .chat-detail-card {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: center;
  min-width: 0;
}

#socialHub .chat-detail-card .message-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

#socialHub .chat-detail-card > div,
#socialHub .conversation-details-panel section,
#socialHub .conversation-details-panel p,
#socialHub .conversation-details-panel h3,
#socialHub .conversation-details-panel h4,
#socialHub .conversation-details-panel small {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

#socialHub .chat-detail-card h3 {
  font-size: 0.98rem;
  line-height: 1.2;
}

#socialHub .chat-detail-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px !important;
}

#socialHub .chat-detail-actions button,
#socialHub .chat-danger-actions button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 0.68rem;
  line-height: 1.2;
}

#socialHub .chat-member-list {
  gap: 6px;
}

#socialHub .chat-member-list span {
  width: 100%;
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.3;
}

#socialHub .chat-danger-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px !important;
}

#socialHub .message-support-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
  width: 100%;
}

#socialHub .message-support-grid article {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px !important;
  min-width: 0;
  min-height: 0;
  padding: 13px !important;
  border-radius: 14px;
}

#socialHub .message-support-grid article strong {
  width: 100%;
  font-size: 0.76rem;
  line-height: 1.35;
}

#socialHub .message-support-grid article .mini-action-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: auto;
}

#socialHub .message-support-grid article .mini-action-row button {
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 0.66rem;
}

#socialHub #messageStatus {
  margin: 0;
  padding: 0 2px;
  font-size: 0.72rem;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  #socialHub .messages-layout {
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.5fr) !important;
  }

  #socialHub .conversation-details-panel {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  #socialHub .conversation-details-panel > section,
  #socialHub .conversation-details-panel > .chat-danger-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #socialHub .message-search-row,
  #socialHub .chat-header {
    align-items: stretch;
    flex-direction: column;
  }

  #socialHub .message-search-row #messageAiButton,
  #socialHub .chat-header .mini-action-row {
    width: 100% !important;
  }

  #socialHub .message-search-row #messageAiButton {
    flex-basis: auto;
  }

  #socialHub .messages-layout,
  #socialHub .message-support-grid {
    grid-template-columns: 1fr !important;
  }

  #socialHub .conversation-list,
  #socialHub .chat-workspace {
    max-height: none;
  }

  #socialHub .chat-workspace {
    min-height: 0 !important;
  }

  #socialHub .modern-messages {
    min-height: 240px !important;
    max-height: 360px;
  }

  #socialHub .conversation-details-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #socialHub .pinned-message {
    grid-template-columns: 1fr !important;
  }
}

/* Keep widget headers in the top row instead of letting them become side columns. */
body.app-routed :where(.smart-widget, .travel-widget, [data-widget]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

body.app-routed :where(.smart-widget, .travel-widget, [data-widget]) > .widget-toolbar {
  display: flex !important;
  flex: 0 0 auto !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.app-routed :where(.smart-widget, .travel-widget, [data-widget]) > .widget-toolbar > span:first-child {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: normal !important;
}

body.app-routed :where(
  .smart-widget,
  .travel-widget,
  [data-widget],
  .travel-dashboard-card,
  .travel-support-card,
  .travel-focus-panel,
  .social-card,
  .ride-clean-card,
  .wallet-summary-card,
  .settings-card,
  .itinerary-card,
  .memory-media-card
) > :where(
  .card-heading,
  .widget-toolbar,
  .social-card-header,
  .ride-card-heading,
  .travel-focus-header,
  .section-heading,
  .settings-row
) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

body.app-routed :where(.card-heading, .social-card-header, .ride-card-heading, .travel-focus-header) > :where(
  h1, h2, h3, h4, h5, h6, p, strong, span, div
) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed :where(.card-heading, .social-card-header, .ride-card-heading) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 9px !important;
}

body.app-routed :where(.card-heading, .social-card-header, .ride-card-heading) > :first-child {
  flex: 1 1 180px !important;
}

@media (max-width: 640px) {
  body.app-routed :where(.card-heading, .social-card-header, .ride-card-heading) {
    align-items: stretch !important;
  }

  body.app-routed :where(.card-heading, .social-card-header, .ride-card-heading) > :where(button, .button-row, .mini-action-row) {
    width: 100% !important;
  }
}

/* Physical-card treatment for the wallet preview and boarding-pass documents. */
#virtualCard .virtual-card {
  position: relative !important;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  min-height: 270px !important;
  gap: 18px !important;
  padding: 24px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 216, 115, 0.72), transparent 24%),
    radial-gradient(circle at 12% 88%, rgba(28, 214, 199, 0.34), transparent 34%),
    linear-gradient(135deg, #112b3b 0%, #087f8c 50%, #f06f54 100%) !important;
  box-shadow: 0 24px 46px rgba(15, 47, 58, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: perspective(900px) rotateX(2deg) rotateY(-2deg);
}

#virtualCard .virtual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.24) 42%, transparent 58%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 7px);
  opacity: 0.74;
  pointer-events: none;
}

#virtualCard .virtual-card > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

#virtualCard .virtual-card .card-top {
  align-items: flex-start;
  color: #ffffff;
}

#virtualCard .virtual-card .card-top span,
#virtualCard .virtual-card .card-meta small,
#virtualCard .virtual-card .card-holder-row small {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

#virtualCard .virtual-card .card-top strong {
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#virtualCard .card-chip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
}

#virtualCard .card-chip {
  display: block;
  width: 48px;
  height: 35px;
  border: 1px solid rgba(73, 49, 14, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(103, 70, 20, 0.3) 48% 51%, transparent 52%),
    linear-gradient(0deg, transparent 47%, rgba(103, 70, 20, 0.3) 48% 51%, transparent 52%),
    linear-gradient(135deg, #fff0ae, #c28e33 58%, #ffe9a0);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.72);
}

#virtualCard .card-contactless {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.28rem;
  letter-spacing: -0.2em;
  transform: rotate(-90deg);
}

#virtualCard .virtual-card .card-number {
  width: 100%;
  color: #ffffff !important;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem) !important;
  letter-spacing: 0.12em;
  line-height: 1.2;
  white-space: nowrap !important;
}

#virtualCard .virtual-card .card-meta,
#virtualCard .card-holder-row {
  align-items: end;
  width: 100%;
}

#virtualCard .virtual-card .card-meta strong,
#virtualCard .card-holder-row strong {
  color: #ffffff !important;
  font-size: 0.78rem;
}

#virtualCard .card-holder-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

#virtualCard .card-holder-row > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#virtualCard .card-mark {
  font-size: 1.45rem !important;
  letter-spacing: 0.08em;
  font-style: italic;
}

#rideShareHub .visual-pass-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 47, 58, 0.14) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 34px rgba(15, 47, 58, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

#rideShareHub .visual-pass-card::before {
  content: "";
  display: block;
  grid-column: 1 / -1;
  height: 8px;
  background: linear-gradient(90deg, #087f8c, #00a6c7 48%, #ff7a59) !important;
}

#rideShareHub .visual-pass-card::after {
  content: "";
  position: absolute;
  top: 196px;
  left: 20px;
  right: 20px;
  border-top: 2px dashed rgba(15, 47, 58, 0.2);
  pointer-events: none;
}

#rideShareHub .visual-pass-card > * {
  min-width: 0;
  max-width: 100%;
  margin-right: 20px !important;
  margin-left: 20px !important;
}

#rideShareHub .visual-pass-card > .pass-topline {
  margin-top: 10px !important;
}

#rideShareHub .visual-pass-card > .pass-actions {
  margin-bottom: 20px !important;
}

#rideShareHub .digital-boarding-pass {
  background: linear-gradient(180deg, #0f2f3a 0 184px, #ffffff 184px) !important;
}

#rideShareHub .digital-boarding-pass::before {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  border: 0 !important;
  height: 8px !important;
}

#rideShareHub .digital-boarding-pass .pass-topline,
#rideShareHub .digital-boarding-pass .pass-provider,
#rideShareHub .digital-boarding-pass .pass-route,
#rideShareHub .digital-boarding-pass h4,
#rideShareHub .digital-boarding-pass dl,
#rideShareHub .digital-boarding-pass .official-code,
#rideShareHub .digital-boarding-pass .barcode-strip,
#rideShareHub .digital-boarding-pass .pass-actions {
  width: auto !important;
  margin-left: 20px !important;
  margin-right: 20px !important;
}

#rideShareHub .digital-boarding-pass .pass-provider {
  background: rgba(255, 255, 255, 0.13) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

#rideShareHub .digital-boarding-pass .official-code {
  justify-self: start;
}

#rideShareHub .digital-boarding-pass .pass-actions,
#rideShareHub .visual-pass-card:not(.digital-boarding-pass) .pass-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

@media (max-width: 640px) {
  #virtualCard .virtual-card {
    min-height: 238px !important;
    padding: 20px !important;
    transform: none;
  }

  #rideShareHub .visual-pass-card::after {
    top: 205px;
  }
}

/* Travel-Drip Pass workspace: the ticket is the surface, not a nested parent card. */
#rideShareHub .travel-pass-workspace {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#rideShareHub .travel-pass-workspace > .section-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(8, 127, 140, 0.12) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffffff, #eafcff 56%, #fff1e9) !important;
  box-shadow: 0 10px 22px rgba(15, 47, 58, 0.07) !important;
}

#rideShareHub .travel-pass-workspace > .section-heading h3 {
  margin: 3px 0 3px;
  color: #0f2f3a;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.2;
}

#rideShareHub .travel-pass-workspace > .section-heading p:not(.eyebrow) {
  max-width: 62ch;
  margin: 0;
  color: #5f7882;
  font-size: 0.78rem;
  line-height: 1.4;
}

#rideShareHub .travel-pass-workspace > .section-heading .ghost-button {
  flex: 0 0 auto;
  min-height: 34px;
  white-space: nowrap !important;
}

#rideShareHub .travel-pass-workspace > .travel-pass-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: fit-content;
  max-width: 100%;
  margin: 0 !important;
  padding: 5px !important;
  border: 1px solid rgba(8, 127, 140, 0.12) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 16px rgba(15, 47, 58, 0.05) !important;
}

#rideShareHub .travel-pass-workspace > .travel-pass-filters button {
  min-height: 32px !important;
  padding: 6px 11px !important;
  border-radius: 8px !important;
  font-size: 0.72rem;
}

#rideShareHub .travel-pass-workspace > .visual-pass-grid.single-focus-pass {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100%;
  min-width: 0;
}

#rideShareHub .travel-pass-workspace .digital-boarding-pass .pass-topline {
  letter-spacing: 0.08em;
}

#rideShareHub .travel-pass-workspace .digital-boarding-pass h4 {
  margin-top: 4px !important;
  font-size: clamp(1rem, 2vw, 1.4rem) !important;
  line-height: 1.2;
}

#rideShareHub .travel-pass-workspace .digital-boarding-pass dl {
  padding-top: 4px;
  border-top: 1px solid rgba(15, 47, 58, 0.08);
}

#rideShareHub .travel-pass-workspace .digital-boarding-pass .pass-actions button {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 0.7rem;
}

@media (max-width: 640px) {
  #rideShareHub .travel-pass-workspace > .section-heading {
    flex-direction: column !important;
  }

  #rideShareHub .travel-pass-workspace > .section-heading .ghost-button {
    width: 100%;
  }

  #rideShareHub .travel-pass-workspace > .travel-pass-filters {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
  }
}

/* Compact Smart Dashboard density: widgets size to content instead of creating long empty columns. */
body.app-routed main > section.panel:not([hidden]) :where(
  .smart-dashboard-grid,
  .widget-grid,
  .travel-dashboard-sections,
  .travel-booking-summary,
  .travel-transport-summary,
  .travel-focus-grid,
  .travel-provider-cards,
  .wallet-dashboard-header,
  .wallet-home-grid,
  .wallet-trip-card-grid,
  .wallet-dashboard-sections,
  .wallet-section-card-grid,
  .wallet-action-grid,
  .info-status-grid,
  .important-info-grid,
  .security-status-grid,
  .security-control-grid,
  .memory-gallery-grid,
  .memory-album-grid,
  .platform-grid,
  .message-support-grid
) {
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .smart-dashboard-grid > *,
  .widget-grid > *,
  .travel-dashboard-sections > *,
  .travel-booking-summary > *,
  .travel-transport-summary > *,
  .travel-focus-grid > *,
  .travel-provider-cards > *,
  .wallet-dashboard-header > *,
  .wallet-home-grid > *,
  .wallet-trip-card-grid > *,
  .wallet-dashboard-sections > *,
  .wallet-section-card-grid > *,
  .wallet-action-grid > *,
  .info-status-grid > *,
  .important-info-grid > *,
  .security-status-grid > *,
  .security-control-grid > *,
  .memory-gallery-grid > *,
  .memory-album-grid > *,
  .platform-grid > *,
  .message-support-grid > *
) {
  align-self: start !important;
  min-height: 0 !important;
  height: auto !important;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .travel-dashboard-card,
  .travel-booking-summary article,
  .travel-transport-summary article,
  .travel-focus-grid article,
  .travel-provider-cards article,
  .travel-result-card,
  .travel-support-card,
  .event-experience-card,
  .itinerary-card,
  .reservation-reminder-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-section-card-grid article,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row
) {
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  gap: 8px !important;
  align-self: start !important;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  .widget-grid,
  .smart-dashboard-grid,
  .travel-dashboard-sections,
  .travel-booking-summary,
  .travel-transport-summary,
  .travel-focus-grid,
  .travel-provider-cards,
  .wallet-dashboard-header,
  .wallet-home-grid,
  .wallet-trip-card-grid,
  .wallet-dashboard-sections,
  .wallet-section-card-grid,
  .wallet-action-grid,
  .info-status-grid,
  .important-info-grid,
  .security-status-grid,
  .security-control-grid,
  .memory-gallery-grid,
  .memory-album-grid,
  .platform-grid,
  .message-support-grid
) {
  gap: 12px !important;
}

body.app-routed [data-route-component]:not([hidden]) :where(
  .widget-toolbar,
  .widget-meta,
  .button-row,
  .mini-action-row,
  .memory-card-actions,
  .platform-actions,
  .explore-card-actions,
  .itinerary-action-row,
  .corporate-card-actions
) {
  gap: 6px !important;
}

#socialHub .conversation-list {
  max-height: 460px !important;
}

#socialHub .chat-workspace {
  min-height: 0 !important;
  padding: 12px !important;
  gap: 8px !important;
}

#socialHub .modern-messages {
  min-height: 240px !important;
  max-height: 340px !important;
  padding: 10px !important;
}

#itineraryAlerts .itinerary-dashboard > .itinerary-card,
#eventsPanel .event-experience-card {
  min-height: 0 !important;
}

#itineraryAlerts .itinerary-timeline-dashboard,
#itineraryAlerts .reservation-reminder-panel,
#rideShareHub .travel-settings-main,
#walletPanel .wallet-redesign-shell,
#memoriesPanel .memories-gallery-shell {
  gap: 12px !important;
}

@media (max-width: 640px) {
  body.app-routed [data-route-component]:not([hidden]) :where(
    .smart-widget,
    .travel-widget,
    .travel-dashboard-card,
    .travel-booking-summary article,
    .travel-transport-summary article,
    .travel-focus-grid article,
    .travel-provider-cards article,
    .travel-result-card,
    .travel-support-card,
    .event-experience-card,
    .itinerary-card,
    .reservation-reminder-card,
    .wallet-summary-card,
    .wallet-trip-tile,
    .wallet-section-card-grid article,
    .memory-media-card,
    .social-card,
    .platform-card,
    .ride-clean-card,
    .transport-record-card,
    .settings-row
  ) {
    padding: 11px !important;
  }
}

/* Itinerary tab: compact, organized planning workspace. */
#itineraryAlerts {
  display: grid !important;
  gap: 14px !important;
  align-content: start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#itineraryAlerts > .section-heading,
#itineraryAlerts .itinerary-timeline-dashboard > .section-heading,
#itineraryAlerts .reservation-reminder-panel > .section-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 13px 15px !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

#itineraryAlerts > .section-heading h2 {
  max-width: none !important;
  font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
  line-height: 1.15 !important;
}

#itineraryAlerts > .section-heading p:not(.eyebrow) {
  max-width: 720px !important;
  margin-top: 4px !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}

#itineraryAlerts > .itinerary-dashboard {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card {
  display: flex !important;
  grid-column: span 3 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card--today {
  grid-column: span 6 !important;
  padding: 15px !important;
  border-color: rgba(14, 116, 144, 0.22) !important;
  background: linear-gradient(135deg, #e8fbff, #ffffff 68%) !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card > span {
  font-size: 0.63rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card > h3 {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card--today > h3 {
  font-size: clamp(1.12rem, 2vw, 1.55rem) !important;
  line-height: 1.12 !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card > p {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 0.71rem !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card > button,
#itineraryAlerts > .itinerary-dashboard .itinerary-action-row button {
  width: auto !important;
  min-height: 31px !important;
  margin-top: 3px !important;
  padding: 6px 9px !important;
  border-radius: 9px !important;
  font-size: 0.68rem !important;
}

#itineraryAlerts > .itinerary-dashboard .itinerary-action-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  width: 100%;
  margin-top: 3px !important;
}

#itineraryAlerts > .itinerary-dashboard .route-preview-line {
  height: 29px !important;
  margin: 0 !important;
  border-radius: 9px !important;
}

#itineraryAlerts > .itinerary-dashboard .weather-orb {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
}

#itineraryAlerts > .itinerary-timeline-dashboard,
#itineraryAlerts > .reservation-reminder-panel {
  display: grid !important;
  gap: 10px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#itineraryAlerts .itinerary-timeline-dashboard > .section-heading h3,
#itineraryAlerts .reservation-reminder-panel > .section-heading h3 {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

#itineraryAlerts .itinerary-timeline-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0;
  margin: 0 !important;
}

#itineraryAlerts .itinerary-timeline-list details {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

#itineraryAlerts .itinerary-timeline-list details summary {
  display: grid !important;
  grid-template-columns: 24px 62px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  align-items: center !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 9px 10px !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
}

#itineraryAlerts .itinerary-timeline-list details summary > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

#itineraryAlerts .itinerary-timeline-list details summary strong {
  font-size: 0.74rem !important;
  line-height: 1.2 !important;
}

#itineraryAlerts .itinerary-timeline-list details summary time,
#itineraryAlerts .itinerary-timeline-list details summary em {
  white-space: nowrap;
  font-size: 0.67rem !important;
}

#itineraryAlerts .itinerary-timeline-list details p {
  margin: 0 !important;
  padding: 0 10px 10px 101px !important;
  color: #607286;
  font-size: 0.69rem !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}

#itineraryAlerts > .upcoming-reservation-grid,
#itineraryAlerts .reservation-reminder-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0;
  margin: 0 !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article,
#itineraryAlerts .reservation-reminder-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article > strong,
#itineraryAlerts > .upcoming-reservation-grid > article > small,
#itineraryAlerts .reservation-reminder-card h4,
#itineraryAlerts .reservation-reminder-card p,
#itineraryAlerts .reservation-reminder-card li {
  max-width: 100%;
  overflow-wrap: anywhere;
}

#itineraryAlerts > .upcoming-reservation-grid > article > strong,
#itineraryAlerts .reservation-reminder-card h4 {
  margin: 0 !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article > small,
#itineraryAlerts .reservation-reminder-card p,
#itineraryAlerts .reservation-reminder-card li {
  font-size: 0.68rem !important;
  line-height: 1.35 !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article button,
#itineraryAlerts .reservation-reminder-card .mini-action-row button {
  width: auto !important;
  min-height: 30px !important;
  margin-top: 3px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  font-size: 0.66rem !important;
}

#itineraryAlerts .reservation-reminder-card .mini-action-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px !important;
  width: 100%;
}

#itineraryAlerts .security-note {
  margin: 0 !important;
  padding: 9px 11px !important;
  font-size: 0.7rem !important;
  line-height: 1.35 !important;
}

#itineraryAlerts > .alert-category-grid,
#itineraryAlerts > .alert-preview-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  min-width: 0;
  margin: 0 !important;
}

#itineraryAlerts > .alert-category-grid label,
#itineraryAlerts > .alert-preview-list > div {
  min-width: 0;
  padding: 8px 9px !important;
  border-radius: 10px !important;
  font-size: 0.67rem !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
}

#itineraryAlerts > .alert-preview-list > div {
  display: grid;
  gap: 3px;
}

#itineraryAlerts > .delivery-preferences {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  margin: 0 !important;
}

#itineraryAlerts > .delivery-preferences label {
  padding: 6px 8px !important;
  font-size: 0.67rem !important;
}

#itineraryAlerts .reservation-preferences-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  min-width: 0;
}

#itineraryAlerts .reservation-preferences-grid > div {
  min-width: 0;
  padding: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
}

#itineraryAlerts .reservation-preferences-grid h4 {
  margin: 0 0 6px !important;
  font-size: 0.78rem !important;
}

#itineraryAlerts .reservation-preferences-grid label {
  display: block;
  margin: 4px 0;
  color: #607286;
  font-size: 0.67rem;
  line-height: 1.3;
}

@media (max-width: 1100px) {
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card,
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today {
    grid-column: span 6 !important;
  }

  #itineraryAlerts > .upcoming-reservation-grid,
  #itineraryAlerts .reservation-reminder-grid,
  #itineraryAlerts .reservation-preferences-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #itineraryAlerts > .alert-category-grid,
  #itineraryAlerts > .alert-preview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  #itineraryAlerts > .section-heading,
  #itineraryAlerts .itinerary-timeline-dashboard > .section-heading,
  #itineraryAlerts .reservation-reminder-panel > .section-heading {
    flex-direction: column !important;
  }

  #itineraryAlerts > .itinerary-dashboard,
  #itineraryAlerts .itinerary-timeline-list,
  #itineraryAlerts > .upcoming-reservation-grid,
  #itineraryAlerts .reservation-reminder-grid,
  #itineraryAlerts .reservation-preferences-grid,
  #itineraryAlerts > .alert-category-grid,
  #itineraryAlerts > .alert-preview-list {
    grid-template-columns: 1fr !important;
  }

  #itineraryAlerts > .itinerary-dashboard > .itinerary-card,
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today {
    grid-column: 1 / -1 !important;
  }

  #itineraryAlerts .itinerary-timeline-list details summary {
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
  }

  #itineraryAlerts .itinerary-timeline-list details summary time {
    grid-column: 2;
    grid-row: 2;
  }

  #itineraryAlerts .itinerary-timeline-list details summary em {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  #itineraryAlerts .itinerary-timeline-list details p {
    padding-left: 55px !important;
  }
}

/* Final wallet cascade: keep trip summary content in a readable card layout. */
#walletPanel > .wallet-redesign-shell .wallet-trip-card-grid .wallet-trip-tile {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

#walletPanel > .wallet-redesign-shell .wallet-trip-card-grid .wallet-trip-tile > div {
  display: grid !important;
  min-width: 0;
  gap: 3px;
}

#walletPanel > .wallet-redesign-shell .wallet-trip-card-grid .wallet-trip-tile > div > * {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  #walletPanel > .wallet-redesign-shell .wallet-trip-card-grid .wallet-trip-tile {
    grid-template-columns: 1fr !important;
  }

  #walletPanel > .wallet-redesign-shell .wallet-trip-card-grid .wallet-trip-tile img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 7 !important;
  }
}

/* Global widget density: remove unused vertical space without shrinking controls below touch size. */
body.app-routed main > section.panel:not([hidden]) {
  min-height: 0 !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 0 !important;
}

body.app-routed main > section.panel:not([hidden]) > .section-heading {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  gap: 10px !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .dashboard-widget,
  .travel-dashboard-card,
  .travel-booking-summary article,
  .travel-transport-summary article,
  .travel-focus-grid article,
  .travel-provider-cards article,
  .travel-result-card,
  .travel-support-card,
  .event-experience-card,
  .itinerary-card,
  .reservation-reminder-card,
  .travel-document-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-virtual-preview,
  .wallet-section-card-grid article,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row,
  .security-list > div,
  .navigation-status-grid > div,
  .security-status-grid > article,
  .security-control-grid > article
) {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px !important;
  gap: 8px !important;
  align-self: start !important;
  box-sizing: border-box;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .smart-dashboard-grid,
  .widget-grid,
  .dashboard-widget-grid,
  .dashboard-widgets,
  .travel-dashboard-sections,
  .travel-booking-summary,
  .travel-transport-summary,
  .travel-focus-grid,
  .travel-provider-cards,
  .wallet-dashboard-header,
  .wallet-home-grid,
  .wallet-trip-card-grid,
  .wallet-dashboard-sections,
  .wallet-section-card-grid,
  .wallet-action-grid,
  .info-status-grid,
  .important-info-grid,
  .security-status-grid,
  .security-control-grid,
  .memory-gallery-grid,
  .memory-album-grid,
  .platform-grid,
  .message-support-grid,
  .event-experience-grid,
  .event-operations-grid,
  .corporate-home-grid,
  .reservation-reminder-grid,
  .itinerary-dashboard,
  .upcoming-reservation-grid
) {
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 10px !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .dashboard-widget,
  .travel-dashboard-card,
  .event-experience-card,
  .itinerary-card,
  .reservation-reminder-card,
  .travel-document-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-virtual-preview,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row
) :where(h1, h2, h3, h4, h5, h6, p, span, strong, small, em, label, li) {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: normal;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .dashboard-widget,
  .travel-dashboard-card,
  .event-experience-card,
  .itinerary-card,
  .reservation-reminder-card,
  .travel-document-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-virtual-preview,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row
) > :where(button, .primary-button, .ghost-button) {
  width: auto !important;
  max-width: 100%;
  min-height: 32px;
  margin-top: 3px !important;
  white-space: normal !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .widget-toolbar,
  .widget-meta,
  .button-row,
  .mini-action-row,
  .memory-card-actions,
  .platform-actions,
  .explore-card-actions,
  .itinerary-action-row,
  .corporate-card-actions
) {
  gap: 6px !important;
  margin-block: 3px 0 !important;
}

@media (max-width: 760px) {
  body.app-routed main > section.panel:not([hidden]) > .section-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body.app-routed main > section.panel:not([hidden]) :where(
    .smart-widget,
    .travel-widget,
    .dashboard-widget,
    .travel-dashboard-card,
    .event-experience-card,
    .itinerary-card,
    .reservation-reminder-card,
    .travel-document-card,
    .wallet-summary-card,
    .wallet-trip-tile,
    .wallet-virtual-preview,
    .memory-media-card,
    .social-card,
    .platform-card,
    .ride-clean-card,
    .transport-record-card,
    .settings-row
  ) {
    padding: 11px !important;
  }
}

/* Wallet text visibility: labels wrap inside their cards instead of being clipped. */
#walletPanel,
#walletPanel * {
  min-width: 0;
}

#walletPanel :where(
  .wallet-section-nav button,
  .wallet-dashboard-header article,
  .wallet-home-grid > *,
  .wallet-trip-card-grid > *,
  .wallet-dashboard-sections > *,
  .wallet-section-card-grid > *,
  .wallet-operations-panel > *,
  .wallet-action-grid button,
  .wallet-breakdown > *,
  .shared-wallet-ledger > div
) {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

#walletPanel :where(
  h2,
  h3,
  h4,
  p,
  span,
  strong,
  small,
  em,
  label,
  li,
  button
) {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.35;
}

#walletPanel .wallet-section-nav button {
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: left !important;
}

#walletPanel :where(
  .wallet-dashboard-header article,
  .wallet-summary-card,
  .wallet-balance-hero,
  .wallet-trip-tile,
  .wallet-virtual-preview,
  .wallet-dashboard-sections article,
  .wallet-section-card-grid article,
  .wallet-operations-panel > *,
  .wallet-action-grid button
) {
  min-height: 0 !important;
}

/* Global horizontal text flow: keep titles, descriptions, and main information full-width. */
body.app-routed main > section.panel:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .dashboard-widget,
  .travel-dashboard-card,
  .travel-booking-summary article,
  .travel-transport-summary article,
  .travel-focus-grid article,
  .travel-provider-cards article,
  .travel-result-card,
  .travel-support-card,
  .event-experience-card,
  .itinerary-card,
  .reservation-reminder-card,
  .travel-document-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-virtual-preview,
  .wallet-section-card-grid article,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row
) {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  overflow: visible !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .dashboard-widget,
  .travel-dashboard-card,
  .travel-booking-summary article,
  .travel-transport-summary article,
  .travel-focus-grid article,
  .travel-provider-cards article,
  .travel-result-card,
  .travel-support-card,
  .event-experience-card,
  .itinerary-card,
  .reservation-reminder-card,
  .travel-document-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-virtual-preview,
  .wallet-section-card-grid article,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row
) :where(h1, h2, h3, h4, h5, h6) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .dashboard-widget,
  .travel-dashboard-card,
  .travel-booking-summary article,
  .travel-transport-summary article,
  .travel-focus-grid article,
  .travel-provider-cards article,
  .travel-result-card,
  .travel-support-card,
  .event-experience-card,
  .itinerary-card,
  .reservation-reminder-card,
  .travel-document-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-virtual-preview,
  .wallet-section-card-grid article,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row
) :where(p, .widget-meta, .widget-toolbar > span, .widget-toolbar > strong) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .dashboard-widget,
  .travel-dashboard-card,
  .travel-booking-summary article,
  .travel-transport-summary article,
  .travel-focus-grid article,
  .travel-provider-cards article,
  .travel-result-card,
  .travel-support-card,
  .event-experience-card,
  .itinerary-card,
  .reservation-reminder-card,
  .travel-document-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-virtual-preview,
  .wallet-section-card-grid article,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row
) > .widget-toolbar {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

/* All authenticated panel headings and copy stay horizontal, regardless of the tab's card class. */
body.app-routed main > section.panel:not([hidden]) :where(h1, h2, h3, h4, h5, h6) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

body.app-routed main > section.panel:not([hidden]) :where(p, strong, small, span, label, dt, dd, li) {
  max-width: 100% !important;
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.4 !important;
}

/* AI item recognition: keep detected items and diner controls in separate, flexible rows. */
#splitBill .receipt-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.74fr) !important;
  align-items: start !important;
  gap: 14px !important;
  min-width: 0 !important;
}

#splitBill .receipt-items-panel,
#splitBill .payment-status-panel,
#splitBill .receipt-item-list,
#splitBill .receipt-item-list > article,
#splitBill .receipt-item-detail,
#splitBill .receipt-claim-panel,
#splitBill .receipt-claim-grid {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
}

#splitBill .receipt-items-panel {
  overflow: visible !important;
}

#splitBill .receipt-items-panel > .section-heading {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#splitBill .receipt-items-panel > .section-heading > div {
  flex: 1 1 260px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#splitBill .receipt-items-panel > .section-heading > button {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  white-space: normal !important;
}

#splitBill .receipt-item-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  overflow: visible !important;
}

#splitBill .receipt-item-list > article {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr) !important;
  align-items: start !important;
  gap: 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#splitBill .receipt-item-detail,
#splitBill .receipt-claim-panel,
#splitBill .receipt-claim-grid,
#splitBill .receipt-item-actions {
  width: 100% !important;
}

#splitBill .receipt-claim-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
  gap: 6px !important;
}

#splitBill .receipt-claim-grid label {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#splitBill .receipt-item-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#splitBill .receipt-item-actions button {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  white-space: normal !important;
}

@media (max-width: 900px) {
  #splitBill .receipt-workspace,
  #splitBill .receipt-item-list > article {
    grid-template-columns: 1fr !important;
  }

  #splitBill .receipt-claim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* More ways to get around: keep the expanded tools focused and lightweight. */
body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .transportation-advanced-details,
body[data-active-route="transportationPanel"] #transportationPanel > .transportation-advanced-details {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 76px !important;
  padding: 14px 54px 14px 17px !important;
  list-style: none !important;
  color: #143543 !important;
  background: linear-gradient(105deg, #ecfbf9 0%, #fff 54%, #fff6f0 100%) !important;
  border: 1px solid rgba(24, 139, 151, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(20, 53, 67, 0.07) !important;
  cursor: pointer !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary::-webkit-details-marker,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary::-webkit-details-marker {
  display: none !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary::after,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary::after {
  content: "+" !important;
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: #118d9b !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details[open] > summary,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details[open] > summary {
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(24, 139, 151, 0.18) !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details[open] > summary::after,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details[open] > summary::after {
  content: "−" !important;
}

#transportationPanel .transportation-more-summary-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

#transportationPanel .transportation-more-summary-copy strong,
#transportationPanel .transportation-more-summary-copy small,
#transportationPanel .transportation-more-summary-meta {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

#transportationPanel .transportation-more-summary-copy strong {
  color: #123743 !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
}

#transportationPanel .transportation-more-summary-copy small {
  color: #607589 !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}

#transportationPanel .transportation-more-summary-meta {
  padding: 6px 10px !important;
  border: 1px solid rgba(17, 141, 155, 0.14) !important;
  border-radius: 999px !important;
  color: #176a75 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

#transportationPanel .transportation-more-shell {
  display: grid !important;
  min-width: 0 !important;
  gap: 16px !important;
  padding: 0 !important;
}

#transportationPanel .transportation-more-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#transportationPanel .transportation-more-tabs > button {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  justify-items: start !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 96px !important;
  padding: 14px 16px 14px 18px !important;
  border: 1px solid rgba(20, 53, 67, 0.12) !important;
  border-radius: 14px !important;
  color: #153642 !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(20, 53, 67, 0.06) !important;
  text-align: left !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

#transportationPanel .transportation-more-tabs > button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 5px !important;
  background: #d8e7ea !important;
}

#transportationPanel .transportation-more-tabs > button:nth-child(2)::before {
  background: #ff9479 !important;
}

#transportationPanel .transportation-more-tabs > button.active,
#transportationPanel .transportation-more-tabs > button[aria-selected="true"] {
  border-color: rgba(17, 141, 155, 0.34) !important;
  background: #f3fcfb !important;
  box-shadow: 0 10px 24px rgba(17, 141, 155, 0.1) !important;
}

#transportationPanel .transportation-more-tabs > button.active::before,
#transportationPanel .transportation-more-tabs > button[aria-selected="true"]::before {
  background: #21b8aa !important;
}

#transportationPanel .transportation-more-tabs > button:focus-visible {
  outline: 3px solid rgba(17, 141, 155, 0.3) !important;
  outline-offset: 2px !important;
}

#transportationPanel .transportation-more-tabs :where(span, strong, small) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

#transportationPanel .transportation-more-tab-kicker {
  color: #128193 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#transportationPanel .transportation-more-tabs strong {
  color: #12313d !important;
  font-size: 0.94rem !important;
  line-height: 1.3 !important;
}

#transportationPanel .transportation-more-tabs small {
  color: #647789 !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel #transportationWorkspaceMount,
body[data-active-route="transportationPanel"] #transportationPanel #transportationWorkspaceMount {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

#transportationPanel #transportationWorkspaceMount > [data-transportation-workspace][hidden] {
  display: none !important;
}

#transportationPanel #transportationWorkspaceMount > [data-transportation-workspace]:not([hidden]) {
  display: grid !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 700px) {
  body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-right: 52px !important;
  }

  #transportationPanel .transportation-more-summary-meta {
    justify-self: start !important;
  }

  #transportationPanel .transportation-more-tabs {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #transportationPanel .transportation-more-tabs > button {
    min-height: 0 !important;
  }
}

@media (max-width: 520px) {
  #splitBill .receipt-claim-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Transportation records: replace the long spreadsheet view with compact dropdown rows. */
body.app-routed #transportationPanel .transportation-table-wrap,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-wrap {
  overflow: visible !important;
}

body.app-routed #transportationPanel .transportation-table,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table {
  display: block !important;
  width: 100% !important;
  border-collapse: separate !important;
}

body.app-routed #transportationPanel .transportation-table thead,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table thead {
  display: none !important;
}

body.app-routed #transportationPanel .transportation-table tbody,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table tbody {
  display: grid !important;
  gap: 10px !important;
}

body.app-routed #transportationPanel .transportation-table tbody tr.transportation-record-row,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table tbody tr.transportation-record-row {
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-routed #transportationPanel .transportation-table tbody tr.transportation-record-row > td,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table tbody tr.transportation-record-row > td {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
}

body.app-routed #transportationPanel .transportation-record-dropdown,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown {
  overflow: hidden !important;
  border: 1px solid rgba(43, 167, 174, 0.16) !important;
  border-radius: 17px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(20, 83, 95, 0.055) !important;
}

body.app-routed #transportationPanel .transportation-record-dropdown > summary,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary {
  display: grid !important;
  grid-template-columns: minmax(90px, 0.5fr) minmax(180px, 1.4fr) minmax(150px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 68px !important;
  padding: 12px 15px !important;
  cursor: pointer !important;
  list-style: none !important;
}

body.app-routed #transportationPanel .transportation-record-dropdown > summary::-webkit-details-marker,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary::-webkit-details-marker {
  display: none !important;
}

body.app-routed #transportationPanel .transportation-record-dropdown > summary::after,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary::after {
  content: "+" !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #e8f8f6 !important;
  color: #147d80 !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
}

body.app-routed #transportationPanel .transportation-record-dropdown[open] > summary::after,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown[open] > summary::after {
  content: "−" !important;
}

body.app-routed #transportationPanel .transportation-record-type,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-type {
  color: #0f858d !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

body.app-routed #transportationPanel .transportation-record-dropdown summary strong,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown summary strong {
  min-width: 0 !important;
  color: #173b48 !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #transportationPanel .transportation-record-dropdown summary small,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown summary small {
  min-width: 0 !important;
  color: #6b8389 !important;
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #transportationPanel .transportation-record-details,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 0 15px 13px !important;
  border-top: 1px solid rgba(43, 167, 174, 0.11) !important;
}

body.app-routed #transportationPanel .transportation-record-details > div,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  padding-top: 10px !important;
}

body.app-routed #transportationPanel .transportation-record-details > div span,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details > div strong {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #transportationPanel .transportation-record-details > div span,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details > div span {
  color: #6b8389 !important;
  font-size: 0.65rem !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
}

body.app-routed #transportationPanel .transportation-record-details > div strong,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details > div strong {
  color: #173b48 !important;
  font-size: 0.76rem !important;
  line-height: 1.25 !important;
}

body.app-routed #transportationPanel .transportation-record-details button,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details button {
  align-self: end !important;
  min-height: 32px !important;
  padding: 7px 10px !important;
  border-radius: 11px !important;
  color: #27717a !important;
  font-size: 0.68rem !important;
}

@media (max-width: 760px) {
  body.app-routed #transportationPanel .transportation-record-dropdown > summary,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body.app-routed #transportationPanel .transportation-record-dropdown summary small,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown summary small {
    grid-column: 1 / -1 !important;
  }

  body.app-routed #transportationPanel .transportation-record-details,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  body.app-routed #transportationPanel .transportation-record-details,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details {
    grid-template-columns: 1fr !important;
  }

  body.app-routed #transportationPanel .transportation-record-details button,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details button {
    justify-self: start !important;
  }
}

/* Live hotel availability: separate provider results from saved reservations. */
body.app-routed #rideShareHub [data-travel-panel="hotels"] .hotel-live-check {
  display: grid;
  gap: 15px;
  margin-top: 18px;
  padding: 18px;
  background: #f5fbfc;
  border: 1px solid rgba(18, 151, 177, 0.2);
  border-radius: 16px;
}

body.app-routed #rideShareHub .hotel-live-check__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

body.app-routed #rideShareHub .hotel-live-check__header h3 {
  margin: 2px 0 4px;
  color: #102033;
}

body.app-routed #rideShareHub .hotel-live-check__header p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: #526d7d;
  line-height: 1.45;
}

body.app-routed #rideShareHub .hotel-live-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

body.app-routed #rideShareHub .hotel-live-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #3b596a;
  font-size: 0.78rem;
  font-weight: 800;
}

body.app-routed #rideShareHub .hotel-live-form input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 11px;
  color: #102033;
  background: #fff;
  border: 1px solid #c8dce4;
  border-radius: 10px;
  font: inherit;
}

body.app-routed #rideShareHub .hotel-live-form button {
  min-height: 41px;
  white-space: nowrap;
}

body.app-routed #rideShareHub .hotel-live-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.app-routed #rideShareHub .hotel-live-results[hidden] {
  display: none;
}

body.app-routed #rideShareHub .hotel-live-result-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #d4e5ea;
  border-radius: 13px;
}

body.app-routed #rideShareHub .hotel-live-result-card h4 {
  margin: 2px 0 3px;
  color: #102033;
}

body.app-routed #rideShareHub .hotel-live-result-card small,
body.app-routed #rideShareHub .hotel-live-result-card__details span {
  display: block;
  color: #607888;
  line-height: 1.35;
}

body.app-routed #rideShareHub .hotel-live-result-card__details {
  display: grid;
  gap: 4px;
  padding-top: 9px;
  border-top: 1px solid #e1edf0;
}

body.app-routed #rideShareHub .hotel-live-result-card__details strong {
  color: #102033;
}

@media (max-width: 980px) {
  body.app-routed #rideShareHub .hotel-live-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body.app-routed #rideShareHub .hotel-live-check__header {
    display: grid;
  }

  body.app-routed #rideShareHub .hotel-live-form,
  body.app-routed #rideShareHub .hotel-live-results {
    grid-template-columns: 1fr;
  }

  body.app-routed #rideShareHub .hotel-live-form button {
    width: 100%;
  }
}

/* App content color pass: standard light widgets use dark, readable typography. */
body.app-routed main > section.panel:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .dashboard-widget,
  .travel-dashboard-card,
  .travel-booking-summary article,
  .travel-transport-summary article,
  .travel-focus-grid article,
  .travel-provider-cards article,
  .travel-result-card,
  .travel-support-card,
  .event-experience-card,
  .itinerary-card:not(.itinerary-card--featured),
  .reservation-reminder-card,
  .travel-document-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-section-card-grid article,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row,
  .receipt-items-panel,
  .payment-status-panel,
  .receipt-item-list > article,
  .bill-tools-grid > div,
  .receipt-history-panel
) :where(h1, h2, h3, h4, h5, h6, strong, p, span, small, label, dt, dd, li) {
  color: var(--ink) !important;
  text-shadow: none !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .dashboard-widget,
  .travel-dashboard-card,
  .travel-booking-summary article,
  .travel-transport-summary article,
  .travel-focus-grid article,
  .travel-provider-cards article,
  .travel-result-card,
  .travel-support-card,
  .event-experience-card,
  .itinerary-card:not(.itinerary-card--featured),
  .reservation-reminder-card,
  .travel-document-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-section-card-grid article,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row,
  .receipt-items-panel,
  .payment-status-panel,
  .receipt-item-list > article,
  .bill-tools-grid > div,
  .receipt-history-panel
) :where(button, a) {
  color: var(--ink) !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .smart-widget,
  .travel-widget,
  .dashboard-widget,
  .travel-dashboard-card,
  .travel-booking-summary article,
  .travel-transport-summary article,
  .travel-focus-grid article,
  .travel-provider-cards article,
  .travel-result-card,
  .travel-support-card,
  .event-experience-card,
  .itinerary-card:not(.itinerary-card--featured),
  .reservation-reminder-card,
  .travel-document-card,
  .wallet-summary-card,
  .wallet-trip-tile,
  .wallet-section-card-grid article,
  .memory-media-card,
  .social-card,
  .platform-card,
  .ride-clean-card,
  .transport-record-card,
  .settings-row,
  .receipt-items-panel,
  .payment-status-panel,
  .receipt-item-list > article,
  .bill-tools-grid > div,
  .receipt-history-panel
) :where(.eyebrow, .widget-toolbar span, .widget-meta, small, .small) {
  color: var(--muted) !important;
}

/* Navigation chrome stays white on its dark toolbar surfaces. */
body.app-routed :where(.sidebar, .mobile-nav),
body.app-routed :where(.sidebar, .mobile-nav) :where(button, a, summary, span, strong, small, p) {
  color: #fff !important;
}

body.app-routed :where(.sidebar, .mobile-nav) :where(.nav-group summary, .nav button, .nav a, .mobile-nav button) {
  color: rgba(255, 255, 255, 0.86) !important;
}

body.app-routed :where(.sidebar, .mobile-nav) :where(.nav .active, .nav a:hover, .nav button:hover, .mobile-nav button.active) {
  color: #fff !important;
}

/* Itinerary Smart Dashboard: independent tiles with no oversized parent widget. */
#itineraryAlerts {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-content: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#itineraryAlerts > .itinerary-dashboard {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card,
#itineraryAlerts > .itinerary-dashboard > .itinerary-card--today,
#itineraryAlerts > .itinerary-dashboard > .itinerary-card--route,
#itineraryAlerts > .itinerary-dashboard > .itinerary-card--weather,
#itineraryAlerts > .itinerary-dashboard > .itinerary-card--transport,
#itineraryAlerts > .itinerary-dashboard > .itinerary-card--alerts,
#itineraryAlerts > .itinerary-dashboard > .itinerary-card--progress {
  grid-column: span 4 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  padding: 14px !important;
  gap: 7px !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card--today {
  padding: 14px !important;
  background: linear-gradient(135deg, #e8fbff, #ffffff 68%) !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card :where(h3, p, span) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#itineraryAlerts > .itinerary-timeline-dashboard,
#itineraryAlerts > .reservation-reminder-panel,
#itineraryAlerts > .upcoming-reservation-grid,
#itineraryAlerts > .reservation-reminder-panel > .reservation-reminder-grid,
#itineraryAlerts > .alert-category-grid,
#itineraryAlerts > .delivery-preferences,
#itineraryAlerts > .alert-preview-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#itineraryAlerts .itinerary-timeline-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#itineraryAlerts .itinerary-timeline-list details {
  display: grid !important;
  align-content: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

#itineraryAlerts .itinerary-timeline-list details summary {
  min-width: 0 !important;
  min-height: 50px !important;
  height: auto !important;
  overflow-wrap: anywhere !important;
}

#itineraryAlerts .itinerary-timeline-list details summary :where(strong, em, time, span),
#itineraryAlerts .itinerary-timeline-list details > p {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

#itineraryAlerts .upcoming-reservation-grid,
#itineraryAlerts .reservation-reminder-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
}

#itineraryAlerts .upcoming-reservation-grid > article,
#itineraryAlerts .reservation-reminder-grid > .reservation-reminder-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
}

@media (max-width: 1000px) {
  #itineraryAlerts > .itinerary-dashboard,
  #itineraryAlerts .itinerary-timeline-list,
  #itineraryAlerts .upcoming-reservation-grid,
  #itineraryAlerts .reservation-reminder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #itineraryAlerts > .itinerary-dashboard > .itinerary-card,
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today,
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--route,
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--weather,
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--transport,
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--alerts,
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--progress {
    grid-column: span 1 !important;
  }
}

@media (max-width: 640px) {
  #itineraryAlerts > .itinerary-dashboard,
  #itineraryAlerts .itinerary-timeline-list,
  #itineraryAlerts .upcoming-reservation-grid,
  #itineraryAlerts .reservation-reminder-grid {
    grid-template-columns: 1fr !important;
  }

  #itineraryAlerts > .itinerary-dashboard > .itinerary-card {
    grid-column: 1 / -1 !important;
  }
}

/* Itinerary Dashboard header: align the title block and status without a tall wrapper. */
#itineraryAlerts > .section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  justify-content: initial !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 13px 15px !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

#itineraryAlerts > .section-heading > div {
  min-width: 0 !important;
  max-width: 100% !important;
}

#itineraryAlerts > .section-heading .eyebrow {
  margin: 0 !important;
  line-height: 1.2 !important;
}

#itineraryAlerts > .section-heading h2 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 3px 0 0 !important;
  font-size: clamp(1.2rem, 2vw, 1.65rem) !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

#itineraryAlerts > .section-heading p:not(.eyebrow) {
  width: 100% !important;
  max-width: 70ch !important;
  margin: 6px 0 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}

#itineraryAlerts > .section-heading .compliance-badge {
  align-self: start !important;
  justify-self: end !important;
  max-width: 100% !important;
  white-space: normal !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  #itineraryAlerts > .section-heading {
    grid-template-columns: 1fr !important;
  }

  #itineraryAlerts > .section-heading .compliance-badge {
    justify-self: start !important;
  }
}

/* Global parent widget cleanup: keep route wrappers transparent so their child widgets remain independent. */
body.app-routed main > section.panel:not([hidden]) :where(
  .travel-overview-card,
  .travel-selected-tile,
  .travel-workspace,
  .travel-workspace-grid,
  .travel-settings-shell,
  .travel-settings-main,
  .travel-settings-content,
  .travel-itinerary-dashboard,
  .itinerary-dashboard,
  .itinerary-timeline-dashboard,
  .upcoming-reservation-grid,
  .reservation-reminder-panel,
  .reservation-reminder-grid,
  .alert-category-grid,
  .delivery-preferences,
  .alert-preview-list,
  .wallet-redesign-shell,
  .wallet-home-grid,
  .wallet-trip-card-grid,
  .wallet-dashboard-sections,
  .wallet-section-card-grid,
  .memories-gallery-shell,
  .memory-gallery-grid,
  .memory-album-grid,
  .settings-shell,
  .admin-settings-shell,
  .settings-main-panel,
  .messages-layout,
  .message-support-grid,
  .social-hub-layout,
  .platform-grid,
  .travel-focus-grid,
  .travel-booking-summary,
  .travel-transport-summary,
  .travel-provider-cards,
  .visual-pass-grid,
  .ride-recommendation-grid,
  .private-driver-list,
  .transport-record-list
) {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin-block: 0 !important;
  padding: 0 !important;
  align-items: start !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .travel-workspace,
  .travel-workspace-grid,
  .travel-itinerary-dashboard,
  .itinerary-dashboard,
  .itinerary-timeline-dashboard,
  .upcoming-reservation-grid,
  .reservation-reminder-grid,
  .wallet-home-grid,
  .wallet-trip-card-grid,
  .wallet-dashboard-sections,
  .wallet-section-card-grid,
  .memory-gallery-grid,
  .memory-album-grid,
  .platform-grid,
  .travel-focus-grid,
  .travel-booking-summary,
  .travel-transport-summary,
  .travel-provider-cards,
  .visual-pass-grid,
  .ride-recommendation-grid,
  .private-driver-list,
  .transport-record-list
) {
  display: grid !important;
  gap: 12px !important;
  grid-auto-rows: max-content !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  .travel-settings-shell,
  .travel-settings-main,
  .travel-settings-content,
  .wallet-redesign-shell,
  .memories-gallery-shell,
  .settings-shell,
  .admin-settings-shell,
  .settings-main-panel,
  .messages-layout,
  .message-support-grid,
  .social-hub-layout
) {
  overflow: visible !important;
}

/* Itinerary matches the Events dashboard while retaining its schedule and alert details. */
#itineraryAlerts {
  display: grid !important;
  gap: 14px !important;
  overflow: hidden !important;
}

#itineraryAlerts > .section-heading,
#itineraryAlerts .itinerary-timeline-dashboard > .section-heading,
#itineraryAlerts .reservation-reminder-panel > .section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(8, 127, 140, 0.12) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055) !important;
}

#itineraryAlerts > .section-heading > div,
#itineraryAlerts .itinerary-timeline-dashboard > .section-heading > div,
#itineraryAlerts .reservation-reminder-panel > .section-heading > div {
  min-width: 0 !important;
  max-width: 100% !important;
}

#itineraryAlerts > .section-heading h2,
#itineraryAlerts .itinerary-timeline-dashboard > .section-heading h3,
#itineraryAlerts .reservation-reminder-panel > .section-heading h3 {
  margin: 2px 0 0 !important;
  color: #0f2f3a !important;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem) !important;
  line-height: 1.18 !important;
}

#itineraryAlerts > .section-heading p:not(.eyebrow) {
  max-width: 760px !important;
  margin: 5px 0 0 !important;
  color: #5f7882 !important;
  font-size: 0.78rem !important;
  line-height: 1.42 !important;
}

#itineraryAlerts > .itinerary-dashboard {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  margin: 0 !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 158px !important;
  height: auto !important;
  padding: 13px !important;
  border: 1px solid rgba(8, 127, 140, 0.12) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(8, 189, 184, 0.1), rgba(255, 138, 92, 0.08)), #ffffff !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09) !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured,
#itineraryAlerts > .itinerary-dashboard > .itinerary-card--today {
  grid-column: span 2 !important;
  background:
    linear-gradient(180deg, rgba(5, 18, 24, 0.08), rgba(5, 18, 24, 0.78)),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1100&auto=format&fit=crop") center/cover !important;
  color: #ffffff !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card :where(span, h3, p, button) {
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card span {
  width: fit-content !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  color: #174650 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card h3 {
  width: 100% !important;
  margin: 0 !important;
  color: #0f2f3a !important;
  font-size: 0.98rem !important;
  line-height: 1.2 !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card p {
  width: 100% !important;
  margin: 0 !important;
  color: #5f7882 !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured :where(span, h3, p),
#itineraryAlerts > .itinerary-dashboard > .itinerary-card--today :where(span, h3, p) {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42) !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured h3,
#itineraryAlerts > .itinerary-dashboard > .itinerary-card--today h3 {
  color: #ffffff !important;
  font-size: clamp(1.08rem, 1.8vw, 1.45rem) !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card button,
#itineraryAlerts .itinerary-action-row button,
#itineraryAlerts > .upcoming-reservation-grid button,
#itineraryAlerts .reservation-reminder-card button {
  width: fit-content !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: #eef7f5 !important;
  color: #174650 !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
}

#itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured button,
#itineraryAlerts > .itinerary-dashboard > .itinerary-card--today button {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

#itineraryAlerts > .itinerary-timeline-dashboard,
#itineraryAlerts > .upcoming-reservation-grid,
#itineraryAlerts .reservation-reminder-panel {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#itineraryAlerts .itinerary-timeline-list,
#itineraryAlerts .upcoming-reservation-grid,
#itineraryAlerts .reservation-reminder-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#itineraryAlerts .itinerary-timeline-list details,
#itineraryAlerts > .upcoming-reservation-grid > article,
#itineraryAlerts .reservation-reminder-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  border: 1px solid rgba(8, 127, 140, 0.12) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055) !important;
}

#itineraryAlerts .itinerary-timeline-list details summary {
  min-width: 0 !important;
  padding: 11px !important;
  font-size: 0.72rem !important;
}

#itineraryAlerts .itinerary-timeline-list details > p {
  padding: 0 11px 11px !important;
  font-size: 0.7rem !important;
  line-height: 1.35 !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article,
#itineraryAlerts .reservation-reminder-card {
  display: grid !important;
  gap: 6px !important;
  padding: 12px !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article > span,
#itineraryAlerts .reservation-reminder-card > span {
  color: #47707a !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article > strong,
#itineraryAlerts .reservation-reminder-card h4 {
  margin: 0 !important;
  color: #0f2f3a !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article > small,
#itineraryAlerts .reservation-reminder-card p,
#itineraryAlerts .reservation-reminder-card li {
  color: #5f7882 !important;
  font-size: 0.7rem !important;
  line-height: 1.35 !important;
}

#itineraryAlerts .alert-category-grid,
#itineraryAlerts .delivery-preferences,
#itineraryAlerts .alert-preview-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#itineraryAlerts .alert-category-grid label,
#itineraryAlerts .delivery-preferences label,
#itineraryAlerts .alert-preview-list > div {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(8, 127, 140, 0.12) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(8, 189, 184, 0.1), rgba(255, 138, 92, 0.08)), #ffffff !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.055) !important;
  color: #5f7882 !important;
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
}

#itineraryAlerts .delivery-preferences {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#itineraryAlerts .alert-preview-list > div {
  display: grid !important;
  gap: 4px !important;
}

#itineraryAlerts .alert-preview-list strong {
  color: #0f2f3a !important;
}

@media (max-width: 1100px) {
  #itineraryAlerts > .itinerary-dashboard,
  #itineraryAlerts .itinerary-timeline-list,
  #itineraryAlerts .upcoming-reservation-grid,
  #itineraryAlerts .reservation-reminder-grid,
  #itineraryAlerts .alert-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured,
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today {
    grid-column: span 2 !important;
  }

  #itineraryAlerts .delivery-preferences {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #itineraryAlerts > .section-heading,
  #itineraryAlerts .itinerary-timeline-dashboard > .section-heading,
  #itineraryAlerts .reservation-reminder-panel > .section-heading {
    grid-template-columns: 1fr !important;
  }

  #itineraryAlerts > .itinerary-dashboard,
  #itineraryAlerts .itinerary-timeline-list,
  #itineraryAlerts .upcoming-reservation-grid,
  #itineraryAlerts .reservation-reminder-grid,
  #itineraryAlerts .alert-category-grid,
  #itineraryAlerts .delivery-preferences {
    grid-template-columns: 1fr !important;
  }

  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured,
  #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today {
    grid-column: 1 / -1 !important;
  }
}

/* Final widget text-flow hardening: all visible widget copy stays horizontal and card-contained. */
body.app-routed main > section.panel:not([hidden]) :where(
  [data-widget],
  .smart-widget,
  .travel-widget,
  .dashboard-card,
  .dashboard-widget,
  .corporate-widget,
  .cruise-widget,
  .flight-widget,
  .hotel-information,
  .notifications-widget,
  .weather-widget,
  .ai-widget,
  .status-card,
  .info-status-grid,
  .travel-current-trip-card,
  .travel-dashboard-card,
  .travel-map-card,
  .travel-info-list,
  .travel-support-card,
  .daily-itinerary-card,
  .upcoming-widget,
  .memory-card,
  .memory-media-card,
  .memory-ai-card,
  .memory-upload-card,
  .memory-settings-card,
  .conversation-card,
  .chat-detail-card,
  .social-card,
  .platform-card,
  .event-experience-card,
  .event-create-card,
  .itinerary-card,
  .reservation-reminder-card,
  .smart-departure-card,
  .reservation-ai-card,
  .ride-clean-card,
  .transport-record-card,
  .travel-document-card,
  .wallet-summary-card,
  .trip-wallet-card,
  .wallet-section-card-grid article,
  .virtual-card-panel,
  .visual-pass-card,
  .corporate-card-preview,
  .corporate-acceptance-card,
  .permission-card,
  .admin-panel,
  .settings-row
) {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  [data-widget],
  .smart-widget,
  .travel-widget,
  .dashboard-card,
  .dashboard-widget,
  .corporate-widget,
  .cruise-widget,
  .flight-widget,
  .hotel-information,
  .notifications-widget,
  .weather-widget,
  .ai-widget,
  .status-card,
  .travel-current-trip-card,
  .travel-dashboard-card,
  .travel-map-card,
  .travel-support-card,
  .daily-itinerary-card,
  .upcoming-widget,
  .memory-card,
  .memory-media-card,
  .memory-ai-card,
  .memory-upload-card,
  .memory-settings-card,
  .conversation-card,
  .chat-detail-card,
  .social-card,
  .platform-card,
  .event-experience-card,
  .event-create-card,
  .itinerary-card,
  .reservation-reminder-card,
  .smart-departure-card,
  .reservation-ai-card,
  .ride-clean-card,
  .transport-record-card,
  .travel-document-card,
  .wallet-summary-card,
  .trip-wallet-card,
  .wallet-section-card-grid article,
  .virtual-card-panel,
  .visual-pass-card,
  .corporate-card-preview,
  .corporate-acceptance-card,
  .permission-card,
  .admin-panel,
  .settings-row
) :where(h1, h2, h3, h4, h5, h6, p, strong, small, label, dt, dd, li) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  [data-widget],
  .smart-widget,
  .travel-widget,
  .dashboard-card,
  .dashboard-widget,
  .corporate-widget,
  .cruise-widget,
  .flight-widget,
  .hotel-information,
  .notifications-widget,
  .weather-widget,
  .ai-widget,
  .status-card,
  .travel-current-trip-card,
  .travel-dashboard-card,
  .travel-map-card,
  .travel-info-list,
  .travel-support-card,
  .daily-itinerary-card,
  .upcoming-widget,
  .memory-card,
  .memory-media-card,
  .memory-ai-card,
  .memory-upload-card,
  .memory-settings-card,
  .conversation-card,
  .chat-detail-card,
  .social-card,
  .platform-card,
  .event-experience-card,
  .event-create-card,
  .itinerary-card,
  .reservation-reminder-card,
  .smart-departure-card,
  .reservation-ai-card,
  .ride-clean-card,
  .transport-record-card,
  .travel-document-card,
  .wallet-summary-card,
  .trip-wallet-card,
  .wallet-section-card-grid article,
  .virtual-card-panel,
  .visual-pass-card,
  .corporate-card-preview,
  .corporate-acceptance-card,
  .permission-card,
  .admin-panel,
  .settings-row
) :where(.section-heading, .widget-toolbar, .card-top, .card-meta, .card-content, .widget-content, .widget-main, .widget-info, .details, .info) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.app-routed main > section.panel:not([hidden]) :where(
  [data-widget],
  .smart-widget,
  .travel-widget,
  .dashboard-card,
  .dashboard-widget,
  .corporate-widget,
  .cruise-widget,
  .flight-widget,
  .hotel-information,
  .notifications-widget,
  .weather-widget,
  .ai-widget,
  .status-card,
  .travel-current-trip-card,
  .travel-dashboard-card,
  .travel-map-card,
  .travel-info-list,
  .travel-support-card,
  .daily-itinerary-card,
  .upcoming-widget,
  .memory-card,
  .memory-media-card,
  .memory-ai-card,
  .memory-upload-card,
  .memory-settings-card,
  .conversation-card,
  .chat-detail-card,
  .social-card,
  .platform-card,
  .event-experience-card,
  .event-create-card,
  .itinerary-card,
  .reservation-reminder-card,
  .smart-departure-card,
  .reservation-ai-card,
  .ride-clean-card,
  .transport-record-card,
  .travel-document-card,
  .wallet-summary-card,
  .trip-wallet-card,
  .wallet-section-card-grid article,
  .virtual-card-panel,
  .visual-pass-card,
  .corporate-card-preview,
  .corporate-acceptance-card,
  .permission-card,
  .admin-panel,
  .settings-row
) :where(button, a) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Bubble text rows must span the widget, never collapse beside an icon or into a one-letter column. */
body.app-routed main > section.panel:not([hidden]) :where(
  [data-widget],
  .smart-widget,
  .travel-widget,
  .dashboard-card,
  .dashboard-widget,
  .corporate-widget,
  .cruise-widget,
  .flight-widget,
  .hotel-information,
  .notifications-widget,
  .weather-widget,
  .ai-widget,
  .status-card,
  .travel-current-trip-card,
  .travel-dashboard-card,
  .travel-map-card,
  .travel-info-list,
  .travel-support-card,
  .daily-itinerary-card,
  .upcoming-widget,
  .memory-card,
  .memory-media-card,
  .memory-ai-card,
  .memory-upload-card,
  .memory-settings-card,
  .conversation-card,
  .chat-detail-card,
  .social-card,
  .platform-card,
  .event-experience-card,
  .event-create-card,
  .itinerary-card,
  .reservation-reminder-card,
  .smart-departure-card,
  .reservation-ai-card,
  .ride-clean-card,
  .transport-record-card,
  .travel-document-card,
  .wallet-summary-card,
  .trip-wallet-card,
  .wallet-section-card-grid article,
  .virtual-card-panel,
  .visual-pass-card,
  .corporate-card-preview,
  .corporate-acceptance-card,
  .permission-card,
  .admin-panel,
  .settings-row
) :where(h1, h2, h3, h4, h5, h6, p, strong, small, label, li) {
  grid-column: 1 / -1 !important;
  flex: 0 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Travel tab card repair: boarding pass, rail ticket, and hotel reservation use independent readable layouts. */
#rideShareHub [data-travel-panel="boarding"],
#rideShareHub [data-travel-panel="trains"],
#rideShareHub [data-travel-panel="hotels"] {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

#rideShareHub [data-travel-panel="boarding"] .travel-focus-header,
#rideShareHub [data-travel-panel="trains"] .travel-focus-header,
#rideShareHub [data-travel-panel="hotels"] .travel-focus-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(8, 127, 140, 0.12) !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(240, 249, 255, 0.96)), #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055) !important;
}

#rideShareHub [data-travel-panel="boarding"] .travel-focus-header > div,
#rideShareHub [data-travel-panel="trains"] .travel-focus-header > div,
#rideShareHub [data-travel-panel="hotels"] .travel-focus-header > div {
  min-width: 0 !important;
  width: 100% !important;
}

#rideShareHub [data-travel-panel="boarding"] .travel-focus-header h3,
#rideShareHub [data-travel-panel="trains"] .travel-focus-header h3,
#rideShareHub [data-travel-panel="hotels"] .travel-focus-header h3,
#rideShareHub [data-travel-panel="boarding"] .travel-focus-header p:not(.eyebrow),
#rideShareHub [data-travel-panel="trains"] .travel-focus-header p:not(.eyebrow),
#rideShareHub [data-travel-panel="hotels"] .travel-focus-header p:not(.eyebrow) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 2px 0 0 !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#rideShareHub [data-travel-panel="boarding"] .visual-pass-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "topline"
    "provider"
    "route"
    "flight"
    "details"
    "code"
    "barcode"
    "actions" !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 16px !important;
  border: 1px solid rgba(8, 127, 140, 0.16) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #0f2f3a 0 170px, #ffffff 170px) !important;
  color: #0f2f3a !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12) !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass::before {
  display: none !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-topline,
#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-provider,
#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-route,
#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass h4,
#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass dl,
#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .official-code,
#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .barcode-strip,
#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-actions {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  grid-column: 1 / -1 !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-topline {
  grid-area: topline !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-topline strong {
  display: inline-flex !important;
  width: fit-content !important;
  grid-column: auto !important;
  color: #ffffff !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-provider {
  grid-area: provider !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px 10px !important;
  color: #ffffff !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-provider b,
#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-provider span {
  display: inline !important;
  width: auto !important;
  grid-column: auto !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-route {
  grid-area: route !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  color: #ffffff !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-route b {
  display: block !important;
  width: auto !important;
  grid-column: auto !important;
  color: #ffffff !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  line-height: 1 !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass h4 {
  grid-area: flight !important;
  color: #0f2f3a !important;
  font-size: clamp(1rem, 1.6vw, 1.3rem) !important;
  line-height: 1.2 !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass dl {
  grid-area: details !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass dl > div {
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass dl dt,
#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass dl dd {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass dl dt {
  color: #64748b !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass dl dd {
  color: #0f2f3a !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .official-code {
  grid-area: code !important;
  justify-self: start !important;
  width: 92px !important;
  height: 92px !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .barcode-strip {
  grid-area: barcode !important;
  height: 38px !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-actions {
  grid-area: actions !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass .pass-actions button {
  width: auto !important;
  min-width: 0 !important;
  white-space: normal !important;
}

#rideShareHub [data-travel-panel="trains"] .travel-focus-grid,
#rideShareHub [data-travel-panel="hotels"] .travel-focus-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#rideShareHub [data-travel-panel="trains"] .travel-focus-grid > article {
  display: grid !important;
  grid-template-columns: minmax(110px, 0.65fr) minmax(0, 1.35fr) minmax(0, 1.5fr) auto !important;
  align-items: center !important;
  gap: 8px 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 13px !important;
  border: 1px solid rgba(8, 127, 140, 0.12) !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, rgba(8, 189, 184, 0.1), rgba(255, 138, 92, 0.08)), #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07) !important;
}

#rideShareHub [data-travel-panel="trains"] .travel-focus-grid > article :where(span, strong, small, button) {
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#rideShareHub [data-travel-panel="trains"] .travel-focus-grid > article span {
  color: #47707a !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#rideShareHub [data-travel-panel="trains"] .travel-focus-grid > article strong {
  color: #0f2f3a !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

#rideShareHub [data-travel-panel="trains"] .travel-focus-grid > article small {
  color: #5f7882 !important;
  font-size: 0.74rem !important;
  line-height: 1.3 !important;
}

#rideShareHub [data-travel-panel="hotels"] .travel-focus-grid > article {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 13px !important;
  border: 1px solid rgba(8, 127, 140, 0.12) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07) !important;
}

#rideShareHub [data-travel-panel="hotels"] .travel-focus-grid > article img {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 150px !important;
  min-height: 0 !important;
  object-fit: cover !important;
  border-radius: 11px !important;
}

#rideShareHub [data-travel-panel="hotels"] .travel-focus-grid > article :where(span, strong, small, button) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#rideShareHub [data-travel-panel="hotels"] .travel-focus-grid > article span {
  color: #47707a !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#rideShareHub [data-travel-panel="hotels"] .travel-focus-grid > article strong {
  color: #0f2f3a !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

#rideShareHub [data-travel-panel="hotels"] .travel-focus-grid > article small {
  color: #5f7882 !important;
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 900px) {
  #rideShareHub [data-travel-panel="boarding"] .digital-boarding-pass dl {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #rideShareHub [data-travel-panel="trains"] .travel-focus-grid > article {
    grid-template-columns: minmax(100px, 0.7fr) minmax(0, 1.3fr) auto !important;
  }

  #rideShareHub [data-travel-panel="trains"] .travel-focus-grid > article small {
    grid-column: 2 / -1 !important;
  }
}

@media (max-width: 680px) {
  #rideShareHub [data-travel-panel="boarding"] .travel-focus-header,
  #rideShareHub [data-travel-panel="trains"] .travel-focus-header,
  #rideShareHub [data-travel-panel="hotels"] .travel-focus-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  #rideShareHub [data-travel-panel="boarding"] .travel-focus-header > button,
  #rideShareHub [data-travel-panel="trains"] .travel-focus-header > button,
  #rideShareHub [data-travel-panel="hotels"] .travel-focus-header > button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  #rideShareHub [data-travel-panel="trains"] .travel-focus-grid,
  #rideShareHub [data-travel-panel="hotels"] .travel-focus-grid {
    grid-template-columns: 1fr !important;
  }

  #rideShareHub [data-travel-panel="trains"] .travel-focus-grid > article {
    grid-template-columns: 1fr !important;
  }

  #rideShareHub [data-travel-panel="trains"] .travel-focus-grid > article :where(span, strong, small, button) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* Keep Travel focused on trip context; transportation records live in the dedicated route. */
body.app-routed #rideShareHub :where(
  .travel-focus-panel[data-travel-panel="flights"],
  .travel-focus-panel[data-travel-panel="trains"],
  .travel-focus-panel[data-travel-panel="buses"],
  .travel-focus-panel[data-travel-panel="cruises"],
  .travel-focus-panel[data-travel-panel="boarding"],
  .travel-focus-panel[data-travel-panel="rideShare"],
  .travel-focus-panel[data-travel-panel="transfers"],
  .travel-focus-panel[data-travel-panel="publicTransit"],
  .travel-focus-panel[data-travel-panel="routeComparison"],
  .travel-focus-panel[data-travel-panel="smartRoute"]
) {
  display: none !important;
}

body.app-routed #rideShareHub .travel-booking-summary {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  align-items: start !important;
}

body.app-routed #rideShareHub .travel-booking-summary > article,
body.app-routed #rideShareHub .travel-quick-actions > button {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed #rideShareHub .travel-transport-link {
  width: 100% !important;
  margin-top: 12px !important;
  border: 1px solid rgba(8, 127, 140, 0.24) !important;
  background: rgba(44, 210, 190, 0.12) !important;
  color: #075f6b !important;
  font-weight: 850 !important;
}

body.app-routed #transportationPanel {
  gap: 14px !important;
}

body.app-routed #transportationPanel .transportation-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
  align-items: start !important;
}

body.app-routed #transportationPanel .transportation-table-section,
body.app-routed #transportationPanel .transportation-advanced-details {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
}

body.app-routed #transportationPanel .transportation-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.app-routed #transportationPanel .transportation-table {
  width: 100% !important;
  min-width: 680px !important;
  table-layout: fixed !important;
}

body.app-routed #transportationPanel .transportation-table th,
body.app-routed #transportationPanel .transportation-table td {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  vertical-align: middle !important;
}

body.app-routed #transportationPanel .transportation-table th:first-child {
  width: 36% !important;
}

body.app-routed #transportationPanel .transportation-advanced-details[open] #transportationWorkspaceMount {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #transportationPanel #transportationWorkspaceMount > * {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 680px) {
  body.app-routed #transportationPanel .transportation-table {
    min-width: 620px !important;
  }
}

/* Travel-Drip Pass workspace: prevent the legacy narrow side rail from collapsing pass titles. */
#rideShareHub #travelBoardingPasses {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

#rideShareHub #travelBoardingPasses .pass-filter-row,
#rideShareHub #travelBoardingPasses .pass-control-row {
  min-width: 0 !important;
  max-width: 100% !important;
}

#rideShareHub #travelBoardingPasses .pass-control-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: end !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  gap: 9px !important;
  align-content: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 15px !important;
  border: 1px solid rgba(8, 127, 140, 0.15) !important;
  border-top: 4px solid #0ea5b7 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card.digital-boarding-pass {
  background: linear-gradient(180deg, #0f2f3a 0 154px, #ffffff 154px) !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card.digital-boarding-pass::before {
  display: none !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card :where(.pass-topline, .pass-provider, .pass-route, h4, dl, .pass-note, .official-code, .barcode-strip, .pass-actions) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  grid-column: 1 / -1 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-topline {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-topline span,
#rideShareHub #travelBoardingPasses .visual-pass-card .pass-topline strong {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  grid-column: auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-topline span {
  color: #47707a !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card.digital-boarding-pass .pass-topline span,
#rideShareHub #travelBoardingPasses .visual-pass-card.digital-boarding-pass .pass-topline strong {
  color: #ffffff !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-topline strong {
  justify-self: end !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: #dff7f4 !important;
  font-size: 0.68rem !important;
  line-height: 1.15 !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card.digital-boarding-pass .pass-topline strong {
  background: rgba(255, 255, 255, 0.18) !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-provider {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 5px 9px !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-provider b,
#rideShareHub #travelBoardingPasses .visual-pass-card .pass-provider span {
  display: inline !important;
  width: auto !important;
  grid-column: auto !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-provider b {
  color: #ffffff !important;
  font-size: 1rem !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-provider span {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.7rem !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-route {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  color: #0f2f3a !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-route b {
  display: block !important;
  width: auto !important;
  grid-column: auto !important;
  color: #0f2f3a !important;
  font-size: clamp(1.1rem, 2vw, 1.7rem) !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card.digital-boarding-pass .pass-route b {
  color: #ffffff !important;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem) !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-route i {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #0ea5b7, #ff8a5c) !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card.digital-boarding-pass .pass-route i {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), #ffffff, rgba(255, 255, 255, 0.24)) !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card h4 {
  color: #0f2f3a !important;
  font-size: clamp(0.98rem, 1.4vw, 1.16rem) !important;
  line-height: 1.2 !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card dl {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card dl > div {
  min-width: 0 !important;
  padding: 7px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 9px !important;
  background: #f8fafc !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card dl :where(dt, dd) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card dl dt {
  color: #64748b !important;
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card dl dd {
  color: #0f2f3a !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-note {
  color: #64748b !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  align-items: start !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .pass-actions button {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 32px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .official-code {
  justify-self: start !important;
  width: 76px !important;
  height: 76px !important;
}

#rideShareHub #travelBoardingPasses .visual-pass-card .barcode-strip {
  height: 32px !important;
}

@media (max-width: 760px) {
  #rideShareHub #travelBoardingPasses .visual-pass-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  #rideShareHub #travelBoardingPasses .pass-control-row,
  #rideShareHub #travelBoardingPasses .visual-pass-grid {
    grid-template-columns: 1fr !important;
  }

  #rideShareHub #travelBoardingPasses .visual-pass-card .pass-route {
    grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) !important;
  }
}

/* Itinerary reservation titles: keep Real-time ready and each booking label horizontal. */
#itineraryAlerts > .section-heading .compliance-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: end !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 6px 10px !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

#itineraryAlerts > .upcoming-reservation-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  overflow: visible !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article > span,
#itineraryAlerts > .upcoming-reservation-grid > article > strong,
#itineraryAlerts > .upcoming-reservation-grid > article > small,
#itineraryAlerts > .upcoming-reservation-grid > article > button {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article > span {
  display: inline-flex !important;
  width: fit-content !important;
  color: #47707a !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article > strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #0f2f3a !important;
  font-size: 0.98rem !important;
  line-height: 1.2 !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article > small {
  display: block !important;
  width: 100% !important;
  color: #5f7882 !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

#itineraryAlerts > .upcoming-reservation-grid > article > button {
  justify-self: start !important;
  width: fit-content !important;
  min-width: 0 !important;
  min-height: 32px !important;
}

@media (max-width: 1100px) {
  #itineraryAlerts > .upcoming-reservation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  #itineraryAlerts > .section-heading .compliance-badge {
    justify-self: start !important;
  }

  #itineraryAlerts > .upcoming-reservation-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Itinerary overflow repair: keep timeline cards and alert controls compact, readable, and inside the route. */
#itineraryAlerts {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

#itineraryAlerts > :where(.itinerary-dashboard, .itinerary-timeline-dashboard, .upcoming-reservation-grid, .alert-category-grid, .delivery-preferences, .alert-preview-list, .reservation-reminder-panel) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
  overflow: visible !important;
}

#itineraryAlerts .itinerary-timeline-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
  overflow: visible !important;
}

#itineraryAlerts .itinerary-timeline-list > details {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  overflow: hidden !important;
}

#itineraryAlerts .itinerary-timeline-list > details summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  overflow-wrap: anywhere !important;
}

#itineraryAlerts .itinerary-timeline-list > details summary :where(span, time, strong, em),
#itineraryAlerts .itinerary-timeline-list > details > p {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#itineraryAlerts > .security-note {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(8, 127, 140, 0.18) !important;
  border-left: 4px solid #0ea5b7 !important;
  border-radius: 14px !important;
  background: #effaff !important;
  box-shadow: none !important;
  color: #276371 !important;
  line-height: 1.35 !important;
  overflow: visible !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#itineraryAlerts > .alert-category-grid,
#itineraryAlerts > .delivery-preferences,
#itineraryAlerts > .alert-preview-list {
  height: auto !important;
  min-height: 0 !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
  overflow: visible !important;
}

#itineraryAlerts > .alert-category-grid > label,
#itineraryAlerts > .delivery-preferences > label,
#itineraryAlerts > .alert-preview-list > div {
  display: flex !important;
  align-items: flex-start !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#itineraryAlerts > .alert-category-grid > label > input,
#itineraryAlerts > .delivery-preferences > label > input {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-top: 2px !important;
}

@media (max-width: 1100px) {
  #itineraryAlerts .itinerary-timeline-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  #itineraryAlerts .itinerary-timeline-list {
    grid-template-columns: 1fr !important;
  }

  #itineraryAlerts .itinerary-timeline-list > details summary {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }
}

/* Route view repair: keep the tab bar in flow and prevent Itinerary sections from inheriting the page grid. */
body.signed-in-shell main > .trip-tab-bar {
  position: relative !important;
  top: auto !important;
  z-index: var(--z-sticky-nav) !important;
  scroll-margin-top: 0 !important;
}

#itineraryAlerts > * {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#itineraryAlerts > .alert-category-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

#itineraryAlerts > .delivery-preferences {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

#itineraryAlerts > .alert-preview-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

#itineraryAlerts > .itinerary-timeline-dashboard,
#itineraryAlerts > .upcoming-reservation-grid,
#itineraryAlerts > .security-note,
#itineraryAlerts > .button-row,
#itineraryAlerts > #alertMessage,
#itineraryAlerts > .reservation-reminder-panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 1100px) {
  #itineraryAlerts > .alert-category-grid,
  #itineraryAlerts > .alert-preview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #itineraryAlerts > .delivery-preferences {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  #itineraryAlerts > .alert-category-grid,
  #itineraryAlerts > .delivery-preferences,
  #itineraryAlerts > .alert-preview-list {
    grid-template-columns: 1fr !important;
  }
}

/* Wallet route repair: the shell is one full-width flow; only its widgets form columns. */
body.signed-in-shell .global-destination-header:not([hidden]) {
  position: relative !important;
  top: auto !important;
  z-index: var(--z-banner) !important;
}

#walletPanel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#walletPanel > * {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#walletPanel > .wallet-redesign-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 12px !important;
  overflow: visible !important;
}

#walletPanel > .wallet-redesign-shell > .wallet-section-nav,
#walletPanel > .wallet-redesign-shell > .wallet-home-grid,
#walletPanel > .wallet-redesign-shell > .wallet-trip-card-grid,
#walletPanel > .wallet-redesign-shell > .wallet-dashboard-sections,
#walletPanel > .wallet-redesign-shell > .wallet-quick-actions-redesign,
#walletPanel > .wallet-redesign-shell > .wallet-section-card-grid {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#walletPanel > .wallet-redesign-shell > .wallet-section-nav {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  align-items: start !important;
}

#walletPanel > .wallet-redesign-shell > .wallet-home-grid,
#walletPanel > .wallet-redesign-shell > .wallet-dashboard-sections,
#walletPanel > .wallet-redesign-shell > .wallet-section-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
}

#walletPanel > .wallet-redesign-shell > .wallet-trip-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
}

#walletPanel > .wallet-redesign-shell .wallet-home-grid > .wallet-balance-hero,
#walletPanel > .wallet-redesign-shell .wallet-dashboard-sections > article:first-child {
  grid-column: auto !important;
}

#walletPanel > .wallet-redesign-shell .wallet-dashboard-sections > article,
#walletPanel > .wallet-redesign-shell .wallet-section-card-grid > article,
#walletPanel > .wallet-redesign-shell .wallet-home-grid > *,
#walletPanel > .wallet-redesign-shell .wallet-trip-card-grid > * {
  align-self: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  writing-mode: horizontal-tb !important;
}

#walletPanel > .wallet-redesign-shell .wallet-metric-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 8px !important;
  align-items: start !important;
}

#walletPanel > .wallet-redesign-shell .wallet-metric-list > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 9px !important;
  align-self: start !important;
  writing-mode: horizontal-tb !important;
}

#walletPanel > .wallet-redesign-shell :where(h2, h3, h4, p, span, strong, small, label, button) {
  max-width: 100% !important;
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#walletPanel > .wallet-redesign-shell :where(.wallet-dashboard-sections > article > *, .wallet-section-card-grid > article > *, .wallet-metric-list > div > *) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  #walletPanel > .wallet-redesign-shell > .wallet-home-grid,
  #walletPanel > .wallet-redesign-shell > .wallet-dashboard-sections,
  #walletPanel > .wallet-redesign-shell > .wallet-section-card-grid,
  #walletPanel > .wallet-redesign-shell .wallet-metric-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  #walletPanel > .wallet-redesign-shell > .wallet-section-nav,
  #walletPanel > .wallet-redesign-shell > .wallet-home-grid,
  #walletPanel > .wallet-redesign-shell > .wallet-trip-card-grid,
  #walletPanel > .wallet-redesign-shell > .wallet-dashboard-sections,
  #walletPanel > .wallet-redesign-shell > .wallet-quick-actions-redesign,
  #walletPanel > .wallet-redesign-shell > .wallet-section-card-grid,
  #walletPanel > .wallet-redesign-shell .wallet-metric-list {
    grid-template-columns: 1fr !important;
  }
}

/* AI receipt workspace repair: keep the bill splitter full width so recognition and diner controls never collapse into a narrow side column. */
#splitBill {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#splitBill > * {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

#splitBill .bill-redesign-grid,
#splitBill .bill-main-column,
#splitBill .bill-side-column,
#splitBill .receipt-workspace {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

#splitBill .receipt-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr) !important;
  grid-auto-rows: max-content !important;
  gap: 14px !important;
  overflow: visible !important;
}

#splitBill .receipt-items-panel,
#splitBill .payment-status-panel,
#splitBill .receipt-items-panel > .section-heading,
#splitBill .receipt-item-list,
#splitBill .receipt-item-list > article,
#splitBill .receipt-item-detail,
#splitBill .receipt-claim-panel,
#splitBill .receipt-claim-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

#splitBill .receipt-items-panel > .section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 10px !important;
  overflow: visible !important;
}

#splitBill .receipt-items-panel > .section-heading > div {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#splitBill .receipt-items-panel > .section-heading :where(.eyebrow, h3, p) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#splitBill .receipt-items-panel > .section-heading > button {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
}

#splitBill .receipt-items-panel > .section-heading .eyebrow {
  font-size: 0.72rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
}

#splitBill .receipt-items-panel > .section-heading h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important;
  line-height: 1.22 !important;
}

#splitBill .receipt-item-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 10px !important;
  overflow: visible !important;
}

#splitBill .receipt-item-list > article {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 12px !important;
  height: auto !important;
  overflow: visible !important;
}

#splitBill .receipt-item-detail,
#splitBill .receipt-claim-panel,
#splitBill .receipt-claim-grid,
#splitBill .receipt-item-actions {
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  overflow: visible !important;
}

#splitBill .receipt-claim-grid {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  gap: 7px !important;
}

#splitBill .receipt-claim-grid label,
#splitBill .receipt-item-actions button {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#splitBill .receipt-claim-grid label > input {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 16px !important;
  margin: 0 !important;
}

#splitBill :where(h1, h2, h3, h4, h5, h6, p, strong, span, small, em, label, button, a) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1120px) {
  #splitBill .bill-redesign-grid,
  #splitBill .receipt-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #splitBill .bill-side-column {
    position: static !important;
  }
}

@media (max-width: 760px) {
  #splitBill .receipt-items-panel > .section-heading,
  #splitBill .receipt-item-list > article {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 520px) {
  #splitBill .receipt-claim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* AI recognition widget repair: stack the review workspace so its heading never collapses into a letter-wide column. */
#splitBill .receipt-workspace {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}

#splitBill .receipt-items-panel > .section-heading {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
}

#splitBill .receipt-items-panel > .section-heading > div,
#splitBill .receipt-items-panel > .section-heading :where(.eyebrow, h3, p) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#splitBill .receipt-items-panel > .section-heading > button {
  justify-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#splitBill .receipt-items-panel > .section-heading .eyebrow {
  color: #087f8c !important;
  font-size: 0.72rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
}

#splitBill .receipt-items-panel > .section-heading h3 {
  color: #10202f !important;
  font-size: clamp(1.08rem, 2vw, 1.35rem) !important;
  line-height: 1.24 !important;
}

#splitBill .receipt-item-list > article {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Wallet contrast repair: light wallet cards keep dark text even when a vibrant theme uses light global ink tokens. */
#walletPanel :where(
  .section-heading,
  .wallet-dashboard-header,
  .wallet-smart-actions,
  .wallet-redesign-shell,
  .wallet-home-grid,
  .wallet-trip-card-grid,
  .wallet-dashboard-sections,
  .wallet-section-card-grid,
  .wallet-operations-panel,
  .wallet-action-grid,
  .wallet-breakdown,
  .shared-wallet-ledger,
  .security-note,
  .budget-line
) {
  color: #10202f !important;
}

#walletPanel :where(
  h2, h3, h4, p, span, strong, label, time, em, dt, dd, li,
  .wallet-dashboard-header article,
  .wallet-summary-card,
  .wallet-balance-hero,
  .wallet-trip-tile,
  .wallet-virtual-preview,
  .wallet-dashboard-sections article,
  .wallet-section-card-grid article,
  .wallet-operations-panel > *,
  .wallet-action-grid button,
  .wallet-breakdown > *,
  .shared-wallet-ledger > div
) {
  color: #10202f !important;
  text-shadow: none !important;
}

#walletPanel :where(
  .eyebrow,
  small,
  .small,
  .wallet-dashboard-header small,
  .wallet-dashboard-sections small,
  .wallet-section-card-grid small,
  .wallet-trip-tile small,
  .wallet-virtual-preview small,
  .wallet-operations-panel p,
  .wallet-breakdown span,
  .shared-wallet-ledger span,
  .shared-wallet-ledger time,
  .security-note
) {
  color: #607280 !important;
}

#walletPanel :where(.section-heading .eyebrow, .wallet-dashboard-sections .eyebrow) {
  color: #087f8c !important;
}

#walletPanel :where(button, .ghost-button, .wallet-section-nav button, .wallet-action-grid button) {
  color: #174650 !important;
  text-shadow: none !important;
}

#walletPanel :where(button.active, .primary-button) {
  color: #ffffff !important;
}

#walletPanel :where(input, select, textarea) {
  color: #10202f !important;
  background: #ffffff !important;
}

/* Chat vibe refresh: make the social hub feel energetic while keeping shortcuts compact. */
#socialHub .chat-vibe-strip {
  display: grid !important;
  grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.7fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(8, 127, 140, 0.16) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(120deg, rgba(18, 199, 216, 0.16), rgba(255, 107, 74, 0.12) 56%, rgba(255, 209, 102, 0.18)),
    #ffffff !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06) !important;
}

#socialHub .chat-vibe-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#socialHub .chat-vibe-copy .eyebrow {
  margin: 0 !important;
  color: #087f8c !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
}

#socialHub .chat-vibe-copy strong,
#socialHub .chat-vibe-copy span {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: #10202f !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#socialHub .chat-vibe-copy strong {
  font-size: 0.94rem !important;
  line-height: 1.25 !important;
}

#socialHub .chat-vibe-copy span {
  color: #607280 !important;
  font-size: 0.73rem !important;
  line-height: 1.35 !important;
}

#socialHub .chat-vibe-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#socialHub .chat-vibe-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 38px !important;
  max-width: 100% !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(8, 127, 140, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #174650 !important;
  font-size: 0.73rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

#socialHub .chat-vibe-actions button:hover,
#socialHub .chat-vibe-actions button:focus-visible {
  background: #174650 !important;
  color: #ffffff !important;
  border-color: #174650 !important;
  outline: 0;
}

@media (max-width: 900px) {
  #socialHub .chat-vibe-strip {
    grid-template-columns: 1fr !important;
  }

  #socialHub .chat-vibe-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 520px) {
  #socialHub .chat-vibe-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #socialHub .chat-vibe-actions button {
    width: 100% !important;
  }
}

/* Overview Memories widget repair: keep the collage inside its card and reserve a clean action row. */
body.app-routed #dashboardWidgets .memories-widget {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  gap: 12px !important;
  padding: 16px !important;
}

body.app-routed #dashboardWidgets .memories-widget .mini-collage {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
  grid-template-rows: repeat(2, minmax(0, 74px)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 154px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

body.app-routed #dashboardWidgets .memories-widget .mini-collage img {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

body.app-routed #dashboardWidgets .memories-widget > .ghost-button {
  position: static !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* Travel Home summary card repair: give each card a readable horizontal header and full-width details. */
body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-booking-summary,
body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-transport-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-booking-summary > article,
body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-transport-summary > article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "label value"
    "details details"
    "action action" !important;
  align-items: start !important;
  align-content: start !important;
  gap: 8px 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-booking-summary > article > span,
body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-transport-summary > article > span {
  grid-area: label !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-booking-summary > article > strong,
body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-transport-summary > article > strong {
  grid-area: value !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: right !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-booking-summary > article > small,
body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-transport-summary > article > small {
  grid-area: details !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-booking-summary > article > button,
body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-transport-summary > article > button {
  grid-area: action !important;
  justify-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 1100px) {
  body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-booking-summary,
  body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-transport-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-booking-summary,
  body.app-routed #rideShareHub [data-travel-panel="overview"] .travel-transport-summary {
    grid-template-columns: 1fr !important;
  }
}

/* My Profile widget repair: keep stats compact and adventure cards readable without stretched rows. */
body.app-routed #myProfile .profile-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.app-routed #myProfile .profile-stats-grid > article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "label value"
    "detail detail" !important;
  align-items: center !important;
  align-content: start !important;
  gap: 6px 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  box-sizing: border-box !important;
}

body.app-routed #myProfile .profile-stats-grid > article > span {
  grid-area: label !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed #myProfile .profile-stats-grid > article > strong {
  grid-area: value !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body.app-routed #myProfile .profile-stats-grid > article > small {
  grid-area: detail !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed #myProfile .profile-adventure-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.app-routed #myProfile .profile-adventure-grid > article {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  grid-template-areas:
    "media label"
    "media title"
    "media details"
    "action action" !important;
  align-items: start !important;
  align-content: start !important;
  gap: 8px 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.app-routed #myProfile .profile-adventure-grid > article > img {
  grid-area: media !important;
  display: block !important;
  width: 112px !important;
  height: 112px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}

body.app-routed #myProfile .profile-adventure-grid > article > span {
  grid-area: label !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed #myProfile .profile-adventure-grid > article > strong {
  grid-area: title !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed #myProfile .profile-adventure-grid > article > small {
  grid-area: details !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed #myProfile .profile-adventure-grid > article > button {
  grid-area: action !important;
  justify-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 1100px) {
  body.app-routed #myProfile .profile-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-routed #myProfile .profile-adventure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.app-routed #myProfile .profile-stats-grid,
  body.app-routed #myProfile .profile-adventure-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Compact current-trip widget: keep the destination photo useful without letting it dominate the Travel tab. */
body.app-routed #rideShareHub .travel-settings-sidebar {
  max-height: min(700px, calc(100vh - 156px));
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 118, 110, 0.55) transparent;
}

body.app-routed #rideShareHub .travel-settings-sidebar::-webkit-scrollbar {
  width: 8px;
}

body.app-routed #rideShareHub .travel-settings-sidebar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.55);
  background-clip: padding-box;
}

body.app-routed #rideShareHub .travel-current-trip-card {
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-areas:
    "media copy"
    "select select";
  align-items: center;
  gap: 10px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 10px;
}

body.app-routed #rideShareHub .travel-current-trip-card img {
  grid-area: media;
  width: 88px !important;
  height: 64px !important;
  aspect-ratio: auto !important;
  border-radius: 12px;
  object-fit: cover;
}

body.app-routed #rideShareHub .travel-current-trip-card > div {
  grid-area: copy;
  min-width: 0;
}

body.app-routed #rideShareHub .travel-current-trip-card > select {
  grid-area: select;
  width: 100%;
  min-width: 0;
}

@media (max-width: 680px) {
  body.app-routed #rideShareHub .travel-settings-sidebar {
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  body.app-routed #rideShareHub .travel-current-trip-card {
    grid-template-columns: 72px minmax(0, 1fr);
    max-height: none;
    overflow: visible;
  }

  body.app-routed #rideShareHub .travel-current-trip-card img {
    width: 72px !important;
    height: 56px !important;
  }
}

/* Keep transportation separate from Travel Home: one concise movement table, with detailed tools opt-in. */
body.app-routed #rideShareHub [data-travel-panel="rideShare"],
body.app-routed #rideShareHub [data-travel-panel="transfers"],
body.app-routed #rideShareHub [data-travel-panel="publicTransit"],
body.app-routed #rideShareHub [data-travel-panel="routeComparison"] {
  display: none !important;
}

body.app-routed main > #transportationPanel:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

body.app-routed #transportationPanel > .section-heading,
body.app-routed #transportationPanel > .transportation-summary-grid,
body.app-routed #transportationPanel > .transportation-table-section,
body.app-routed #transportationPanel > .transportation-advanced-details {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}

#transportationPanel .transportation-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

#transportationPanel .transportation-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

#transportationPanel .transportation-summary-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(20, 42, 56, 0.06);
}

#transportationPanel .transportation-summary-grid span,
#transportationPanel .transportation-summary-grid small {
  color: #607589;
}

#transportationPanel .transportation-summary-grid strong {
  color: #102c3a;
  font-size: 1.15rem;
  line-height: 1.2;
}

#transportationPanel .transportation-table-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(20, 42, 56, 0.06);
}

#transportationPanel .transportation-table-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 10px;
  align-items: end;
}

#transportationPanel .transportation-table-toolbar label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #466174;
  font-size: 0.78rem;
  font-weight: 700;
}

#transportationPanel .transportation-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid rgba(20, 42, 56, 0.1);
  border-radius: 14px;
}

#transportationPanel .transportation-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #102c3a;
}

#transportationPanel .transportation-table th,
#transportationPanel .transportation-table td {
  padding: 12px 13px;
  border-bottom: 1px solid rgba(20, 42, 56, 0.08);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

#transportationPanel .transportation-table thead th {
  background: #f3f8f8;
  color: #557184;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#transportationPanel .transportation-table tbody tr:last-child th,
#transportationPanel .transportation-table tbody tr:last-child td {
  border-bottom: 0;
}

#transportationPanel .transportation-table tbody tr:hover {
  background: rgba(232, 248, 247, 0.58);
}

#transportationPanel .transportation-table th[scope="row"] {
  width: 37%;
  font-weight: 400;
}

#transportationPanel .transportation-table th[scope="row"] span,
#transportationPanel .transportation-table th[scope="row"] strong,
#transportationPanel .transportation-table th[scope="row"] small {
  display: block;
  min-width: 0;
  white-space: normal;
}

#transportationPanel .transportation-table th[scope="row"] span {
  color: #087f8c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#transportationPanel .transportation-table th[scope="row"] strong {
  margin-top: 3px;
  color: #102c3a;
  font-size: 0.96rem;
  line-height: 1.3;
}

#transportationPanel .transportation-table th[scope="row"] small,
#transportationPanel .transportation-table td {
  color: #607589;
  font-size: 0.84rem;
  line-height: 1.35;
}

#transportationPanel .transportation-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e5f7ec;
  color: #167045;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: normal;
}

#transportationPanel .transportation-empty-state {
  display: grid;
  gap: 4px;
  padding: 22px;
  text-align: center;
}

#transportationPanel .transportation-empty-state strong {
  color: #102c3a;
}

#transportationPanel .transportation-empty-state span {
  color: #607589;
}

#transportationPanel .transportation-advanced-details {
  min-width: 0;
  border: 1px solid rgba(8, 127, 140, 0.14);
  border-radius: 16px;
  background: rgba(244, 250, 250, 0.7);
}

#transportationPanel .transportation-advanced-details > summary {
  cursor: pointer;
  padding: 13px 16px;
  color: #075f6b;
  font-weight: 800;
}

#transportationPanel .transportation-advanced-details[open] > summary {
  border-bottom: 1px solid rgba(8, 127, 140, 0.12);
}

#transportationWorkspaceMount {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
}

@media (max-width: 760px) {
  #transportationPanel .transportation-summary-grid,
  #transportationPanel .transportation-table-toolbar {
    grid-template-columns: 1fr;
  }

  #transportationPanel .transportation-header-actions {
    justify-content: flex-start;
  }

  #transportationWorkspaceMount {
    padding: 10px;
  }
}

/* Focused tab layout: keep each route readable, then let only its internal widget grids use columns. */
body.app-routed .content-grid,
body.app-routed .main-stack,
body.app-routed .right-stack {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
  align-items: start !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

body.app-routed [data-route-component]:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

body.app-routed [data-route-component]:not([hidden]) > * {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: start !important;
}

body.app-routed [data-route-component]:not([hidden]) > :where(.section-heading, .travel-command-header, .travel-smart-search, .transportation-table-section) {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Travel keeps one compact category rail beside one focused content surface. */
body.app-routed #rideShareHub > .travel-settings-shell {
  display: grid !important;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
body.app-routed #rideShareHub > .travel-settings-shell > .travel-settings-main {
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: start !important;
  box-sizing: border-box !important;
}

body.app-routed #rideShareHub > .travel-settings-shell > .travel-settings-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed #rideShareHub .travel-focus-panel.active,
body.app-routed #rideShareHub .travel-focus-panel:not([hidden]) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.app-routed #rideShareHub :where(.travel-dashboard-sections, .travel-booking-summary, .travel-focus-grid, .travel-provider-cards, .travel-reservation-sections, .travel-quick-actions) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.app-routed #rideShareHub :where(.travel-booking-summary, .travel-focus-grid, .travel-provider-cards, .travel-reservation-sections) > * {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.app-routed #rideShareHub :where(.travel-booking-summary, .travel-focus-grid, .travel-provider-cards, .travel-reservation-sections) > * :where(h1, h2, h3, h4, p, span, strong, small, label, button) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Keep the new primary tab visible without squeezing labels into vertical text. */
body.app-routed main > .trip-tab-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

body.app-routed main > .trip-tab-bar > button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  body.app-routed #rideShareHub > .travel-settings-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-routed #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
  body.app-routed #rideShareHub > .travel-settings-shell > .travel-settings-main {
    width: 100% !important;
  }
}

/* Final route cleanup: profile is a primary destination, while account and admin controls stay scoped. */
body.app-routed main > .trip-tab-bar > button[data-main-nav-id="profile"] {
  color: #075f6b !important;
  background: linear-gradient(135deg, rgba(44, 210, 190, 0.16), rgba(255, 151, 108, 0.16)) !important;
  border-color: rgba(8, 127, 140, 0.28) !important;
  font-weight: 850 !important;
}

body.app-routed main > .trip-tab-bar > button[data-main-nav-id="profile"].active {
  color: #102033 !important;
  background: linear-gradient(135deg, #9ef1dc, #ffd39a) !important;
  box-shadow: 0 5px 14px rgba(8, 127, 140, 0.16) !important;
}

body.app-routed [data-route-component]:not([hidden]) :where(.smart-dashboard-grid, .widget-grid, .profile-card-grid, .profile-stats-grid, .profile-adventure-grid, .profile-connections-grid, .profile-photo-policy-grid, .profile-personal-grid, .travel-badge-grid, .settings-main-panel, .corporate-home-grid) {
  align-items: start !important;
  align-content: start !important;
  grid-auto-rows: max-content !important;
  min-width: 0 !important;
}

body.app-routed [data-route-component]:not([hidden]) :where(h1, h2, h3, h4, h5, h6, p, strong, span, small, label, dt, dd, li, button, a) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.app-routed #myProfile {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: 16px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

body.app-routed #myProfile > * {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

body.app-routed #myProfile .profile-social-hero {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 5 !important;
}

body.app-routed #myProfile .profile-quick-actions,
body.app-routed #myProfile .profile-memory-gallery,
body.app-routed #myProfile .profile-photo-appearances {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
}

body.app-routed #myProfile :where(.profile-card-grid, .profile-adventure-grid, .profile-connections-grid, .profile-personal-grid, .profile-photo-policy-grid) > * {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

body.app-routed #adminPanel .settings-shell,
body.app-routed #adminPanel .settings-main-panel,
body.app-routed #adminPanel .settings-section {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

body.app-routed #adminPanel .settings-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

@media (max-width: 680px) {
  body.app-routed #myProfile .profile-social-hero {
    aspect-ratio: 4 / 3 !important;
  }

  body.app-routed #adminPanel .settings-row {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }
}
/* Live provider widgets: keep status checks compact and readable inside Transportation. */
body.app-routed #transportationPanel .flight-tracking-card {
  display: grid;
  gap: 16px;
  margin: 18px 0 20px;
  padding: 20px;
  background: #f4fbfd;
  border: 1px solid rgba(18, 151, 177, 0.2);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(16, 45, 60, 0.06);
}

body.app-routed #transportationPanel .flight-tracking-card__header,
body.app-routed #transportationPanel .flight-tracking-result__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

body.app-routed #transportationPanel .flight-tracking-card__header h3,
body.app-routed #transportationPanel .flight-tracking-result__header h3 {
  margin: 2px 0 4px;
  color: #102033;
}

body.app-routed #transportationPanel .flight-tracking-card__header p:not(.eyebrow),
body.app-routed #transportationPanel .flight-tracking-result__header p {
  max-width: 760px;
  margin: 0;
  color: #526d7d;
  line-height: 1.45;
}

body.app-routed #transportationPanel .provider-badge {
  flex: 0 0 auto;
  padding: 7px 11px;
  color: #086f83;
  background: #dff7f4;
  border: 1px solid rgba(8, 111, 131, 0.2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

body.app-routed #transportationPanel .flight-tracking-form {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(150px, 1fr) minmax(140px, 0.8fr) auto;
  align-items: end;
  gap: 12px;
}

body.app-routed #transportationPanel .flight-tracking-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #3b596a;
  font-size: 0.78rem;
  font-weight: 800;
}

body.app-routed #transportationPanel .flight-tracking-form input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 11px 12px;
  color: #102033;
  background: #fff;
  border: 1px solid #c8dce4;
  border-radius: 10px;
  font: inherit;
}

body.app-routed #transportationPanel .flight-tracking-form input:focus {
  outline: 3px solid rgba(17, 151, 177, 0.22);
  outline-offset: 1px;
}

body.app-routed #transportationPanel .flight-tracking-form button {
  min-height: 43px;
  white-space: nowrap;
}

body.app-routed #transportationPanel #flightTrackingStatus {
  margin: 0;
}

body.app-routed #transportationPanel .flight-tracking-result {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid #d4e5ea;
  border-radius: 14px;
}

body.app-routed #transportationPanel .flight-tracking-result[hidden] {
  display: none;
}

body.app-routed #transportationPanel .flight-tracking-result__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.app-routed #transportationPanel .flight-tracking-result__grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  background: #f7fafb;
  border-radius: 10px;
}

body.app-routed #transportationPanel .flight-tracking-result__grid span,
body.app-routed #transportationPanel .flight-tracking-result__grid small {
  color: #607888;
  font-size: 0.78rem;
  line-height: 1.3;
}

body.app-routed #transportationPanel .flight-tracking-result__grid strong {
  min-width: 0;
  color: #102033;
  overflow-wrap: anywhere;
}

body.app-routed #transportationPanel .flight-tracking-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

body.app-routed #transportationPanel .flight-tracking-result__actions a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

@media (max-width: 800px) {
  body.app-routed #transportationPanel .flight-tracking-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-routed #transportationPanel .flight-tracking-form button {
    width: 100%;
  }

  body.app-routed #transportationPanel .flight-tracking-result__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  body.app-routed #transportationPanel .flight-tracking-card__header,
  body.app-routed #transportationPanel .flight-tracking-result__header {
    display: grid;
  }

  body.app-routed #transportationPanel .flight-tracking-form,
  body.app-routed #transportationPanel .flight-tracking-result__grid {
    grid-template-columns: 1fr;
  }
}
/* Smart Travel Search redesign: remove the oversized shell and reveal information in focused widgets. */
body.app-routed #rideShareHub > .travel-smart-search {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed #rideShareHub .travel-smart-search-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-width: 0 !important;
  padding: 16px 18px !important;
  background: linear-gradient(135deg, #eefbfd 0%, #fff7ef 100%) !important;
  border: 1px solid #d6e8ec !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(16, 45, 60, 0.05) !important;
}

body.app-routed #rideShareHub .travel-smart-search-head > div {
  min-width: 0 !important;
}

body.app-routed #rideShareHub .travel-smart-search-head h3 {
  margin: 2px 0 4px !important;
  color: #102033 !important;
  font-size: 1.08rem !important;
  line-height: 1.25 !important;
}

body.app-routed #rideShareHub .travel-smart-search-head > span {
  flex: 0 0 auto !important;
  padding: 6px 9px !important;
  color: #0b7184 !important;
  background: #e0f7f4 !important;
  border: 1px solid rgba(11, 113, 132, 0.15) !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.app-routed #rideShareHub .travel-smart-search-row {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 10px !important;
  background: #fff !important;
  border: 1px solid #cfe2e7 !important;
  border-radius: 13px !important;
  box-shadow: 0 5px 14px rgba(16, 45, 60, 0.04) !important;
}

body.app-routed #rideShareHub .travel-smart-search-row input {
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 8px !important;
  color: #102033 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0.94rem !important;
}

body.app-routed #rideShareHub .travel-smart-search-row input:focus {
  outline: 2px solid rgba(17, 151, 177, 0.24) !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
}

body.app-routed #rideShareHub .travel-smart-search-row button {
  min-height: 37px !important;
  padding: 8px 11px !important;
  white-space: nowrap !important;
}

body.app-routed #rideShareHub .travel-search-suggestions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 0 2px !important;
}

body.app-routed #rideShareHub .travel-search-suggestions button {
  min-width: 0 !important;
  padding: 7px 10px !important;
  color: #28576a !important;
  background: #f7fbfc !important;
  border: 1px solid #cfe2e7 !important;
  border-radius: 9px !important;
  font-size: 0.78rem !important;
  font-weight: 750 !important;
}

body.app-routed #rideShareHub .travel-smart-results,
body.app-routed #rideShareHub .travel-live-results {
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-routed #rideShareHub .travel-search-start {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  padding: 13px 15px !important;
  color: #526d7d !important;
  background: #f8fbfc !important;
  border: 1px solid #dcebef !important;
  border-radius: 11px !important;
}

body.app-routed #rideShareHub .travel-search-start__icon {
  display: grid !important;
  flex: 0 0 29px !important;
  place-items: center !important;
  width: 29px !important;
  height: 29px !important;
  color: #08788c !important;
  background: #e1f7f5 !important;
  border-radius: 9px !important;
}

body.app-routed #rideShareHub .travel-search-start > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

body.app-routed #rideShareHub .travel-search-start strong {
  color: #183242 !important;
  font-size: 0.87rem !important;
}

body.app-routed #rideShareHub .travel-search-start span:last-child {
  overflow-wrap: anywhere !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
}

body.app-routed #rideShareHub .travel-result-group {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid #dcebef !important;
  border-radius: 12px !important;
}

body.app-routed #rideShareHub .travel-result-group + .travel-result-group {
  margin-top: 10px !important;
}

body.app-routed #rideShareHub .travel-result-group-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: #183242 !important;
}

body.app-routed #rideShareHub .travel-result-group-head span {
  color: #6b8290 !important;
  font-size: 0.76rem !important;
}

body.app-routed #rideShareHub .travel-result-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.app-routed #rideShareHub .travel-result-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 10px !important;
  background: #f8fbfc !important;
  border: 1px solid #e0edf0 !important;
  border-radius: 10px !important;
}

body.app-routed #rideShareHub .travel-result-card > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

body.app-routed #rideShareHub .travel-result-card strong,
body.app-routed #rideShareHub .travel-result-card small,
body.app-routed #rideShareHub .travel-result-card em {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}

body.app-routed #rideShareHub .travel-result-card strong {
  color: #102033 !important;
  font-size: 0.84rem !important;
}

body.app-routed #rideShareHub .travel-result-card small {
  color: #607888 !important;
  font-size: 0.75rem !important;
}

body.app-routed #rideShareHub .travel-result-card em {
  width: fit-content !important;
  padding: 3px 6px !important;
  color: #0b7184 !important;
  background: #e7f7f5 !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

body.app-routed #rideShareHub .travel-result-card button {
  min-height: 32px !important;
  padding: 6px 8px !important;
  color: #0b6577 !important;
  background: #fff !important;
  border: 1px solid #cfe2e7 !important;
  border-radius: 8px !important;
  font-size: 0.73rem !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  body.app-routed #rideShareHub .travel-smart-search-head {
    display: grid !important;
  }

  body.app-routed #rideShareHub .travel-smart-search-row {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
  }

  body.app-routed #rideShareHub .travel-smart-search-row button {
    grid-row: 2 !important;
  }

  body.app-routed #rideShareHub .travel-smart-search-row button:last-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body.app-routed #rideShareHub .travel-result-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Itinerary dashboard refresh: keep the route shell quiet and let each trip task stand on its own. */
body.app-routed #itineraryAlerts {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  align-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed #itineraryAlerts > .section-heading {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  background: linear-gradient(135deg, #effbfd 0%, #fff7ef 100%) !important;
  border: 1px solid #d5e8ec !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #itineraryAlerts > .section-heading > div,
body.app-routed #itineraryAlerts > .section-heading h2,
body.app-routed #itineraryAlerts > .section-heading p {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #itineraryAlerts > .section-heading h2 {
  margin: 2px 0 4px !important;
  color: #102f3d !important;
  font-size: clamp(1.25rem, 2vw, 1.8rem) !important;
  line-height: 1.12 !important;
}

body.app-routed #itineraryAlerts > .section-heading p:not(.eyebrow) {
  margin: 0 !important;
  color: #5f7782 !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card {
  grid-column: span 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured,
body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today {
  grid-column: span 6 !important;
  min-height: 188px !important;
  justify-content: flex-end !important;
  background:
    linear-gradient(180deg, rgba(5, 18, 24, 0.08), rgba(5, 18, 24, 0.76)),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1100&auto=format&fit=crop") center/cover !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--progress {
  grid-column: span 6 !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card :where(span, h3, p, button) {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card > span {
  width: fit-content !important;
  padding: 4px 7px !important;
  color: #176173 !important;
  background: #e9f8f6 !important;
  border-radius: 999px !important;
  font-size: 0.64rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card > h3 {
  width: 100% !important;
  margin: 0 !important;
  color: #102f3d !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card > p {
  width: 100% !important;
  margin: 0 !important;
  color: #607783 !important;
  font-size: 0.76rem !important;
  line-height: 1.35 !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured :where(span, h3, p),
body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today :where(span, h3, p) {
  color: #ffffff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42) !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured > span,
body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today > span {
  color: #174650 !important;
  text-shadow: none !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured > h3,
body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today > h3 {
  color: #ffffff !important;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem) !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card button,
body.app-routed #itineraryAlerts .itinerary-action-row button,
body.app-routed #itineraryAlerts > .upcoming-reservation-grid button,
body.app-routed #itineraryAlerts .reservation-reminder-card button {
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 7px 10px !important;
  color: #185465 !important;
  background: #eef8f6 !important;
  border: 1px solid #cce4e4 !important;
  border-radius: 9px !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured button,
body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today button {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

body.app-routed #itineraryAlerts > .itinerary-timeline-dashboard,
body.app-routed #itineraryAlerts > .upcoming-reservation-grid,
body.app-routed #itineraryAlerts > .itinerary-preferences-widget,
body.app-routed #itineraryAlerts > .reservation-reminder-panel {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 15px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #itineraryAlerts > .itinerary-timeline-dashboard > .section-heading,
body.app-routed #itineraryAlerts > .itinerary-preferences-widget > .section-heading,
body.app-routed #itineraryAlerts > .reservation-reminder-panel > .section-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed #itineraryAlerts > .itinerary-timeline-dashboard > .section-heading > div,
body.app-routed #itineraryAlerts > .itinerary-preferences-widget > .section-heading > div,
body.app-routed #itineraryAlerts > .reservation-reminder-panel > .section-heading > div {
  min-width: 0 !important;
}

body.app-routed #itineraryAlerts .itinerary-timeline-dashboard h3,
body.app-routed #itineraryAlerts .itinerary-preferences-widget h3,
body.app-routed #itineraryAlerts .reservation-reminder-panel h3 {
  margin: 2px 0 0 !important;
  color: #102f3d !important;
  font-size: 1.12rem !important;
  line-height: 1.18 !important;
}

body.app-routed #itineraryAlerts .itinerary-timeline-list,
body.app-routed #itineraryAlerts .upcoming-reservation-grid,
body.app-routed #itineraryAlerts .reservation-reminder-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed #itineraryAlerts .itinerary-timeline-list details,
body.app-routed #itineraryAlerts > .upcoming-reservation-grid > article,
body.app-routed #itineraryAlerts .reservation-reminder-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  background: #f9fcfc !important;
  border: 1px solid #dcecef !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-routed #itineraryAlerts .itinerary-timeline-list details summary {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: #173642 !important;
  font-size: 0.76rem !important;
  line-height: 1.3 !important;
}

body.app-routed #itineraryAlerts .itinerary-timeline-list details summary :where(span, time, strong, em),
body.app-routed #itineraryAlerts .itinerary-timeline-list details > p,
body.app-routed #itineraryAlerts .reservation-reminder-card :where(span, h4, p, li) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #itineraryAlerts .itinerary-timeline-list details summary time {
  color: #326271 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.app-routed #itineraryAlerts .itinerary-timeline-list details summary em {
  grid-column: 1 / -1 !important;
  width: fit-content !important;
  padding: 3px 7px !important;
  color: #14703f !important;
  background: #dcf7e7 !important;
  border-radius: 999px !important;
  font-size: 0.66rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

body.app-routed #itineraryAlerts .itinerary-timeline-list details > p {
  margin: 9px 0 0 !important;
  color: #617985 !important;
  font-size: 0.72rem !important;
  line-height: 1.38 !important;
}

body.app-routed #itineraryAlerts > .upcoming-reservation-grid > article,
body.app-routed #itineraryAlerts .reservation-reminder-card {
  display: grid !important;
  gap: 6px !important;
}

body.app-routed #itineraryAlerts > .upcoming-reservation-grid > article > span,
body.app-routed #itineraryAlerts .reservation-reminder-card > span {
  color: #3c6c78 !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.app-routed #itineraryAlerts > .upcoming-reservation-grid > article > strong,
body.app-routed #itineraryAlerts .reservation-reminder-card h4 {
  margin: 0 !important;
  color: #102f3d !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
}

body.app-routed #itineraryAlerts > .upcoming-reservation-grid > article > small,
body.app-routed #itineraryAlerts .reservation-reminder-card > p,
body.app-routed #itineraryAlerts .reservation-reminder-card li {
  color: #617985 !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

body.app-routed #itineraryAlerts .reservation-reminder-card ul {
  display: grid !important;
  gap: 4px !important;
  margin: 2px 0 0 !important;
  padding-left: 16px !important;
}

body.app-routed #itineraryAlerts > .security-note {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  color: #28606d !important;
  background: #effaff !important;
  border: 1px solid #d2e9ee !important;
  border-left: 4px solid #0ea5b7 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 0.76rem !important;
  line-height: 1.4 !important;
}

body.app-routed #itineraryAlerts > .itinerary-preferences-widget {
  gap: 14px !important;
}

body.app-routed #itineraryAlerts .itinerary-settings-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.app-routed #itineraryAlerts .itinerary-settings-column,
body.app-routed #itineraryAlerts .itinerary-alert-previews {
  min-width: 0 !important;
  padding: 12px !important;
  background: #f8fbfc !important;
  border: 1px solid #e0edf0 !important;
  border-radius: 12px !important;
}

body.app-routed #itineraryAlerts .itinerary-settings-heading {
  min-width: 0 !important;
  margin: 0 0 9px !important;
}

body.app-routed #itineraryAlerts .itinerary-settings-heading h4 {
  margin: 2px 0 0 !important;
  color: #183642 !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}

body.app-routed #itineraryAlerts .alert-category-grid,
body.app-routed #itineraryAlerts .delivery-preferences,
body.app-routed #itineraryAlerts .alert-preview-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-routed #itineraryAlerts .alert-category-grid > label,
body.app-routed #itineraryAlerts .delivery-preferences > label,
body.app-routed #itineraryAlerts .alert-preview-list > div {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px 9px !important;
  box-sizing: border-box !important;
  color: #506d78 !important;
  background: #ffffff !important;
  border: 1px solid #e0edf0 !important;
  border-radius: 9px !important;
  font-size: 0.7rem !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
}

body.app-routed #itineraryAlerts .delivery-preferences > label {
  align-items: center !important;
  color: #274f5d !important;
  font-weight: 750 !important;
}

body.app-routed #itineraryAlerts .alert-category-grid > label > input,
body.app-routed #itineraryAlerts .delivery-preferences > label > input {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 2px 0 0 !important;
}

body.app-routed #itineraryAlerts .alert-preview-list > div {
  display: grid !important;
  gap: 3px !important;
}

body.app-routed #itineraryAlerts .alert-preview-list strong {
  color: #173642 !important;
  font-size: 0.74rem !important;
}

body.app-routed #itineraryAlerts .alert-preview-list span {
  min-width: 0 !important;
  color: #617985 !important;
}

body.app-routed #itineraryAlerts .itinerary-settings-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.app-routed #itineraryAlerts .itinerary-settings-actions .button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.app-routed #itineraryAlerts .itinerary-settings-actions #alertMessage {
  min-width: 0 !important;
  margin: 0 !important;
  color: #5f7882 !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 1100px) {
  body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card,
  body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured,
  body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today,
  body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--progress {
    grid-column: span 6 !important;
  }

  body.app-routed #itineraryAlerts .itinerary-timeline-list,
  body.app-routed #itineraryAlerts .upcoming-reservation-grid,
  body.app-routed #itineraryAlerts .reservation-reminder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.app-routed #itineraryAlerts > .section-heading,
  body.app-routed #itineraryAlerts > .itinerary-timeline-dashboard > .section-heading,
  body.app-routed #itineraryAlerts > .itinerary-preferences-widget > .section-heading,
  body.app-routed #itineraryAlerts > .reservation-reminder-panel > .section-heading,
  body.app-routed #itineraryAlerts .itinerary-settings-actions {
    display: grid !important;
    align-items: start !important;
  }

  body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card,
  body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--featured,
  body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--today,
  body.app-routed #itineraryAlerts > .itinerary-dashboard > .itinerary-card--progress {
    grid-column: 1 / -1 !important;
  }

  body.app-routed #itineraryAlerts .itinerary-settings-columns,
  body.app-routed #itineraryAlerts .itinerary-timeline-list,
  body.app-routed #itineraryAlerts .upcoming-reservation-grid,
  body.app-routed #itineraryAlerts .reservation-reminder-grid,
  body.app-routed #itineraryAlerts .alert-category-grid,
  body.app-routed #itineraryAlerts .delivery-preferences,
  body.app-routed #itineraryAlerts .alert-preview-list {
    grid-template-columns: 1fr !important;
  }
}

/* Final Wallet route override: one clear set of financial task cards, with duplicate summaries removed. */
body.app-routed main > #walletPanel:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  align-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed #walletPanel > * {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.app-routed #walletPanel > .section-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 17px 19px !important;
  background: linear-gradient(135deg, #effbfd 0%, #fff7ef 100%) !important;
  border: 1px solid #d5e8ec !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #walletPanel > .section-heading :where(div, h2, p) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #walletPanel > .section-heading h2 {
  margin: 2px 0 4px !important;
  color: #102f3d !important;
  font-size: clamp(1.25rem, 2vw, 1.8rem) !important;
  line-height: 1.12 !important;
}

body.app-routed #walletPanel > .section-heading p:not(.eyebrow) {
  margin: 0 !important;
  color: #5f7782 !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
}

body.app-routed #walletPanel > .wallet-dashboard-header,
body.app-routed #walletPanel > .wallet-quick-actions-redesign,
body.app-routed #walletPanel > .wallet-section-card-grid {
  display: none !important;
}

body.app-routed #walletPanel > .wallet-smart-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  align-items: stretch !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #walletPanel > .wallet-smart-actions button {
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  color: #185465 !important;
  background: #f4fbfa !important;
  border: 1px solid #cce4e4 !important;
  border-radius: 9px !important;
  font-size: 0.74rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

body.app-routed #walletPanel > .wallet-redesign-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-routed #walletPanel .wallet-section-nav {
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 7px !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #walletPanel .wallet-section-nav button {
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 7px 8px !important;
  color: #51717d !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body.app-routed #walletPanel .wallet-section-nav button.active,
body.app-routed #walletPanel .wallet-section-nav button:hover,
body.app-routed #walletPanel .wallet-section-nav button:focus-visible {
  color: #0d6678 !important;
  background: #e7f7f5 !important;
  border-color: #bfe2e2 !important;
}

body.app-routed #walletPanel .wallet-home-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed #walletPanel .wallet-home-grid > .wallet-balance-hero {
  grid-column: span 6 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 18px !important;
  background: linear-gradient(135deg, #0c3541 0%, #176b78 55%, #ef8968 140%) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 24px rgba(12, 53, 65, 0.16) !important;
}

body.app-routed #walletPanel .wallet-home-grid > .wallet-balance-hero :where(span, strong, small) {
  color: #ffffff !important;
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #walletPanel .wallet-home-grid > .wallet-balance-hero strong {
  display: block !important;
  margin: 4px 0 !important;
  font-size: clamp(1.65rem, 3vw, 2.35rem) !important;
  line-height: 1.05 !important;
}

body.app-routed #walletPanel .wallet-home-grid > .wallet-summary-card {
  grid-column: span 3 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #walletPanel .wallet-home-grid :where(span, strong, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #walletPanel .wallet-home-grid > .wallet-summary-card span {
  color: #3b6c78 !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.app-routed #walletPanel .wallet-home-grid > .wallet-summary-card strong {
  display: block !important;
  margin: 4px 0 !important;
  color: #102f3d !important;
  font-size: 1.08rem !important;
  line-height: 1.15 !important;
}

body.app-routed #walletPanel .wallet-home-grid > .wallet-summary-card small {
  color: #617985 !important;
  font-size: 0.7rem !important;
  line-height: 1.35 !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid > * {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 13px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid .wallet-trip-tile {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid .wallet-trip-tile img {
  width: 58px !important;
  height: 58px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid :where(span, strong, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid strong {
  color: #102f3d !important;
  line-height: 1.2 !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid small {
  color: #617985 !important;
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid button,
body.app-routed #walletPanel .wallet-dashboard-sections button,
body.app-routed #walletPanel .wallet-smart-actions button {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 32px !important;
  padding: 7px 9px !important;
  color: #185465 !important;
  background: #eef8f6 !important;
  border: 1px solid #cce4e4 !important;
  border-radius: 8px !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget {
  grid-column: span 3 !important;
  display: grid !important;
  gap: 7px !important;
  align-content: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview {
  grid-column: span 6 !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections :where(span, strong, small, p, button) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections .eyebrow {
  margin: 0 !important;
  color: #087f8c !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget > strong {
  color: #102f3d !important;
  font-size: 0.96rem !important;
  line-height: 1.2 !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget > small {
  color: #617985 !important;
  font-size: 0.72rem !important;
  line-height: 1.36 !important;
}

body.app-routed #walletPanel .wallet-metric-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body.app-routed #walletPanel .wallet-metric-list > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 8px !important;
  background: #f8fbfc !important;
  border: 1px solid #e0edf0 !important;
  border-radius: 9px !important;
}

body.app-routed #walletPanel .wallet-metric-list :where(span, strong, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #walletPanel .wallet-metric-list span {
  color: #5b7883 !important;
  font-size: 0.64rem !important;
}

body.app-routed #walletPanel .wallet-metric-list strong {
  color: #102f3d !important;
  font-size: 0.9rem !important;
}

body.app-routed #walletPanel .wallet-metric-list small {
  color: #6a838d !important;
  font-size: 0.64rem !important;
  line-height: 1.3 !important;
}

body.app-routed #walletPanel > .wallet-operations-panel {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 11px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 15px !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #walletPanel > .wallet-operations-panel > * {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #walletPanel .wallet-action-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.app-routed #walletPanel .wallet-action-grid button {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 76px !important;
  padding: 10px !important;
  color: #185465 !important;
  background: #f8fbfc !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 10px !important;
  text-align: left !important;
}

body.app-routed #walletPanel .wallet-action-grid button :where(span, strong, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #walletPanel .wallet-action-grid button strong {
  color: #102f3d !important;
}

body.app-routed #walletPanel .wallet-action-grid button small {
  color: #617985 !important;
  font-size: 0.68rem !important;
  line-height: 1.3 !important;
}

body.app-routed #walletPanel .wallet-focus {
  outline: 3px solid rgba(14, 165, 183, 0.35) !important;
  outline-offset: 3px !important;
}

@media (max-width: 1100px) {
  body.app-routed #walletPanel .wallet-section-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body.app-routed #walletPanel .wallet-home-grid > .wallet-balance-hero,
  body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview {
    grid-column: span 6 !important;
  }

  body.app-routed #walletPanel .wallet-home-grid > .wallet-summary-card,
  body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget {
    grid-column: span 6 !important;
  }

  body.app-routed #walletPanel .wallet-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body.app-routed #walletPanel > .section-heading,
  body.app-routed #walletPanel .wallet-trip-card-grid .wallet-trip-tile {
    display: grid !important;
    align-items: start !important;
  }

  body.app-routed #walletPanel .wallet-section-nav,
  body.app-routed #walletPanel .wallet-home-grid,
  body.app-routed #walletPanel .wallet-trip-card-grid,
  body.app-routed #walletPanel .wallet-dashboard-sections,
  body.app-routed #walletPanel .wallet-metric-list,
  body.app-routed #walletPanel .wallet-action-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-routed #walletPanel .wallet-home-grid > .wallet-balance-hero,
  body.app-routed #walletPanel .wallet-home-grid > .wallet-summary-card,
  body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget,
  body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview {
    grid-column: 1 / -1 !important;
  }

  body.app-routed #walletPanel .wallet-trip-card-grid .wallet-trip-tile {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  body.app-routed #walletPanel .wallet-trip-card-grid .wallet-trip-tile button {
    grid-column: 1 / -1 !important;
  }
}

/* Final Transportation route override: compact widgets, readable movement table, and opt-in detail tools. */
body.app-routed main > #transportationPanel:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  align-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed #transportationPanel > .section-heading,
body.app-routed #transportationPanel > .transportation-summary-grid,
body.app-routed #transportationPanel > .flight-tracking-card,
body.app-routed #transportationPanel > .transportation-table-section,
body.app-routed #transportationPanel > .transportation-advanced-details {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.app-routed #transportationPanel > .section-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 17px 19px !important;
  background: linear-gradient(135deg, #effbfd 0%, #fff7ef 100%) !important;
  border: 1px solid #d5e8ec !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #transportationPanel > .section-heading :where(div, h2, p) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #transportationPanel > .section-heading h2 {
  margin: 2px 0 4px !important;
  color: #102f3d !important;
  font-size: clamp(1.25rem, 2vw, 1.8rem) !important;
  line-height: 1.12 !important;
}

body.app-routed #transportationPanel > .section-heading p:not(.eyebrow) {
  margin: 0 !important;
  color: #5f7782 !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
}

body.app-routed #transportationPanel .transportation-header-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body.app-routed #transportationPanel .transportation-header-actions button {
  min-height: 35px !important;
  padding: 8px 11px !important;
  white-space: nowrap !important;
}

body.app-routed #transportationPanel > .transportation-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  margin: 0 !important;
}

body.app-routed #transportationPanel .transportation-summary-grid article {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
}

body.app-routed #transportationPanel .transportation-summary-grid :where(span, strong, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #transportationPanel .transportation-summary-grid span {
  color: #3b6c78 !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.app-routed #transportationPanel .transportation-summary-grid strong {
  color: #102f3d !important;
  font-size: 1.08rem !important;
  line-height: 1.2 !important;
}

body.app-routed #transportationPanel .transportation-summary-grid small {
  color: #617985 !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

body.app-routed #transportationPanel > .flight-tracking-card,
body.app-routed #transportationPanel > .transportation-table-section {
  display: grid !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 16px !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header :where(div, h3, p) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header h3 {
  margin: 2px 0 4px !important;
  color: #102f3d !important;
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header p:not(.eyebrow) {
  max-width: 760px !important;
  margin: 0 !important;
  color: #617985 !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}

body.app-routed #transportationPanel .provider-badge {
  flex: 0 0 auto !important;
  padding: 6px 9px !important;
  color: #087082 !important;
  background: #e4f8f5 !important;
  border: 1px solid #c7e9e6 !important;
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body.app-routed #transportationPanel .flight-tracking-form {
  display: grid !important;
  grid-template-columns: minmax(140px, 0.8fr) minmax(150px, 1fr) minmax(140px, 0.8fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .flight-tracking-form label,
body.app-routed #transportationPanel .transportation-table-toolbar label {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  color: #466b78 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

body.app-routed #transportationPanel .flight-tracking-form input,
body.app-routed #transportationPanel .transportation-table-toolbar input,
body.app-routed #transportationPanel .transportation-table-toolbar select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 39px !important;
  padding: 9px 10px !important;
  box-sizing: border-box !important;
  color: #102f3d !important;
  background: #f8fbfc !important;
  border: 1px solid #cfe2e7 !important;
  border-radius: 9px !important;
  font: inherit !important;
}

body.app-routed #transportationPanel .flight-tracking-form button {
  min-height: 40px !important;
  white-space: nowrap !important;
}

body.app-routed #transportationPanel #flightTrackingStatus {
  margin: 0 !important;
  color: #617985 !important;
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
}

body.app-routed #transportationPanel .transportation-table-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) !important;
  gap: 10px !important;
  align-items: end !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .transportation-table-wrap {
  min-width: 0 !important;
  overflow-x: auto !important;
  border: 1px solid #e0edf0 !important;
  border-radius: 11px !important;
}

body.app-routed #transportationPanel .transportation-table {
  min-width: 680px !important;
  color: #102f3d !important;
}

body.app-routed #transportationPanel .transportation-table :where(th, td) {
  min-width: 0 !important;
  padding: 10px 11px !important;
  border-color: #e2edef !important;
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
}

body.app-routed #transportationPanel .transportation-table thead th {
  color: #567481 !important;
  background: #f3f8f8 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
}

body.app-routed #transportationPanel .transportation-table th[scope="row"] strong {
  color: #102f3d !important;
  font-size: 0.86rem !important;
  line-height: 1.25 !important;
}

body.app-routed #transportationPanel .transportation-table th[scope="row"] span {
  color: #087f8c !important;
  font-size: 0.66rem !important;
}

body.app-routed #transportationPanel .transportation-table th[scope="row"] small,
body.app-routed #transportationPanel .transportation-table td {
  color: #617985 !important;
  font-size: 0.74rem !important;
  line-height: 1.3 !important;
}

body.app-routed #transportationPanel .transportation-status {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 4px 7px !important;
  font-size: 0.66rem !important;
  line-height: 1.2 !important;
}

body.app-routed #transportationPanel > .transportation-advanced-details {
  margin: 0 !important;
  background: #f8fbfc !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

body.app-routed #transportationPanel .transportation-advanced-details > summary {
  padding: 12px 14px !important;
  color: #185465 !important;
  font-size: 0.82rem !important;
}

body.app-routed #transportationPanel .transportation-advanced-details[open] > summary {
  border-bottom: 1px solid #dbe9ed !important;
}

body.app-routed #transportationPanel #transportationWorkspaceMount {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 14px !important;
}

@media (max-width: 820px) {
  body.app-routed #transportationPanel > .section-heading,
  body.app-routed #transportationPanel .flight-tracking-card__header {
    display: grid !important;
    align-items: start !important;
  }

  body.app-routed #transportationPanel .transportation-header-actions {
    justify-content: flex-start !important;
  }

  body.app-routed #transportationPanel .flight-tracking-form,
  body.app-routed #transportationPanel .transportation-table-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.app-routed #transportationPanel > .transportation-summary-grid,
  body.app-routed #transportationPanel .flight-tracking-form,
  body.app-routed #transportationPanel .transportation-table-toolbar {
    grid-template-columns: 1fr !important;
  }

  body.app-routed #transportationPanel .transportation-summary-grid article {
    padding: 12px !important;
  }
}

/* Transportation route: keep useful controls as independent widgets, not one large parent card. */
body.app-routed main > #transportationPanel:not([hidden]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.app-routed #transportationPanel > .section-heading {
  padding: 2px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed #transportationPanel > .transportation-summary-grid {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-routed #transportationPanel > .flight-tracking-card,
body.app-routed #transportationPanel > .transportation-table-section {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed #transportationPanel > .flight-tracking-card {
  gap: 10px !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header,
body.app-routed #transportationPanel .flight-tracking-form,
body.app-routed #transportationPanel .flight-tracking-result {
  box-sizing: border-box !important;
  padding: 14px !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.045) !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header,
body.app-routed #transportationPanel .flight-tracking-form {
  margin: 0 !important;
}

body.app-routed #transportationPanel #flightTrackingStatus {
  padding: 0 3px !important;
}

body.app-routed #transportationPanel .transportation-table-toolbar,
body.app-routed #transportationPanel .transportation-table-wrap {
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.045) !important;
}

body.app-routed #transportationPanel .transportation-table-toolbar {
  padding: 12px !important;
}

body.app-routed #transportationPanel .transportation-table-wrap {
  padding: 0 !important;
}

body.app-routed #transportationPanel #transportationTableMessage {
  margin: 0 !important;
  padding: 0 3px !important;
}

body.app-routed #transportationPanel :where(h2, h3, p, span, strong, small, label, th, td, button) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (max-width: 900px) {
  body.app-routed #transportationPanel > .transportation-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  body.app-routed #transportationPanel > .transportation-summary-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-routed #transportationPanel .flight-tracking-card__header,
  body.app-routed #transportationPanel .flight-tracking-form,
  body.app-routed #transportationPanel .flight-tracking-result,
  body.app-routed #transportationPanel .transportation-table-toolbar {
    padding: 12px !important;
  }
}

/* Transportation refresh: a friendly trip hub instead of an admin-style operations page. */
body.app-routed[data-active-route="transportation"] {
  background:
    radial-gradient(circle at 18% 8%, rgba(74, 205, 186, 0.12), transparent 25%),
    radial-gradient(circle at 86% 10%, rgba(255, 153, 119, 0.13), transparent 26%),
    linear-gradient(135deg, #f5fbfb 0%, #fffaf5 55%, #f4f8ff 100%) !important;
}

body.app-routed[data-active-route="transportation"] main > #transportationPanel:not([hidden]) {
  gap: 16px !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel > .section-heading {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 5px 2px 0 !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel > .section-heading .eyebrow {
  color: #0f8c91 !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel > .section-heading h2 {
  color: #173b48 !important;
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  line-height: 1.02 !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel > .section-heading p:not(.eyebrow) {
  max-width: 62ch !important;
  color: #668089 !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-header-actions {
  gap: 8px !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-header-actions button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 13px !important;
  font-size: 0.74rem !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel > .transportation-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-summary-grid article {
  position: relative !important;
  gap: 5px !important;
  min-height: 0 !important;
  padding: 15px 16px 14px !important;
  border: 1px solid rgba(43, 167, 174, 0.15) !important;
  border-top: 4px solid #49c7b4 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.87) !important;
  box-shadow: 0 9px 18px rgba(20, 83, 95, 0.06) !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-summary-grid article:nth-child(2) {
  border-top-color: #ff9876 !important;
  background: linear-gradient(145deg, rgba(255, 239, 220, 0.94), rgba(255, 255, 255, 0.87)) !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-summary-grid article:nth-child(3) {
  border-top-color: #6da7e8 !important;
  background: linear-gradient(145deg, rgba(232, 243, 255, 0.96), rgba(255, 255, 255, 0.87)) !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-summary-grid span {
  color: #3d6f78 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.05em !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-summary-grid strong {
  color: #173b48 !important;
  font-size: 1.28rem !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-summary-grid small {
  color: #6d858b !important;
  font-size: 0.72rem !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel > .flight-tracking-card {
  display: grid !important;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
  grid-template-areas:
    "header form"
    "status status"
    "result result" !important;
  align-items: start !important;
  gap: 10px 12px !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .flight-tracking-card__header {
  grid-area: header !important;
  align-self: stretch !important;
  display: grid !important;
  align-content: start !important;
  padding: 17px !important;
  border: 1px solid rgba(43, 167, 174, 0.15) !important;
  border-top: 4px solid #49c7b4 !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(226, 250, 247, 0.96), rgba(255, 255, 255, 0.9)) !important;
  box-shadow: 0 9px 18px rgba(20, 83, 95, 0.055) !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .flight-tracking-card__header h3 {
  color: #173b48 !important;
  font-size: 1.2rem !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .flight-tracking-card__header p:not(.eyebrow) {
  max-width: 43ch !important;
  color: #648087 !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .flight-tracking-form {
  grid-area: form !important;
  align-self: stretch !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding: 17px !important;
  border: 1px solid rgba(255, 152, 118, 0.2) !important;
  border-top: 4px solid #ff9876 !important;
  border-radius: 18px !important;
  background: rgba(255, 250, 245, 0.94) !important;
  box-shadow: 0 9px 18px rgba(20, 83, 95, 0.055) !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .flight-tracking-form button {
  align-self: end !important;
  min-height: 40px !important;
  border-radius: 13px !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel #flightTrackingStatus {
  grid-area: status !important;
  color: #658087 !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .flight-tracking-result {
  grid-area: result !important;
  border: 1px solid rgba(109, 167, 232, 0.2) !important;
  border-top: 4px solid #6da7e8 !important;
  border-radius: 18px !important;
  background: rgba(244, 248, 255, 0.94) !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel > .transportation-table-section {
  display: grid !important;
  gap: 10px !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table-toolbar {
  padding: 13px !important;
  border: 1px solid rgba(43, 167, 174, 0.15) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table-wrap {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table {
  min-width: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table thead th {
  border: 0 !important;
  background: transparent !important;
  color: #6c858d !important;
  font-size: 0.66rem !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table tbody tr {
  background: #ffffff !important;
  box-shadow: 0 7px 15px rgba(20, 83, 95, 0.055) !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table tbody :where(th, td) {
  border-top: 1px solid rgba(43, 167, 174, 0.12) !important;
  border-bottom: 1px solid rgba(43, 167, 174, 0.12) !important;
  background: #ffffff !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table tbody th:first-child {
  border-left: 1px solid rgba(43, 167, 174, 0.12) !important;
  border-radius: 14px 0 0 14px !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table tbody td:last-child {
  border-right: 1px solid rgba(43, 167, 174, 0.12) !important;
  border-radius: 0 14px 14px 0 !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table tbody tr:hover :where(th, td) {
  background: #f5fcfb !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-advanced-details {
  border: 1px solid rgba(43, 167, 174, 0.15) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-advanced-details > summary {
  color: #32737d !important;
  font-size: 0.8rem !important;
}

@media (max-width: 820px) {
  body.app-routed[data-active-route="transportation"] #transportationPanel > .section-heading,
  body.app-routed[data-active-route="transportation"] #transportationPanel > .flight-tracking-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "header"
      "form"
      "status"
      "result" !important;
  }

  body.app-routed[data-active-route="transportation"] #transportationPanel > .section-heading {
    align-items: start !important;
  }
}

@media (max-width: 620px) {
  body.app-routed[data-active-route="transportation"] #transportationPanel > .transportation-summary-grid,
  body.app-routed[data-active-route="transportation"] #transportationPanel .flight-tracking-form,
  body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table-toolbar {
    grid-template-columns: 1fr !important;
  }

  body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table-wrap {
    overflow-x: auto !important;
  }

  body.app-routed[data-active-route="transportation"] #transportationPanel .transportation-table {
    min-width: 640px !important;
  }
}

/* Home dashboard refresh: make the first screen travel-first, warm, and easy to scan. */
body.app-routed[data-active-route="dashboardHome"] {
  background:
    radial-gradient(circle at 16% 6%, rgba(45, 211, 190, 0.12), transparent 25%),
    radial-gradient(circle at 88% 12%, rgba(255, 149, 108, 0.14), transparent 26%),
    linear-gradient(135deg, #f5fbfb 0%, #fffaf6 54%, #f4f8ff 100%) !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .pwa-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 12px 15px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(43, 167, 174, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(20, 83, 95, 0.06) !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .pwa-panel :where(h2, p) {
  margin: 0 !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .pwa-panel h2 {
  color: #174650 !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .pwa-panel p:not(.eyebrow) {
  margin-top: 3px !important;
  color: #68818a !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}

body.app-routed[data-active-route="dashboardHome"] main > #dashboardHome {
  min-height: clamp(360px, 38vw, 490px) !important;
  height: clamp(360px, 38vw, 490px) !important;
  margin-bottom: 14px !important;
  border-radius: 28px !important;
  box-shadow: 0 22px 55px rgba(25, 77, 92, 0.16) !important;
}

body.app-routed[data-active-route="dashboardHome"] #dashboardHome .hero-copy {
  width: min(620px, 68%) !important;
  padding: clamp(24px, 4vw, 40px) !important;
}

body.app-routed[data-active-route="dashboardHome"] #dashboardHome h1 {
  max-width: 10ch !important;
  font-size: clamp(2.25rem, 5vw, 4.4rem) !important;
  line-height: 0.98 !important;
}

body.app-routed[data-active-route="dashboardHome"] #dashboardHome .destination-banner-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  max-width: 620px !important;
  margin: 15px 0 17px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body.app-routed[data-active-route="dashboardHome"] #dashboardHome .destination-banner-meta span,
body.app-routed[data-active-route="dashboardHome"] #dashboardHome .destination-banner-meta span:nth-child(even) {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(7, 28, 38, 0.38) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.7rem !important;
  line-height: 1.25 !important;
  backdrop-filter: blur(8px) !important;
}

body.app-routed[data-active-route="dashboardHome"] #dashboardHome .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

body.app-routed[data-active-route="dashboardHome"] #dashboardHome .hero-actions button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 13px !important;
  font-size: 0.75rem !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .trip-tab-bar {
  position: static !important;
  gap: 6px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .trip-tab-bar > button {
  min-height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(43, 167, 174, 0.16) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #57717a !important;
  box-shadow: 0 5px 12px rgba(20, 83, 95, 0.045) !important;
  font-size: 0.73rem !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .trip-tab-bar > button.active,
body.app-routed[data-active-route="dashboardHome"] main > .trip-tab-bar > button:hover {
  border-color: transparent !important;
  background: linear-gradient(135deg, #9ef1dc, #ffd39a) !important;
  color: #174650 !important;
  box-shadow: 0 7px 15px rgba(20, 83, 95, 0.12) !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .destination-insights,
body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets {
  display: grid !important;
  gap: 14px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .section-heading,
body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets > .section-heading {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 2px !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .section-heading h2,
body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets > .section-heading h2 {
  color: #173b48 !important;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem) !important;
  line-height: 1.1 !important;
}

body.app-routed[data-active-route="dashboardHome"] .destination-fact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.app-routed[data-active-route="dashboardHome"] .destination-fact-grid article {
  min-height: 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(43, 167, 174, 0.14) !important;
  border-top: 4px solid #49c7b4 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 9px 20px rgba(20, 83, 95, 0.06) !important;
}

body.app-routed[data-active-route="dashboardHome"] .destination-fact-grid article:nth-child(2) {
  border-top-color: #ff9876 !important;
}

body.app-routed[data-active-route="dashboardHome"] .destination-fact-grid article:nth-child(3) {
  border-top-color: #f4c858 !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .metrics,
body.app-routed[data-active-route="dashboardHome"] main > .travel-social-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .metrics > *,
body.app-routed[data-active-route="dashboardHome"] main > .travel-social-strip > * {
  min-height: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(43, 167, 174, 0.13) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 8px 17px rgba(20, 83, 95, 0.055) !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .metrics > *:nth-child(2),
body.app-routed[data-active-route="dashboardHome"] main > .travel-social-strip > *:nth-child(2) {
  background: linear-gradient(145deg, rgba(226, 250, 247, 0.96), rgba(255, 255, 255, 0.84)) !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .metrics > *:nth-child(3),
body.app-routed[data-active-route="dashboardHome"] main > .travel-social-strip > *:nth-child(3) {
  background: linear-gradient(145deg, rgba(255, 239, 218, 0.96), rgba(255, 255, 255, 0.84)) !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .metrics strong {
  color: #173b48 !important;
  font-size: 1.55rem !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .travel-social-strip span {
  font-size: 1.35rem !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets > .widget-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid > .travel-widget {
  position: relative !important;
  min-height: 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(43, 167, 174, 0.14) !important;
  border-radius: 19px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 9px 20px rgba(20, 83, 95, 0.06) !important;
  overflow: hidden !important;
}

body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid > .travel-widget::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: #49c7b4;
}

body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid > .travel-widget:nth-child(2)::before {
  background: #ff9876;
}

body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid > .travel-widget:nth-child(3)::before {
  background: #f4c858;
}

body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid > .travel-widget:nth-child(4)::before {
  background: #6da7e8;
}

body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid > .travel-widget:nth-child(5)::before {
  background: #55b9da;
}

body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid > .travel-widget:nth-child(6)::before {
  background: #e99dc6;
}

body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid > .travel-widget.is-large {
  grid-column: span 2 !important;
}

body.app-routed[data-active-route="dashboardHome"] .widget-toolbar {
  padding-top: 3px !important;
}

body.app-routed[data-active-route="dashboardHome"] .widget-toolbar > span {
  color: #3f6873 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

body.app-routed[data-active-route="dashboardHome"] .widget-toolbar > button {
  min-height: 27px !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(43, 167, 174, 0.14) !important;
  border-radius: 999px !important;
  background: #f7fbfb !important;
  color: #5a7880 !important;
  font-size: 0.64rem !important;
}

@media (max-width: 1000px) {
  body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid,
  body.app-routed[data-active-route="dashboardHome"] main > .metrics,
  body.app-routed[data-active-route="dashboardHome"] main > .travel-social-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid > .travel-widget.is-large {
    grid-column: span 2 !important;
  }

  body.app-routed[data-active-route="dashboardHome"] #dashboardHome .hero-copy {
    width: min(680px, 80%) !important;
  }
}

@media (max-width: 760px) {
  body.app-routed[data-active-route="dashboardHome"] main > .pwa-panel {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .section-heading,
  body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets > .section-heading {
    align-items: start !important;
    flex-direction: column !important;
  }

  body.app-routed[data-active-route="dashboardHome"] .destination-fact-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-routed[data-active-route="dashboardHome"] #dashboardHome .hero-copy {
    width: 100% !important;
    padding: 24px !important;
  }

  body.app-routed[data-active-route="dashboardHome"] #dashboardHome h1 {
    max-width: 12ch !important;
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
  }
}

@media (max-width: 560px) {
  body.app-routed[data-active-route="dashboardHome"] main > .metrics,
  body.app-routed[data-active-route="dashboardHome"] main > .travel-social-strip,
  body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-routed[data-active-route="dashboardHome"] main > .dashboard-widgets .widget-grid > .travel-widget.is-large {
    grid-column: auto !important;
  }

  body.app-routed[data-active-route="dashboardHome"] main > #dashboardHome {
    min-height: 430px !important;
    height: 430px !important;
  }

  body.app-routed[data-active-route="dashboardHome"] #dashboardHome .destination-banner-meta {
    max-height: 72px !important;
    overflow: hidden !important;
  }
}

/* Social Travel + Chat refresh: photo-led discovery and lively trip conversations. */
body.app-routed[data-active-route="rideShareHub"],
body.app-routed[data-active-route="socialHub"] {
  background:
    radial-gradient(circle at 14% 8%, rgba(71, 204, 188, 0.12), transparent 25%),
    radial-gradient(circle at 88% 8%, rgba(255, 151, 108, 0.14), transparent 26%),
    linear-gradient(135deg, #f5fbfb 0%, #fffaf6 54%, #f4f8ff 100%) !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub,
body.app-routed[data-active-route="socialHub"] #socialHub {
  display: grid !important;
  gap: 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .section-heading,
body.app-routed[data-active-route="socialHub"] #socialHub > .section-heading {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 4px 2px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .section-heading h2,
body.app-routed[data-active-route="socialHub"] #socialHub > .section-heading h2 {
  color: #173b48 !important;
  font-size: clamp(1.55rem, 3vw, 2.35rem) !important;
  line-height: 1.04 !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .section-heading p:not(.eyebrow),
body.app-routed[data-active-route="socialHub"] #socialHub > .section-heading p:not(.eyebrow) {
  max-width: 62ch !important;
  color: #668089 !important;
  font-size: 0.83rem !important;
  line-height: 1.45 !important;
}

/* Travel reads like a destination discovery feed. */
body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-smart-search {
  margin: 0 !important;
  padding: 17px !important;
  border: 1px solid rgba(43, 167, 174, 0.15) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 12px 26px rgba(20, 83, 95, 0.07) !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-smart-search-head h3 {
  color: #173b48 !important;
  font-size: 1.15rem !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-smart-search-row {
  min-height: 50px !important;
  border: 1px solid rgba(43, 167, 174, 0.19) !important;
  border-radius: 17px !important;
  background: #f7fbfb !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-search-suggestions button,
body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-quick-actions button {
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #37717b !important;
  border-color: rgba(43, 167, 174, 0.15) !important;
  font-size: 0.72rem !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-command-header {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-command-header > article,
body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-command-actions {
  grid-column: auto !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(43, 167, 174, 0.13) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 8px 17px rgba(20, 83, 95, 0.05) !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-command-header > .travel-command-trip {
  grid-column: auto !important;
  border-top: 4px solid #49c7b4 !important;
  background: linear-gradient(145deg, rgba(226, 250, 247, 0.96), rgba(255, 255, 255, 0.84)) !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-command-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-command-actions button {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #37717b !important;
  font-size: 0.7rem !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell {
  grid-template-columns: minmax(190px, 0.7fr) minmax(0, 2.3fr) !important;
  gap: 20px !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-sidebar {
  position: sticky !important;
  top: 112px !important;
  display: grid !important;
  gap: 11px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-current-trip-card {
  display: grid !important;
  gap: 9px !important;
  overflow: hidden !important;
  border: 1px solid rgba(43, 167, 174, 0.15) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 9px 20px rgba(20, 83, 95, 0.06) !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-current-trip-card img {
  height: 112px !important;
  border-radius: 16px 16px 0 0 !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav {
  display: grid !important;
  gap: 7px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav details,
body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav > button {
  border: 1px solid rgba(43, 167, 174, 0.13) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav summary {
  color: #47707a !important;
  font-size: 0.72rem !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav button.active,
body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-nav button:hover {
  border-color: transparent !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #9ef1dc, #ffd39a) !important;
  color: #174650 !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-main {
  min-width: 0 !important;
  padding: 0 !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel.active {
  display: grid !important;
  gap: 15px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 2px 2px 13px !important;
  border-bottom: 1px solid rgba(43, 167, 174, 0.13) !important;
  background: transparent !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-icon {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, #9ef1dc, #ffd39a) !important;
  font-size: 1.45rem !important;
  box-shadow: 0 8px 15px rgba(20, 83, 95, 0.09) !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-header h3 {
  color: #173b48 !important;
  font-size: 1.18rem !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-header p:not(.eyebrow) {
  color: #6a838a !important;
  font-size: 0.78rem !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-header > button {
  min-height: 36px !important;
  padding: 8px 11px !important;
  border-radius: 12px !important;
  font-size: 0.72rem !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-discovery-feed {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 12px !important;
  align-items: start !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-discovery-feed > .travel-feed-card {
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(43, 167, 174, 0.14) !important;
  border-radius: 21px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(20, 83, 95, 0.065) !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card img {
  display: block !important;
  width: 100% !important;
  height: 132px !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card--hotel,
body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card--activity {
  grid-column: span 2 !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card--hotel img {
  height: 186px !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card--activity img {
  height: 160px !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card__body {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 13px !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card__body span {
  color: #0f8c91 !important;
  font-size: 0.67rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card__body strong {
  color: #173b48 !important;
  font-size: 1rem !important;
  line-height: 1.16 !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card__body small {
  color: #6a838a !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card__body button {
  justify-self: start !important;
  min-height: 31px !important;
  margin-top: 3px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(43, 167, 174, 0.17) !important;
  border-radius: 999px !important;
  background: #f0fbfa !important;
  color: #26717a !important;
  font-size: 0.68rem !important;
}

/* Chat becomes a conversation feed with photo-led threads and message bubbles. */
body.app-routed[data-active-route="socialHub"] #socialHub > .messages-hub {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .message-search-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 13px !important;
  border: 1px solid rgba(43, 167, 174, 0.14) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 9px 20px rgba(20, 83, 95, 0.055) !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .message-search-row label {
  color: #47707a !important;
  font-size: 0.72rem !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .message-search-row input {
  min-height: 43px !important;
  border-radius: 14px !important;
  background: #f7fbfb !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-vibe-strip {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
  border: 1px solid rgba(255, 151, 108, 0.2) !important;
  border-radius: 23px !important;
  background: linear-gradient(135deg, rgba(255, 239, 220, 0.96), rgba(226, 250, 247, 0.94)) !important;
  box-shadow: 0 10px 22px rgba(20, 83, 95, 0.055) !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-vibe-copy strong {
  color: #173b48 !important;
  font-size: 1.02rem !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-vibe-copy span {
  color: #668089 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-vibe-actions {
  justify-content: end !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-vibe-actions button {
  border-color: rgba(43, 167, 174, 0.16) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #37717b !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .message-tabs {
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .message-tabs button {
  min-height: 37px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(43, 167, 174, 0.15) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  color: #57717a !important;
  font-size: 0.72rem !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .message-tabs button.active {
  border-color: transparent !important;
  background: linear-gradient(135deg, #9ef1dc, #ffd39a) !important;
  color: #174650 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .messages-layout {
  grid-template-columns: minmax(200px, 0.78fr) minmax(0, 1.65fr) minmax(190px, 0.78fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .conversation-list {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .conversation-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 9px !important;
  border: 1px solid rgba(43, 167, 174, 0.13) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  color: #173b48 !important;
  text-align: left !important;
  box-shadow: 0 7px 15px rgba(20, 83, 95, 0.045) !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .conversation-card.active,
body.app-routed[data-active-route="socialHub"] #socialHub .conversation-card:hover {
  border-color: rgba(43, 167, 174, 0.3) !important;
  background: linear-gradient(145deg, rgba(226, 250, 247, 0.96), #ffffff) !important;
  transform: translateY(-1px) !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .conversation-card img,
body.app-routed[data-active-route="socialHub"] #socialHub .message-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .conversation-card .message-avatar {
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(145deg, #9ef1dc, #ffd39a) !important;
  color: #174650 !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .conversation-card > span:not(.message-avatar) {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .conversation-card strong {
  color: #173b48 !important;
  font-size: 0.76rem !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .conversation-card small,
body.app-routed[data-active-route="socialHub"] #socialHub .conversation-card em {
  display: block !important;
  color: #71878d !important;
  font-size: 0.65rem !important;
  line-height: 1.3 !important;
  font-style: normal !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .conversation-card > em {
  grid-column: 2 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-workspace,
body.app-routed[data-active-route="socialHub"] #socialHub .conversation-details-panel {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(43, 167, 174, 0.14) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 10px 22px rgba(20, 83, 95, 0.06) !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-header {
  padding-bottom: 11px !important;
  border-bottom: 1px solid rgba(43, 167, 174, 0.12) !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-header h3 {
  color: #173b48 !important;
  font-size: 1.15rem !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-header span {
  color: #6b8389 !important;
  font-size: 0.7rem !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .pinned-message {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 10px !important;
  border: 1px solid rgba(244, 200, 88, 0.35) !important;
  border-radius: 15px !important;
  background: #fff8df !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .pinned-message span {
  color: #6b7270 !important;
  font-size: 0.7rem !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .modern-messages {
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
  min-height: 270px !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #f5f9f9 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .modern-messages .msg {
  justify-self: start !important;
  max-width: min(86%, 520px) !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(43, 167, 174, 0.12) !important;
  border-radius: 16px 16px 16px 5px !important;
  background: #ffffff !important;
  color: #41636d !important;
  font-size: 0.77rem !important;
  line-height: 1.4 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .modern-messages .msg:nth-child(2n) {
  justify-self: end !important;
  border-radius: 16px 16px 5px 16px !important;
  background: #e4f8f4 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .modern-messages .ai-msg {
  border-color: rgba(255, 151, 108, 0.18) !important;
  background: #fff0e6 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-tool-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 2px 0 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-tool-row button,
body.app-routed[data-active-route="socialHub"] #socialHub .chat-detail-actions button {
  min-height: 30px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(43, 167, 174, 0.15) !important;
  border-radius: 999px !important;
  background: #f7fbfb !important;
  color: #37717b !important;
  font-size: 0.66rem !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 7px !important;
  padding: 5px !important;
  border: 1px solid rgba(43, 167, 174, 0.15) !important;
  border-radius: 16px !important;
  background: #f5f9f9 !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-form input {
  min-width: 0 !important;
  min-height: 38px !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .chat-form button {
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 12px !important;
  font-size: 0.72rem !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .conversation-details-panel {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  background: rgba(255, 255, 255, 0.74) !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .message-support-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.app-routed[data-active-route="socialHub"] #socialHub .message-support-grid article {
  min-height: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(43, 167, 174, 0.13) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 8px 17px rgba(20, 83, 95, 0.05) !important;
}

@media (max-width: 1100px) {
  body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell {
    grid-template-columns: minmax(175px, 0.7fr) minmax(0, 2.3fr) !important;
  }

  body.app-routed[data-active-route="socialHub"] #socialHub .messages-layout {
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.8fr) !important;
  }

  body.app-routed[data-active-route="socialHub"] #socialHub .conversation-details-panel {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 820px) {
  body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-command-header,
  body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-discovery-feed,
  body.app-routed[data-active-route="socialHub"] #socialHub .chat-vibe-strip,
  body.app-routed[data-active-route="socialHub"] #socialHub .message-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-command-trip,
  body.app-routed[data-active-route="socialHub"] #socialHub .chat-vibe-copy {
    grid-column: 1 / -1 !important;
  }

  body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell,
  body.app-routed[data-active-route="socialHub"] #socialHub .messages-layout {
    grid-template-columns: 1fr !important;
  }

  body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-settings-sidebar {
    position: static !important;
  }

  body.app-routed[data-active-route="socialHub"] #socialHub .conversation-details-panel {
    grid-column: auto !important;
  }
}

@media (max-width: 560px) {
  body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-command-header,
  body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-discovery-feed,
  body.app-routed[data-active-route="socialHub"] #socialHub .message-search-row,
  body.app-routed[data-active-route="socialHub"] #socialHub .chat-vibe-strip,
  body.app-routed[data-active-route="socialHub"] #socialHub .message-support-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card--hotel,
  body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card--activity {
    grid-column: auto !important;
  }

  body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-header > button {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  body.app-routed[data-active-route="socialHub"] #socialHub .chat-vibe-copy,
  body.app-routed[data-active-route="socialHub"] #socialHub .chat-vibe-actions {
    grid-column: auto !important;
  }
}

/* Direct route fallback: keep the social layouts visible on file previews and refreshed hash links. */
body[data-active-route="rideShareHub"] #rideShareHub,
body[data-active-route="socialHub"] #socialHub {
  display: grid !important;
  gap: 18px !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body[data-active-route="rideShareHub"] #rideShareHub .travel-discovery-feed {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 12px !important;
  align-items: start !important;
}

body[data-active-route="rideShareHub"] #rideShareHub .travel-discovery-feed > .travel-feed-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 21px !important;
}

body[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card img {
  display: block !important;
  width: 100% !important;
  height: 132px !important;
  object-fit: cover !important;
}

body[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card--hotel,
body[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card--activity {
  grid-column: span 2 !important;
}

body[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card__body {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 13px !important;
}

body[data-active-route="socialHub"] #socialHub .messages-layout {
  display: grid !important;
  grid-template-columns: minmax(200px, 0.78fr) minmax(0, 1.65fr) minmax(190px, 0.78fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

body[data-active-route="socialHub"] #socialHub .conversation-list {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body[data-active-route="socialHub"] #socialHub .conversation-card,
body[data-active-route="socialHub"] #socialHub .chat-workspace,
body[data-active-route="socialHub"] #socialHub .conversation-details-panel {
  min-width: 0 !important;
  border-radius: 20px !important;
}

body[data-active-route="socialHub"] #socialHub .conversation-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 9px !important;
}

body[data-active-route="socialHub"] #socialHub .modern-messages {
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
  min-height: 270px !important;
}

body[data-active-route="socialHub"] #socialHub .modern-messages .msg {
  max-width: min(86%, 520px) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 820px) {
  body[data-active-route="rideShareHub"] #rideShareHub .travel-discovery-feed,
  body[data-active-route="socialHub"] #socialHub .messages-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-active-route="socialHub"] #socialHub .messages-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  body[data-active-route="rideShareHub"] #rideShareHub .travel-discovery-feed,
  body[data-active-route="socialHub"] #socialHub .messages-layout {
    grid-template-columns: 1fr !important;
  }

  body[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card--hotel,
  body[data-active-route="rideShareHub"] #rideShareHub .travel-feed-card--activity {
    grid-column: auto !important;
  }
}

/* Destination insights: the section is one full-width band; only its three cards form the row. */
body.app-routed main > .destination-insights,
body[data-active-route="dashboardHome"] main > .destination-insights {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.app-routed main > .destination-insights > .destination-fact-grid,
body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

body.app-routed main > .destination-insights > .destination-fact-grid > article,
body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article {
  min-width: 0 !important;
  height: auto !important;
  align-self: stretch !important;
}

@media (max-width: 760px) {
  body.app-routed main > .destination-insights > .destination-fact-grid,
  body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-routed main > .destination-insights > .destination-fact-grid > article:last-child,
  body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 520px) {
  body.app-routed main > .destination-insights > .destination-fact-grid,
  body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-routed main > .destination-insights > .destination-fact-grid > article:last-child,
  body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article:last-child {
    grid-column: auto !important;
  }
}

/* Final transportation dropdown cascade: keep expandable records above legacy table rules. */
/* Route isolation hard stop: author display rules must never revive a hidden tab. */
body.app-routed [data-route-component][hidden],
body.app-routed [data-route-support][hidden],
body.app-routed main > .main-stack > #rideShareHub[hidden],
body.app-routed main > .main-stack > #transportationPanel[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-active-route="transportationPanel"] #rideShareHub {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-active-route="rideShareHub"] #transportationPanel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-wrap,
body.app-routed #transportationPanel .transportation-table-wrap {
  overflow: visible !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-table,
body.app-routed #transportationPanel .transportation-table {
  display: block !important;
  width: 100% !important;
  border-collapse: separate !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-table thead,
body.app-routed #transportationPanel .transportation-table thead {
  display: none !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-table tbody,
body.app-routed #transportationPanel .transportation-table tbody {
  display: grid !important;
  gap: 10px !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-table tbody tr.transportation-record-row,
body.app-routed #transportationPanel .transportation-table tbody tr.transportation-record-row {
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-table tbody tr.transportation-record-row > td,
body.app-routed #transportationPanel .transportation-table tbody tr.transportation-record-row > td {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown,
body.app-routed #transportationPanel .transportation-record-dropdown {
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(43, 167, 174, 0.16) !important;
  border-radius: 17px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(20, 83, 95, 0.055) !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary,
body.app-routed #transportationPanel .transportation-record-dropdown > summary {
  display: grid !important;
  grid-template-columns: minmax(90px, 0.5fr) minmax(180px, 1.4fr) minmax(150px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 68px !important;
  padding: 12px 15px !important;
  cursor: pointer !important;
  list-style: none !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary::-webkit-details-marker,
body.app-routed #transportationPanel .transportation-record-dropdown > summary::-webkit-details-marker {
  display: none !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary::after,
body.app-routed #transportationPanel .transportation-record-dropdown > summary::after {
  content: "+" !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #e8f8f6 !important;
  color: #147d80 !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown[open] > summary::after,
body.app-routed #transportationPanel .transportation-record-dropdown[open] > summary::after {
  content: "−" !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown summary strong,
body.app-routed #transportationPanel .transportation-record-dropdown summary strong {
  min-width: 0 !important;
  color: #173b48 !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown summary small,
body.app-routed #transportationPanel .transportation-record-dropdown summary small {
  min-width: 0 !important;
  color: #6b8389 !important;
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details,
body.app-routed #transportationPanel .transportation-record-details {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 0 15px 13px !important;
  border-top: 1px solid rgba(43, 167, 174, 0.11) !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details > div,
body.app-routed #transportationPanel .transportation-record-details > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  padding-top: 10px !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details > div span,
body.app-routed #transportationPanel .transportation-record-details > div span {
  color: #6b8389 !important;
  font-size: 0.65rem !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details > div strong,
body.app-routed #transportationPanel .transportation-record-details > div strong {
  min-width: 0 !important;
  color: #173b48 !important;
  font-size: 0.76rem !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details button,
body.app-routed #transportationPanel .transportation-record-details button {
  align-self: end !important;
  min-height: 32px !important;
  padding: 7px 10px !important;
  border-radius: 11px !important;
  color: #27717a !important;
  font-size: 0.68rem !important;
}

@media (max-width: 760px) {
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary,
  body.app-routed #transportationPanel .transportation-record-dropdown > summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown summary small,
  body.app-routed #transportationPanel .transportation-record-dropdown summary small {
    grid-column: 1 / -1 !important;
  }

  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details,
  body.app-routed #transportationPanel .transportation-record-details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details,
  body.app-routed #transportationPanel .transportation-record-details {
    grid-template-columns: 1fr !important;
  }

  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details button,
  body.app-routed #transportationPanel .transportation-record-details button {
    justify-self: start !important;
  }
}

/* Wallet and Smart Bill Split: focused single-column route layouts. */
body.app-routed main > #walletPanel:not([hidden]),
body.app-routed main > .main-stack > #walletPanel:not([hidden]),
body.app-routed main > #splitBill:not([hidden]),
body.app-routed main > .main-stack > #splitBill:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(14px, 2vw, 24px) !important;
  overflow: visible !important;
}

body.app-routed main > #walletPanel:not([hidden]) > *,
body.app-routed main > .main-stack > #walletPanel:not([hidden]) > *,
body.app-routed main > #splitBill:not([hidden]) > *,
body.app-routed main > .main-stack > #splitBill:not([hidden]) > * {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed main > #walletPanel:not([hidden]) > .section-heading,
body.app-routed main > .main-stack > #walletPanel:not([hidden]) > .section-heading,
body.app-routed main > #splitBill:not([hidden]) > .section-heading,
body.app-routed main > .main-stack > #splitBill:not([hidden]) > .section-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: clamp(16px, 2vw, 22px) !important;
  border-radius: 20px !important;
}

/* Wallet home: one clear hero, a compact metrics row, then actionable cards. */
body.app-routed #walletPanel .wallet-dashboard-header {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.app-routed #walletPanel .wallet-dashboard-header > article {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 112px !important;
  padding: 16px !important;
  border: 1px solid rgba(14, 116, 144, 0.14) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
}

body.app-routed #walletPanel .wallet-dashboard-header > article:first-child {
  grid-column: span 2 !important;
  background: linear-gradient(135deg, #062f3a, #087f8c) !important;
}

body.app-routed #walletPanel .wallet-dashboard-header :where(span, strong, small) {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.app-routed #walletPanel .wallet-dashboard-header span {
  color: #46717c !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body.app-routed #walletPanel .wallet-dashboard-header strong {
  color: #102f3d !important;
  font-size: clamp(1.15rem, 2vw, 1.7rem) !important;
  line-height: 1.1 !important;
}

body.app-routed #walletPanel .wallet-dashboard-header small {
  color: #617985 !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

body.app-routed #walletPanel .wallet-dashboard-header > article:first-child :where(span, strong, small) {
  color: #ffffff !important;
}

body.app-routed #walletPanel .wallet-smart-actions,
body.app-routed #walletPanel .wallet-quick-actions-redesign {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
}

body.app-routed #walletPanel .wallet-smart-actions button,
body.app-routed #walletPanel .wallet-quick-actions-redesign button {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 9px 14px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

body.app-routed #walletPanel .wallet-redesign-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed #walletPanel .wallet-redesign-shell > * {
  grid-column: 1 / -1 !important;
}

body.app-routed #walletPanel .wallet-section-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 7px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(14, 116, 144, 0.12) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
}

body.app-routed #walletPanel .wallet-section-nav button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

body.app-routed #walletPanel .wallet-home-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.app-routed #walletPanel .wallet-home-grid > * {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

body.app-routed #walletPanel .wallet-home-grid > .wallet-balance-hero {
  grid-column: span 2 !important;
  min-height: 152px !important;
  padding: 20px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #062f3a, #087f8c) !important;
}

body.app-routed #walletPanel .wallet-home-grid > .wallet-summary-card {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  min-height: 104px !important;
  padding: 16px !important;
  border-radius: 16px !important;
}

body.app-routed #walletPanel .wallet-home-grid :where(span, strong, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr) !important;
  align-items: stretch !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid > * {
  min-width: 0 !important;
  height: auto !important;
  min-height: 118px !important;
}

body.app-routed #walletPanel .wallet-trip-card-grid :where(span, strong, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 150px !important;
  height: auto !important;
  padding: 16px !important;
  border-radius: 16px !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview {
  grid-column: span 2 !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections :where(p, strong, small, span, button) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections .wallet-metric-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections .wallet-metric-list > div {
  min-width: 0 !important;
  padding: 9px !important;
  border-radius: 11px !important;
  background: rgba(236, 248, 249, 0.72) !important;
}

body.app-routed #walletPanel .wallet-dashboard-sections .wallet-metric-list :where(span, strong, small) {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* This is an older duplicate navigation card grid; the dashboard cards above are the single source of truth. */
body.app-routed #walletPanel .wallet-section-card-grid {
  display: none !important;
}

body.app-routed #walletPanel > .wallet-operations-panel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed #walletPanel > .wallet-operations-panel > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #walletPanel > .wallet-operations-panel > :where(.trip-wallet-card, .security-note, .wallet-breakdown, .wallet-action-grid, .range-wrap, #walletMessage, .wallet-ledger-meta, .shared-wallet-ledger, .wallet-notification-status, .wallet-notification-list, .budget-line, .bar) {
  grid-column: 1 / -1 !important;
}

body.app-routed #walletPanel > .wallet-operations-panel .wallet-breakdown {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.app-routed #walletPanel > .wallet-operations-panel .wallet-breakdown > div {
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 12px !important;
  background: #f3fafb !important;
}

body.app-routed #walletPanel > .wallet-operations-panel .wallet-action-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.app-routed #walletPanel > .wallet-operations-panel .wallet-action-grid button {
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 14px !important;
  text-align: left !important;
  white-space: normal !important;
}

body.app-routed #walletPanel > .wallet-operations-panel :where(span, strong, small, p, label) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Bill split: guide the user from receipt intake to an itemized payment decision. */
body.app-routed #splitBill .split-bill-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  align-items: center !important;
  gap: 18px !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  border-radius: 20px !important;
}

body.app-routed #splitBill .split-bill-hero h2 {
  max-width: 760px !important;
  font-size: clamp(1.7rem, 3vw, 2.7rem) !important;
  line-height: 1.08 !important;
}

body.app-routed #splitBill .bill-flow-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.app-routed #splitBill .bill-flow-strip > div {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

body.app-routed #splitBill .bill-flow-strip span,
body.app-routed #splitBill :where(h2, h3, p, span, strong, small, label, button) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.app-routed #splitBill .bill-redesign-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr) !important;
  align-items: start !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.app-routed #splitBill .bill-main-column,
body.app-routed #splitBill .bill-side-column {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.app-routed #splitBill .bill-side-column {
  position: sticky !important;
  top: 16px !important;
}

body.app-routed #splitBill .receipt-command-card {
  display: grid !important;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 16px !important;
}

body.app-routed #splitBill .receipt-intake {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.app-routed #splitBill .receipt-intake button,
body.app-routed #splitBill .payment-method-grid button {
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  white-space: normal !important;
}

body.app-routed #splitBill .receipt-summary,
body.app-routed #splitBill .bill-entry-grid,
body.app-routed #splitBill .receipt-workspace,
body.app-routed #splitBill .bill-tools-grid,
body.app-routed #splitBill .payment-method-grid,
body.app-routed #splitBill .corporate-meal-rules {
  min-width: 0 !important;
}

body.app-routed #splitBill .bill-entry-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

body.app-routed #splitBill .bill-entry-grid label {
  min-width: 0 !important;
  padding: 10px !important;
  border-radius: 12px !important;
}

body.app-routed #splitBill .bill-entry-grid input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
}

body.app-routed #splitBill .split-mode-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 6px !important;
}

body.app-routed #splitBill .split-mode-tabs button {
  flex: 1 1 120px !important;
  min-width: 0 !important;
  min-height: 38px !important;
  white-space: nowrap !important;
}

body.app-routed #splitBill .receipt-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(250px, 0.72fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

body.app-routed #splitBill .receipt-items-panel,
body.app-routed #splitBill .payment-status-panel,
body.app-routed #splitBill .receipt-history-panel,
body.app-routed #splitBill .bill-tools-grid > div,
body.app-routed #splitBill .bill-total-grid > div {
  min-width: 0 !important;
  padding: 14px !important;
  border-radius: 16px !important;
}

body.app-routed #splitBill .receipt-item-list {
  display: grid !important;
  gap: 9px !important;
  min-width: 0 !important;
}

body.app-routed #splitBill .receipt-item-list article {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr) !important;
  align-items: start !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

body.app-routed #splitBill .receipt-claim-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.app-routed #splitBill .receipt-claim-grid label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 7px 9px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #splitBill .receipt-claim-grid label input {
  flex: 0 0 auto !important;
}

body.app-routed #splitBill .receipt-claim-grid label:not(:has(input)) {
  display: block !important;
}

body.app-routed #splitBill .bill-total-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.app-routed #splitBill .bill-total-grid > div {
  display: grid !important;
  align-content: start !important;
  gap: 4px !important;
}

body.app-routed #splitBill .bill-total-grid strong {
  font-size: clamp(1.25rem, 2.4vw, 1.8rem) !important;
  line-height: 1.1 !important;
}

body.app-routed #splitBill .split-preview {
  display: grid !important;
  gap: 8px !important;
  max-height: 390px !important;
  min-width: 0 !important;
  padding-right: 2px !important;
  overflow: auto !important;
}

body.app-routed #splitBill .split-preview > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 3px 8px !important;
  min-width: 0 !important;
  padding: 11px !important;
  border-radius: 14px !important;
}

body.app-routed #splitBill .split-preview :where(strong, span, small, b) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #splitBill .bill-tools-grid,
body.app-routed #splitBill .payment-method-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

body.app-routed #splitBill .bill-tools-grid > div {
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
}

body.app-routed #splitBill .payment-method-grid button:first-child {
  grid-column: 1 / -1 !important;
}

body.app-routed #splitBill .corporate-meal-rules {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.app-routed #splitBill .corporate-meal-rules > div {
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

@media (max-width: 1120px) {
  body.app-routed #walletPanel .wallet-dashboard-header,
  body.app-routed #walletPanel .wallet-home-grid,
  body.app-routed #walletPanel .wallet-dashboard-sections,
  body.app-routed #walletPanel > .wallet-operations-panel .wallet-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-routed #walletPanel .wallet-dashboard-header > article:first-child,
  body.app-routed #walletPanel .wallet-home-grid > .wallet-balance-hero,
  body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview {
    grid-column: 1 / -1 !important;
  }

  body.app-routed #splitBill .bill-redesign-grid,
  body.app-routed #splitBill .receipt-workspace {
    grid-template-columns: 1fr !important;
  }

  body.app-routed #splitBill .bill-side-column {
    position: static !important;
  }
}

@media (max-width: 760px) {
  body.app-routed main > #walletPanel:not([hidden]) > .section-heading,
  body.app-routed main > .main-stack > #walletPanel:not([hidden]) > .section-heading,
  body.app-routed main > #splitBill:not([hidden]) > .section-heading,
  body.app-routed main > .main-stack > #splitBill:not([hidden]) > .section-heading,
  body.app-routed #splitBill .split-bill-hero,
  body.app-routed #splitBill .receipt-command-card {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  body.app-routed #walletPanel .wallet-dashboard-header,
  body.app-routed #walletPanel .wallet-home-grid,
  body.app-routed #walletPanel .wallet-trip-card-grid,
  body.app-routed #walletPanel .wallet-dashboard-sections,
  body.app-routed #walletPanel > .wallet-operations-panel,
  body.app-routed #walletPanel > .wallet-operations-panel .wallet-breakdown,
  body.app-routed #walletPanel > .wallet-operations-panel .wallet-action-grid,
  body.app-routed #splitBill .bill-entry-grid,
  body.app-routed #splitBill .bill-total-grid,
  body.app-routed #splitBill .bill-tools-grid,
  body.app-routed #splitBill .payment-method-grid,
  body.app-routed #splitBill .corporate-meal-rules {
    grid-template-columns: 1fr !important;
  }

  body.app-routed #walletPanel .wallet-dashboard-header > article:first-child,
  body.app-routed #walletPanel .wallet-home-grid > .wallet-balance-hero,
  body.app-routed #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview,
  body.app-routed #splitBill .payment-method-grid button:first-child {
    grid-column: auto !important;
  }

  body.app-routed #splitBill .receipt-item-list article {
    grid-template-columns: 1fr !important;
  }

  body.app-routed #splitBill .bill-hero-total {
    width: 100% !important;
    text-align: left !important;
  }
}

/* Chat and Transportation route finish: target the actual .main-stack mount. */
body.app-routed main > .main-stack > #socialHub:not([hidden]),
body[data-active-route="socialHub"] #socialHub {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 16px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed main > .main-stack > #socialHub:not([hidden]) > *,
body[data-active-route="socialHub"] #socialHub > * {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #socialHub > .section-heading,
body[data-active-route="socialHub"] #socialHub > .section-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: clamp(16px, 2vw, 22px) !important;
  border: 1px solid rgba(43, 167, 174, 0.14) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #e6faf7, #fff1e6) !important;
  box-shadow: 0 10px 24px rgba(20, 83, 95, 0.06) !important;
}

body.app-routed #socialHub > .messages-hub,
body[data-active-route="socialHub"] #socialHub > .messages-hub {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed #socialHub .message-search-row,
body[data-active-route="socialHub"] #socialHub .message-search-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(43, 167, 174, 0.14) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(20, 83, 95, 0.05) !important;
}

body.app-routed #socialHub .message-search-row label,
body[data-active-route="socialHub"] #socialHub .message-search-row label {
  min-width: 0 !important;
  color: #47707a !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

body.app-routed #socialHub .message-search-row input,
body[data-active-route="socialHub"] #socialHub .message-search-row input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin-top: 5px !important;
  border-radius: 12px !important;
  background: #f7fbfb !important;
}

body.app-routed #socialHub .chat-vibe-strip,
body[data-active-route="socialHub"] #socialHub .chat-vibe-strip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 15px !important;
  border: 1px solid rgba(255, 151, 108, 0.22) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #fff0df, #e6faf7) !important;
  box-shadow: 0 9px 20px rgba(20, 83, 95, 0.05) !important;
}

body.app-routed #socialHub .chat-vibe-copy,
body[data-active-route="socialHub"] #socialHub .chat-vibe-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body.app-routed #socialHub .chat-vibe-copy :where(strong, span),
body[data-active-route="socialHub"] #socialHub .chat-vibe-copy :where(strong, span) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #socialHub .chat-vibe-actions,
body[data-active-route="socialHub"] #socialHub .chat-vibe-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body.app-routed #socialHub .chat-vibe-actions button,
body[data-active-route="socialHub"] #socialHub .chat-vibe-actions button {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 11px !important;
  white-space: normal !important;
}

body.app-routed #socialHub .message-tabs,
body[data-active-route="socialHub"] #socialHub .message-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow-x: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed #socialHub .message-tabs button,
body[data-active-route="socialHub"] #socialHub .message-tabs button {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  min-height: 36px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

body.app-routed #socialHub .messages-layout,
body[data-active-route="socialHub"] #socialHub .messages-layout {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.65fr) minmax(210px, 0.75fr) !important;
  align-items: start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.app-routed #socialHub .conversation-list,
body[data-active-route="socialHub"] #socialHub .conversation-list {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-height: 560px !important;
  padding: 0 !important;
  overflow-y: auto !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-routed #socialHub .conversation-card,
body[data-active-route="socialHub"] #socialHub .conversation-card {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 9px !important;
  border: 1px solid rgba(43, 167, 174, 0.13) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  text-align: left !important;
  box-shadow: 0 7px 16px rgba(20, 83, 95, 0.045) !important;
}

body.app-routed #socialHub .conversation-card > span,
body[data-active-route="socialHub"] #socialHub .conversation-card > span {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #socialHub .conversation-card > em,
body[data-active-route="socialHub"] #socialHub .conversation-card > em {
  grid-column: 2 !important;
  min-width: 0 !important;
  color: #71878d !important;
  font-size: 0.64rem !important;
  line-height: 1.3 !important;
  font-style: normal !important;
  white-space: normal !important;
}

body.app-routed #socialHub .chat-workspace,
body.app-routed #socialHub .conversation-details-panel,
body[data-active-route="socialHub"] #socialHub .chat-workspace,
body[data-active-route="socialHub"] #socialHub .conversation-details-panel {
  display: grid !important;
  align-content: start !important;
  gap: 11px !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(43, 167, 174, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 22px rgba(20, 83, 95, 0.06) !important;
}

body.app-routed #socialHub .chat-header,
body[data-active-route="socialHub"] #socialHub .chat-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(43, 167, 174, 0.12) !important;
}

body.app-routed #socialHub .chat-header > div:first-child,
body[data-active-route="socialHub"] #socialHub .chat-header > div:first-child {
  min-width: 0 !important;
}

body.app-routed #socialHub .chat-header :where(h3, span),
body[data-active-route="socialHub"] #socialHub .chat-header :where(h3, span) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #socialHub .pinned-message,
body[data-active-route="socialHub"] #socialHub .pinned-message {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 10px !important;
  border-radius: 13px !important;
  background: #fff8df !important;
}

body.app-routed #socialHub .pinned-message span,
body[data-active-route="socialHub"] #socialHub .pinned-message span {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #socialHub .modern-messages,
body[data-active-route="socialHub"] #socialHub .modern-messages {
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 260px !important;
  max-height: 430px !important;
  padding: 13px !important;
  overflow-y: auto !important;
  border-radius: 15px !important;
  background: #f5f9f9 !important;
}

body.app-routed #socialHub .modern-messages .msg,
body[data-active-route="socialHub"] #socialHub .modern-messages .msg {
  justify-self: start !important;
  min-width: 0 !important;
  max-width: min(86%, 520px) !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 15px 15px 15px 5px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.4 !important;
}

body.app-routed #socialHub .modern-messages .msg:nth-child(2n),
body[data-active-route="socialHub"] #socialHub .modern-messages .msg:nth-child(2n) {
  justify-self: end !important;
  border-radius: 15px 15px 5px 15px !important;
}

body.app-routed #socialHub .chat-tool-row,
body[data-active-route="socialHub"] #socialHub .chat-tool-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.app-routed #socialHub .chat-tool-row button,
body[data-active-route="socialHub"] #socialHub .chat-tool-row button {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  min-height: 31px !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

body.app-routed #socialHub .chat-form,
body[data-active-route="socialHub"] #socialHub .chat-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body.app-routed #socialHub .chat-form input,
body[data-active-route="socialHub"] #socialHub .chat-form input {
  min-width: 0 !important;
  width: 100% !important;
}

body.app-routed #socialHub .message-support-grid,
body[data-active-route="socialHub"] #socialHub .message-support-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.app-routed #socialHub .message-support-grid article,
body[data-active-route="socialHub"] #socialHub .message-support-grid article {
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 118px !important;
  padding: 14px !important;
  border-radius: 15px !important;
}

body.app-routed #socialHub .message-support-grid :where(span, strong, p, button),
body[data-active-route="socialHub"] #socialHub .message-support-grid :where(span, strong, p, button) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Transportation: the records table is the main page; advanced tools stay opt-in. */
body.app-routed main > .main-stack > #transportationPanel:not([hidden]),
body.app-routed main > #transportationPanel:not([hidden]),
body[data-active-route="transportationPanel"] #transportationPanel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 14px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed #transportationPanel > *,
body[data-active-route="transportationPanel"] #transportationPanel > * {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #transportationPanel > .section-heading,
body[data-active-route="transportationPanel"] #transportationPanel > .section-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: clamp(16px, 2vw, 22px) !important;
  border: 1px solid #d5e8ec !important;
  border-radius: 19px !important;
  background: linear-gradient(135deg, #e8fbf8, #fff2e8) !important;
  box-shadow: 0 10px 24px rgba(20, 83, 95, 0.06) !important;
}

body.app-routed #transportationPanel > .section-heading h2,
body[data-active-route="transportationPanel"] #transportationPanel > .section-heading h2 {
  color: #173b48 !important;
  font-size: clamp(1.45rem, 2.8vw, 2.2rem) !important;
  line-height: 1.08 !important;
}

body.app-routed #transportationPanel > .section-heading p:not(.eyebrow),
body[data-active-route="transportationPanel"] #transportationPanel > .section-heading p:not(.eyebrow) {
  max-width: 68ch !important;
  color: #668089 !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

body.app-routed #transportationPanel .transportation-header-actions,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-header-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

body.app-routed #transportationPanel > .transportation-summary-grid,
body[data-active-route="transportationPanel"] #transportationPanel > .transportation-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .transportation-summary-grid article,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-summary-grid article {
  display: grid !important;
  align-content: start !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 14px !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(20, 83, 95, 0.05) !important;
}

body.app-routed #transportationPanel :where(h2, h3, p, span, strong, small, label, th, td, button),
body[data-active-route="transportationPanel"] #transportationPanel :where(h2, h3, p, span, strong, small, label, th, td, button) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.app-routed #transportationPanel > .flight-tracking-card,
body.app-routed #transportationPanel > .transportation-table-section,
body[data-active-route="transportationPanel"] #transportationPanel > .flight-tracking-card,
body[data-active-route="transportationPanel"] #transportationPanel > .transportation-table-section {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid #dbe9ed !important;
  border-radius: 17px !important;
  background: #ffffff !important;
  box-shadow: 0 9px 20px rgba(20, 83, 95, 0.05) !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header,
body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-card__header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .flight-tracking-card__header :where(div, h3, p),
body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-card__header :where(div, h3, p) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-routed #transportationPanel .flight-tracking-form,
body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-form {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
  align-items: end !important;
  gap: 9px !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .flight-tracking-form label,
body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-form label,
body.app-routed #transportationPanel .transportation-table-toolbar label,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-toolbar label {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  color: #47707a !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
}

body.app-routed #transportationPanel .flight-tracking-form input,
body.app-routed #transportationPanel .transportation-table-toolbar input,
body.app-routed #transportationPanel .transportation-table-toolbar select,
body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-form input,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-toolbar input,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-toolbar select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  border-radius: 11px !important;
  background: #f7fbfb !important;
}

body.app-routed #transportationPanel .flight-tracking-form button,
body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-form button {
  min-width: max-content !important;
  min-height: 40px !important;
  white-space: nowrap !important;
}

body.app-routed #transportationPanel .transportation-table-toolbar,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 220px !important;
  gap: 9px !important;
  min-width: 0 !important;
}

body.app-routed #transportationPanel .transportation-table-wrap,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-wrap {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
}

body.app-routed #transportationPanel .transportation-table,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table {
  width: 100% !important;
  min-width: 720px !important;
  table-layout: fixed !important;
}

body.app-routed #transportationPanel .transportation-table :where(th, td),
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table :where(th, td) {
  min-width: 0 !important;
  padding: 11px 12px !important;
  vertical-align: middle !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-routed #transportationPanel .transportation-record-dropdown,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown {
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(43, 167, 174, 0.15) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
}

body.app-routed #transportationPanel .transportation-record-dropdown > summary,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary {
  display: grid !important;
  grid-template-columns: minmax(90px, 0.65fr) minmax(180px, 1.4fr) minmax(160px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  list-style: none !important;
}

body.app-routed #transportationPanel .transportation-record-details,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
  align-items: end !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 11px 12px 12px !important;
  border-top: 1px solid rgba(43, 167, 174, 0.12) !important;
}

body.app-routed #transportationPanel > .transportation-advanced-details,
body[data-active-route="transportationPanel"] #transportationPanel > .transportation-advanced-details {
  display: block !important;
  min-width: 0 !important;
  border: 1px solid rgba(43, 167, 174, 0.14) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  overflow: hidden !important;
}

body.app-routed #transportationPanel .transportation-advanced-details > summary,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary {
  padding: 12px 14px !important;
  color: #276d78 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

@media (max-width: 980px) {
  body.app-routed #socialHub .messages-layout,
  body[data-active-route="socialHub"] #socialHub .messages-layout {
    grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.6fr) !important;
  }

  body.app-routed #socialHub .conversation-details-panel,
  body[data-active-route="socialHub"] #socialHub .conversation-details-panel {
    grid-column: 1 / -1 !important;
  }

  body.app-routed #transportationPanel .flight-tracking-form,
  body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-routed #transportationPanel .flight-tracking-form button,
  body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-form button {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 720px) {
  body.app-routed #socialHub .chat-vibe-strip,
  body[data-active-route="socialHub"] #socialHub .chat-vibe-strip,
  body.app-routed #socialHub .message-search-row,
  body[data-active-route="socialHub"] #socialHub .message-search-row,
  body.app-routed #socialHub .messages-layout,
  body[data-active-route="socialHub"] #socialHub .messages-layout,
  body.app-routed #socialHub .message-support-grid,
  body[data-active-route="socialHub"] #socialHub .message-support-grid,
  body.app-routed #transportationPanel > .transportation-summary-grid,
  body[data-active-route="transportationPanel"] #transportationPanel > .transportation-summary-grid,
  body.app-routed #transportationPanel .transportation-table-toolbar,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-toolbar,
  body.app-routed #transportationPanel .transportation-record-details,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details {
    grid-template-columns: 1fr !important;
  }

  body.app-routed #socialHub .conversation-details-panel,
  body[data-active-route="socialHub"] #socialHub .conversation-details-panel {
    grid-column: auto !important;
  }

  body.app-routed #socialHub .chat-vibe-actions,
  body[data-active-route="socialHub"] #socialHub .chat-vibe-actions {
    justify-content: flex-start !important;
  }

  body.app-routed #transportationPanel .flight-tracking-card__header,
  body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-card__header,
  body.app-routed #transportationPanel > .section-heading,
  body[data-active-route="transportationPanel"] #transportationPanel > .section-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.app-routed #transportationPanel .transportation-header-actions,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-header-actions {
    justify-content: flex-start !important;
  }

  body.app-routed #transportationPanel .transportation-record-dropdown > summary,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body.app-routed #transportationPanel .transportation-record-dropdown > summary small,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary small {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 520px) {
  body.app-routed #socialHub .conversation-card,
  body[data-active-route="socialHub"] #socialHub .conversation-card {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  body.app-routed #socialHub .chat-header,
  body[data-active-route="socialHub"] #socialHub .chat-header,
  body.app-routed #socialHub .pinned-message,
  body[data-active-route="socialHub"] #socialHub .pinned-message {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body.app-routed #socialHub .pinned-message button,
  body[data-active-route="socialHub"] #socialHub .pinned-message button {
    justify-self: start !important;
  }
}

/* Final route isolation and destination facts layout. Keep dashboard-only content out of
   Transportation and every other route, then let the three dashboard facts share a row. */
body[data-active-route]:not([data-active-route="dashboardHome"]) [data-dashboard-only],
body.app-routed[data-active-route]:not([data-active-route="dashboardHome"]) [data-dashboard-only] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-active-route="dashboardHome"] main > .destination-insights,
body.app-routed[data-active-route="dashboardHome"] main > .destination-insights {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-route="dashboardHome"] main > .destination-insights > .section-heading,
body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .section-heading {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}

body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid,
body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: start !important;
}

body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article,
body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article {
  grid-column: auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  overflow: hidden !important;
}

body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article :where(p, span, .adventure-tags),
body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article :where(p, span, .adventure-tags) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (max-width: 900px) {
  body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid,
  body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article:last-child,
  body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid,
  body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article:last-child,
  body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article:last-child {
    grid-column: auto !important;
  }
}

/* Wallet route: surface the actual Trip Wallet Card in the top-left module. The
   full wallet workspace stays beside it on desktop and stacks below it on small screens. */
body.app-routed[data-active-route="walletPanel"] main > .content-grid > .main-stack,
body[data-active-route="walletPanel"] main > .content-grid > .main-stack {
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
}

body.app-routed[data-active-route="walletPanel"] main > .content-grid > .main-stack > #virtualCard:not([hidden]),
body[data-active-route="walletPanel"] main > .content-grid > .main-stack > #virtualCard:not([hidden]) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed[data-active-route="walletPanel"] main > .content-grid > .main-stack > #walletPanel:not([hidden]),
body[data-active-route="walletPanel"] main > .content-grid > .main-stack > #walletPanel:not([hidden]) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed[data-active-route="walletPanel"] main > .content-grid > .main-stack > .audit-panel:not([hidden]),
body[data-active-route="walletPanel"] main > .content-grid > .main-stack > .audit-panel:not([hidden]) {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.app-routed[data-active-route="walletPanel"] #virtualCard:not([hidden]) .virtual-card,
body[data-active-route="walletPanel"] #virtualCard:not([hidden]) .virtual-card {
  width: 100% !important;
  max-width: 360px !important;
  justify-self: start !important;
  margin-inline: 0 !important;
}

@media (max-width: 900px) {
  body.app-routed[data-active-route="walletPanel"] main > .content-grid > .main-stack,
  body[data-active-route="walletPanel"] main > .content-grid > .main-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-routed[data-active-route="walletPanel"] main > .content-grid > .main-stack > #virtualCard:not([hidden]),
  body[data-active-route="walletPanel"] main > .content-grid > .main-stack > #virtualCard:not([hidden]),
  body.app-routed[data-active-route="walletPanel"] main > .content-grid > .main-stack > #walletPanel:not([hidden]),
  body[data-active-route="walletPanel"] main > .content-grid > .main-stack > #walletPanel:not([hidden]),
  body.app-routed[data-active-route="walletPanel"] main > .content-grid > .main-stack > .audit-panel:not([hidden]),
  body[data-active-route="walletPanel"] main > .content-grid > .main-stack > .audit-panel:not([hidden]) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 520px) {
  body.app-routed[data-active-route="walletPanel"] #virtualCard:not([hidden]) .virtual-card,
  body[data-active-route="walletPanel"] #virtualCard:not([hidden]) .virtual-card {
    max-width: none !important;
  }
}

/* Transportation route refresh: a focused movement dashboard instead of one long
   stack. Summary and tracking stay left; searchable confirmations stay right. */
body.app-routed[data-active-route="transportationPanel"] main > .content-grid > .main-stack > #transportationPanel:not([hidden]),
body[data-active-route="transportationPanel"] #transportationPanel:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 16px !important;
  padding: 0 !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .section-heading,
body[data-active-route="transportationPanel"] #transportationPanel > .section-heading {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 132px !important;
  padding: clamp(20px, 3vw, 32px) !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #103b4a 0%, #087f8c 58%, #f17f62 150%) !important;
  box-shadow: 0 16px 30px rgba(16, 59, 74, 0.16) !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .section-heading :where(.eyebrow, h2, p),
body[data-active-route="transportationPanel"] #transportationPanel > .section-heading :where(.eyebrow, h2, p) {
  color: #ffffff !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .section-heading h2,
body[data-active-route="transportationPanel"] #transportationPanel > .section-heading h2 {
  max-width: 22ch !important;
  font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
  line-height: 1.05 !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .section-heading p:not(.eyebrow),
body[data-active-route="transportationPanel"] #transportationPanel > .section-heading p:not(.eyebrow) {
  max-width: 58ch !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .transportation-summary-grid,
body[data-active-route="transportationPanel"] #transportationPanel > .transportation-summary-grid {
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-summary-grid article,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-summary-grid article {
  min-height: 108px !important;
  padding: 16px !important;
  border: 1px solid rgba(8, 127, 140, 0.14) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(16, 59, 74, 0.07) !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .flight-tracking-card,
body[data-active-route="transportationPanel"] #transportationPanel > .flight-tracking-card {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: start !important;
  min-height: 100% !important;
  padding: 18px !important;
  border: 1px solid rgba(8, 127, 140, 0.16) !important;
  border-radius: 20px !important;
  background: linear-gradient(160deg, #edfbfb, #ffffff 68%) !important;
  box-shadow: 0 10px 24px rgba(16, 59, 74, 0.07) !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-card__header,
body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-card__header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-form,
body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-form button,
body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-form button {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .transportation-table-section,
body[data-active-route="transportationPanel"] #transportationPanel > .transportation-table-section {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: start !important;
  min-width: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(8, 127, 140, 0.16) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(16, 59, 74, 0.07) !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-table-toolbar,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-toolbar {
  grid-template-columns: minmax(0, 1fr) 170px !important;
  align-items: end !important;
  padding-bottom: 2px !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-table-wrap,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-wrap {
  overflow: visible !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-table,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-table {
  min-width: 0 !important;
  table-layout: auto !important;
}

/* Keep the table caption available to assistive technology without letting
   route-wide text rules turn it into a visible vertical column. */
body.app-routed[data-active-route="transportationPanel"] #transportationPanel .sr-only,
body[data-active-route="transportationPanel"] #transportationPanel .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary {
  grid-template-columns: minmax(72px, 0.55fr) minmax(0, 1.35fr) minmax(0, 1fr) auto !important;
  min-height: 68px !important;
  padding: 11px 12px !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .transportation-advanced-details,
body[data-active-route="transportationPanel"] #transportationPanel > .transportation-advanced-details {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
}

@media (max-width: 920px) {
  body.app-routed[data-active-route="transportationPanel"] main > .content-grid > .main-stack > #transportationPanel:not([hidden]),
  body[data-active-route="transportationPanel"] #transportationPanel:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .flight-tracking-card,
  body[data-active-route="transportationPanel"] #transportationPanel > .transportation-table-section {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .transportation-advanced-details,
  body[data-active-route="transportationPanel"] #transportationPanel > .transportation-advanced-details {
    grid-row: auto !important;
  }
}

@media (max-width: 620px) {
  body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .section-heading,
  body[data-active-route="transportationPanel"] #transportationPanel > .section-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .transportation-summary-grid,
  body[data-active-route="transportationPanel"] #transportationPanel > .transportation-summary-grid,
  body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-table-toolbar,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-table-toolbar,
  body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-details {
    grid-template-columns: 1fr !important;
  }

  body.app-routed[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-card__header,
  body[data-active-route="transportationPanel"] #transportationPanel .flight-tracking-card__header {
    grid-template-columns: 1fr !important;
  }

  body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary small,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-record-dropdown > summary .transportation-status {
    grid-column: 1 / -1 !important;
  }
}

/* Final Wallet placement: use the route stack itself so source order and older
   parent selectors cannot leave the Trip Wallet Card below the wallet dashboard. */
body.app-routed[data-active-route="walletPanel"] .content-grid > .main-stack,
body[data-active-route="walletPanel"] .content-grid > .main-stack {
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
}

body.app-routed[data-active-route="walletPanel"] .main-stack > #virtualCard:not([hidden]),
body[data-active-route="walletPanel"] .main-stack > #virtualCard:not([hidden]) {
  order: -20 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin: 0 !important;
}

body.app-routed[data-active-route="walletPanel"] .main-stack > #walletPanel:not([hidden]),
body[data-active-route="walletPanel"] .main-stack > #walletPanel:not([hidden]) {
  order: -10 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin: 0 !important;
}

body.app-routed[data-active-route="walletPanel"] .main-stack > .audit-panel:not([hidden]),
body[data-active-route="walletPanel"] .main-stack > .audit-panel:not([hidden]) {
  order: 0 !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

body.app-routed[data-active-route="walletPanel"] #virtualCard > .section-heading,
body[data-active-route="walletPanel"] #virtualCard > .section-heading {
  order: -20 !important;
}

body.app-routed[data-active-route="walletPanel"] #virtualCard > .virtual-card,
body[data-active-route="walletPanel"] #virtualCard > .virtual-card {
  order: -30 !important;
  width: 100% !important;
  max-width: 360px !important;
  justify-self: start !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  body.app-routed[data-active-route="walletPanel"] .content-grid > .main-stack,
  body[data-active-route="walletPanel"] .content-grid > .main-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-routed[data-active-route="walletPanel"] .main-stack > #virtualCard:not([hidden]),
  body[data-active-route="walletPanel"] .main-stack > #virtualCard:not([hidden]),
  body.app-routed[data-active-route="walletPanel"] .main-stack > #walletPanel:not([hidden]),
  body[data-active-route="walletPanel"] .main-stack > #walletPanel:not([hidden]),
  body.app-routed[data-active-route="walletPanel"] .main-stack > .audit-panel:not([hidden]),
  body[data-active-route="walletPanel"] .main-stack > .audit-panel:not([hidden]) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Final precedence guard for the transportation toolkit. */
body.app-routed[data-active-route="transportationPanel"] #transportationPanel > .transportation-advanced-details,
body[data-active-route="transportationPanel"] #transportationPanel > .transportation-advanced-details {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary,
body[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 76px !important;
  padding: 14px 54px 14px 17px !important;
  color: #143543 !important;
  background: linear-gradient(105deg, #ecfbf9 0%, #fff 54%, #fff6f0 100%) !important;
  border: 1px solid rgba(24, 139, 151, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(20, 53, 67, 0.07) !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel #transportationWorkspaceMount,
body[data-active-route="transportationPanel"] #transportationPanel #transportationWorkspaceMount {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel #transportationWorkspaceMount > [data-transportation-workspace][hidden],
body[data-active-route="transportationPanel"] #transportationPanel #transportationWorkspaceMount > [data-transportation-workspace][hidden] {
  display: none !important;
}

body.app-routed[data-active-route="transportationPanel"] #transportationPanel #transportationWorkspaceMount > [data-transportation-workspace]:not([hidden]),
body[data-active-route="transportationPanel"] #transportationPanel #transportationWorkspaceMount > [data-transportation-workspace]:not([hidden]) {
  display: grid !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 700px) {
  body.app-routed[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary,
  body[data-active-route="transportationPanel"] #transportationPanel .transportation-advanced-details > summary {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-right: 52px !important;
  }
}

/* Final destination layout guard: keep the chooser compact and prevent shared
   dashboard sizing rules from collapsing the insight cards. */
html body[data-active-route="dashboardHome"] main > .destination-insights,
html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body[data-active-route="dashboardHome"] main > .destination-insights > .section-heading,
html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 2px !important;
}

html body[data-active-route="dashboardHome"] main > .destination-insights .destination-chooser,
html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights .destination-chooser {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

html body[data-active-route="dashboardHome"] main > .destination-insights .destination-chooser button,
html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights .destination-chooser button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 40px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

html body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid,
html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: start !important;
  align-content: start !important;
  margin: 0 !important;
}

html body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article,
html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article {
  grid-column: span 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

html body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article :where(h2, h3, h4, p, span, .adventure-tags),
html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article :where(h2, h3, h4, p, span, .adventure-tags) {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

html body[data-active-route="dashboardHome"] main > .destination-insights .adventure-tags,
html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights .adventure-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 7px !important;
}

html body[data-active-route="dashboardHome"] main > .destination-insights .adventure-tags span,
html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights .adventure-tags span {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 900px) {
  html body[data-active-route="dashboardHome"] main > .destination-insights .destination-chooser,
  html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights .destination-chooser {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid,
  html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article:last-child,
  html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 560px) {
  html body[data-active-route="dashboardHome"] main > .destination-insights .destination-chooser,
  html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights .destination-chooser {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid,
  html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article:last-child,
  html body.app-routed[data-active-route="dashboardHome"] main > .destination-insights > .destination-fact-grid > article:last-child {
    grid-column: auto !important;
  }
}

/* Final Travel Home cascade guard: keep navigation and active content in
   separate grid cells after all earlier dashboard layout rules. */
html body.app-routed[data-active-route="rideShareHub"] #rideShareHub,
html body[data-active-route="rideShareHub"] #rideShareHub {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell,
html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell {
  display: grid !important;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: 18px !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: auto !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main,
html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  z-index: auto !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel.active,
html body[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel.active {
  grid-column: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  z-index: auto !important;
}

html body.app-routed[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel[hidden],
html body[data-active-route="rideShareHub"] #rideShareHub .travel-focus-panel[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell,
  html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
  html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-sidebar,
  html body.app-routed[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main,
  html body[data-active-route="rideShareHub"] #rideShareHub > .travel-settings-shell > .travel-settings-main {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Final bill-split hero contrast guard: the approved global section-heading
   treatment must not leave this hero's light text on a white background. */
html body #splitBill .section-heading.split-bill-hero,
html body.app-routed #splitBill .section-heading.split-bill-hero {
  min-height: 0 !important;
  padding: clamp(20px, 2.6vw, 30px) !important;
  border: 1px solid rgba(8, 127, 140, 0.18) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #dff8f5 0%, #fff0e7 58%, #fff8dc 100%) !important;
  color: #102f3d !important;
  box-shadow: 0 12px 28px rgba(16, 59, 74, 0.09) !important;
}

html body #splitBill .split-bill-hero h2,
html body.app-routed #splitBill .split-bill-hero h2 {
  color: #102f3d !important;
  text-shadow: none !important;
}

html body #splitBill .split-bill-hero p:not(.eyebrow),
html body.app-routed #splitBill .split-bill-hero p:not(.eyebrow) {
  color: #496875 !important;
}

html body #splitBill .split-bill-hero .eyebrow,
html body.app-routed #splitBill .split-bill-hero .eyebrow {
  color: #007d9f !important;
}

html body #splitBill .split-bill-hero .bill-hero-total,
html body.app-routed #splitBill .split-bill-hero .bill-hero-total {
  border: 1px solid rgba(8, 127, 140, 0.18) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #102f3d !important;
  box-shadow: 0 8px 20px rgba(16, 59, 74, 0.08) !important;
}

html body #splitBill .split-bill-hero .bill-hero-total :where(span, strong, small),
html body.app-routed #splitBill .split-bill-hero .bill-hero-total :where(span, strong, small) {
  color: #102f3d !important;
  text-shadow: none !important;
}

/* Final wallet consolidation precedence. */
body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-home-grid,
body[data-active-route="walletPanel"] #walletPanel .wallet-home-grid {
  grid-template-columns: minmax(280px, 1.35fr) repeat(2, minmax(190px, 0.8fr)) !important;
  align-items: start !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections,
body[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections {
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  align-items: start !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview,
body[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview {
  grid-column: span 2 !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-metric-list,
body[data-active-route="walletPanel"] #walletPanel .wallet-metric-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading,
body[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading {
  display: block !important;
  min-width: 0 !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(23, 110, 122, 0.13) !important;
}

body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading :where(h3, p),
body[data-active-route="walletPanel"] #walletPanel .wallet-operations-heading :where(h3, p) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 760px !important;
  margin: 0 !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 1050px) {
  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-home-grid,
  body[data-active-route="walletPanel"] #walletPanel .wallet-home-grid,
  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections,
  body[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-home-grid,
  body[data-active-route="walletPanel"] #walletPanel .wallet-home-grid,
  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections,
  body[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections,
  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-metric-list,
  body[data-active-route="walletPanel"] #walletPanel .wallet-metric-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-routed[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview,
  body[data-active-route="walletPanel"] #walletPanel .wallet-dashboard-sections > .wallet-section-widget--overview {
    grid-column: 1 !important;
  }
}

/* Final destination hero fit guard: long location names stay fully visible. */
html body.signed-in-shell #dashboardHome.destination-banner:not([hidden]) {
  height: auto !important;
  min-height: 490px !important;
}

html body.signed-in-shell #dashboardHome.destination-banner .hero-copy {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: min(720px, 76%) !important;
  min-height: 490px !important;
  padding: 36px 40px 70px !important;
  box-sizing: border-box !important;
}

html body.signed-in-shell #dashboardHome.destination-banner .hero-copy h1 {
  width: 100% !important;
  max-width: 18ch !important;
  margin: 0 !important;
  font-size: 3.5rem !important;
  line-height: 1.02 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

html body.app-routed[data-active-route="dashboardHome"] main > .pwa-panel > div,
html body.app-routed[data-active-route="dashboardHome"] main > .pwa-panel p:not(.eyebrow) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 760px) {
  html body.signed-in-shell #dashboardHome.destination-banner:not([hidden]),
  html body.signed-in-shell #dashboardHome.destination-banner .hero-copy {
    min-height: 520px !important;
  }

  html body.signed-in-shell #dashboardHome.destination-banner .hero-copy {
    width: 100% !important;
    justify-content: flex-end !important;
    padding: 28px 24px 78px !important;
  }

  html body.signed-in-shell #dashboardHome.destination-banner .hero-copy h1 {
    max-width: 15ch !important;
    font-size: 2.75rem !important;
  }
}

/* Employee overview precedence: personal discovery content never shares the
   corporate event dashboard, even when general dashboard guards use !important. */
html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] main > :is(
  .pwa-panel,
  #dashboardHome,
  .destination-insights,
  .metrics,
  .travel-social-strip,
  #dashboardWidgets
) {
  display: none !important;
  visibility: hidden !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] main > #corporateHome[data-dashboard-only] {
  display: grid !important;
  visibility: visible !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* A company event is private authenticated content, never part of the public
   login layout. The route controller removes these states after verification. */
html body #guestPortalPanel[hidden],
html body #guestPortalPanel[aria-hidden="true"],
html body .employee-portal-pane[hidden] {
  display: none !important;
  visibility: hidden !important;
}

/* Wallet ledger precedence: transaction text keeps useful columns instead of
   inheriting the generic two-column card rule that compresses dates vertically. */
html body.app-routed[data-active-route="walletPanel"] #walletPanel > .wallet-operations-panel > .shared-wallet-ledger,
html body[data-active-route="walletPanel"] #walletPanel > .wallet-operations-panel > .shared-wallet-ledger {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body.app-routed[data-active-route="walletPanel"] #walletPanel > .wallet-operations-panel > .shared-wallet-ledger > div,
html body[data-active-route="walletPanel"] #walletPanel > .wallet-operations-panel > .shared-wallet-ledger > div {
  display: grid !important;
  grid-template-columns: minmax(145px, 0.72fr) minmax(190px, 1fr) minmax(250px, 1.35fr) !important;
  grid-auto-rows: max-content !important;
  align-items: center !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
  overflow: visible !important;
}

html body[data-active-route="walletPanel"] #walletPanel .shared-wallet-ledger > div > :where(time, strong, span) {
  display: block !important;
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

html body[data-active-route="walletPanel"] #walletPanel .shared-wallet-ledger > div > time {
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  html body.app-routed[data-active-route="walletPanel"] #walletPanel > .wallet-operations-panel > .shared-wallet-ledger > div,
  html body[data-active-route="walletPanel"] #walletPanel > .wallet-operations-panel > .shared-wallet-ledger > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  html body[data-active-route="walletPanel"] #walletPanel .shared-wallet-ledger > div > time {
    white-space: normal !important;
  }
}

/* Corporate employee home precedence: global panel grids must not split the
   event dashboard's direct children into competing columns. */
html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] main > #corporateHome[data-dashboard-only] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: clamp(16px, 2vw, 24px) !important;
  overflow: visible !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] main > #corporateHome[data-dashboard-only] > * {
  grid-column: 1 !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-event-spotlight {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-event-overview-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 14px !important;
  min-width: 0 !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-event-plan,
html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-event-essentials,
html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-event-attendees {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  box-sizing: border-box !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-event-attendees {
  grid-column: 1 / -1 !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-attendee-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-employee-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-items: stretch !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-employee-detail-grid > article {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 124px !important;
  align-self: stretch !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome :where(h2, h3, p, strong, span, small, b) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 1050px) {
  html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-event-overview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-event-attendees {
    grid-column: 1 !important;
  }

  html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-employee-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-event-spotlight,
  html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-employee-detail-grid,
  html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-attendee-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.app-routed.corporate-employee-mode[data-active-route="dashboardHome"] #corporateHome .corporate-event-spotlight .status-badge {
    justify-self: start !important;
  }
}

/* Corporate employee route scope: Travel contains only the employee's assigned
   records, while Itinerary contains only company-published event details. */
html body.app-routed.corporate-employee-mode[data-active-route="rideShareHub"] #rideShareHub,
html body.app-routed.corporate-employee-mode[data-active-route="itineraryAlerts"] #itineraryAlerts {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="rideShareHub"] #rideShareHub > :not(#corporateEmployeeTravel),
html body.app-routed.corporate-employee-mode[data-active-route="itineraryAlerts"] #itineraryAlerts > :not(#corporateEmployeeItinerary),
html body.app-routed.corporate-employee-mode[data-active-route="itineraryAlerts"] [data-route-support~="itineraryAlerts"] {
  display: none !important;
  visibility: hidden !important;
}

html body #corporateEmployeeTravel[hidden],
html body #corporateEmployeeItinerary[hidden] {
  display: none !important;
  visibility: hidden !important;
}

html body.app-routed.corporate-employee-mode[data-active-route="rideShareHub"] #corporateEmployeeTravel:not([hidden]),
html body.app-routed.corporate-employee-mode[data-active-route="itineraryAlerts"] #corporateEmployeeItinerary:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  border: 1px solid #cfe3e6 !important;
  border-top: 5px solid #18aaa5 !important;
  border-radius: 8px !important;
  background: #f7fbfc !important;
  box-shadow: 0 14px 30px rgba(18, 55, 66, 0.08) !important;
  visibility: visible !important;
  overflow: visible !important;
}

html body.corporate-employee-mode .corporate-employee-route-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid #d9e8ea !important;
}

html body.corporate-employee-mode .corporate-employee-route-heading > div {
  min-width: 0 !important;
}

html body.corporate-employee-mode .corporate-employee-travel-summary,
html body.corporate-employee-mode .corporate-itinerary-event-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body.corporate-employee-mode .corporate-employee-travel-summary > article,
html body.corporate-employee-mode .corporate-itinerary-event-meta > article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 108px !important;
  padding: 16px !important;
  border: 1px solid #d7e6e9 !important;
  border-top: 4px solid #18aaa5 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

html body.corporate-employee-mode .corporate-employee-travel-summary > article:nth-child(2),
html body.corporate-employee-mode .corporate-itinerary-event-meta > article:nth-child(2) {
  border-top-color: #ff8b70 !important;
}

html body.corporate-employee-mode .corporate-employee-travel-summary > article:nth-child(3),
html body.corporate-employee-mode .corporate-itinerary-event-meta > article:nth-child(3) {
  border-top-color: #edbd43 !important;
}

html body.corporate-employee-mode .corporate-employee-travel-summary span,
html body.corporate-employee-mode .corporate-itinerary-event-meta span,
html body.corporate-employee-mode .corporate-employee-assignment-heading span,
html body.corporate-employee-mode .corporate-employee-record > div > span,
html body.corporate-employee-mode .corporate-itinerary-item > div > span {
  color: #087f8f !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html body.corporate-employee-mode .corporate-employee-assignment-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 14px !important;
  min-width: 0 !important;
}

html body.corporate-employee-mode .corporate-employee-assignment,
html body.corporate-employee-mode .corporate-itinerary-agenda {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 18px !important;
  border: 1px solid #d7e6e9 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

html body.corporate-employee-mode .corporate-employee-assignment-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
}

html body.corporate-employee-mode .corporate-employee-assignment-heading > div {
  min-width: 0 !important;
}

html body.corporate-employee-mode .corporate-employee-assignment-heading b {
  flex: 0 0 auto !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  color: #176d63 !important;
  background: #e2f6ef !important;
  font-size: 0.78rem !important;
}

html body.corporate-employee-mode .corporate-employee-record-list,
html body.corporate-employee-mode .corporate-itinerary-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.corporate-employee-mode .corporate-employee-record {
  display: grid !important;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
  gap: 16px !important;
  min-width: 0 !important;
  padding: 15px !important;
  border: 1px solid #e0e9eb !important;
  border-radius: 8px !important;
  background: #f8fbfc !important;
}

html body.corporate-employee-mode .corporate-employee-record > div,
html body.corporate-employee-mode .corporate-employee-record dl {
  min-width: 0 !important;
}

html body.corporate-employee-mode .corporate-employee-record dl {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

html body.corporate-employee-mode .corporate-employee-record dl > div {
  min-width: 0 !important;
}

html body.corporate-employee-mode .corporate-employee-record dt {
  color: #617781 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

html body.corporate-employee-mode .corporate-employee-record dd {
  margin: 3px 0 0 !important;
  color: #102f3a !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
}

html body.corporate-employee-mode .corporate-employee-record > p {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: #566f79 !important;
}

html body.corporate-employee-mode .corporate-employee-route-note,
html body.corporate-employee-mode .corporate-itinerary-note {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-width: 0 !important;
  padding: 15px 16px !important;
  border-left: 4px solid #18aaa5 !important;
  border-radius: 6px !important;
  background: #eaf7f7 !important;
}

html body.corporate-employee-mode .corporate-employee-route-note > div,
html body.corporate-employee-mode .corporate-itinerary-note {
  min-width: 0 !important;
}

html body.corporate-employee-mode .corporate-employee-route-note span,
html body.corporate-employee-mode .corporate-itinerary-note span {
  display: block !important;
  margin-top: 3px !important;
  color: #4e6872 !important;
}

html body.corporate-employee-mode .corporate-itinerary-item {
  display: grid !important;
  grid-template-columns: minmax(145px, 0.32fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  min-width: 0 !important;
  padding: 15px 0 !important;
  border-top: 1px solid #e1eaec !important;
}

html body.corporate-employee-mode .corporate-itinerary-item:first-child {
  padding-top: 4px !important;
  border-top: 0 !important;
}

html body.corporate-employee-mode .corporate-itinerary-item time {
  color: #176d63 !important;
  font-weight: 800 !important;
}

html body.corporate-employee-mode :is(
  #corporateEmployeeTravel,
  #corporateEmployeeItinerary
) :where(h2, h3, p, strong, span, small, b, time, dt, dd) {
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 980px) {
  html body.corporate-employee-mode .corporate-employee-travel-summary,
  html body.corporate-employee-mode .corporate-itinerary-event-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.corporate-employee-mode .corporate-employee-assignment-grid,
  html body.corporate-employee-mode .corporate-employee-record {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  html body.corporate-employee-mode .corporate-employee-route-heading,
  html body.corporate-employee-mode .corporate-employee-route-note,
  html body.corporate-employee-mode .corporate-itinerary-note,
  html body.corporate-employee-mode .corporate-employee-assignment-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body.corporate-employee-mode .corporate-employee-travel-summary,
  html body.corporate-employee-mode .corporate-itinerary-event-meta,
  html body.corporate-employee-mode .corporate-employee-record dl,
  html body.corporate-employee-mode .corporate-itinerary-item {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}