*{
    font-family: Arial, Helvetica, sans-serif;
}


body{
  display: grid;
  grid-template-columns: repeat(9,1fr);
  grid-template-rows: repeat(9,1fr);
  background-color: rgb(248, 248, 248);
  height: 100vh;
  margin: 0;
}

.body-admin{
  background-color: rgb(95, 95, 107);
  color: white;
}

header{
  display: grid;
  justify-content: space-around;

  grid-column: 1/10;
  grid-row: 1;

  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 1fr;

  border-bottom: 1px solid black;
  position: sticky;
  color: whitesmoke;
  background-color: rgb(19, 19, 19);
  position: sticky;
  top: 0px;
  left: 0px;
}

header h1{
    align-self: center;
    grid-column: 2/4;
}

header nav{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: center;

    grid-column: 4/9;
}


header nav .nav-admin{
  justify-self: end;
  grid-column: 4/5;
}

.nav-admin a{
  background-color: rgb(63, 50, 121);
  text-decoration: none;
  padding: 10px;
  border-radius: 4px;
  font-weight: bold;
}

header nav a{
    color: white;
    text-decoration: none;
}

header nav a:hover{
  text-decoration: underline;
}

.deco{
  background-color: red;
  text-decoration: none;
  padding: 10px;
  border-radius: 4px;
  font-weight: bold;
}


main{
  display: grid;
  grid-template-columns: repeat(9,1fr);
  grid-template-rows: repeat(20, 1fr);
  grid-column: 1/10;
  grid-row:2/-1; 
}

.main-admin{
  grid-row: 3/-1; 
}

.connect-title{
  grid-column: 5/6;
  grid-row: 2;
  justify-self: center;
  text-align: center;
}

.auth-box{
  grid-column: 4/7;
  grid-row: 4;

  padding: 20px;
  border: 1px solid black;
  border-radius: 7px;
}

.auth-box input{
  height: 40px;
  padding-left: 10px;
  margin: 15px 0 15px 0;
  font-size: 1.3em;
}

.auth-box label{
  font-size: 1.3em;
}

.auth-choice{
  display: flex;
  justify-content: space-around;
  margin: 30px 0 30px 0;
}

.auth-choice a{
  color: rgb(255, 255, 255);
  background-color: rgb(107, 102, 160);
  padding: 10px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.3em;
}


.auth{
  display: flex;
  flex-direction: column;
}

.page-title{
  grid-column: 2/5;
  grid-row: 1;
  margin-bottom: 20px;
}

.page-title h1{
  margin: 0;
}

.resa-form{
  display: grid;
  gap: 20px;

  grid-column: 2/9;
  grid-row-start: 2;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: repeat(5,1fr);

  margin: 0;

}

.manga-list{
  display: grid;

  grid-column: 1/5;
  grid-row: 1/-1;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(5, 2fr);
;
  gap: 10px;
}

.manga-card{

  width: 2fr;
  height: 4fr;

  padding: 10px;
  border: 1px solid black;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;

}

.manga-card fieldset{
  padding: 5px;
  font-size: 0,7em;
}

.resa-choice{
  display: flex;
  flex-direction: column;

  grid-column: 5/6;
  grid-row: 1/4;
 
  border: 1px solid black;
  border-radius: 5px;
  padding: 20px;
  position: sticky;
  top: 150px;
  height: 50vh;
}

.resa-bouton{
  grid-column: 5/6;
  grid-row: 4/5;
  padding: 0;
}

.resa-bouton input{
  width: 100%;
  height: 100%;
}

.manga-card-container{
    display: grid;
    gap: 10px;

    grid-template-columns: repeat(6, 1fr);
}


.resa-list{
    display: grid;
    grid-column: 2/9;
    grid-row-start: 3; 
    gap: 30px;

    margin-bottom: 200px;
}

.resa-card{
    background-color: rgb(245, 245, 245);
    padding: 10px;
    border: 1px solid black;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    border-radius: 7px;
    
}

.titles{
  display: flex;
  justify-content: space-between;
  grid-column: 2/9;
  grid-row: 1;
}



.search{
  margin-top: 20px;
  padding: 30px 0 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-column: 2/9;
  grid-row: 5;
  border-top: 1px solid black ;
}

