/**
 * BWA Ref Order - Quick Order Styles (Maquette Lovable)
 */

/* ========== Container ========== */
.bwareforder-container {
  width     : 100%;
  max-width : 1600px;
  margin    : 0 auto;
  padding   : 3rem 1rem;
}

@media (min-width : 640px) {
  .bwareforder-container {
    padding : 3rem 1.5rem;
  }
}

@media (min-width : 1024px) {
  .bwareforder-container {
    padding : 3rem 2rem;
  }
}

/* ========== Content ========== */
.bwareforder-content {
  max-width : 900px;
  margin    : 0 auto;
}

/* ========== Header ========== */
.bwareforder-header {
  margin-bottom : 2rem;
}

.bwareforder-title {
  font-size   : 1.875rem;
  font-weight : 700;
  color       : var(--color-black-default, #091C34);
  margin      : 0 0 0.5rem;
  line-height : 1.2;
}

.bwareforder-description {
  color       : var(--color-grey-font-default, #516765);
  font-size   : 1rem;
  line-height : 1.6;
  margin      : 0;
}

/* ========== Toolbar ========== */
.bwareforder-toolbar {
  display       : flex;
  align-items   : center;
  gap           : 1rem;
  margin-bottom : 1.5rem;
  flex-wrap     : wrap;
}

.bwareforder-import-btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 0.5rem;
  padding         : 0.625rem 1rem;
  font-size       : 0.875rem;
  font-weight     : 600;
  color           : var(--color-black-default, #091C34);
  background      : var(--color-white-default, #fff);
  border          : 2px solid rgba(0, 0, 0, 0.1);
  border-radius   : 0.375rem;
  cursor          : pointer;
  transition      : all 0.2s ease;
  text-decoration : none;
}

.bwareforder-import-btn:hover {
  background   : var(--color-grey-light, rgba(243, 245, 247, 0.3));
  border-color : var(--color-black-default, #091C34);
}

.bwareforder-import-btn svg {
  flex-shrink : 0;
}

.bwareforder-csv-format {
  display         : inline-flex;
  align-items     : center;
  gap             : 0.375rem;
  font-size       : 0.75rem;
  color           : var(--color-secondary);
  font-weight     : 500;
  text-decoration : none;
  cursor          : pointer;
  transition      : color 0.2s ease;
}

.bwareforder-csv-format:hover {
  color           : var(--color-primary);
  text-decoration : underline;
}

.bwareforder-csv-format svg {
  flex-shrink : 0;
}

.bwareforder-clear-btn {
  display       : inline-flex;
  align-items   : center;
  gap           : 0.5rem;
  padding       : 0.625rem 1rem;
  font-size     : 0.875rem;
  font-weight   : 600;
  color         : #dc2626;
  background    : transparent;
  border        : 2px solid #fecaca;
  border-radius : 0.375rem;
  cursor        : pointer;
  transition    : all 0.2s ease;
  margin-left   : auto;
  width         : fit-content;
}

.bwareforder-clear-btn:hover {
  background   : #fef2f2;
  border-color : #dc2626;
}

.bwareforder-clear-btn svg {
  flex-shrink : 0;
}

/* ========== Form ========== */
.bwareforder-form {
  display        : flex;
  flex-direction : column;
  gap            : 0.75rem;
}

/* Form header */
.bwareforder-form-header {
  display               : grid;
  grid-template-columns : 1fr 140px 100px 40px;
  gap                   : 0.75rem;
  align-items           : center;
  font-size             : 1rem;
  font-weight           : 500;
  color                 : var(--color-grey-font-default, #516765);
  padding               : 0 0 0.5rem;
}

@media (max-width : 767px) {
  .bwareforder-form-header {
    display : none;
  }
}

/* Lines container */
.bwareforder-lines {
  display        : flex;
  flex-direction : column;
  gap            : 0.75rem;
}

/* Single line */
.bwareforder-line {
  display               : grid;
  grid-template-columns : 1fr 140px 100px 40px;
  gap                   : 0.75rem;
  align-items           : center;
}

@media (max-width : 767px) {
  .bwareforder-line {
    grid-template-columns : 1fr;
    gap                   : 0.5rem;
    padding               : 1rem;
    background            : var(--color-grey-light, rgba(243, 245, 247, 0.3));
    border-radius         : 0.5rem;
  }

  .bwareforder-line .bwareforder-col-quantity, .bwareforder-line .bwareforder-col-price {
    grid-row : 2;
  }

  .bwareforder-line .bwareforder-col-reference, .bwareforder-line .bwareforder-col-actions {
    grid-row : 1;
  }

  .bwareforder-line .bwareforder-col-actions {
    display         : flex;
    justify-content : flex-end;
  }

  .bwareforder-line {
    position : relative;
  }
}

/* ========== Input styles ========== */
.bwareforder-input {
  width            : 100%;
  height           : 2.75rem;
  padding          : 0.5rem 0.75rem;
  font-size        : 0.875rem;
  color            : var(--color-black-default, #091C34);
  background-color : var(--color-white-default, #fff);
  border           : 1px solid rgba(0, 0, 0, 0.1);
  border-radius    : 0.375rem;
  transition       : border-color 0.15s ease, box-shadow 0.15s ease;
}

.bwareforder-input::placeholder {
  color : var(--color-grey-font-default, #516765);
}

.bwareforder-input:focus {
  outline      : none;
  border-color : var(--color-secondary, hsl(213, 70%, 15%));
  box-shadow   : 0 0 0 2px rgba(9, 28, 52, 0.1);
}

.bwareforder-input:disabled {
  background : var(--color-grey-light, rgba(243, 245, 247, 0.5));
  cursor     : not-allowed;
  opacity    : 0.7;
}

/* ========== Search wrapper ========== */
.bwareforder-search-wrapper {
  position : relative;
  width    : 100%;
}

/* Autocomplete dropdown */
.bwareforder-autocomplete-dropdown {
  position      : absolute;
  top           : 100%;
  left          : 0;
  right         : 0;
  background    : var(--color-white-default, #fff);
  border        : 1px solid rgba(0, 0, 0, 0.1);
  border-top    : none;
  border-radius : 0 0 0.375rem 0.375rem;
  max-height    : 300px;
  overflow-y    : auto;
  z-index       : 1000;
  display       : none;
  box-shadow    : 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bwareforder-autocomplete-dropdown.show {
  display : block;
}

.bwareforder-autocomplete-item {
  display       : flex;
  align-items   : center;
  padding       : 0.75rem 1rem;
  cursor        : pointer;
  gap           : 0.75rem;
  border-bottom : 1px solid var(--color-grey-light, rgba(243, 245, 247, 0.5));
  transition    : background 0.15s ease;
}

.bwareforder-autocomplete-item:last-child {
  border-bottom : none;
}

.bwareforder-autocomplete-item:hover,
.bwareforder-autocomplete-item.highlighted {
  background : var(--color-grey-light, rgba(243, 245, 247, 0.5));
}

.bwareforder-autocomplete-item img {
  width         : 40px;
  height        : 40px;
  object-fit    : contain;
  border-radius : 0.25rem;
  background    : var(--color-grey-light, rgba(243, 245, 247, 0.5));
  flex-shrink   : 0;
}

.bwareforder-autocomplete-item-info {
  flex      : 1;
  min-width : 0;
}

.bwareforder-autocomplete-item-name {
  display       : block;
  font-weight   : 500;
  color         : var(--color-black-default, #091C34);
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
  font-size     : 0.875rem;
}

.bwareforder-autocomplete-item-ref {
  display   : block;
  color     : var(--color-grey-font-default, #516765);
  font-size : 0.75rem;
}

.bwareforder-autocomplete-item-price {
  font-weight : 600;
  color       : var(--color-black-default, #091C34);
  white-space : nowrap;
  font-size   : 0.875rem;
}

.bwareforder-autocomplete-item.out-of-stock {
  opacity : 0.5;
}

.bwareforder-autocomplete-item.out-of-stock .bwareforder-autocomplete-item-price {
  color : #dc2626;
}

.bwareforder-autocomplete-empty,
.bwareforder-autocomplete-loading {
  padding    : 1.5rem;
  text-align : center;
  color      : var(--color-grey-font-default, #516765);
  font-size  : 0.875rem;
}

/* Selected product display */
.bwareforder-product-selected {
  display       : flex;
  align-items   : center;
  gap           : 0.75rem;
  padding       : 0.5rem;
  background    : var(--color-grey-light, rgba(243, 245, 247, 0.3));
  border-radius : 0.375rem;
}

.bwareforder-product-img {
  width         : 40px;
  height        : 40px;
  object-fit    : contain;
  border-radius : 0.25rem;
  background    : var(--color-white-default, #fff);
  flex-shrink   : 0;
}

.bwareforder-product-info {
  flex      : 1;
  min-width : 0;
}

.bwareforder-product-name {
  display         : block;
  font-weight     : 500;
  color           : var(--color-secondary, hsl(213, 70%, 15%));
  white-space     : nowrap;
  overflow        : hidden;
  text-overflow   : ellipsis;
  font-size       : 0.875rem;
  text-decoration : none;
  line-height     : 1.3;
}

@media (max-width : 500px) {
  .bwareforder-product-name {
    max-width : 150px;
  }
}

.bwareforder-product-name:hover {
  color           : var(--color-primary, hsl(210, 90%, 45%));
  text-decoration : underline;
}

.bwareforder-product-ref {
  display   : block;
  color     : var(--color-grey-font-default, #516765);
  font-size : 0.75rem;
}

/* ========== Quantity wrapper ========== */
.bwareforder-quantity-wrapper {
  display     : flex;
  align-items : center;
  gap         : 0;
}

.bwareforder-qty-btn {
  width           : 2.75rem;
  height          : 2.75rem;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : var(--color-white-default, #fff);
  border          : 1px solid rgba(0, 0, 0, 0.1);
  cursor          : pointer;
  transition      : all 0.15s ease;
  color           : var(--color-black-default, #091C34);
}

.bwareforder-qty-minus {
  border-radius : 0.375rem 0 0 0.375rem;
  border-right  : none;
}

.bwareforder-qty-plus {
  border-radius : 0 0.375rem 0.375rem 0;
  border-left   : none;
}

.bwareforder-qty-btn:hover:not(:disabled) {
  background : var(--color-grey-light, rgba(243, 245, 247, 0.5));
}

.bwareforder-qty-btn:disabled {
  opacity : 0.4;
  cursor  : not-allowed;
}

.bwareforder-quantity-input {
  width           : 3.5rem;
  height          : 2.75rem;
  text-align      : center;
  padding         : 0.5rem 0.25rem;
  font-size       : 0.875rem;
  font-weight     : 500;
  border          : 1px solid rgba(0, 0, 0, 0.1);
  border-radius   : 0;
  -moz-appearance : textfield;
  background      : var(--color-white-default, #fff);
  color           : var(--color-black-default, #091C34);
}

.bwareforder-quantity-input::-webkit-outer-spin-button,
.bwareforder-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance : none;
  margin             : 0;
}

.bwareforder-quantity-input:focus {
  outline      : none;
  border-color : var(--color-secondary, hsl(213, 70%, 15%));
  z-index      : 1;
  position     : relative;
}

/* ========== Price column ========== */
.bwareforder-col-price {
  text-align : right;
}

.bwareforder-line-total {
  font-weight : 600;
  color       : var(--color-black-default, #091C34);
  font-size   : 0.875rem;
  white-space : nowrap;
}

@media (max-width : 767px) {
  .bwareforder-col-price {
    text-align : left;
  }

  .bwareforder-col-price::before {
    content     : 'Total : ';
    font-weight : 400;
    color       : var(--color-grey-font-default, #516765);
  }
}

/* ========== Delete button ========== */
.bwareforder-delete-btn {
  width           : 2.5rem;
  height          : 2.5rem;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : transparent;
  border          : none;
  border-radius   : 0.375rem;
  cursor          : pointer;
  color           : var(--color-grey-font-default, #516765);
  transition      : all 0.15s ease;
}

.bwareforder-delete-btn:hover {
  background : #fef2f2;
  color      : #dc2626;
}

.bwareforder-delete-btn:disabled {
  opacity : 0.3;
  cursor  : not-allowed;
}

/* ========== Add line button ========== */
.bwareforder-add-line-btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  width           : 100%;
  height          : 2.75rem;
  padding         : 0.5rem 1rem;
  font-size       : 0.875rem;
  font-weight     : 600;
  color           : var(--color-black-default, #091C34);
  background      : var(--color-white-default, #fff);
  border          : 2px solid rgba(0, 0, 0, 0.1);
  border-radius   : 0.375rem;
  cursor          : pointer;
  transition      : all 0.2s ease;
  margin-top      : 0.5rem;
}

.bwareforder-add-line-btn:hover {
  background   : var(--color-primary, hsl(210, 90%, 45%));
  border-color : var(--color-primary, hsl(210, 90%, 45%));
  color        : var(--color-white-default, #fff);
}

/* ========== Footer ========== */
.bwareforder-footer {
  margin-top     : 1.5rem;
  padding-top    : 1.5rem;
  border-top     : 1px solid rgba(0, 0, 0, 0.1);
  display        : flex;
  flex-direction : column;
  gap            : 1rem;
}

.bwareforder-summary {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : 1rem;
}

.bwareforder-summary-count {
  font-size : 0.875rem;
  color     : var(--color-grey-font-default, #516765);
}

.bwareforder-summary-count span {
  font-weight : 600;
  color       : var(--color-black-default, #091C34);
}

.bwareforder-summary-total {
  display     : flex;
  align-items : center;
  gap         : 0.5rem;
}

.bwareforder-total-label {
  font-size : 0.875rem;
  color     : var(--color-grey-font-default, #516765);
}

.bwareforder-total-value {
  font-size   : 1.5rem;
  font-weight : 700;
  color       : var(--color-black-default, #091C34);
}

/* ========== Submit button ========== */
.bwareforder-submit-btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  width           : 100%;
  height          : 3rem;
  padding         : 0.75rem 2rem;
  font-size       : 1rem;
  font-weight     : 600;
  color           : var(--color-white-default, #fff);
  background      : var(--color-primary, hsl(210, 90%, 45%));
  border          : none;
  border-radius   : 0.375rem;
  cursor          : pointer;
  transition      : all 0.2s ease;
}

.bwareforder-submit-btn:hover {
  background : var(--color-secondary, hsl(213, 70%, 15%));
}

.bwareforder-submit-btn:disabled {
  opacity : 0.5;
  cursor  : not-allowed;
}

/* ========== Denied view ========== */
.bwareforder-denied {
  max-width     : 400px;
  margin        : 3rem auto;
  text-align    : center;
  padding       : 2.5rem;
  background    : var(--color-white-default, #fff);
  border-radius : 0.75rem;
  box-shadow    : 0 4px 20px rgba(0, 0, 0, 0.08);
}

.bwareforder-denied-icon {
  margin-bottom : 1.5rem;
}

.bwareforder-denied-icon svg {
  color : rgba(0, 0, 0, 0.1);
}

.bwareforder-denied-message {
  font-size     : 1rem;
  color         : var(--color-black-default, #091C34);
  margin-bottom : 1rem;
  line-height   : 1.6;
}

.bwareforder-denied-login {
  color         : var(--color-grey-font-default, #516765);
  margin-bottom : 1.5rem;
  font-size     : 0.875rem;
}

.bwareforder-denied-login a {
  color       : var(--color-primary, hsl(210, 90%, 45%));
  font-weight : 500;
}

.bwareforder-denied-login a:hover {
  text-decoration : underline;
}

.bwareforder-denied-btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  padding         : 0.75rem 1.5rem;
  font-size       : 0.875rem;
  font-weight     : 600;
  color           : var(--color-white-default, #fff);
  background      : var(--color-primary, hsl(210, 90%, 45%));
  border          : none;
  border-radius   : 0.375rem;
  text-decoration : none;
  transition      : all 0.2s ease;
}

.bwareforder-denied-btn:hover {
  background : var(--color-secondary, hsl(213, 70%, 15%));
  color      : var(--color-white-default, #fff);
}

/* ========== Toast notifications ========== */
.bwareforder-toast {
  position      : fixed;
  bottom        : 1.5rem;
  right         : 1.5rem;
  padding       : 1rem 1.5rem;
  background    : var(--color-secondary, hsl(213, 70%, 15%));
  color         : var(--color-white-default, #fff);
  border-radius : 0.5rem;
  box-shadow    : 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index       : 9999;
  animation     : bwareforder-toast-in 0.3s ease;
  max-width     : 350px;
  font-size     : 0.875rem;
}

.bwareforder-toast.success {
  background : #16a34a;
}

.bwareforder-toast.error {
  background : #dc2626;
}

.bwareforder-toast.warning {
  background : #f59e0b;
  color      : var(--color-black-default, #091C34);
}

.bwareforder-toast.info {
  background : var(--color-primary, hsl(210, 90%, 45%));
}

@keyframes bwareforder-toast-in {
  from {
    opacity   : 0;
    transform : translateY(1rem);
  }
  to {
    opacity   : 1;
    transform : translateY(0);
  }
}

/* ========== Line highlight animation ========== */
.bwareforder-line-highlight {
  animation : bwareforder-highlight 1s ease-out;
}

@keyframes bwareforder-highlight {
  0% {
    background-color : rgba(22, 163, 74, 0.2);
  }
  100% {
    background-color : transparent;
  }
}

/* ========== Loading state ========== */
.bwareforder-loading {
  position       : relative;
  pointer-events : none;
}

.bwareforder-loading::after {
  content         : '';
  position        : absolute;
  top             : 0;
  left            : 0;
  right           : 0;
  bottom          : 0;
  background      : rgba(255, 255, 255, 0.7);
  display         : flex;
  align-items     : center;
  justify-content : center;
  border-radius   : 0.375rem;
}

/* ========== Responsive ========== */
@media (max-width : 640px) {
  .bwareforder-container {
    padding : 1.5rem 1rem;
  }

  .bwareforder-title {
    font-size : 1.5rem;
  }

  .bwareforder-toolbar {
    flex-direction : column;
    align-items    : stretch;
  }

  .bwareforder-clear-btn {
    margin-left : 0;
  }

  .bwareforder-total-value {
    font-size : 1.25rem;
  }
}