// Gruvbox Dark Theme
$bg: #282828;
$bg-soft: #32302f;
$text: #ebdbb2;
$text-muted: #928374;
$gray: #928374;
$card: #3c3836;
$card-hover: #504945;
$accent: #fe8019;
$accent-yellow: #fabd2f;
$accent-green: #b8bb26;
$accent-red: #fb4934;
$accent-aqua: #8ec07c;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background: $bg;
  color: $text;
}

a {
  color: $accent;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

// App Shell
.app-shell {
  min-height: 100vh;
  background: $bg;
}

// Header
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: $bg-soft;
  border-bottom: 1px solid $card;
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  font-size: 1.5rem;
  font-weight: 600;
  a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: $text;
    &:hover {
      color: $accent;
      text-decoration: none;
    }
  }
}
.brand-logo {
  width: 22px;
  height: 22px;
  display: block;
}

.nav-links {
  display: flex;
  gap: 8px;

  a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    color: $text-muted;
    transition: all 0.2s;

    &:hover {
      background: $card;
      color: $text;
      text-decoration: none;
    }

    &.active {
      background: $card;
      color: $accent;
    }
  }
}

.actions {
  display: flex;
  gap: 8px;
}

.system-stats {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: $gray;
  font-family: monospace;

  span {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba($card, 0.5);
    border-radius: 4px;

    i {
      color: $accent;
      font-size: 0.7rem;
    }
  }
}

.version-info {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: $gray;
  font-family: monospace;

  span {
    padding: 4px 8px;
    background: rgba($card, 0.5);
    border-radius: 4px;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: $card;
  border: none;
  color: $text;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;

  &:hover {
    background: $card-hover;
  }

  &.btn-primary {
    background: $accent;
    color: $bg;
    font-weight: 500;

    &:hover {
      filter: brightness(1.1);
    }
  }
}

// Home Page
.home-page {
  padding: 24px;
}

.product-grid {
  --grid-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: 20px;

  @media (max-width: 1200px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.empty-state {
  background: $card;
  border-radius: 12px;
  padding: 64px 32px;
  text-align: center;

  .empty-icon {
    font-size: 3rem;
    color: $text-muted;
    margin-bottom: 16px;
  }

  p {
    color: $text-muted;
    font-size: 1.1rem;
    margin: 8px 0;
  }

  .hint {
    font-size: 0.9rem;
  }
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: $text-muted;

  i {
    font-size: 2rem;
    margin-bottom: 16px;
  }
}

.error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba($accent-red, 0.15);
  color: $accent-red;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;

  .btn-close {
    background: none;
    border: none;
    color: $accent-red;
    cursor: pointer;
    padding: 4px 8px;

    &:hover {
      opacity: 0.7;
    }
  }
}

// Product Card
.product-card {
  background: $card;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}

.product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: $bg-soft;
  border-bottom: 1px solid $bg;

  .boutique {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: $accent;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .header-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    color: $text-muted;
    transition: all 0.2s;

    &:hover {
      background: $card;
      color: $accent;
      text-decoration: none;
    }

    i {
      font-size: 0.8rem;
    }
  }

  .status {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;

    &.active {
      background: rgba($accent-green, 0.2);
      color: $accent-green;
    }

    &.inactive {
      background: rgba($text-muted, 0.2);
      color: $text-muted;
    }
  }
}

.product-card > .product-title {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
  padding: 12px 16px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  &.clickable {
    cursor: pointer;
    transition: color 0.2s;

    &:hover {
      color: $accent;
    }
  }
}

.product-body {
  --image-ratio: 40; // Valeur par défaut, override par CSS variable
  display: flex;
  gap: 16px;
  padding: 16px;
  flex: 1;
}

.product-image {
  // Taille basée sur le ratio (variable CSS --image-ratio en %)
  // flex-basis utilise le ratio pour le partage horizontal
  flex: 0 0 calc(var(--image-ratio) * 1%);
  max-width: calc(var(--image-ratio) * 1%);
  min-width: 60px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
  position: relative;
  transition: flex-basis 0.2s ease, max-width 0.2s ease;

  &.clickable {
    cursor: zoom-in;

    &:hover .image-zoom-hint {
      opacity: 1;
    }
  }

  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .no-image {
    color: $text-muted;
    font-size: 2rem;
  }

  .image-zoom-hint {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.2s;
  }
}

.product-info {
  // Prend le reste de l'espace (100% - image ratio)
  flex: 1 1 calc((100 - var(--image-ratio)) * 1%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 200px; // Limite pour éviter débordement
}

.product-title {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// Section Prix
.price-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;

  .price-label {
    color: $text-muted;
    font-size: 0.75rem;
    text-transform: uppercase;
  }

  .price-value {
    font-weight: 600;

    &.strikethrough {
      text-decoration: line-through;
      color: $text-muted;
      font-weight: 400;
    }

    &.discount {
      color: $accent-green;
      font-weight: 700;
    }
  }
}

.price-current .price-value {
  font-size: 1.1rem;
  color: $accent;
}

// Stats (Stock, Note)
.product-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;

  .stat-label {
    color: $text-muted;
    font-size: 0.75rem;
    text-transform: uppercase;
  }

  .stat-value {
    &.in-stock {
      color: $accent-green;
    }

    &.out-of-stock {
      color: $accent-red;
    }

    &.rating {
      display: flex;
      align-items: center;
      gap: 4px;
      color: $accent-yellow;

      i {
        font-size: 0.8rem;
      }

      .review-count {
        color: $text-muted;
        font-size: 0.75rem;
        font-weight: 400;
      }
    }
  }
}

// Badges
.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;

  i {
    font-size: 0.65rem;
  }
}

