/* Commerce app overrides.
   Keep small and app-scoped to avoid cross-app regressions. */

.commerce-page .form-label {
  font-weight: 600;
}

/* Make <select> match shared UI input sizing/spacing (inputs are styled globally in main.css). */
.commerce-page select {
  height: 50px;
  width: 100%;
  border: 1px solid #D9D9D9;
  line-height: 50px;
  border-radius: 4px;
  padding-left: 13px;
  padding-right: 13px;
  font-size: 0.875rem;
  margin-bottom: 32px;
  background-color: #fff;
}

/* Keep switch aligned in the header area. */
.commerce-page .product-visibility-header .switch {
  margin-bottom: 0;
}

/* Ensure the left dashboard sidebar never appears in the content flow on mobile (behavior must match other apps). */
@media (max-width: 991.98px) {
  .commerce-page .filter-grid {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  /* Keep image/title block aligned with stacked meta fields (left edge). */
  .commerce-page .product-summary {
    padding-left: 0 !important;
    justify-content: flex-start !important;
  }

  .commerce-page .product-summary .ml-3 {
    margin-left: 12px !important;
  }

  /* Reduce vertical gaps between Status / Price / Updated blocks when stacked. */
  .commerce-page .product-meta .product-meta-inner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .commerce-page .product-meta .text-8d {
    margin-bottom: 2px !important;
  }

  .commerce-page .product-meta .fw-medium {
    line-height: 1.15 !important;
  }

  .commerce-page .product-meta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

}

/* Product list: icon action bar (matches shared UI staging UX). */
.commerce-page .product-actions-bar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

/* Product action icons: match shared UI staging (hover colors + spacing). */
.commerce-page .product-actions-bar .product-action-btn {
  color: #878787;
  background: transparent;
  border: 0;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Promo datetime picker (dashboard product form)
   We keep the native <input type="datetime-local"> for reliability.
   The calendar button is purely a trigger and must look like part of the input. */
.commerce-page .promo-datetime-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.commerce-page .promo-datetime-group input {
  width: 100%;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.commerce-page .promo-datetime-group input::-webkit-calendar-picker-indicator {
  opacity: 0;
  pointer-events: none;
}

.commerce-page .promo-datetime-btn {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border: 1px solid #D9D9D9;
  border-left: 0;
  background: #fff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.commerce-page .promo-datetime-btn img {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.commerce-page .promo-datetime-btn:hover img {
  opacity: 1;
}

/* Prevent the browser focus "square" around the action buttons (Copy/Duplicate/etc.).
   We still keep accessibility via hover + clear icon affordance. */
.commerce-page .product-actions-bar .product-action-btn:focus,
.commerce-page .product-actions-bar .product-action-btn:focus-visible,
.commerce-page .product-actions-bar a.product-action-btn:focus,
.commerce-page .product-actions-bar a.product-action-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.commerce-page .product-actions-bar .product-action-btn .action-icon {
  display: block;
}

.commerce-page .product-actions-bar .product-action-btn--primary:hover {
  color: #0d6efd;
}

.commerce-page .product-actions-bar .product-action-btn--delete:hover {
  color: #dc3545;
}

/* Product visibility label (backoffice list) */
.product-visibility{
  font-weight: 700;
  line-height: 1.1;
}

.product-visibility--visible{
  color: #198754; /* green */
}

.product-visibility--hidden{
  color: #dc3545; /* red */
}

/* Confirm delete modal */
.confirm-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
}

.confirm-modal.is-open { display: block; }

.confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.confirm-modal__dialog {
  position: relative;
  max-width: 420px;
  margin: 20vh auto 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}

.confirm-modal__title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.confirm-modal__text {
  margin: 0 0 14px 0;
  color: #6c757d;
}

.confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Mobile: keep action row consistent spacing */
@media (max-width: 991.98px) {
  .commerce-page .product-actions-bar .product-action-btn {
    padding: 0 14px;
  }
}

/* Mobile: center the action icons within the product card (desktop remains right-aligned).
   IMPORTANT: this override is placed after the base .product-actions-bar rule so it wins in the cascade. */
@media (max-width: 767.98px) {
  .commerce-page .product-actions {
    text-align: center !important;
  }

  /* Remove Bootstrap right padding in the actions column on mobile so centering is real. */
  .commerce-page .product-actions .pr-4 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Make the actions area full-width and center its contents. */
  .commerce-page .product-actions .py-3 {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .commerce-page .product-actions-bar {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Category list: center actions consistently on mobile. */
  .commerce-page .category-actions {
    text-align: center !important;
  }

  .commerce-page .category-actions .pr-4 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .commerce-page .category-actions .py-3 {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .commerce-page .category-summary .pl-4 {
    padding-left: 0 !important;
  }
}

/* ------------------------------------------------------------
   Create Product UI is owned only by ecommerce/css/create_product.css.
   Catalog Management owns the product backoffice workspace.
------------------------------------------------------------- */