/* ============================================
   Orders App — All Styles
   Extracted from kohler-vtex-custom.css
   ============================================ */

.order-details-page {
  /* --- Order Detail Breadcrumb --- */
  .bold-breadcrumb-order-detail-breadcrumb {
    max-width: 300px;
    margin: 0;

    div {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .custom-table-row-even {
    background-color: #ffffff;
  }

  /* --- Order Details Grid --- */
  .orderDetailsGrid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      'transRefNum'
      'shipToAddress'
      'shippingMethod'
      'salesDocumentNumber'
      'brand'
      'emailAddress'
      'paymentTerms'
      'orderType'
      'reqDeliveryDate'
      'estTotalVolume'
      'estTotalWeight'
      'subTotal'
      'surcharge'
      'totalTax'
      'createDate'
      'incoTerms'
      'markFor'
      'totalNetPrice'
      'totalNetPrice'
      'totalNetPrice'
      'specialInstructions';
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
  }

  @media only screen and (min-width: 640px) {
    .orderDetailsGrid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(13, auto);
      grid-template-areas:
        'transRefNum transRefNum transRefNum'
        'shipToAddress shipToAddress shipToAddress'
        'shippingMethod shippingMethod shippingMethod'
        'salesDocumentNumber salesDocumentNumber brand'
        'emailAddress emailAddress emailAddress'
        'paymentTerms paymentTerms paymentTerms'
        'orderType orderType orderType'
        'reqDeliveryDate estTotalVolume estTotalWeight'
        'subTotal surcharge totalTax'
        'createDate createDate incoTerms'
        'markFor markFor markFor'
        'totalNetPrice totalNetPrice totalNetPrice'
        'specialInstructions specialInstructions specialInstructions';
    }
  }

  @media only screen and (min-width: 990px) {
    .orderDetailsGrid {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: repeat(5, auto);
      grid-template-areas:
        'transRefNum transRefNum shipToAddress shipToAddress shipToAddress shippingMethod shippingMethod shippingMethod'
        'salesDocumentNumber brand emailAddress emailAddress emailAddress paymentTerms paymentTerms paymentTerms'
        'orderType orderType reqDeliveryDate estTotalVolume estTotalWeight subTotal surcharge totalTax'
        'createDate incoTerms markFor markFor markFor totalNetPrice totalNetPrice totalNetPrice'
        'specialInstructions specialInstructions specialInstructions specialInstructions specialInstructions specialInstructions specialInstructions specialInstructions';
    }
  }

  /* --- Order Detail Search Row Wrapper --- */
  .orderDetailSearchRowWrapper .customTableCell {
    white-space: nowrap;
  }

  /* --- Order Detail Table Product Cell --- */
  .orderDetailTableCellProductContent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .orderDetailTableCellProductImage {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
  }

  .orderDetailTableCellProductImagePlaceholder {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #bdbdbd;
  }

  .orderDetailTableCellProductInfo {
    min-width: 0;
    flex: 1;

    > a {
      display: block;
      text-decoration: none;

      > span {
        display: block;
      }
    }
  }

  .orderDetailTableCellProductName {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
  }

  .orderDetailTableCellProductDescription {
    font-size: 13px;
    line-height: 18px;
    color: #494949;
    margin-top: 2px;
  }

  .orderDetailTableCellProductBrand {
    font-size: 12px;
    line-height: 16px;
    color: #757575;
    margin-bottom: 2px;
  }

  /* --- Order Detail Cancel Button --- */
  .orderDetailActionCancelButton {
    border-radius: 4px;
    background: transparent;
    border: 1px solid #494949;
    color: #494949;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;

    &:hover {
      background-color: #494949;
      color: #fff;
    }
  }

  .orderDetailActionCancelButtonDisabled {
    border-radius: 4px;
    border-color: #bdbdbd;
    color: #bdbdbd;
    cursor: not-allowed;

    &:hover {
      background: transparent;
      color: #bdbdbd;
    }
  }



  /* --- Order Detail Follow Column --- */
  .orderDetailFollowColumn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: visible;
  }

  .orderDetailFollowColumnChildRow {
    min-height: 48px;
  }

  .orderDetailFollowColumnVerticalLineChild,
  .orderDetailFollowColumnVerticalLineChildFirst,
  .orderDetailFollowColumnVerticalLineChildLast,
  .orderDetailFollowColumnVerticalLineChildFirstLast,
  .orderDetailFollowColumnVerticalLineParent {
    position: absolute;
    left: 50%;
    width: 1px;
    background-color: #757575;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
  }

  .orderDetailFollowColumnVerticalLineParent {
    top: calc(50% + 12px);
    bottom: 0;
  }

  .orderDetailFollowColumnVerticalLineChild {
    top: -25px;
    bottom: -25px;
    min-height: 40px;
  }

  .orderDetailFollowColumnVerticalLineChildFirst {
    top: -45px;
    bottom: -25px;
    min-height: 40px;
  }

  .orderDetailFollowColumnVerticalLineChildLast {
    top: -25px;
    bottom: -12px;
    min-height: 24px;
  }

  .orderDetailFollowColumnVerticalLineChildFirstLast {
    top: -45px;
    bottom: -12px;
    min-height: 24px;
  }

  .orderDetailFollowCheckboxHidden {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .orderDetailFollowCheckbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #757575;
    transition: color 0.2s;
    position: relative;

    &:hover {
      color: #494949;
    }
  }

  .followOrderLabel {
    display: flex;
    white-space: nowrap;
  }

  .followOrderLabelContent {
    display: flex;
    gap: 5px;
    align-items: center;
    color: #494949;
  }

  .followOrderLabelText {
    color: #494949;
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.3px;
  }

  .divider {
    border-right: 1px solid #cdcdcd;
    height: 23px;
  }

  /* --- Order Detail Table Search --- */
  .orderDetailSearchRow {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .orderDetailSearchWrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 256px;
    height: 40px;
    padding-bottom: 8px;
    border-bottom: 1px solid #757575;
  }

  .orderDetailSearchIcon {
    flex-shrink: 0;
    color: #757575;
  }

  .orderDetailSearchInput {
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    color: #212121;
    width: 100%;
    background: transparent;
    letter-spacing: -0.025em;
    line-height: 1.5;

    &::placeholder {
      color: #757575;
    }
  }

  .orderDetailSearchButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 106px;
    height: 40px;
    padding: 9px 30px;
    background-color: transparent;
    border: 1px solid #494949;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    color: #494949;
    cursor: pointer;
    transition: background-color 0.15s ease;
    white-space: nowrap;
    letter-spacing: -0.02em;

    &:hover {
      background-color: #f5f5f5;
    }
  }

  .orderDetailTableToggleRow {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }

  /* --- Shipping Status Badge --- */
  .shippingStatusBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 2px;
    line-height: 14px;
    white-space: nowrap;
    color: #212121;
    background: #f3f4f6;
  }

  /* Main line-item row badge — a bit larger than the shipment sub-row default */
  .shippingStatusBadge--large {
    padding: 4px 10px;
    line-height: 16px;
  }

  .shippingStatusBadge--PENDING {
    background: #dee6fe;
  }
  .shippingStatusBadge--ALLOCATED {
    background: #f9f2df;
  }
  .shippingStatusBadge--PLANNED {
    background: #e6e6e6;
  }
  .shippingStatusBadge--SHIPPED {
    background: #e4efe0;
  }
  .shippingStatusBadge--CANCELED {
    background: #f2e3e3;
  }
  .shippingStatusBadge--default {
    background: #f3f4f6;
  }
  .shippingStatusBadge--PARTIALLY_PROCESSED {
    background: #f9f2df;
  }
  .shippingStatusBadgeTooltip {
    white-space: pre-line;
    font-weight: 500;
  }

  /* Narrower tooltip box on tablet/mobile, matches the tap breakpoint in ShippingStatusBadge.tsx */
  @media screen and (max-width: 1024px) {
    .shippingStatusBadgeTooltipRoot {
      max-width: 250px;
      white-space: normal;
    }
  }

  tr.customTableRow--injectedContent:has(+ tr.orderDetailShipmentSubRow) .customTableCell--injectedContent {
    border-bottom-color: #ffffff !important;
  }

} /* end .order-details-page */