.badge-choice {
  background: rgba($accent-aqua, 0.15);
  color: $accent-aqua;
}

.badge-prime {
  background: rgba(#00a8e1, 0.15);
  color: #00a8e1;
}

.badge-deal {
  background: rgba($accent-red, 0.15);
  color: $accent-red;
}

.badge-exclusive {
  background: rgba($accent-yellow, 0.15);
  color: $accent-yellow;
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;

  .asin {
    font-size: 0.75rem;
    color: $text-muted;
    font-family: monospace;
  }

  .category {
    font-size: 0.75rem;
    background: $bg;
    padding: 2px 8px;
    border-radius: 4px;
    color: $accent-yellow;
  }
}

.product-link {
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

// Price Chart
.price-chart-container {
  padding: 12px 16px;
  border-top: 1px solid $bg;
}

.price-chart {
  height: 120px;
  margin-bottom: 10px;
}

.price-chart-loading,
.price-chart-error,
.price-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 80px;
  color: $text-muted;
  font-size: 0.85rem;
  padding: 12px 16px;
  border-top: 1px solid $bg;
}

.price-chart-error {
  color: $accent-red;
}

.price-chart-period-selector {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;

  .period-btn {
    background: transparent;
    border: 1px solid $text-muted;
    color: $text-muted;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      border-color: $text;
      color: $text;
    }

    &.active {
      background: $accent;
      border-color: $accent;
      color: $bg;
    }
  }
}

.price-chart-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.75rem;

  .stat {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .label {
      color: $text-muted;
      text-transform: uppercase;
      font-size: 0.65rem;
    }

    .value {
      font-weight: 500;
    }

    &.trend .value {
      font-weight: 700;
    }
  }
}

.product-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid $bg;
  background: $bg-soft;
  margin-top: auto;

  .btn-scrape {
    flex: 1;
  }

  .btn-delete {
    background: rgba($accent-red, 0.15);
    color: $accent-red;

    &:hover {
      background: rgba($accent-red, 0.25);
    }
  }
}

// Modal
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.modal {
  background: $card;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-height: 90vh;
  overflow-y: auto;

  &.modal-large {
    max-width: 700px;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid $bg;

  h2 {
    margin: 0;
    font-size: 1.2rem;
  }

  .btn-close {
    background: none;
    border: none;
    color: $text-muted;
    cursor: pointer;
    padding: 8px;
    font-size: 1.1rem;

    &:hover {
      color: $text;
    }
  }
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;

  label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: $text;
  }

  input, select, textarea {
    width: 100%;
    padding: 12px 16px;
    background: $bg;
    border: 1px solid $card-hover;
    border-radius: 8px;
    color: $text;
    font-size: 0.95rem;

    &:focus {
      outline: none;
      border-color: $accent;
    }

    &::placeholder {
      color: $text-muted;
    }
  }

  .form-hint {
    margin-top: 6px;
    font-size: 0.8rem;
    color: $text-muted;
  }
}

