/* OrionOS client experience system v20260806-1.
   This is the final non-product portal presentation layer. It intentionally
   changes only layout and appearance; workflow controls, permissions, data,
   and navigation behavior remain owned by the application runtime. */

#app.app-shell.orionos-portal-os {
  --client-surface: rgba(7, 22, 40, .94);
  --client-surface-raised: rgba(11, 31, 52, .96);
  --client-surface-soft: rgba(16, 42, 68, .72);
  --client-border: rgba(133, 211, 255, .24);
  --client-border-strong: rgba(133, 211, 255, .46);
  --client-text: #f7fbff;
  --client-muted: #bed2e6;
  --client-dim: #91abc3;
  --client-cyan: #69d9ff;
  --client-mint: #45dfb0;
  --client-shadow: 0 18px 46px rgba(0, 5, 16, .3), inset 0 1px 0 rgba(255, 255, 255, .055);
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) {
  gap: clamp(14px, 1.25vw, 20px) !important;
  color: var(--client-text) !important;
  font-size: 14px;
  line-height: 1.48;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) > .section {
  margin-bottom: 0 !important;
}

/* One consistent client surface replaces the legacy white/dark alternation. */
#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .workspace-head,
  .card,
  .card.pad,
  details.card,
  details.data-drawer,
  .portal-command-surface,
  .module-card,
  .customer-module-card,
  .enterprise-module-card,
  .enterprise-workspace-card,
  .enterprise-action-card,
  .enterprise-focus-card,
  .owner-admin-panel,
  .role-home-screen,
  .portal-operating-brief,
  .customer-surface-panel,
  .customer-command-panel,
  .customer-command-workflow-card,
  .customer-command-metric,
  .customer-command-health-grid > article,
  .customer-command-row,
  .customer-home-next-action,
  .customer-home-health-strip,
  .action-card-lite,
  .broker-workspace-metrics > article,
  .timeline-item,
  .metric,
  .notice,
  .table-wrap,
  .driver-file,
  .load-work-card,
  .provider-card,
  .path-card,
  .action-card,
  .followup-card,
  .quote-card,
  .workspace-answer-panel,
  .workspace-related-rail,
  .workspace-action-drawer,
  .workspace-relocated-drawer,
  .client-portal-organizer,
  .client-section,
  .polished-tms-command,
  .polished-gap-panel,
  .support-sla-command,
  .dispatch-closeout-command,
  .optimization-command-panel,
  .hey-orion-action-engine,
  .tms-designed-command-center,
  .tms-settlement-upgrade,
  .tms-control-tower-upgrade,
  .shipper-ops-hero,
  .shipper-ops-primary,
  .shipper-ops-stat,
  .shipper-ops-card,
  .shipper-control-suite,
  .shipper-control-hero,
  .shipper-control-card,
  .portal-empty-polished,
  .empty
) {
  border: 1px solid var(--client-border) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 217, 255, .09), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .012) 58%),
    var(--client-surface) !important;
  color: var(--client-text) !important;
  -webkit-text-fill-color: var(--client-text) !important;
  box-shadow: var(--client-shadow) !important;
  text-shadow: none !important;
}

/* Nested content is quieter than its parent instead of creating another frame. */
#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .card .card,
  .module-card .card,
  .portal-command-surface .portal-command-surface,
  .enterprise-workspace-card .card,
  .timeline-item,
  .customer-command-row,
  .dispatch-closeout-card,
  .optimization-command-card,
  .hey-orion-action-card
) {
  border-radius: 12px !important;
  background:
    linear-gradient(145deg, rgba(105, 217, 255, .055), rgba(255, 255, 255, .018)),
    rgba(5, 18, 34, .74) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .workspace-head,
  .card.pad,
  details.card,
  .portal-command-surface,
  .owner-admin-panel,
  .role-home-screen,
  .portal-operating-brief,
  .customer-surface-panel,
  .polished-tms-command,
  .polished-gap-panel,
  .support-sla-command,
  .dispatch-closeout-command,
  .optimization-command-panel,
  .hey-orion-action-engine,
  .tms-designed-command-center,
  .tms-settlement-upgrade,
  .tms-control-tower-upgrade
) {
  padding: clamp(16px, 1.45vw, 22px) !important;
}

