/* ===== Portrait campaign flows =====
   Loaded after style.css. The desktop campaign layout remains the source of
   truth; these rules only give narrative screens and the startup/tutorial
   overlays a narrow, safe-area-aware mobile layout. */

@media (orientation: portrait) {
  :root {
    --pa-safe-top: max(env(safe-area-inset-top, 0px), var(--app-content-safe-top, 0px));
    --pa-safe-right: max(env(safe-area-inset-right, 0px), var(--app-content-safe-right, 0px));
    --pa-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--app-content-safe-bottom, 0px));
    --pa-safe-left: max(env(safe-area-inset-left, 0px), var(--app-content-safe-left, 0px));
  }

  /* Startup loader: keep the convoy and its progress readable on 360px-wide
     screens, with touch-sized recovery controls when a stage fails. */
  .asset-loader {
    padding: calc(var(--pa-safe-top) + 14px) calc(var(--pa-safe-right) + 12px)
      calc(var(--pa-safe-bottom) + 14px) calc(var(--pa-safe-left) + 12px);
  }
  .asset-loader-panel {
    width: min(100%, 480px);
    padding: 22px 14px 18px;
  }
  .asset-loader-kicker {
    margin-bottom: 12px;
    font-size: 10px;
    letter-spacing: .14em;
  }
  .asset-loader-track {
    height: clamp(78px, 22vw, 108px);
    margin-inline: 0;
  }
  .asset-loader-truck {
    width: clamp(84px, 26vw, 104px);
  }
  .asset-loader-status {
    gap: 10px;
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: .08em;
  }
  .asset-loader-actions {
    gap: 8px;
  }
  .asset-loader-action {
    min-height: 44px;
    padding: 8px 12px;
  }

  /* CampaignRoot is marked by CampaignUI so these overrides stay scoped to
     the generated narrative screens and do not affect the battle HUD. */
  .campaign-root[data-campaign-flow="responsive"] {
    place-items: stretch;
    /* Keep a real top row for the manual fullscreen affordance. It must not
       float over a CTA while a narrative screen scrolls underneath it. */
    padding: calc(var(--pa-safe-top) + 64px) calc(var(--pa-safe-right) + 10px)
      calc(var(--pa-safe-bottom) + 10px) calc(var(--pa-safe-left) + 10px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-screen {
    width: 100%;
    max-width: 560px;
    min-height: calc(100vh - var(--pa-safe-top) - var(--pa-safe-bottom) - 20px);
    min-height: calc(100dvh - var(--pa-safe-top) - var(--pa-safe-bottom) - 20px);
    margin: 0 auto;
    padding: 16px 14px calc(10px + var(--pa-safe-bottom));
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: calc(var(--pa-safe-top) + 64px);
  }

  /* Fullscreen remains a manual action, but its text button must not sit over
     a portrait screen heading. The accessible label stays on the button while
     the visible control collapses to a compact safe-area icon. */
  #campaignFullscreenRetry,
  html.telegram-mini-app #campaignFullscreenRetry {
    top: calc(var(--pa-safe-top) + 8px);
    right: calc(var(--pa-safe-right) + 10px);
    bottom: auto;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 0;
    letter-spacing: 0;
  }
  #campaignFullscreenRetry::before {
    content: '⛶';
    color: var(--purple);
    font-size: 25px;
    line-height: 1;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-screen > * {
    min-width: 0;
    max-width: 100%;
  }

  .campaign-root[data-campaign-flow="responsive"] .campaign-splash,
  .campaign-root[data-campaign-flow="responsive"] .campaign-intro {
    /* The root already reserves 64px above and 10px below for the manual
       fullscreen row. Fit these two fixed-height narrative screens inside the
       remaining viewport so their lower CTA never becomes a page-scroll item. */
    height: calc(100vh - var(--pa-safe-top) - var(--pa-safe-bottom) - 74px);
    height: calc(100dvh - var(--pa-safe-top) - var(--pa-safe-bottom) - 74px);
    min-height: calc(100vh - var(--pa-safe-top) - var(--pa-safe-bottom) - 74px);
    min-height: calc(100dvh - var(--pa-safe-top) - var(--pa-safe-bottom) - 74px);
    max-height: calc(100vh - var(--pa-safe-top) - var(--pa-safe-bottom) - 74px);
    max-height: calc(100dvh - var(--pa-safe-top) - var(--pa-safe-bottom) - 74px);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    padding: 14px 14px calc(10px + var(--pa-safe-bottom));
    overflow: hidden;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-splash-content,
  .campaign-root[data-campaign-flow="responsive"] .campaign-content {
    width: 100%;
    max-width: 420px;
    padding: 14px;
    gap: 10px;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-splash-content {
    align-self: center;
    justify-self: center;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-splash-logo-frame {
    width: min(100%, 320px);
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-splash .campaign-splash-start,
  .campaign-root[data-campaign-flow="responsive"] .campaign-button {
    min-width: 0;
    width: 100%;
    max-width: none;
    min-height: 48px;
    padding: 9px 12px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-controls {
    width: 100%;
    gap: 8px;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-intro .campaign-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-intro
    .campaign-controls .campaign-button {
    padding-inline: 4px;
    font-size: clamp(11px, 3.1vw, 13px);
    letter-spacing: .01em;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-title {
    font-size: clamp(21px, 7vw, 32px);
    line-height: 1.08;
    letter-spacing: .07em;
    overflow-wrap: anywhere;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-caption,
  .campaign-root[data-campaign-flow="responsive"] .campaign-subtitle,
  .campaign-root[data-campaign-flow="responsive"] .campaign-result-text,
  .campaign-root[data-campaign-flow="responsive"] .campaign-result-warning {
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  /* Map: the map stays large enough to tap, while mission details follow it
     in normal document order and can scroll on 360x640 devices. */
  .campaign-root[data-campaign-flow="responsive"] .campaign-map {
    grid-template-rows: auto auto minmax(210px, 42vh) auto;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-stage {
    min-height: 210px;
    max-height: 42vh;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-geography {
    width: 92%;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-marker,
  .campaign-root[data-campaign-flow="responsive"] .campaign-marker {
    /* Keep the visible and interactive footprint compact so nearby
       Moscow/Kazan/Yekaterinburg markers do not merge or steal each other's
       taps. */
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 2px;
    border: 2px solid var(--purple);
    background: radial-gradient(circle, rgba(189, 77, 255, .9) 0 22%, rgba(9, 9, 16, .92) 25% 100%);
    box-shadow: 0 0 0 2px rgba(9, 9, 16, .58), 0 0 10px rgba(189, 77, 255, .5);
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-marker::before,
  .campaign-root[data-campaign-flow="responsive"] .campaign-marker::before {
    content: none;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-marker--locked::before,
  .campaign-root[data-campaign-flow="responsive"] .campaign-marker.campaign-map-marker--locked::before {
    content: none;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-marker--locked,
  .campaign-root[data-campaign-flow="responsive"] .campaign-marker.campaign-map-marker--locked {
    border-color: var(--dim);
    background: rgba(9, 9, 16, .88);
    opacity: .72;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-marker--completed::before,
  .campaign-root[data-campaign-flow="responsive"] .campaign-marker.campaign-map-marker--completed::before {
    content: none;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-marker--completed,
  .campaign-root[data-campaign-flow="responsive"] .campaign-marker.campaign-map-marker--completed {
    border-style: double;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-marker.is-selected,
  .campaign-root[data-campaign-flow="responsive"] .campaign-marker.is-selected {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-card {
    gap: 8px;
    padding: 12px;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-card-title {
    font-size: 18px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-card-description,
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-card-requirement,
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-card-prompt {
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  /* Briefing is a scrollable modal rather than a squeezed two-column panel. */
  .campaign-root[data-campaign-flow="responsive"] .campaign-modal-layer {
    place-items: start stretch;
    /* Match the reserved fullscreen row used by the campaign root. */
    padding: calc(var(--pa-safe-top) + 64px) calc(var(--pa-safe-right) + 10px)
      calc(var(--pa-safe-bottom) + 10px) calc(var(--pa-safe-left) + 10px);
    background: rgba(7, 6, 12, .82);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-block: calc(var(--pa-safe-top) + 64px)
      calc(var(--pa-safe-bottom) + 10px);
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-modal-layer > .campaign-briefing {
    width: 100%;
    max-width: 560px;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    padding: 12px;
    gap: 12px;
    overflow: visible;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-briefing > .campaign-title {
    margin: 0;
    font-size: clamp(22px, 6.4vw, 24px);
    line-height: 1.08;
    letter-spacing: .04em;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-briefing-mission-title {
    margin: 0;
    font-size: clamp(15px, 4.5vw, 18px);
    line-height: 1.2;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-briefing-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    overflow: visible;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-briefing-media {
    width: min(100%, 128px);
    height: clamp(140px, 40vw, 160px);
    max-height: 160px;
    min-height: 140px;
    justify-self: center;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-briefing-context {
    max-height: none;
    padding: 4px 2px;
    overflow: visible;
    gap: 10px;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-briefing-lore,
  .campaign-root[data-campaign-flow="responsive"] .campaign-objective-item {
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-briefing-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: stretch;
    align-items: stretch;
    gap: 8px;
    margin-top: 0;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-briefing-controls .campaign-button,
  .campaign-root[data-campaign-flow="responsive"] .campaign-result-controls .campaign-button {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 48px;
    height: 48px;
    padding-inline: 8px;
    font-size: clamp(12px, 3.6vw, 15px);
    letter-spacing: .02em;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  /* Result screens retain the existing victory art, but let its copy and
     controls scroll inside the portrait viewport when the message is long. */
  .campaign-root[data-campaign-flow="responsive"] .campaign-result {
    width: 100%;
    max-width: 560px;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result[data-outcome="defeat"] {
    grid-template-rows: auto auto;
    gap: 12px;
    text-align: center;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result[data-outcome="victory"] {
    inset: 0;
    width: 100vw;
    max-width: none;
    min-height: 100dvh;
    padding: 0;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result[data-outcome="victory"] > .campaign-result-content {
    padding: calc(var(--pa-safe-top) + 72px) calc(var(--pa-safe-right) + 12px)
      calc(var(--pa-safe-bottom) + 10px) calc(var(--pa-safe-left) + 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result[data-outcome="victory"] .campaign-result-heading {
    max-width: 100%;
    font-size: clamp(24px, 8vw, 38px);
    overflow-wrap: anywhere;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result[data-outcome="victory"] .campaign-result-commander {
    width: 100%;
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: 'image copy' 'image controls';
    gap: 8px;
    padding: 9px;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result[data-outcome="victory"] .campaign-result-commander-image {
    width: 68px;
    height: 86px;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result[data-outcome="victory"] .campaign-result-commander-copy {
    grid-area: copy;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result[data-outcome="victory"] .campaign-result-commander-message {
    font-size: 14px;
    line-height: 1.35;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result[data-outcome="victory"] .campaign-result-controls {
    grid-area: controls;
    grid-template-columns: minmax(0, 1fr);
    justify-self: stretch;
    padding: 0;
  }
}

/* Tutorial is positioned by FirstMissionTutorialView next to its target. The
   portrait rules make the panel fit between Telegram safe areas and keep each
   action reachable even when the available height is 640px. */
@media (orientation: portrait) {
  .tutorial-layer {
    padding: calc(var(--pa-safe-top) + 8px) calc(var(--pa-safe-right) + 8px)
      calc(var(--pa-safe-bottom) + 8px) calc(var(--pa-safe-left) + 8px);
  }
  .tutorial-panel {
    width: min(320px, calc(100vw - var(--pa-safe-left) - var(--pa-safe-right) - 20px));
    max-height: calc(100vh - var(--pa-safe-top) - var(--pa-safe-bottom) - 20px);
    max-height: calc(100dvh - var(--pa-safe-top) - var(--pa-safe-bottom) - 20px);
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .tutorial-panel[data-tutorial-orientation="portrait"] h2,
  .tutorial-panel h2 {
    margin-bottom: 6px;
    font-size: clamp(16px, 5vw, 18px);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .tutorial-panel p:not(.sr-only) {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .tutorial-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 10px;
  }
  .tutorial-panel .big-btn,
  .tutorial-skip {
    width: 100%;
    max-width: none;
    min-height: 44px;
    padding: 8px 12px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .tutorial-panel[data-tutorial-placement="above"]::after,
  .tutorial-panel[data-tutorial-placement="below"]::after,
  .tutorial-panel[data-tutorial-placement="left"]::after,
  .tutorial-panel[data-tutorial-placement="right"]::after {
    display: none;
  }
  .tutorial-layer[data-tutorial-state="placement"] .tutorial-panel {
    width: min(300px, calc(100vw - var(--pa-safe-left) - var(--pa-safe-right) - 20px));
    max-height: 138px;
    padding: 10px 12px;
  }
  .tutorial-layer[data-tutorial-state="placement"] .tutorial-panel h2 {
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 1.05;
  }
  .tutorial-layer[data-tutorial-state="placement"] .tutorial-panel p:not(.sr-only) {
    font-size: 12px;
    line-height: 1.25;
  }
  .tutorial-layer[data-tutorial-state="placement"] .tutorial-controls {
    margin-top: 8px;
  }
}

@media (orientation: portrait) and (max-height: 700px) {
  .campaign-root[data-campaign-flow="responsive"] .campaign-screen {
    padding-top: 12px;
    padding-bottom: calc(10px + var(--pa-safe-bottom));
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map {
    grid-template-rows: auto auto minmax(180px, 38vh) auto;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-map-stage {
    min-height: 180px;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-briefing-media {
    max-height: 160px;
    min-height: 140px;
  }
  .tutorial-panel {
    padding-block: 10px;
  }
  .tutorial-panel p:not(.sr-only) {
    font-size: 13px;
  }
}

/* Narrow portrait viewports cannot give the briefing CTA pair enough width
   for the long Russian start label. Stack that pair before it can overflow. */
@media (orientation: portrait) and (max-width: 420px) {
  .campaign-root[data-campaign-flow="responsive"] .campaign-intro .campaign-controls,
  .campaign-root[data-campaign-flow="responsive"] .campaign-briefing-controls,
  .campaign-root[data-campaign-flow="responsive"] .campaign-result-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Support is a compact overlay, not a narrative screen: avoid inheriting the
   responsive campaign-screen viewport height or the briefing layer's top row. */
@media (orientation: portrait) {
  .campaign-root[data-campaign-flow="responsive"] .campaign-support-modal-layer {
    place-items: center;
    padding: calc(var(--pa-safe-top, 0px) + 10px)
      calc(var(--pa-safe-right, 0px) + 10px)
      calc(var(--pa-safe-bottom, 0px) + 10px)
      calc(var(--pa-safe-left, 0px) + 10px);
    overflow: hidden;
  }
  .campaign-root[data-campaign-flow="responsive"]
    .campaign-support-modal-layer > .campaign-support-modal {
    width: min(540px, 100%);
    height: auto;
    min-height: 0;
    max-height: calc(100vh - var(--pa-safe-top, 0px)
      - var(--pa-safe-bottom, 0px) - 20px);
    max-height: calc(100dvh - var(--pa-safe-top, 0px)
      - var(--pa-safe-bottom, 0px) - 20px);
    margin: auto;
    overflow: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asset-loader-truck,
  .asset-loader-progress span {
    transition: none !important;
  }
}

/* ===== Campaign control and HUD polish =====
   Portrait keeps the primary action above support while preserving the same
   framed hit target and readable status text. */
@media (orientation: portrait) {
  .campaign-root[data-campaign-flow="responsive"] .campaign-splash-controls,
  .campaign-root[data-campaign-flow="responsive"] .campaign-result-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: 100%;
    gap: 8px;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-splash-controls > .campaign-button {
    flex: 0 0 auto;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 9px 8px;
    font-size: clamp(11px, 3.1vw, 14px);
    letter-spacing: .03em;
    white-space: nowrap;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result-controls > .campaign-button {
    flex: 0 0 auto;
    width: min(220px, 100%);
    min-width: 0;
    max-width: 220px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 9px 8px;
    font-size: clamp(11px, 3.1vw, 14px);
    letter-spacing: .03em;
    white-space: nowrap;
  }
  .campaign-root[data-campaign-flow="responsive"] .campaign-result-controls > .campaign-support-trigger {
    font-size: clamp(11px, 3.1vw, 13px);
  }

  .campaign-root[data-campaign-flow="responsive"]
    .campaign-result[data-outcome="victory"] .campaign-result-commander {
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 'image copy';
    align-items: start;
    margin: auto 0 0;
  }
  .campaign-root[data-campaign-flow="responsive"]
    .campaign-result[data-outcome="victory"] .campaign-result-commander-image {
    grid-area: image;
    align-self: start;
  }
  .campaign-root[data-campaign-flow="responsive"]
    .campaign-result[data-outcome="victory"] .campaign-result-commander-copy {
    grid-area: copy;
    align-self: start;
  }
  .campaign-root[data-campaign-flow="responsive"]
    .campaign-result[data-outcome="victory"] .campaign-result-controls {
    grid-area: auto;
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    margin-top: 8px;
    padding: 0;
    gap: 8px;
    pointer-events: auto;
  }

  /* Large earned values must wrap inside the narrow objective strip instead
     of disappearing past its right edge. */
  #missionObjectives .mission-objective-compact,
  #missionObjectives .mission-objective-compact-row {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #missionObjectives .mission-objective-compact {
    max-height: none;
  }

  /* Keep the warehouse value under the same center line as its heading. */
  #logisticsModule .warehouse-status {
    justify-items: center;
    text-align: center;
  }
  #logisticsModule .warehouse-status .metric-label,
  #logisticsModule .warehouse-status #hpText {
    width: 100%;
    text-align: center;
  }
}