.form-error {
  background: rgba($accent-red, 0.15);
  color: $accent-red;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

// Lightbox (agrandissement image)
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
  cursor: zoom-out;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;

  img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: $text;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px;
  opacity: 0.7;
  transition: opacity 0.2s;

  &:hover {
    opacity: 1;
  }
}

// Preview card (modal ajout produit)
.preview-card {
  background: $bg;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid $card;

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

  &.preview-note {
    opacity: 0.7;
  }
}

.preview-label {
  font-size: 0.8rem;
  color: $text-muted;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preview-value {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;

  i {
    color: $accent;
  }
}

.preview-asin {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  background: $card;
  padding: 4px 10px;
  border-radius: 4px;
  color: $accent-yellow;
}

.preview-link {
  color: $accent;
  font-size: 0.85rem;
  word-break: break-all;

  &:hover {
    text-decoration: underline;
  }

  i {
    font-size: 0.7rem;
    opacity: 0.7;
  }
}

.preview-muted {
  color: $text-muted;
  font-size: 0.8rem;
  font-weight: 400;
}

.preview-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba($accent-aqua, 0.1);
  color: $accent-aqua;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;

  i {
    margin-top: 2px;
  }
}

// Preview Product (modal ajout avec scrape)
.preview-product {
  background: $bg;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.preview-main {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid $card;
}

.preview-image {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;

  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .no-image {
    color: $text-muted;
    font-size: 2.5rem;
  }
}

.preview-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;

  @media (max-width: 500px) {
    grid-template-columns: 1fr;
  }
}

.preview-section {
  h4 {
    margin: 0 0 10px 0;
    font-size: 0.8rem;
    color: $accent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}

.preview-data-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;

  .label {
    color: $text-muted;
    font-size: 0.75rem;
  }

  .value {
    font-weight: 500;

    &.price-current {
      color: $accent;
      font-size: 1rem;
      font-weight: 700;
    }

    &.strikethrough {
      text-decoration: line-through;
      color: $text-muted;
      font-weight: 400;
    }

    &.discount {
      color: $accent-green;
      font-weight: 700;
    }

    &.in-stock {
      color: $accent-green;
    }

    &.out-of-stock {
      color: $accent-red;
    }

    &.rating {
      display: flex;
      align-items: center;
      gap: 4px;
      color: $accent-yellow;

      i {
        font-size: 0.75rem;
      }

      .review-count {
        color: $text-muted;
        font-size: 0.75rem;
        font-weight: 400;
      }
    }
  }
}

.preview-data-empty {
  color: $text-muted;
  font-style: italic;
  font-size: 0.85rem;
}

// Product Detail Modal (Fullscreen)
.modal-fullscreen {
  padding: 0;
  align-items: stretch;
}

.modal-detail-fullscreen {
  max-width: 100%;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  display: flex;
  flex-direction: column;

  .modal-header {
    flex-shrink: 0;
    border-bottom: 1px solid $bg;
    background: $card;

    h2 {
      display: flex;
      align-items: center;
      gap: 10px;

      i {
        color: $accent;
      }
    }
  }

  .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
  }
}

// Section principale (image + infos essentielles)
.detail-main {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;

  @media (max-width: 900px) {
    flex-direction: column;
  }
}