/* Clear hierarchy and a readable floor across every portal family. */
#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  h1, h2, h3, h4, h5, h6, strong, b, summary
) {
  color: var(--client-text) !important;
  -webkit-text-fill-color: var(--client-text) !important;
  text-shadow: none !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  p, li, small, em, dt, dd, figcaption, .help, .small, .muted, .subtle
) {
  color: var(--client-muted) !important;
  -webkit-text-fill-color: var(--client-muted) !important;
  font-size: max(12px, .84rem);
  line-height: 1.5;
  text-shadow: none !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .eyebrow, label, th
) {
  color: var(--client-cyan) !important;
  -webkit-text-fill-color: var(--client-cyan) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .075em !important;
  line-height: 1.35 !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .workspace-head {
  align-items: center !important;
  gap: 18px !important;
  padding: clamp(18px, 1.8vw, 28px) !important;
  border-color: var(--client-border-strong) !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(69, 223, 176, .11), transparent 34%),
    linear-gradient(125deg, rgba(105, 217, 255, .14), transparent 42%),
    var(--client-surface-raised) !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .workspace-head h2 {
  font-size: clamp(27px, 2.35vw, 39px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .workspace-head :is(p, .help) {
  max-width: 76ch;
  font-size: 14px !important;
}

/* Section headers stay compact but no longer look like tiny system telemetry. */
#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .split-actions, .portal-command-header, .module-title, details > summary
) {
  gap: 14px !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .split-actions {
  align-items: flex-start !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(133, 211, 255, .14) !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .split-actions h3 {
  margin: 3px 0 4px !important;
  font-size: clamp(18px, 1.45vw, 22px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.012em !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .split-actions :is(p, .help) {
  max-width: 78ch;
  margin: 0 !important;
  font-size: 13px !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(.pill, .status-pill) {
  min-height: 30px;
  border: 1px solid var(--client-border) !important;
  border-radius: 999px !important;
  background: rgba(105, 217, 255, .075) !important;
  color: #e9f8ff !important;
  -webkit-text-fill-color: #e9f8ff !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

/* The shared control row from the reported page, used in TMS and driver views. */
#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-panel {
  position: relative;
  isolation: isolate;
  gap: 16px !important;
  overflow: visible;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-panel::before {
  position: absolute;
  z-index: -1;
  top: -1px;
  right: 24px;
  left: 24px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--client-cyan), var(--client-mint), transparent);
  opacity: .72;
  content: "";
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid > button {
  position: relative;
  display: grid !important;
  grid-template-rows: auto auto 1fr;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 136px !important;
  height: auto !important;
  overflow: visible !important;
  border: 1px solid var(--client-border) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(145deg, rgba(105, 217, 255, .1), rgba(255, 255, 255, .025) 56%),
    rgba(5, 19, 35, .88) !important;
  color: var(--client-text) !important;
  padding: 16px !important;
  text-align: left !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid > button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 13px 0 0 13px;
  background: linear-gradient(180deg, var(--client-cyan), var(--client-mint));
  opacity: .78;
  content: "";
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid > button:hover {
  transform: translateY(-2px);
  border-color: var(--client-border-strong) !important;
  background:
    linear-gradient(145deg, rgba(105, 217, 255, .15), rgba(69, 223, 176, .05) 70%),
    rgba(7, 25, 44, .96) !important;
  box-shadow: 0 14px 28px rgba(0, 7, 22, .24), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid > button:focus-visible {
  outline: 3px solid rgba(105, 217, 255, .34) !important;
  outline-offset: 3px !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid > button > span {
  color: var(--client-cyan) !important;
  -webkit-text-fill-color: var(--client-cyan) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .07em !important;
  line-height: 1.35 !important;
  text-transform: uppercase;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid > button > strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(25px, 2vw, 31px) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1 !important;
  white-space: normal !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid > button > small {
  color: var(--client-muted) !important;
  -webkit-text-fill-color: var(--client-muted) !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* TMS priority panels use the same language as the rest of the client portal. */
#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .tms-command-priority-stack {
  gap: 14px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .tms-command-priority-stack > .split-actions {
  margin: 0 !important;
  border: 1px solid var(--client-border) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(120deg, rgba(105, 217, 255, .11), transparent 46%),
    var(--client-surface-raised) !important;
  padding: 15px 18px !important;
  box-shadow: var(--client-shadow) !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .support-sla-command,
  .dispatch-closeout-command,
  .optimization-command-panel,
  .hey-orion-action-engine
) {
  margin: 0 !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .support-sla-command h3,
  .dispatch-closeout-command h3,
  .optimization-command-panel h3,
  .hey-orion-action-engine h3
) {
  color: var(--client-text) !important;
  -webkit-text-fill-color: var(--client-text) !important;
}

/* Home pages: metrics remain useful, but read as one calm operating desk. */
#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .customer-command-metric-grid,
  .customer-command-health-grid,
  .role-home-stats,
  .overview-grid,
  .metric-grid,
  .scorecard-grid
) {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
  gap: 12px !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .customer-command-metric,
  .customer-command-health-grid > article,
  .role-home-stats > article,
  .overview-grid > article,
  .metric.card
) {
  min-height: 118px !important;
  padding: 16px !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .customer-command-metric,
  .customer-command-health-grid > article,
  .role-home-stats > article,
  .metric.card
) > strong {
  font-size: clamp(26px, 2vw, 34px) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.05 !important;
}

/* Empty states should guide the user without becoming the largest object. */
#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(.empty, .portal-empty-polished, .portal-command-empty) {
  place-items: start !important;
  align-content: center !important;
  gap: 6px !important;
  min-height: 88px !important;
  border-style: dashed !important;
  border-color: rgba(133, 211, 255, .28) !important;
  border-radius: 12px !important;
  background: rgba(4, 17, 32, .58) !important;
  padding: 14px 16px !important;
  color: var(--client-muted) !important;
  -webkit-text-fill-color: var(--client-muted) !important;
  text-align: left !important;
  box-shadow: none !important;
}

/* Inputs and controls keep the same handlers with a larger, consistent target. */
#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea
) {
  min-height: 44px !important;
  border-radius: 10px !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .btn, button:not(.nav-button):not(.nav-group-toggle)
) {
  min-height: 40px;
  border-radius: 10px !important;
  font-size: 13px;
  line-height: 1.25;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .table-wrap {
  overflow-x: auto !important;
  border-radius: 14px !important;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(th, td) {
  padding: 12px 14px !important;
  vertical-align: top;
}

#app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) tbody tr:hover td {
  background: rgba(105, 217, 255, .065) !important;
}

@media (max-width: 1280px) {
  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .workspace-head {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .workspace-head .toolbar {
    justify-content: flex-start !important;
  }
}

@media (max-width: 620px) {
  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) {
    gap: 12px !important;
    padding: 12px !important;
  }

  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
    .workspace-head,
    .card.pad,
    details.card,
    .portal-command-surface,
    .owner-admin-panel,
    .role-home-screen,
    .portal-operating-brief,
    .customer-surface-panel,
    .polished-gap-panel,
    .support-sla-command,
    .dispatch-closeout-command,
    .optimization-command-panel,
    .hey-orion-action-engine
  ) {
    padding: 14px !important;
  }

  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .split-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .split-actions > :is(.pill, .status-pill) {
    justify-self: start;
  }

  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid > button {
    min-height: 124px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid > button {
    transition: none;
  }

  #app.app-shell.orionos-portal-os .main.orionos-portal-theme:not(.orionos-sellable-product) .polished-gap-grid > button:hover {
    transform: none;
  }
}

/*
 * Runtime-hardening layer.
 *
 * Older readability guards can temporarily classify a formerly white card as
 * a light surface before the portal command theme settles.  The repeated app
 * id intentionally gives the final client portal contract enough specificity
 * to win that race without touching product workspaces or changing behavior.
 */
#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) :is(
  .card,
  .card.pad,
  details.card,
  details.data-drawer,
  .workflow-main,
  .ops-inbox,
  .current-load-strip,
  .alert-strip,
  .alert-triage-bar,
  .orion-workspace-stage-nav,
  .client-portal-organizer,
  .portal-operating-brief,
  .portal-command-surface,
  .customer-surface-panel,
  .owner-admin-panel,
  .customer-home-next-action,
  .customer-home-health-strip,
  .action-card-lite,
  .polished-gap-panel,
  .module-card,
  .customer-module-card,
  .enterprise-module-card,
  .enterprise-workspace-card,
  .enterprise-action-card,
  .enterprise-focus-card,
  .timeline-item,
  .metric,
  .notice,
  .table-wrap,
  .load-work-card,
  .provider-card,
  .path-card,
  .action-card,
  .followup-card,
  .quote-card,
  .empty
) {
  border: 1px solid var(--client-border, rgba(133, 211, 255, .24)) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 217, 255, .09), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .012) 58%),
    var(--client-surface, rgba(7, 22, 40, .94)) !important;
  color: var(--client-text, #f7fbff) !important;
  -webkit-text-fill-color: var(--client-text, #f7fbff) !important;
  box-shadow: var(--client-shadow, 0 18px 46px rgba(0, 5, 16, .3)) !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) :is(
  .current-load-strip,
  .alert-strip,
  .alert-triage-bar,
  .tms-workflow-grid
) {
  min-width: 0 !important;
  border-radius: 16px !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .tms-workflow-grid {
  align-items: stretch !important;
  gap: 14px !important;
  background: transparent !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .tms-workflow-grid > :is(.workflow-main, .ops-inbox) {
  min-width: 0 !important;
  height: 100%;
  padding: clamp(16px, 1.35vw, 21px) !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .current-load-strip {
  gap: 14px !important;
  padding: 15px 17px !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .lifecycle-rail {
  gap: 7px !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .lifecycle-rail > span {
  min-height: 38px;
  border: 1px solid var(--client-border, rgba(133, 211, 255, .24)) !important;
  border-radius: 9px;
  background: rgba(5, 19, 35, .82) !important;
  color: var(--client-muted, #bed2e6) !important;
  -webkit-text-fill-color: var(--client-muted, #bed2e6) !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .lifecycle-rail > span.complete {
  border-color: var(--client-border-strong, rgba(133, 211, 255, .46)) !important;
  background: linear-gradient(135deg, #075057, #08676d 54%, #087b78) !important;
  background-color: #086168 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .lifecycle-rail > span.active {
  border-color: var(--client-border-strong, rgba(133, 211, 255, .46)) !important;
  background: linear-gradient(135deg, #063b78, #0753a6 52%, #0a65a8) !important;
  background-color: #0753a6 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Named page sections wrap into a calm directory instead of a clipped rail. */
#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .orion-workspace-stage-nav {
  grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
  padding: 16px !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .orion-workspace-stage-nav > nav {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important;
  width: 100%;
  gap: 8px !important;
  overflow: visible !important;
  padding: 0 !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .orion-workspace-stage-nav button {
  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 52px !important;
  border-color: var(--client-border, rgba(133, 211, 255, .24)) !important;
  background: rgba(5, 19, 35, .82) !important;
  color: var(--client-text, #f7fbff) !important;
  -webkit-text-fill-color: var(--client-text, #f7fbff) !important;
}

#app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .orion-workspace-stage-nav button b {
  background: rgba(105, 217, 255, .14) !important;
  color: var(--client-cyan, #69d9ff) !important;
  -webkit-text-fill-color: var(--client-cyan, #69d9ff) !important;
}

@media (max-width: 1100px) {
  #app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .tms-workflow-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .orion-workspace-stage-nav {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  #app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .current-load-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app#app.app-shell > .shell-grid > .main:not(.orionos-sellable-product) .lifecycle-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* TMS/Load Records is a portal route even when an older route classifier
   briefly leaves product-shell state behind.  Scope the correction to that
   route so Orion product workspaces retain their own visual identity. */
#app#app.app-shell > .shell-grid > .main:is([data-view="tms"], [data-view="loads"]) :is(
  .current-load-strip,
  .alert-strip,
  .alert-triage-bar,
  .workflow-main,
  .ops-inbox,
  .load-work-card,
  .timeline-item,
  .tms-command-priority-stack > .split-actions,
  .polished-gap-panel,
  .orion-workspace-stage-nav
) {
  border: 1px solid rgba(133, 211, 255, .24) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 217, 255, .09), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .012) 58%),
    rgba(7, 22, 40, .94) !important;
  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
  box-shadow: 0 18px 46px rgba(0, 5, 16, .3), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

#app#app.app-shell > .shell-grid > .main:is([data-view="tms"], [data-view="loads"]) .orion-workspace-stage-nav > nav {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important;
  overflow: visible !important;
}

#app#app.app-shell > .shell-grid > .main:is([data-view="tms"], [data-view="loads"]) .orion-workspace-stage-nav button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  background: rgba(5, 19, 35, .82) !important;
  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
}

#app#app.app-shell > .shell-grid > .main:is([data-view="tms"], [data-view="loads"]) .current-load-strip :is(strong, small, span),
#app#app.app-shell > .shell-grid > .main:is([data-view="tms"], [data-view="loads"]) :is(.workflow-main, .ops-inbox, .load-work-card, .timeline-item, .polished-gap-panel) :is(h2, h3, h4, strong, p, small, span, .help, .small) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Shared role homepages keep their useful priority content without reverting
   to the oversized white dashboard card used by the legacy home contract. */
#app#app.app-shell > .shell-grid > .main[data-view="command"] :is(
  .customer-home-next-action,
  .customer-home-health-strip,
  .action-card-lite,
  .customer-command-panel,
  .customer-command-metric,
  .customer-command-health-grid > article
) {
  border: 1px solid rgba(133, 211, 255, .24) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 217, 255, .09), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .012) 58%),
    rgba(7, 22, 40, .94) !important;
  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
  box-shadow: 0 18px 46px rgba(0, 5, 16, .3), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

#app#app.app-shell > .shell-grid > .main[data-view="command"] .customer-home-next-action::after {
  opacity: .28 !important;
}

/*
 * OrionOS unified client system v20260807.
 *
 * This is the canonical portal contract. It deliberately sits after the
 * legacy presentation layers and changes presentation only: routes, forms,
 * permissions, data attributes, record handlers, and product branding remain
 * owned by app.js and the individual product workspaces.
 */
#app#app.app-shell.orionos-portal-os {
  --orion-page-max: 1560px;
  --orion-page-gap: clamp(14px, 1.25vw, 20px);
  --orion-panel-radius: 16px;
  --orion-control-radius: 10px;
  --orion-control-height: 44px;
  --orion-surface-0: #03101f;
  --orion-surface-1: #071a2e;
  --orion-surface-2: #0a233b;
  --orion-surface-3: #0d2d49;
  --orion-line: rgba(132, 205, 246, .22);
  --orion-line-strong: rgba(132, 205, 246, .42);
  --orion-copy: #f5fbff;
  --orion-copy-muted: #b8cde1;
  --orion-accent: #67d7ff;
  --orion-positive: #51e0b4;
  --orion-warning: #ffd26a;
  --orion-danger: #ff8e98;
}

/* Stable, full-width work area. The main column no longer becomes a narrow
   island on large monitors, but readable copy still keeps a useful measure. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) {
  width: 100% !important;
  max-width: var(--orion-page-max) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding: clamp(16px, 1.55vw, 26px) !important;
  gap: var(--orion-page-gap) !important;
  align-content: start;
  overflow-x: clip !important;
  overflow-anchor: none;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > * {
  min-width: 0;
  scroll-margin-top: 18px;
}

/* A quieter surface hierarchy. Nested cards do not compete with their parent. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .portal-command-surface,
  .card,
  .card.pad,
  .customer-command-panel,
  .customer-command-workflow-card,
  .customer-home-next-action,
  .metric,
  .notice,
  .timeline-item,
  .table-wrap,
  details.data-drawer,
  details.focused-workspace-drawer
) {
  border-color: var(--orion-line) !important;
  border-radius: var(--orion-panel-radius) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 58%),
    var(--orion-surface-1) !important;
  box-shadow: 0 12px 30px rgba(0, 6, 18, .2), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  .card .card,
  .card .timeline-item,
  .portal-command-surface .portal-command-surface,
  .customer-command-panel .customer-command-row,
  .customer-command-panel .action-card-lite,
  .table-wrap
) {
  border-radius: 12px !important;
  background: rgba(4, 18, 34, .66) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

/* Readability floor and predictable wrapping. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) {
  color: var(--orion-copy) !important;
  font-size: 15px !important;
  line-height: 1.52 !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(p, li, dd, dt, td, .help, .small) {
  min-width: 0;
  overflow-wrap: anywhere;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(p, li, dd, dt, td) {
  font-size: 14px;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(.help, .small, small) {
  color: var(--orion-copy-muted) !important;
  -webkit-text-fill-color: var(--orion-copy-muted) !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(h1, h2, h3, h4, strong, b) {
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Page titles use the same compact contract in every portal. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > .workspace-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  min-height: 0 !important;
  padding: clamp(20px, 2vw, 30px) !important;
  border-color: var(--orion-line-strong) !important;
  background:
    radial-gradient(circle at 94% -20%, rgba(81, 224, 180, .15), transparent 34%),
    linear-gradient(120deg, rgba(103, 215, 255, .13), transparent 48%),
    var(--orion-surface-1) !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > .workspace-head h2 {
  margin: 0 0 7px !important;
  font-size: clamp(28px, 2.15vw, 38px) !important;
  line-height: 1.08 !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > .workspace-head p {
  max-width: 78ch;
  margin: 0 !important;
  color: var(--orion-copy-muted) !important;
  -webkit-text-fill-color: var(--orion-copy-muted) !important;
  font-size: 14px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(.toolbar, .row-actions, .status-strip, .portal-command-action-row) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > .workspace-head .toolbar {
  justify-content: flex-end !important;
  align-self: center;
  max-width: min(620px, 48vw);
}

/* One control language and a genuine touch target floor. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(
  button:not(.maplibregl-ctrl button),
  .btn,
  summary,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  min-height: var(--orion-control-height) !important;
  border-radius: var(--orion-control-radius) !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(button, .btn, summary) {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(button, .btn, summary):focus-visible {
  outline: 3px solid rgba(103, 215, 255, .42) !important;
  outline-offset: 3px !important;
}

#app#app.app-shell .maplibregl-ctrl-group > button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(button, input, select, textarea)[disabled],
#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) [aria-disabled="true"] {
  opacity: .48 !important;
  cursor: not-allowed !important;
  filter: saturate(.45);
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(input, select, textarea) {
  width: 100%;
  min-width: 0 !important;
  border: 1px solid rgba(132, 205, 246, .3) !important;
  background: rgba(1, 12, 25, .86) !important;
  color: var(--orion-copy) !important;
  -webkit-text-fill-color: var(--orion-copy) !important;
  padding: 10px 12px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(input, select, textarea):focus {
  border-color: var(--orion-accent) !important;
  box-shadow: 0 0 0 3px rgba(103, 215, 255, .14) !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(.form-grid, form.grid) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) .field {
  min-width: 0;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) .field > label {
  display: block;
  margin-bottom: 6px;
  line-height: 1.35 !important;
}

/* Role homes are decision surfaces, not card galleries. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-decision-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr) !important;
  gap: var(--orion-page-gap) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-next-action,
#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-next-actions {
  min-height: 0 !important;
  padding: clamp(18px, 1.7vw, 25px) !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-next-action {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-next-copy h3 {
  margin: 5px 0 7px !important;
  font-size: clamp(23px, 1.8vw, 31px) !important;
  line-height: 1.15 !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-metric-section,
#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-workspaces {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-command-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-command-metric {
  min-height: 112px !important;
  padding: 16px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-work-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr) !important;
  gap: var(--orion-page-gap) !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-command-workflow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] :is(.customer-command-row, .action-card-lite) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 13px 14px !important;
}

/* The All Tools directory is a searchable drawer with fast routes first. */
#app#app.app-shell.orionos-portal-os .role-more-navigation-panel {
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(76vh, 760px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  border: 0 !important;
  border-top: 1px solid var(--orion-line-strong) !important;
  border-radius: 0 0 10px 10px !important;
  background: rgba(2, 14, 28, .985) !important;
  padding: 10px !important;
  box-shadow: none !important;
}

#app#app.app-shell.orionos-portal-os .role-more-navigation-tools {
  position: sticky;
  z-index: 2;
  top: -10px;
  grid-template-columns: minmax(0, 1fr) !important;
  margin: -10px -10px 10px !important;
  padding: 10px !important;
  background: rgba(2, 14, 28, .97) !important;
  backdrop-filter: blur(18px);
}

#app#app.app-shell.orionos-portal-os .role-more-navigation-close {
  width: 100% !important;
}

#app#app.app-shell.orionos-portal-os .role-more-navigation-quick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid rgba(81, 224, 180, .25);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(81, 224, 180, .09), rgba(103, 215, 255, .035));
}

#app#app.app-shell.orionos-portal-os .role-more-navigation-quick h3,
#app#app.app-shell.orionos-portal-os .role-more-navigation-quick small {
  margin: 0;
}

#app#app.app-shell.orionos-portal-os .role-more-navigation-quick > nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

#app#app.app-shell.orionos-portal-os .role-more-quick-button {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 8px 10px !important;
  text-align: left !important;
}

#app#app.app-shell.orionos-portal-os .role-more-quick-button > span:last-child {
  display: grid;
  min-width: 0;
}

#app#app.app-shell.orionos-portal-os .role-more-navigation-groups {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

#app#app.app-shell.orionos-portal-os .role-more-navigation-group {
  align-content: start;
  min-width: 0;
  padding: 12px !important;
  border: 1px solid var(--orion-line) !important;
  border-radius: 12px !important;
  background: rgba(7, 26, 46, .72) !important;
}

#app#app.app-shell.orionos-portal-os .role-more-navigation-group > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
}

/* Named page sections remain available without becoming a second navigation bar. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > .orion-workspace-stage-nav {
  grid-template-columns: minmax(190px, .28fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 14px !important;
  box-shadow: none !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > .orion-workspace-stage-nav > nav {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  gap: 7px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > .orion-workspace-stage-nav button {
  min-height: 46px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
}

/* Empty states are informative but never dominate the page. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(.empty, .portal-empty-polished, .portal-command-empty) {
  min-height: 76px !important;
  max-height: none !important;
  padding: 14px 16px !important;
  border-style: dashed !important;
  background: rgba(3, 16, 30, .58) !important;
  text-align: left !important;
}

/* FreightFlow: a dependable master-detail desk without clipped filter rails. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .freightflow-native-metrics,
#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .freightflow-broker-pulse {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 10px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .freightflow-desk-grid {
  display: grid !important;
  grid-template-columns: minmax(330px, .38fr) minmax(0, .62fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .freightflow-load-roster,
#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .freightflow-load-detail {
  min-width: 0 !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] :is(.freightflow-status-filters, .freightflow-exception-queues, .freightflow-roster-tabs) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  overflow: visible !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] :is(.freightflow-status-filters, .freightflow-exception-queues, .freightflow-roster-tabs) > button {
  flex: 1 1 112px;
  min-width: 0 !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .freightflow-roster-list {
  max-height: min(66vh, 760px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .freightflow-load-command-center {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .32fr) !important;
  gap: 12px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] :is(
  .tms-load-command-sheet,
  .freightflow-context-rail > section,
  .freightflow-context-actions
) {
  border-color: var(--orion-line) !important;
  background: linear-gradient(145deg, rgba(8, 30, 52, .98), rgba(5, 20, 37, .98)) !important;
  color: var(--orion-text) !important;
  box-shadow: none !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .tms-load-command-sheet :is(
  .tms-timeline-panel,
  .tms-map-mini,
  .tms-money-panel,
  .tms-doc-readiness,
  .tms-party-card,
  .tms-closeout-proof-grid > article
) {
  border-color: var(--orion-line) !important;
  background: rgba(4, 17, 31, .72) !important;
  color: var(--orion-text) !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] :is(
  .tms-load-command-sheet,
  .freightflow-context-rail
) :is(h3, strong, b) {
  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] :is(
  .tms-load-command-sheet,
  .freightflow-context-rail
) :is(p, small, .help) {
  color: var(--orion-muted) !important;
  -webkit-text-fill-color: var(--orion-muted) !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] :is(
  .tms-lifecycle-line > span,
  .tms-doc-readiness i
) {
  border-color: rgba(103, 215, 255, .28) !important;
  background: rgba(10, 41, 71, .9) !important;
  color: #d8ecfb !important;
  -webkit-text-fill-color: #d8ecfb !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] :is(
  .tms-lifecycle-line > span.done,
  .tms-doc-readiness i.ready
) {
  border-color: rgba(81, 224, 180, .42) !important;
  background: rgba(24, 112, 88, .36) !important;
  color: #bff9e6 !important;
  -webkit-text-fill-color: #bff9e6 !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .tms-doc-readiness i.missing {
  border-color: rgba(255, 122, 122, .42) !important;
  background: rgba(135, 39, 50, .34) !important;
  color: #ffd5d9 !important;
  -webkit-text-fill-color: #ffd5d9 !important;
}

/* Quotes: protect values, collapse optional detail, and keep the result legible. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="quote_to_load"] .broker-rate-shell {
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="quote_to_load"] :is(.broker-rate-breakdown-list > div, .broker-rate-score) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto) !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="quote_to_load"] :is(.broker-rate-breakdown-list > div, .broker-rate-score) > :is(strong, b) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Finance, compliance, and communication each get a stable working layout. */
#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="finance"] :is(.broker-money-kpis, .finance-pdf-summary-grid, .invoice-command-grid) {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 10px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="finance"] :is(.broker-money-workbench, .expense-receipt-workspace, .invoice-command-center) {
  min-width: 0 !important;
  overflow: visible !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="compliance"] .carrier-compliance-baseline {
  min-height: 0 !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="compliance"] :is(.document-grid, .compliance-template-grid) {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 12px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="messenger"] .messenger-shell {
  display: grid !important;
  grid-template-columns: minmax(280px, .34fr) minmax(0, .66fr) !important;
  min-height: min(62vh, 720px) !important;
  overflow: clip !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="messenger"] .messenger-shell.is-empty {
  grid-template-columns: minmax(240px, .34fr) minmax(0, .66fr) !important;
  min-height: 280px !important;
}

#app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="messenger"] :is(.thread-list, .message-panel, .message-stream) {
  min-width: 0 !important;
  overflow: auto !important;
}

/* Login shows a single unambiguous asynchronous state. */
#app .login-shell {
  padding: clamp(18px, 3vw, 48px) !important;
}

#app .login-grid {
  width: min(1080px, 100%) !important;
  max-width: 1080px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 18px !important;
}