.orderDetailTableScreen .productInfoColumn {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

/* Gap between product image and details */
.orderDetailTableScreen .productImage {
  margin-right: 12px;
}

/* Placeholder icon shown when a SKU has no image */
.orderDetailTableScreen .productImagePlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bdbdbd;
}

.orderDetailTableScreen .productDetails {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.orderDetailTableScreen .productDetails .childProductIndicator {
  width: 20px;
  display: flex;
  align-items: center;
  color: #727273;
  font-size: 14px;
  margin-right: 8px;
  flex-shrink: 0;
}

.orderDetailTableScreen .productName {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.3px;
  color: #212121;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  min-width: 250px;
}

@media screen and (max-width: 767px) {
  .orderDetailTableScreen .productName {
    min-width: auto;
  }
}

.orderDetailTableScreen .productNameFastPass {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  padding-right: 5px;
}

.orderDetailTableScreen .productDescription {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.25px;
  color: #212121;
}

.orderDetailTableScreen .productDescription div {
  margin-bottom: 2px;
}


/* --- Order Detail Search Dropdown (portaled to body) --- */
.orderDetailSearchDropdownPortal {
  position: absolute;
  z-index: 9999;

  .orderDetailSearchDropdown {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 320px;
    overflow-y: auto;
    max-width: 360px;
    min-width: 340px;
  }

  .orderDetailSearchDropdownEmpty {
    padding: 16px;
    text-align: center;
    color: #757575;
    font-size: 14px;
  }

  .orderDetailSearchDropdownList {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .orderDetailSearchDropdownItem {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;

    &:hover {
      background-color: #f5f5f5;
    }

    &:last-child {
      border-bottom: none;
    }
  }

  .orderDetailSearchDropdownItemRow {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .orderDetailSearchDropdownItemColSku {
    flex-shrink: 0;
    min-width: 80px;
  }

  .orderDetailSearchDropdownItemSku {
    font-size: 13px;
    font-weight: 500;
    color: #212121;
  }

  .orderDetailSearchDropdownItemColImage {
    flex-shrink: 0;
  }

  .orderDetailSearchDropdownItemImage {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 2px;
  }

  .orderDetailSearchDropdownItemImagePlaceholder {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bdbdbd;
  }

  .orderDetailSearchDropdownItemColDetails {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }

  .orderDetailSearchDropdownItemBrand {
    font-size: 11px;
    color: #757575;
    line-height: 16px;
  }

  .orderDetailSearchDropdownItemSkuName {
    font-size: 13px;
    font-weight: 500;
    color: #212121;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .orderDetailSearchDropdownItemSkuDetail {
    font-size: 12px;
    color: #494949;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .orderDetailSearchDropdownHighlight {
    background-color: #fff3cd;
    font-weight: 600;
    border-radius: 1px;
  }
}

/* --- Cancel Confirm Dialog (portaled to body) --- */
.cancelConfirmOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.cancelConfirmContent {
  width: 100%;
  max-width: 360px;
  background: var(--dsm-color-primary-100);
  padding: 32px 28px 28px;
  box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.15);
}

.cancelConfirmTitle {
  font-weight: 600;
  margin-bottom: 12px;
}

.cancelConfirmBody {
  color: #494949;
  margin-bottom: 24px;
}

.cancelConfirmActions {
  display: flex;
  gap: 12px;
}

/* --- Cancel Loading Overlay (portaled to body) --- */
.cancelLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
}

/* --- Cancel Toast (portaled to body) --- */
.cancelToast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 480px;
  padding: 14px 16px;
  background: #212121;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

  span {
    flex: 1;
  }

  button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
}

