body {
  margin: 0;
  padding: 0;
  background-color: black;
  height: 100vh;
  font-family: sans-serif;
}

.center {
  text-align: center;
}

#head h1 {
  margin-top: 0px;
  font-size: 3rem;
  margin-left: 4%;
  margin-bottom: 0;
}

h3 {
  margin-top: 0px;
}

pre {
  padding-left: 0px;
}

label {
  font-size: 0.9rem;
}

table {
    border-collapse: collapse; /* évite les doubles lignes */
    border: 1px solid black;
}

th, td {
    border: 1px solid black;
    padding: 4px;
}

code {
    background-color: #f5f5f5; 
    padding: 4px;
}

li {
    margin-bottom: 10px; /* espace vertical entre les items */
}

#tuto {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  height: 95%;
  overflow-y: auto;
}

#action > div:last-child {
  margin-bottom: 0 !important;
}

#action {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 98%;
  grid-template-rows: 120px 250px 250px 600px 680px 650px 500px 500px 500px 100px;
  grid-template-areas:
    "head"
    "search"
    "classeur"
    "action"
    "lig"
    "blot"
    "blast"
    "pcr"
    "orf"
    "foot";
}

#head {
  grid-area: head;
  background-color: white;
  padding: 10px;
  margin-top: 6px;
}

#head h2 {
  text-align: right;
  margin-right: 10%;
  margin-top: 0;
}

#search {
  grid-area: search;
  background-color: white;
  padding: 4px 4px 10px 4px;
}

#classeur {
  grid-area: classeur;
  background-color: white;
  padding: 4px;
}

#action {
  grid-area: action;
  background-color: white;
  padding: 4px;
}

#lig {
  grid-area: lig;
  background-color: white;
  padding: 4px;
}

#blot {
  grid-area: blot;
  background-color: white;
  padding: 4px;
}

#blast {
  grid-area: blast;
  background-color: white;
  padding: 4px;
}

#pcr {
  grid-area: pcr;
  background-color: white;
  padding: 4px;
}

#orf {
  grid-area: orf;
  background-color: white;
  padding: 4px;
}

#foot {
  grid-area: foot;
  background-color: white;
  padding: 4px;
}

.search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 2px 2px;
  padding: 0px 2px;
  align-items: stretch;
  height: 180px;
}

#recherche,
#ajouter,
#showseq {
  height: 100%;
}

#recherche {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 0px solid #aaa;
}

#recherche form,
#ajouter form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  width: 100%;
}

#recherche input,
#recherche button,
#ajouter button {
  flex: 1;
  padding: 12px;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

#showseq {
  padding: 10px;
  border: 1px solid #aaa;
  overflow-y: auto;
  box-sizing: border-box;
  height: 100%;
}

#showseq label {
  font-size: 0.95rem;
  cursor: pointer;
}

#showseq input[type="checkbox"] {
  margin-right: 6px;
}

#ajouter {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 0px dashed #aaa;
}

.classeur-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 2px;
  padding: 0px 2px;
  align-items: stretch;
  height: 180px;
}

#gestion-seq,
#action-seq {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 0px solid #aaa;
  height: 100%;
}

#gestion-seq form,
#action-seq form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  justify-content: space-evenly;
}

#gestion-seq button,
#action-seq button {
  padding: 12px;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 100%;
  text-align: center;
  flex: 1;
  box-sizing: border-box;
}

#showclasseur {
  padding: 10px;
  border: 1px solid #aaa;
  margin-top: 0px;
  height: 100%;
  box-sizing: border-box;
  max-height: 180px;
  overflow-y: auto;
}

.orf-grid,
.lig-grid,
.pcr-grid,
.blot-grid,
.blast-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  height: 100%;
}

#orf_param,
#lig_param,
#pcr_param,
#blot_param,
#blast_param {
  border: 0px dashed #aaa;
  padding: 6px;
  box-sizing: border-box;
  margin-right: 0px;
}

#orf_param form,
#lig_param form,
#pcr_param form,
#blot_param form,
#blast_param form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}

#orf_param input,
#orf_param button,
#lig_param input,
#lig_param button,
#pcr_param input,
#pcr_param button,
#blast_param input,
#blast_param button {
  padding: 10px;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

#lig_param select,
#blot_param input,
#blot_param select,
#blot_param button {
  padding: 10px;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

#orf_show,
#lig_show,
#pcr_show,
#blast_show,
#blot_show {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  margin-right: 6px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: auto;
  height: 100%;
  max-width: 100%;
}

#orf_param h3,
#orf_show h3,
#lig_param h3,
#lig_show h3,
#pcr_show h3,
#pcr_param h3,
#blast_show h3,
#blast_param h3,
#blot_show h3,
#blot_param h3 {
  text-align: center;
}

#blot_show img {
  display: block;
  margin: 10px auto;
}

#action img {
   margin-top: 10px;
}   

#orf,
#lig,
#pcr,
#blast,
#blot {
  overflow-y: auto;
  padding-bottom: 10px;
}

#foot {
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  width: 100%;
  max-width: 400px;
}

.form-row label {
  margin-bottom: 5px;
  font-weight: bold;
}

.form-row input,
.form-row textarea {
  width: 100%;
  height: 30px;
  padding: 6px 8px;
  box-sizing: border-box;
  font-size: 14px;
}

.form-row textarea {
  height: 30px;
  resize: vertical;
}

#submit-new-seq {
  margin-top: 10px;
  height: 40px;
  width: 150px;
}



/* Style pour le toast */
#download-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}
#download-toast.show {
  opacity: 1;
}