#app .login-grid > .login-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  border-radius: 18px !important;
}

#app .login-grid > .login-panel > img {
  width: auto;
  max-width: min(330px, 100%);
  max-height: 160px;
  object-fit: contain;
}

#app .login-status {
  grid-column: 1 / -1;
  min-height: 22px;
  margin: 0;
  color: #b8cde1;
  font-size: 13px;
  line-height: 1.45;
}

#app #loginForm[aria-busy="true"] :is(input, button) {
  cursor: progress !important;
}

/* Responsive contracts are component driven and do not hide functionality. */
@media (max-width: 1180px) {
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-command-metric-grid,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-command-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .freightflow-desk-grid,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="quote_to_load"] .broker-rate-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .freightflow-roster-list {
    max-height: 520px !important;
  }
}

@media (max-width: 860px) {
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > .workspace-head,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-decision-grid,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-work-grid,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="messenger"] .messenger-shell,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="messenger"] .messenger-shell.is-empty,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > .orion-workspace-stage-nav {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) > .workspace-head .toolbar {
    justify-content: flex-start !important;
    max-width: none;
  }

  #app#app.app-shell.orionos-portal-os .role-more-navigation-quick,
  #app#app.app-shell.orionos-portal-os .role-more-navigation-groups {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="messenger"] .messenger-shell {
    min-height: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  #app#app.app-shell .maplibregl-ctrl-group > button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  #app#app.app-shell.orionos-portal-os .role-more-navigation-panel {
    width: auto !important;
    max-width: none !important;
    height: calc(100dvh - var(--role-more-panel-top, calc(70px + env(safe-area-inset-top))) - 12px - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--role-more-panel-top, calc(70px + env(safe-area-inset-top))) - 12px - env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 620px) {
  #app .login-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) {
    padding: 12px !important;
    font-size: 15px !important;
  }

  #app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) :is(.form-grid, form.grid),
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-command-metric-grid,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-command-workflow-grid,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-quick-actions,
  #app#app.app-shell.orionos-portal-os .role-more-navigation-group > div,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="freightflow"] .freightflow-load-command-center {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app#app.app-shell.orionos-portal-os > .shell-grid > .main.orionos-portal-theme:not(.orionos-sellable-product) .form-grid > :is(.field, .span-2, .span-3, .span-4, button[type="submit"]) {
    grid-column: 1 / -1 !important;
  }

  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] .customer-home-next-action,
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="command"] :is(.customer-command-row, .action-card-lite),
  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="quote_to_load"] :is(.broker-rate-breakdown-list > div, .broker-rate-score) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app#app.app-shell.orionos-portal-os > .shell-grid > .main[data-view="quote_to_load"] :is(.broker-rate-breakdown-list > div, .broker-rate-score) > :is(strong, b) {
    text-align: left;
  }

  #app#app.app-shell.orionos-portal-os .role-more-navigation-panel {
    inset-inline: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app#app.app-shell.orionos-portal-os *,
  #app#app.app-shell.orionos-portal-os *::before,
  #app#app.app-shell.orionos-portal-os *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Sidebar reachability contract.
   The portal top bar grows when account controls wrap, so a fixed 78px
   subtraction can place the bottom of the navigation below the viewport.
   Its measured height keeps the sidebar inside the visible window. On
   desktop the sidebar owns vertical scrolling; the All Tools directory must
   not introduce a second clipped scroll region inside it. */