/* ============================================
   Shared Styles (both pages)
   ============================================ */

:is(.orders-page, .order-details-page) {
  /* --- OrganizationList --- */
  .organizationListSelectWrapper {
    position: relative;
  }

  .organizationListLabel {
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 10px;
    line-height: 12px;
    color: #727272;
    pointer-events: none;
    z-index: 1;
  }

  .organizationListSelect {
    min-width: 268px;
    height: 48px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding-top: 20px;
    padding-left: 12px;
    padding-right: 35px;
    padding-bottom: 8px;
    cursor: pointer;
    background-color: white;
    outline: none;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #3f3f40;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 13px 30px;
    width: 100%;
  }

  .organizationList {
    width: 100%;
  }

  .organizationListSelect:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .organizationListTextDisplay {
    display: flex;
    align-items: center;
    user-select: none;
  }

  .organizationListSelectLoading {
    cursor: wait;
    opacity: 0.6;
  }

  .confirmationModalTitle {
    margin: 0 0 16px;
    color: #000;
    font-size: var(--type-scale-m-label-medium-l-font-size, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-scale-m-label-medium-l-line-height, 28px);
    letter-spacing: var(--type-scale-m-label-medium-l-letter-spacing, -0.4px);
    padding-left: 6px;
  }

  .confirmationModalDescription {
    margin: 0 0 24px;
    color: #757575;
    font-size: var(--type-scale-m-label-regular-s-font-size, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-scale-m-label-regular-s-line-height, 22px);
    letter-spacing: var(--type-scale-m-label-regular-s-letter-spacing, -0.3px);
    padding-left: 6px;
  }

  .organizationListSelectNonAuthenticated {
    padding: 0;
    width: 268px;
    height: 48px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    cursor: pointer;
    background-color: white;
    outline: none;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #3f3f40;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 13px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- OrganizationListSkeleton --- */
  [class*='skeletonLabel'],
  [class*='skeletonTextLine'] {
    background-color: #e0e0e0;
    background: linear-gradient(90deg, #e0e0e0 0%, #f5f5f5 50%, #e0e0e0 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  [class*='skeletonLabel'] {
    display: inline-block;
    position: absolute;
    top: 8px;
    left: 12px;
    width: 50px;
    height: 10px;
    z-index: 1;
  }

  [class*='skeletonDropdown'] {
    display: block;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    width: 268px;
    height: 48px;
    padding-top: 20px;
    padding-left: 12px;
    padding-right: 35px;
    padding-bottom: 8px;
  }

  [class*='skeletonDropdown']::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 4px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(220, 220, 220, 0.8) 50%,
      transparent 100%
    );
    animation: shimmer-overlay 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
  }

  [class*='skeletonTextLine'] {
    display: block;
    border-radius: 2px;
    width: 180px;
    height: 14px;
    margin-top: 4px;
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  [class*='skeletonLabel']::before,
  [class*='skeletonTextLine']::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 100%
    );
    animation: shimmer-overlay 1.5s ease-in-out infinite;
  }

  @keyframes shimmer-overlay {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
} /* end shared */

.orders-page {
  /* --- AllOrderTabs --- */
  .tabLayoutContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .tabContent {
    width: 100%;
  }

  /* --- Order Page --- */
  .orderPageContainer {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ordersTabLoading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30rem;
  }

  .line-items-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .line-items-table-wrapper {
    overflow-x: auto;
  }

} /* end .orders-page */

/* --- Order Detail Print --- */
@media print {
  @page {
    margin: 0;
    size: auto;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  [class*='orderDetailTable'] thead {
    display: table-row-group !important;
  }

  [class*='vtex-sticky-layout'],
  [class*='vtex-store-footer'] {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================
   End: Orders App — All Styles
   ============================================ */