/* ── DevisApp — BeWell Nutraceutique ─────────────────────────────────────────── */

:root {
  --navy:   #2D3561;
  --lblue:  #7CB9E8;
  --salmon: #E8957A;
  --amber:  #F0C875;
  --green:  #6BC5A0;
  --lgray:  #f0f4ff;
}

body {
  background: #f8f9fc;
  font-family: Arial, 'Helvetica Neue', sans-serif;
}

/* ── Navbar ────────────────────────────────────────────────────────────────── */
.navbar .nav-link.active {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  border-radius: 8px;
}

.card-hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  color: #333;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(45, 53, 97, 0.12) !important;
  color: var(--navy);
}

/* ── Section headers ────────────────────────────────────────────────────────── */
.section-header {
  background: var(--lgray);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 2px solid var(--lblue);
  padding: 0.6rem 1rem;
}

/* ── Boutons extra small ────────────────────────────────────────────────────── */
.btn-xs {
  padding: 2px 7px;
  font-size: 0.75rem;
  border-radius: 4px;
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.table th {
  font-size: 0.82rem;
  font-weight: 600;
  color: #555;
}
.table td {
  font-size: 0.875rem;
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  font-weight: 500;
}

/* ── Formulaire ─────────────────────────────────────────────────────────────── */
.form-label {
  margin-bottom: 3px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--lblue);
  box-shadow: 0 0 0 0.2rem rgba(124, 185, 232, 0.25);
}

/* ── Autocomplete ───────────────────────────────────────────────────────────── */
.autocomplete-list {
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  font-size: 0.85rem;
}
.autocomplete-list .list-group-item {
  cursor: pointer;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.autocomplete-list .list-group-item:first-child { border-top: none; }
.autocomplete-list .list-group-item:last-child  { border-bottom: none; }
.autocomplete-list .list-group-item:hover {
  background: var(--lgray);
  color: var(--navy);
}

/* ── Tableau ingrédients ────────────────────────────────────────────────────── */
#ingredientTable td {
  vertical-align: middle;
}

/* ── Résultat devis ─────────────────────────────────────────────────────────── */
.font-monospace {
  font-size: 0.83rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .container-fluid {
    padding: 0.5rem;
  }
  h4 { font-size: 1.1rem; }
}