.search form{
  display: flex;
  column-gap: 10px;
  align-items: center;
}

.search input:first-child{
  height: 40px;
  width: 500px;
  font-size: 1.3em;
}

.search input:nth-child(2){
  height: 40px;
  width: 100px;
}


.search h2{
  margin: 0;
}

.insert-forms{
  display: grid;
  grid-column: 2/9;
  grid-row: 2/3;
  align-items: center;

  grid-template-columns: repeat(4, 1fr);
}

.insert-manga-form{
  display: grid;
  grid-column: 1/-1;
  gap: 10px;

  grid-template-columns: 3fr 2fr 1fr 1fr;

}

.insert-manga-form fieldset{
  display: flex;
  flex-direction: column;
  justify-content: end;
  border: none;
  padding: 0;
}

.insert-manga-form-submit{
  grid-column: 1/2;
  grid-row: 2;
  width: 100px;
}

.manga-back-form{
  display: grid;
  gap: 20px;

  grid-column: 2/9;
  grid-row-start: 7;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: repeat(5,1fr);

  margin: 0;
}

.manga-list-back{
  display: grid;

  justify-items: center;

  grid-column: 1/-1;
  grid-row: 1/-1;
  grid-template-columns: repeat(5,1fr);
;
  gap: 10px;
}

.manga-list-back h1, p{
  margin: 0;
}

.client-container{
  display: grid;
  grid-column: 2/9;
  grid-row-start: 3; 
  gap: 10px;

}

.client-card{
  background-color: rgb(245, 245, 245);
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  border-radius: 7px;
  border: 3px solid rgb(37, 30, 124);
  margin-bottom: 20px;
  
}

.client-info-container{
  display: flex;
  justify-content: space-between;
}

.cd-resa-card{
  background-color: rgb(221, 221, 221);
  padding: 10px;
  border-radius: 7px;
  margin-top: 10px;
}

.cd-manga-container{
  display: grid;
  gap: 10px;
  margin-top: 10px;

  grid-template-columns: repeat(6, 1fr);
}

.cd-manga-card{
  width: 2fr;
  height: 4fr;

  padding: 10px;
  border: 1px solid black;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;

}

.checked{
  background-color: rgb(176, 221, 176);
}

.check-manga{
  display: none;
}

.admin-link a{
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  background-color: rgb(25, 25, 87);
  color: rgb(250, 250, 250);
  padding: 20px;
  border-radius: 20px;
  position: fixed;
  bottom: 2%;
  left : 2%;
}

.all-tables{
  display: grid;
  grid-column: 2/9;
  gap: 20px;

  grid-template-areas: "class stat"
                       "class stock"
                       "void  stock";
}

.table-container-stock{
  padding: 20px;
  grid-area: stock;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.table-container-stat{
  padding: 20px;
  grid-area: stat;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.table-container-top{
  padding: 20px;
  grid-area: class;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

table, th, td {
  border: 1px solid #ddd;
}

thead {
  background-color: #000;
  color: #fff;
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  position: sticky;
  top: 0;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

.bug{
  background-color: rgb(236, 177, 177);
  border-radius: 7px;
  padding: 10px;
  margin: 20px;
}

.manga-card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 10px 0;
}

.manga-card-header div{
  text-align: right;
}

.manga-card-id{
  background-color: rgb(103, 103, 155);
  color: #ddd;
  font-weight: bold;
  padding: 5px;
  border-radius: 2px;
}

.manga-card-name{
  font-weight: bold;
}


.manga-card-author{
  font-style: italic;
}

.manga-card-genre{
  border: 1px solid black;
  border-radius: 50px;
  padding: 5px 10px 5px 10px;
  margin: 10px 0 10px 0;
  width: fit-content;
  background-color: #f2f2f2;
}

.manga-card-titre{
  font-weight: bold;
  background-color: #f2f2f2;
  border: 1px solid black;
  border-radius: 50px;
  width: fit-content;
  padding: 5px 10px 5px 10px;

}

.manga-card-auteur{
  font-style: italic;
  background-color: #f2f2f2;
  border: 1px solid black;
  border-radius: 50px;
  width: fit-content;
  padding: 5px 10px 5px 10px;

}