/* ============================================================
   Labo LBC - CSS général avec classes pour boutons
   S'applique à la page de liste des visites et au détail d'une visite
   ============================================================ */

/* ---------- Variables principales ---------- */
:root {
  --bg: #f5f7fb;
  --card-bg: #fff;
  --text: #1e2a3a;
  --muted: #7b8395;
  --primary: #3366ff;
  --primary-dark: #254eda;
  --accent: #00c2a8;
  --danger: #ff5c6c;
  --neutral: #9aa4b1;
  --radius: 10px;
  --shadow: 0 4px 14px rgba(0,0,0,0.06);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* ---------- Structure générale ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

header, footer {
  margin: 0;
  padding: 10px;
  background-color: #413f3f;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

header ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 40px;
}

header li {
  list-style-type: none;
}

header a {
  padding: 10px 18px;
  border-radius: 20px;
  text-decoration: underline;
  font-size: 18px;
  color: white;
}

header a:hover {
  background-color: white;
  text-decoration: underline;
  font-size: 18px;
  color: black;
}

main {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--text);
  background: #f2f5fd;
  line-height: 1.5;
  padding: 40px 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Titres ---------- */
h1, h2, h3 {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}
h1 { font-size: 1.8em; margin-bottom: 24px; }
h2 { font-size: 1.4em; margin-top: 40px; margin-bottom: 12px; }
h3 { font-size: 1.2em; margin-top: 30px; margin-bottom: 6px; }

.dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.dashboard div {
  padding: 20px;
  margin: 20px;
  border: solid 2px black;
  border-radius: 25px;
  width: 400px;
}

.dashboard h2 {
  padding: 0;
  margin: 0;
}

/* ---------- Formulaires ---------- */
form {
  width: 100%;
  max-width: 1000px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 25px;
}
form > div {
  display: flex;
  flex-direction: row;
  gap: 25px;
}
form > div > div {
  display: flex;
  flex-direction: column;
  min-width: 48%;
  gap: 6px;
}
.col-12 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
label {
  font-size: 14px;
  color: var(--muted);
}
input, select, textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.25);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 3px rgba(51,102,255,0.15);
  outline: none;
}
textarea { min-height: 80px; resize: vertical; }

/* ---------- Bloc échantillons ---------- */
#echantillons {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#echantillons .echantillon {
  display: grid;
  grid-template-columns: 1fr 100px auto;
  gap: 10px;
  align-items: center;
  background: #f9faff;
  padding: 12px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
#echantillons .echantillon label {
  font-size: 13px;
  color: var(--muted);
}
#echantillons .echantillon select,
#echantillons .echantillon input[type="number"] {
  width: 100%;
}

/* ---------- Styles boutons par rôle ---------- */
button, input[type="submit"], input[type="button"] {
  font-family: inherit;
  font-weight: 600;
  border: none;
  font-size: 15px;
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  color: #fff;
}

/* Bouton primaire (validation) */
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:active { transform: translateY(1px); }

/* Bouton accent (ajouter) */
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: #00b19a; }
.btn-accent:active { transform: translateY(1px); }

/* Bouton danger (supprimer) */
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #e44d5e; }
.btn-danger:active { transform: translateY(1px); }

/* Bouton neutre (retour, secondaire) */
.btn-neutral { background: var(--neutral); }
.btn-neutral:hover { opacity: 0.9; }

/* Bouton success (vert) */
.btn-success { background: #2e7d32; box-shadow: 0 6px 14px rgba(46,125,50,0.12); }
.btn-success:hover { background: #236b2a; box-shadow: 0 8px 18px rgba(35,107,42,0.14); }
.btn-success:active { transform: translateY(1px); }

/* Forcer l'apparence verte sur les boutons d'ajout même si une autre règle les écrase */
#addVisiteurBtn.btn-success,
#addPraticienBtn.btn-success {
  background: #2e7d32 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(46,125,50,0.12) !important;
}

/* ---------- Tableaux ---------- */
table {
  width: 100%;
  max-width: 1000px;
  border-collapse: collapse;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  margin-bottom: 30px;
}
thead { background: #e9ebf4; }
th, td {
  padding: 14px 16px;
  text-align: left;
  font-size: 15px;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.25);
}
th { font-weight: 600; color: var(--muted); }
tbody tr:hover { background: rgba(51,102,255,0.03); }
td a { color: var(--primary); text-decoration: none; font-weight: 600; }
td a:hover { text-decoration: underline; }

/* Tests */
/* .tests {
  display: grid;
  grid-template-columns:repeat(2, 1fr);
} */

.test {
  border: dashed black 1px;
  border-radius: 20px;
  padding: 10px 15px;
  margin: 40px;
}

.test h2 {
  padding: 0px;
  margin: 0px;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  form { padding: 20px; }
  td:before { content: attr(data-label); position: absolute; left: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  #echantillons .echantillon { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  #echantillons .echantillon button { grid-column: span 2; justify-self: start; }
}

/* ---------- Animations ---------- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
body, form, #echantillons .echantillon { animation: fadeIn 0.25s ease both; }



/* ---------- Champ recherche avec loupe (Option A) ---------- */
.search-form label[for="searchTerm"] { display:block; margin-bottom:8px; }

.search-wrapper {
  position: relative;
  width: 100%;
}

.search-wrapper input[type="text"] {
  width: 100%;
  padding-right: 48px; /* espace pour la loupe */
  padding-left: 12px;
  height: 44px;
  font-size: 15px;
  border-radius: calc(var(--radius) / 1.2);
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: none;
}

.search-wrapper input[type="text"]:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 4px rgba(51,102,255,0.06);
  outline: none;
}

/* bouton icône placé à droite dans le champ */
.search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, transform 0.08s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.search-btn svg { display:block; color: #fff; }

.search-btn:hover { background: var(--primary-dark); }
.search-btn:active { transform: translateY(-50%) translateY(1px); }

/* Petite variante pour écrans très petits */
@media (max-width: 420px) {
  .search-wrapper input[type="text"] { height: 40px; padding-right: 44px; }
  .search-btn { height: 32px; width: 32px; right: 4px; }
}