.detail-image-large {
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
  position: relative;

  &.clickable {
    cursor: zoom-in;

    &:hover .image-zoom-hint {
      opacity: 1;
    }
  }

  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .no-image {
    color: $text-muted;
    font-size: 4rem;
  }

  .image-zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  @media (max-width: 900px) {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
}

.detail-essential {
  flex: 1;
  min-width: 0;
}

.detail-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;

  .boutique {
    font-size: 0.9rem;
    color: $accent;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .status {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;

    &.active {
      background: rgba($accent-green, 0.2);
      color: $accent-green;
    }

    &.inactive {
      background: rgba($text-muted, 0.2);
      color: $text-muted;
    }
  }
}

.detail-title-large {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.detail-price-stock {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;

  @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

.detail-section {
  background: $bg;
  border-radius: 8px;
  padding: 16px;

  h4 {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    color: $accent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;

    i {
      font-size: 0.9rem;
    }
  }
}

.detail-meta {
  margin-bottom: 0;
}

.detail-data-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.detail-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;

  .label {
    color: $text-muted;
    font-size: 0.8rem;
  }

  .value {
    font-weight: 500;

    &.price-current {
      color: $accent;
      font-size: 1.3rem;
    }

    &.strikethrough {
      text-decoration: line-through;
      color: $text-muted;
    }

    &.discount {
      color: $accent-green;
      font-weight: 600;
    }

    &.in-stock {
      color: $accent-green;
    }

    &.out-of-stock {
      color: $accent-red;
    }

    &.rating {
      display: flex;
      align-items: center;
      gap: 4px;
      color: $accent-yellow;

      i {
        font-size: 0.8rem;
      }

      .review-count {
        color: $text-muted;
        font-size: 0.8rem;
        font-weight: 400;
      }
    }

    &.mono {
      font-family: monospace;
      background: rgba($card-hover, 0.5);
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 0.85rem;
    }
  }
}

.detail-data-empty {
  color: $text-muted;
  font-style: italic;
  font-size: 0.9rem;
}

// Sections étendues (a_propos, description, caractéristiques, détails)
.detail-extended {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.detail-section-full {
  width: 100%;
}

.detail-bullets {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;

  li {
    font-size: 0.9rem;
    line-height: 1.5;
    color: $text;
  }
}

.detail-description {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: $text;
}

.detail-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.detail-table-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 12px;
  background: rgba($card, 0.5);
  border-radius: 6px;
  font-size: 0.85rem;
  gap: 16px;

  .detail-table-key {
    color: $text-muted;
    flex-shrink: 0;
    max-width: 40%;
  }

  .detail-table-value {
    color: $text;
    text-align: right;
    word-break: break-word;
  }
}

.btn-detail {
  background: $card;
  color: $text;

  &:hover {
    background: $card-hover;
    color: $accent;
  }
}

// Button states
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

// Debug Page
.debug-page {
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;

  h2 {
    margin: 0 0 24px 0;
    color: $text;
  }

  .error {
    color: $accent-red;
    background: rgba($accent-red, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
  }
}

.debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;

  h2 {
    margin: 0;
  }
}

.debug-table {
  background: $card;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;

  h3 {
    margin: 0 0 16px 0;
    color: $accent;
    font-size: 1rem;
    font-weight: 600;
  }

  .empty {
    color: $text-muted;
    font-style: italic;
  }

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

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;

    th, td {
      padding: 10px 12px;
      text-align: left;
      border-bottom: 1px solid $bg;
    }

    th {
      background: $bg-soft;
      color: $text-muted;
      font-weight: 500;
      text-transform: uppercase;
      font-size: 0.75rem;
      letter-spacing: 0.5px;
    }

    tr:hover td {
      background: $card-hover;
    }

    td {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.debug-logs {
  background: $card;
  border-radius: 12px;
  padding: 20px;

  h3 {
    margin: 0 0 16px 0;
    color: $accent;
    font-size: 1rem;
    font-weight: 600;
  }

  .empty {
    color: $text-muted;
    font-style: italic;
  }

  .logs-wrapper {
    max-height: 500px;
    overflow-y: auto;
  }

  .log-entry {
    background: $bg;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.8rem;
    overflow-x: auto;
    border-left: 3px solid $text-muted;

    &.error, &.ERROR {
      border-left-color: $accent-red;
    }

    &.warning, &.WARNING {
      border-left-color: $accent-yellow;
    }

    &.info, &.INFO {
      border-left-color: $accent-aqua;
    }

    &.success, &.SUCCESS {
      border-left-color: $accent-green;
    }
  }
}

// Settings Page
.settings-page {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;

  h2 {
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: $text;

    i {
      color: $accent;
    }
  }
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.settings-section {
  background: $card;
  border-radius: 12px;
  padding: 24px;

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid $bg;

    h3 {
      margin: 0;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      gap: 8px;

      i {
        color: $accent;
      }
    }
  }

  h4 {
    margin: 24px 0 16px 0;
    font-size: 0.9rem;
    color: $accent-yellow;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .form-group {
      margin-bottom: 0;

      label {
        font-size: 0.9rem;
        margin-bottom: 6px;
      }

      input[type="number"] {
        max-width: 150px;
      }

      input[type="text"] {
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 0.85rem;
      }
    }
  }
}

.version-badge {
  font-size: 0.75rem;
  background: $bg;
  padding: 4px 10px;
  border-radius: 12px;
  color: $text-muted;
  font-family: monospace;
}

.slider-group {
  display: flex;
  align-items: center;
  gap: 12px;

  input[type="range"] {
    flex: 1;
    height: 6px;
    background: $bg;
    border-radius: 3px;
    appearance: none;
    cursor: pointer;

    &::-webkit-slider-thumb {
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: $accent;
      cursor: pointer;
      border: 2px solid $card;
    }

    &::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: $accent;
      cursor: pointer;
      border: 2px solid $card;
    }
  }

  .slider-value {
    min-width: 40px;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: $accent;
  }

  .slider-label-side {
    font-size: 0.75rem;
    color: $text-muted;
    text-transform: uppercase;
    min-width: 35px;
    text-align: center;
  }
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;

  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: $accent;
  }
}

.range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;

  input[type="number"] {
    width: 100px;
  }

  span {
    color: $text-muted;
  }
}

.success-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba($accent-green, 0.15);
  color: $accent-green;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 500;
}

