:root {
  --responsive-mobile-max: 768px;
  --responsive-touch-min: 44px;
  --responsive-page-gutter: 16px;
  --responsive-card-radius: 12px;
  --responsive-safe-top: env(safe-area-inset-top, 0px);
  --responsive-safe-right: env(safe-area-inset-right, 0px);
  --responsive-safe-bottom: env(safe-area-inset-bottom, 0px);
  --responsive-safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.responsive-mobile-only {
  display: none !important;
}

.responsive-stack,
.responsive-card-list,
.responsive-form,
.responsive-card-body {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.responsive-card {
  min-width: 0;
  border: 1px solid #dbe4ee;
  border-radius: var(--responsive-card-radius);
  background: #fff;
  overflow: hidden;
}

.responsive-card-header,
.responsive-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.responsive-card-header {
  justify-content: space-between;
  min-height: var(--responsive-touch-min);
  padding: 10px 12px;
}

.responsive-card-body {
  padding: 12px;
}

.responsive-text,
.responsive-wrap {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.responsive-ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.responsive-modal {
  max-width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
}

.responsive-sticky-actions {
  position: sticky;
  z-index: 5;
  bottom: 0;
  padding-bottom: max(10px, var(--responsive-safe-bottom));
  background: inherit;
}

.responsive-mobile-command-bar {
  display: none;
}

@media (max-width: 768px) {
  html,
  body.responsive-app {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body.responsive-app.erp-tenant .topbar {
    display: none !important;
  }

  body.responsive-app.erp-tenant .responsive-mobile-command-bar {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: var(--responsive-touch-min);
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
  }

  body.responsive-app.erp-tenant .responsive-mobile-command-bar > button {
    width: auto;
    min-width: 72px;
    min-height: var(--responsive-touch-min) !important;
    flex: 0 0 auto;
  }

  body.responsive-app.erp-tenant .responsive-mobile-command-bar .responsive-mobile-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    line-height: 1;
  }

  /* The desktop status pill is hidden on phones, so keep the same live
     collector state in the shared command row immediately before logout. */
  body.responsive-app.erp-tenant .erp-mobile-nav-tools {
    display: grid;
    grid-template-columns: minmax(64px, auto) minmax(64px, auto) minmax(0, 1fr) minmax(56px, auto);
    gap: 4px;
  }

  body.responsive-app.erp-tenant .erp-mobile-nav-tools > button {
    min-width: 0;
  }

  body.responsive-app.erp-tenant .erp-mobile-nav-tools .responsive-mobile-logout {
    margin-left: 0;
  }

  body.responsive-app.erp-tenant .responsive-mobile-status-pill {
    display: flex;
    min-width: 0;
    min-height: var(--responsive-touch-min);
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0 7px;
    overflow: hidden;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: #2563eb;
    background: #f8fbff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  body.responsive-app.erp-tenant .responsive-mobile-status-pill > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.responsive-app.erp-tenant .erp-mobile-nav-tools .erp-workbench-return {
    border-color: #cfdbea;
    color: #1d4ed8;
    background: #fff;
    font-weight: 800;
  }

  body.responsive-app.erp-tenant[data-erp-view="orderManagementCard"] .responsive-mobile-command-bar {
    display: none !important;
  }

  body.responsive-app.erp-tenant[data-erp-view="orderInventoryCard"][data-erp-inventory-view="stock"] > .shell > .erp-mobile-nav-tools {
    display: none !important;
  }

  body.responsive-app.erp-tenant #orderInventoryMobileToolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(70px, 1.5fr) minmax(0, 1fr);
    gap: 4px;
    margin-bottom: 6px;
  }

  body.responsive-app.erp-tenant[data-erp-view="orderManagementCard"] #orderMobilePrimaryToolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.responsive-app.erp-tenant #orderInventoryMobileToolbar > button {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: var(--responsive-touch-min) !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 2px;
    overflow: hidden;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.responsive-app {
    min-height: 100dvh;
    padding-top: var(--responsive-safe-top);
    padding-right: var(--responsive-safe-right);
    padding-bottom: var(--responsive-safe-bottom);
    padding-left: var(--responsive-safe-left);
  }

  body.responsive-app :where(img, svg, video, canvas, iframe) {
    max-width: 100%;
  }

  body.responsive-app :where(
    button,
    [role="button"],
    summary,
    a.responsive-action,
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"])
  ) {
    min-height: var(--responsive-touch-min) !important;
    touch-action: manipulation;
  }

  body.responsive-app :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ) {
    width: 100%;
    max-width: 100%;
    min-height: var(--responsive-touch-min) !important;
    font-size: 16px;
  }

  body.responsive-app :where(input[type="number"], input[inputmode="numeric"], input[inputmode="decimal"]) {
    font-variant-numeric: tabular-nums;
  }

  .responsive-desktop-only {
    display: none !important;
  }

  .responsive-mobile-only {
    display: initial !important;
  }

  .responsive-stack,
  .responsive-card-list,
  .responsive-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .responsive-actions {
    flex-wrap: wrap;
  }

  .responsive-actions > * {
    min-width: var(--responsive-touch-min);
  }

  .responsive-modal,
  body.responsive-app :where(.order-modal-card, .order-editor-card, .refresh-choice-dialog) {
    width: calc(100vw - var(--responsive-safe-left) - var(--responsive-safe-right) - 24px) !important;
    max-width: calc(100vw - var(--responsive-safe-left) - var(--responsive-safe-right) - 24px) !important;
    max-height: calc(100dvh - var(--responsive-safe-top) - var(--responsive-safe-bottom) - 24px) !important;
    overflow: auto;
    overscroll-behavior: contain;
  }

  body.responsive-app #orderEditorModal .order-editor-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    overflow: hidden;
  }

  body.responsive-app #orderEditorModal .order-editor-feedback {
    margin: 0;
    padding: 8px 2px 4px;
    font-size: 13px;
  }

  body.responsive-app #orderEditorModal #orderRoomEditorList {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.responsive-app #orderEditorModal [data-order-room-field-grid] {
    width: 100%;
    min-width: 0 !important;
  }

  body.responsive-app #orderEditorModal .order-modal-actions {
    z-index: 4;
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: max(2px, var(--responsive-safe-bottom));
    border-top: 1px solid #e2e8f0;
    background: #fff;
  }

  body.responsive-app :where(.order-modal, .refresh-choice-modal) {
    padding-top: max(12px, var(--responsive-safe-top));
    padding-right: max(12px, var(--responsive-safe-right));
    padding-bottom: max(12px, var(--responsive-safe-bottom));
    padding-left: max(12px, var(--responsive-safe-left));
  }

  body.responsive-app :where(.order-field-grid, .order-header-grid, .order-detail-grid, .order-system-fields) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.responsive-app :where(.order-inventory-create, .ihg-account-create) {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.responsive-app :where(.order-inventory-create, .ihg-account-create) > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-column: 1 !important;
  }

  body.responsive-app :where(
    .monitor-create,
    .checkout-reminder-toolbar,
    .procurement-create-grid,
    .auto-quote-schedule,
    .account-inventory-hotel-rule
  ) {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }

  body.responsive-app :where(
    .monitor-create,
    .checkout-reminder-toolbar,
    .procurement-create-grid,
    .auto-quote-schedule,
    .account-inventory-hotel-rule
  ) > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-column: 1 !important;
    grid-area: auto !important;
  }

  body.responsive-app.erp-tenant .order-table-shell {
    position: relative;
    padding-top: 0;
  }

  body.responsive-app.erp-tenant .order-inventory-table-shell {
    display: block;
    gap: 0;
    padding-top: 0;
  }

  body.responsive-app.erp-tenant #orderInventoryStockView > .order-workspace-head {
    display: block;
  }

  body.responsive-app.erp-tenant #orderInventoryStockView .order-workspace-actions {
    display: block;
    width: 100%;
  }

  body.responsive-app.erp-tenant #orderInventoryStockView .order-workspace-actions > #orderInventoryCreateToggleBtn,
  body.responsive-app.erp-tenant #orderInventoryStockView #orderInventorySearchBtn {
    display: none !important;
  }

  body.responsive-app.erp-tenant #orderInventoryStockView .workspace-search-control {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  body.responsive-app.erp-tenant :is(#orderSearchInput, #orderInventorySearchInput) {
    width: 100%;
    max-width: 100%;
    min-height: var(--responsive-touch-min) !important;
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }

  body.responsive-app.erp-tenant .order-table-shell > .order-mobile-actions-toggle {
    position: absolute;
    z-index: 12;
    top: 0 !important;
    right: 4px;
    display: inline-flex;
    width: auto;
    min-width: 64px;
    min-height: var(--responsive-touch-min) !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    background: rgba(239, 246, 255, .98);
    transform: translateY(-50%);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .14);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  body.responsive-app.erp-tenant .order-toolbar > .order-toolbar-actions-toggle {
    position: static;
    z-index: auto;
    right: auto;
    display: inline-flex;
    width: 52px;
    min-width: 52px;
    min-height: var(--responsive-touch-min) !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 4px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1d4ed8;
    background: #eff6ff;
    transform: none;
    box-shadow: none;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  body.responsive-app.erp-tenant .order-viewport-actions-toggle {
    min-width: 58px;
    height: var(--responsive-touch-min);
    min-height: var(--responsive-touch-min) !important;
    padding: 0 6px;
    border-radius: 8px;
  }

  body.responsive-app .order-date-popover {
    width: calc(100vw - var(--responsive-safe-left) - var(--responsive-safe-right) - 24px);
    max-height: calc(100dvh - var(--responsive-safe-top) - var(--responsive-safe-bottom) - 24px);
    overflow: auto;
  }

  body.responsive-app :where(.shell, .app, main, section, article, form, fieldset) {
    min-width: 0;
    max-width: 100%;
  }

  html.order-mobile-brief-fullscreen,
  body.responsive-app.erp-tenant.order-mobile-brief-fullscreen {
    overflow: hidden !important;
  }

  body.responsive-app.erp-tenant.order-mobile-brief-fullscreen #orderManagementCard.order-mobile-brief-mode {
    position: fixed !important;
    z-index: 1000;
    inset: 0;
    display: block !important;
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    margin: 0;
    padding-top: max(8px, var(--responsive-safe-top));
    padding-right: max(8px, var(--responsive-safe-right));
    padding-bottom: max(8px, var(--responsive-safe-bottom));
    padding-left: max(8px, var(--responsive-safe-left));
    border: 0;
    border-radius: 0;
    background: #f4f7fb;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.responsive-app.erp-tenant.order-mobile-brief-fullscreen #orderManagementCard > :not(.order-toolbar):not(.order-table-shell) {
    display: none !important;
  }

  body.responsive-app.erp-tenant.order-mobile-brief-fullscreen #orderManagementCard > .order-toolbar {
    position: sticky;
    z-index: 1003;
    top: 0;
    display: flex !important;
    min-height: 52px;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    padding: 0 0 8px;
    background: #f4f7fb;
  }

  body.responsive-app.erp-tenant.order-mobile-brief-fullscreen #orderManagementCard > .order-toolbar > :not(#orderMobileBriefToggle) {
    display: none !important;
  }

  body.responsive-app.erp-tenant.order-mobile-brief-fullscreen #orderMobileBriefToggle {
    display: inline-flex !important;
    width: auto;
    min-width: 72px;
    height: var(--responsive-touch-min);
    min-height: var(--responsive-touch-min) !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 14px;
  }

  body.responsive-app.erp-tenant.order-mobile-brief-fullscreen #orderManagementCard > .order-table-shell {
    display: block;
    margin: 0;
    padding: 0;
  }

  body.responsive-app.erp-tenant.order-mobile-brief-fullscreen #orderManagementCard > .order-table-shell > .order-table-wrap {
    max-width: 100%;
    border-radius: 10px;
    overflow-x: auto;
  }

  body.responsive-app.erp-tenant.order-mobile-brief-fullscreen .order-table-column-resize {
    display: none !important;
  }

  body.responsive-app.erp-tenant.order-mobile-brief-fullscreen #orderViewportStickyHead {
    z-index: 1002;
    top: calc(max(8px, var(--responsive-safe-top)) + 52px);
  }

  body.responsive-app.erp-tenant :is(#orderEditorModal, #orderInventoryCard) :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ) {
    min-height: var(--responsive-touch-min) !important;
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }

  body.responsive-app.erp-tenant :is(#orderEditorModal, #orderInventoryCard) :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea
  ) {
    caret-color: #dc2626 !important;
  }

  body.responsive-app.erp-tenant #ihgAccountTable th.order-operation,
  body.responsive-app.erp-tenant #ihgAccountTable td.order-operation {
    width: 101px !important;
    min-width: 101px !important;
    max-width: 101px !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  body.responsive-app.erp-tenant .ihg-account-actions button {
    width: var(--responsive-touch-min) !important;
    min-width: var(--responsive-touch-min) !important;
    padding: 0 !important;
  }

  body.responsive-app.erp-tenant #orderInventoryTable .order-row-actions button:not([data-order-inventory-restore]) {
    width: var(--responsive-touch-min) !important;
    min-width: var(--responsive-touch-min) !important;
    padding: 0 !important;
  }

  body.responsive-app.erp-tenant #orderInventoryTable .order-row-actions [data-order-inventory-restore] {
    min-width: 48px;
    padding: 0 5px;
  }

  body.responsive-app.erp-tenant .order-table .order-action-detail {
    display: none !important;
  }

  body.responsive-app.erp-tenant .order-table .order-action-label-desktop {
    display: none;
  }

  body.responsive-app.erp-tenant .order-table .order-action-label-mobile {
    display: inline;
  }

  body.responsive-app.erp-tenant .order-checked-in-month-row > th {
    padding: 6px 8px;
  }

  body.responsive-app.erp-tenant .order-checked-in-month-heading {
    gap: 6px;
  }

  body.responsive-app.erp-tenant .order-checked-in-month-heading strong {
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  body.responsive-app.erp-tenant .order-checked-in-month-visibility {
    min-height: var(--responsive-touch-min);
    padding: 0 8px;
    font-size: 11px;
  }

  body.responsive-app.erp-tenant .order-checked-in-partner-filter {
    min-height: var(--responsive-touch-min);
  }

  body.responsive-app.erp-tenant .order-checked-in-partner-filter > span {
    font-size: 12px;
  }

  body.responsive-app.erp-tenant .order-checked-in-partner-filter select {
    min-height: var(--responsive-touch-min);
    font-size: 16px;
  }

  body.responsive-app.erp-tenant .order-table td.order-confirmation-data-cell,
  body.responsive-app.erp-tenant .order-table td.order-confirmation-data-cell .order-cell-stack,
  body.responsive-app.erp-tenant .order-table td.order-confirmation-data-cell .order-cell-primary {
    justify-content: flex-start;
    text-align: left;
  }

  body.responsive-app.erp-tenant .order-table td.order-confirmation-data-cell .order-cell-stack {
    margin-right: auto;
    margin-left: 0;
  }

  body.responsive-app.erp-tenant .order-table th.order-operation,
  body.responsive-app.erp-tenant .order-table td.order-operation {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  body.responsive-app.erp-tenant .order-table .order-row-actions :is(.order-action-edit, .order-action-delete) {
    width: 34px;
    min-width: 34px;
    padding: 0 !important;
  }

  body.responsive-app.erp-tenant .inventory-calendar-mark-toggle,
  body.responsive-app.erp-tenant .order-inventory-profit-input,
  body.responsive-app.erp-tenant .order-inventory-price-source-eye {
    min-height: var(--responsive-touch-min) !important;
    font-size: 16px;
  }

  body.responsive-app.erp-tenant .order-inventory-profit-input {
    width: 100%;
    min-width: 76px;
  }

  body.responsive-app.erp-tenant .inventory-calendar-mark-toggle {
    width: var(--responsive-touch-min) !important;
    min-width: var(--responsive-touch-min) !important;
    padding: 0 !important;
  }

  body.responsive-app.erp-tenant .order-inventory-price-source-eye {
    width: var(--responsive-touch-min) !important;
    min-width: var(--responsive-touch-min) !important;
    padding: 0 !important;
  }

}