@media (min-width: 821px) {
  #app#app.app-shell.orionos-portal-os > .topbar,
  #app#app.app-shell:not(.orionos-product-os) > .topbar {
    position: sticky !important;
    top: 0 !important;
  }

  #app#app.app-shell.orionos-portal-os > .shell-grid > .sidebar,
  #app#app.app-shell:not(.orionos-product-os) > .shell-grid > .sidebar {
    position: sticky !important;
    top: var(--orion-portal-topbar-height, 78px) !important;
    height: calc(100vh - var(--orion-portal-topbar-height, 78px)) !important;
    height: calc(100dvh - var(--orion-portal-topbar-height, 78px)) !important;
    max-height: calc(100vh - var(--orion-portal-topbar-height, 78px)) !important;
    max-height: calc(100dvh - var(--orion-portal-topbar-height, 78px)) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scroll-padding-block: 12px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 761px) {
  #app#app.app-shell.orionos-portal-os .sidebar .role-more-navigation[open] > .role-more-navigation-panel,
  #app#app.app-shell:not(.orionos-product-os) .sidebar .role-more-navigation[open] > .role-more-navigation-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto;
  }

  #app#app.app-shell.orionos-portal-os .sidebar .role-more-navigation-tools,
  #app#app.app-shell:not(.orionos-product-os) .sidebar .role-more-navigation-tools {
    top: 0;
  }
}