@charset "UTF-8";
.gradient-custom-2 {
  /* fallback for old browsers */
  background: #fccb90;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to left, #D54616, #E69669);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to left, #D54616, #E69669);
}

.gradient-form {
  height: 100vh;
  overflow: hidden;
}

@media (min-width: 769px) {
  .gradient-custom-2 {
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
  }
}
.case {
  text-decoration: none;
  color: black;
}
.case:hover {
  text-decoration: none;
  color: black;
}
.case-content {
  min-height: 185px;
}

.item-litige:hover > td {
  cursor: pointer;
  color: #ff5733;
  transition: color 0.3s ease;
}

.chart_doughnut {
  max-height: 318px;
  width: auto;
}

.litiges-list {
  font-size: 0.7rem;
}
.litiges-list__icon {
  border: solid black 0.1rem;
  border-radius: 5px;
  height: 1rem;
}
.litiges-list__icon:hover {
  background-color: black;
  color: white;
}

#list-products {
  height: 70vh;
  overflow: auto;
  font-size: 0.8rem;
}

.chartStatVente {
  height: auto;
  width: 100%;
  background-color: white;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  box-shadow: var(--bs-box-shadow-sm) !important;
  border-radius: var(--bs-border-radius) !important;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.list-group-item {
  width: 100%;
}

.list-products-autocomplete {
  position: absolute;
  z-index: 10;
  display: none;
}
.list-products-autocomplete .autocomplete-item:hover {
  background-color: #ff5733;
  color: white;
  cursor: pointer;
}
.list-products-autocomplete.show {
  display: block;
}

@media (max-width: 750px) {
  #list-products {
    max-height: 20vh;
    margin: auto;
  }
  .chartStatVente {
    height: 35vh;
    background-color: white;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    box-shadow: var(--bs-box-shadow-sm) !important;
    border-radius: var(--bs-border-radius) !important;
    margin-bottom: 1.5rem;
    padding: 1rem;
  }
  .chartStatVente--perMonth {
    margin-top: 2rem;
  }
  .buttonsSearch {
    margin-top: 1rem;
  }
}
.hausse {
  border-left: 4px solid green;
}
.hausse > .data-evolution {
  color: green;
}

.baisse {
  border-left: 4px solid red;
}
.baisse > .data-evolution {
  color: red;
}

/* Dashboard Shopify — styles complémentaires
   Assumes Bootstrap variables are available (via sass-bundle / AssetMapper). */
.dashboard {
  /* spacing harmonisé avec Bootstrap */
}