// Scrollbar styling
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: $bg;
}

::-webkit-scrollbar-thumb {
  background: $card-hover;
  border-radius: 4px;

  &:hover {
    background: $text-muted;
  }
}

// Mode édition dans ProductDetailModal
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-edit {
  background: $card;
  color: $accent;
  border: 1px solid $accent;

  &:hover {
    background: $accent;
    color: $bg;
  }
}

.btn-save {
  background: $accent-green;
  color: $bg;

  &:hover {
    background: darken($accent-green, 10%);
  }
}

.btn-cancel {
  background: $card;
  color: $text-muted;

  &:hover {
    background: $card-hover;
    color: $text;
  }
}

.edit-input {
  background: $bg;
  border: 1px solid $card-hover;
  border-radius: 6px;
  padding: 8px 12px;
  color: $text;
  font-size: 0.9rem;
  width: 100%;
  transition: border-color 0.2s;

  &:focus {
    outline: none;
    border-color: $accent;
  }

  &::placeholder {
    color: $text-muted;
  }
}

.edit-title {
  font-size: 1.25rem;
  font-weight: 600;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.status-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;

  input[type="checkbox"] {
    appearance: none;
    width: 40px;
    height: 22px;
    background: $card-hover;
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;

    &::before {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: $text;
      top: 2px;
      left: 2px;
      transition: transform 0.2s;
    }

    &:checked {
      background: $accent-green;

      &::before {
        transform: translateX(18px);
      }
    }
  }
}

.detail-data-row .edit-input {
  flex: 1;
  min-width: 0;
}

// Database backup section
.db-info {
  background: $bg;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.db-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;

  &:not(:last-child) {
    border-bottom: 1px solid $card-hover;
  }

  .label {
    color: $text-muted;
    font-size: 0.85rem;
  }

  .value {
    color: $text;
    font-size: 0.9rem;

    &.mono {
      font-family: "JetBrains Mono", "Fira Code", monospace;
    }
  }
}

.db-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;

  .btn-secondary {
    background: $card;
    color: $text;
    border: 1px solid $text-muted;

    &:hover {
      background: $card-hover;
      border-color: $text;
    }
  }
}

// Command Log Popup
.command-log-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  max-width: calc(100vw - 40px);
  background: $bg;
  border: 1px solid $card-hover;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba($accent, 0.1);
  z-index: 1000;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.command-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: $bg-soft;
  border-bottom: 1px solid $card-hover;
}

.command-log-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: $accent;

  i {
    font-size: 0.9rem;
  }
}

.command-log-close {
  background: none;
  border: none;
  color: $text-muted;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;

  &:hover {
    background: $card;
    color: $text;
  }
}

.command-log-content {
  padding: 8px 0;
  max-height: 180px;
  overflow-y: auto;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.75rem;
}

.command-log-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 14px;
  animation: fadeIn 0.2s ease-out;

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateX(-10px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  &:hover {
    background: rgba($card, 0.5);
  }

  .log-timestamp {
    color: $text-muted;
    flex-shrink: 0;
    font-size: 0.7rem;
  }

  .log-icon {
    flex-shrink: 0;
    font-size: 0.7rem;
    margin-top: 2px;
  }

  .log-message {
    color: $text;
    word-break: break-word;
    line-height: 1.4;
  }

  // Types
  &.info {
    .log-icon { color: $accent-aqua; }
  }

  &.success {
    .log-icon { color: $accent-green; }
    .log-message { color: $accent-green; }
  }

  &.error {
    .log-icon { color: $accent-red; }
    .log-message { color: $accent-red; }
  }

  &.warning {
    .log-icon { color: $accent-yellow; }
    .log-message { color: $accent-yellow; }
  }
}