/* --------- Cards & Charts --------- */
.card-chart {
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.card-chart .card-header {
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.card-chart .chart-wrapper {
  /* Chart.js canvas responsive container */
  position: relative;
  width: 100%;
  min-height: 260px;
}
.card-chart .chart-wrapper canvas {
  width: 100% !important;
  height: auto !important;
  /* Hauteur max pour grands écrans */
}
@media (min-width: 992px) {
  .card-chart .chart-wrapper canvas {
    max-height: 360px;
  }
}

/* --------- Table comparatifs --------- */
.table th, .table td {
  vertical-align: middle;
  white-space: nowrap;
}
.table th[scope=row] {
  white-space: normal;
}

.data-evolution {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.badge.ratio-badge {
  --_pad-x: .5rem;
  --_pad-y: .35rem;
  padding: var(--_pad-y) var(--_pad-x);
  border: 1px solid transparent;
  font-weight: 600;
}

/* États visuels lignes */
.hausse {
  --_bg: 0, 128, 0; /* fallback */
  background: color-mix(in srgb, var(--bs-success), transparent 90%);
}

.baisse {
  --_bg: 220, 20, 60; /* fallback */
  background: color-mix(in srgb, var(--bs-danger), transparent 92%);
}

/* Icônes tendance */
.trend-up svg {
  color: var(--bs-success);
}

.trend-down svg {
  color: var(--bs-danger);
}

/* Légende */
.legend-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.legend-dot.up {
  background: var(--bs-success);
}
.legend-dot.down {
  background: var(--bs-danger);
}

/* Petits ajustements d’accessibilité & lisibilité */
.card-title {
  letter-spacing: 0.2px;
}

.text-bg-success-subtle {
  background-color: color-mix(in srgb, var(--bs-success), white 88%) !important;
  color: var(--bs-success) !important;
  border-color: color-mix(in srgb, var(--bs-success), white 70%) !important;
}

.text-bg-danger-subtle {
  background-color: color-mix(in srgb, var(--bs-danger), white 88%) !important;
  color: var(--bs-danger) !important;
  border-color: color-mix(in srgb, var(--bs-danger), white 70%) !important;
}

.text-bg-secondary-subtle {
  background-color: color-mix(in srgb, var(--bs-secondary), white 90%) !important;
  color: var(--bs-secondary) !important;
  border-color: color-mix(in srgb, var(--bs-secondary), white 70%) !important;
}

/* Support si color-mix indisponible (anciens navigateurs) */
@supports not (background: color-mix(in srgb, #000, #fff)) {
  .hausse {
    background: rgba(25, 135, 84, 0.08);
  } /* bs-success */
  .baisse {
    background: rgba(220, 53, 69, 0.06);
  } /* bs-danger */
  .text-bg-success-subtle {
    background-color: rgba(25, 135, 84, 0.12) !important;
    color: #198754 !important;
    border-color: rgba(25, 135, 84, 0.25) !important;
  }
  .text-bg-danger-subtle {
    background-color: rgba(220, 53, 69, 0.12) !important;
    color: #dc3545 !important;
    border-color: rgba(220, 53, 69, 0.25) !important;
  }
  .text-bg-secondary-subtle {
    background-color: rgba(108, 117, 125, 0.12) !important;
    color: #6c757d !important;
    border-color: rgba(108, 117, 125, 0.25) !important;
  }
}
/* Collants (si tu veux figer l’en-tête lors du scroll dans la carte) */
.card .table-responsive {
  max-height: 420px;
  overflow: auto;
  scroll-behavior: smooth;
}

/* Optionnel : état "squelette" si tu fais du lazy-loading */
.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.06));
  background-size: 200% 100%;
  animation: skeleton 1.2s ease-in-out infinite;
  border-radius: 0.5rem;
  min-height: 140px;
}

@keyframes skeleton {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
.orderLine:not(.collapsed) {
  background-color: red;
}

.typeLabel {
  margin: 2rem;
  border: 1px solid black;
  border-radius: 5px;
  padding: 1rem;
  background-color: white;
}

.counter {
  height: 7rem;
}

.count {
  background: linear-gradient(to bottom, #f0f0f0, #c0c0c0, #b2b2b2);
  border: 1px solid #707070;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  display: flex;
  justify-content: center;
  font-size: 3rem;
  align-items: center;
  width: 6rem;
  height: 4rem;
  text-align: center;
  border-radius: 5px;
  margin-left: 2rem;
  margin-right: 7rem;
}

.marquee {
  overflow: hidden;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: #D54716;
  color: white;
  font-size: 3rem;
}

.marquee__track {
  display: inline-flex;
  white-space: nowrap;
}

.marquee__item {
  flex-shrink: 0;
  padding-right: 2rem; /* petit espace entre les répétitions */
}

.name-product {
  width: 30%;
}

.table-promos tr {
  height: 50px;
}

.stats-shipping {
  padding: 2rem 0;
}
.stats-shipping h1 {
  color: #2c3e50;
  margin-bottom: 2rem;
  font-weight: 600;
}
.stats-shipping .stats-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  transition: transform 0.3s ease;
  border: none;
}
.stats-shipping .stats-card:hover {
  transform: translateY(-5px);
}
.stats-shipping .stats-card .stats-value {
  font-size: 2rem;
  font-weight: 700;
  color: #3498db;
  margin: 0;
}
.stats-shipping .stats-card .stats-label {
  color: #7f8c8d;
  margin: 0;
  font-size: 0.9rem;
}
.stats-shipping .chart-container {
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-top: 2rem;
}
.stats-shipping .chart-container h2 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
.stats-shipping .chart-container.border-0 {
  margin-top: 0;
}
.stats-shipping .shipping-methods-list {
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-top: 2rem;
}
.stats-shipping .shipping-methods-list h2 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
.stats-shipping .shipping-methods-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stats-shipping .shipping-methods-list ul li {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ecf0f1;
}
.stats-shipping .shipping-methods-list ul li:last-child {
  border-bottom: none;
}
.stats-shipping .shipping-methods-list ul li .method-name {
  color: #34495e;
  font-weight: 500;
}
.stats-shipping .shipping-methods-list ul li .method-count {
  font-weight: 600;
  color: #3498db;
}
.stats-shipping .shipping-methods-list ul li.total-shipping-method .method-name {
  font-weight: 600;
  font-size: 1.5rem;
}
.stats-shipping .shipping-methods-list ul li.total-shipping-method .method-count {
  font-weight: 600;
  color: #d54716;
  font-size: 1.5rem;
}
.stats-shipping .accordion {
  margin-top: 2rem;
}
.stats-shipping .accordion .accordion-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.stats-shipping .accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.stats-shipping .accordion .accordion-button {
  background-color: white;
  color: #2c3e50;
  font-weight: 500;
  padding: 1.25rem 1.5rem;
}
.stats-shipping .accordion .accordion-button:not(.collapsed) {
  background-color: #f8f9fa;
  color: #3498db;
  box-shadow: none;
}
.stats-shipping .accordion .accordion-button:focus {
  box-shadow: none;
  border-color: rgba(52, 152, 219, 0.5);
}
.stats-shipping .accordion .accordion-button::after {
  transition: transform 0.2s ease;
}
.stats-shipping .accordion .accordion-body {
  background-color: white;
  padding: 1.5rem;
}

/*# sourceMappingURL=app.output.css.map */