/*********************
 * CSS UNIVERSAL PRESETS
 *********************/
*,
*:before,
*:after {
  box-sizing: border-box;
}


body {
  display: flex;
  background-image: url("../images/site/small_check.jpg");

  justify-content: center;
  font-family: Roboto, Arial, Serif;
}


/*********************
 * HEADER STYLES
 *********************/



#top-header {
  display: flex;
  justify-content: space-between;
  margin: 2rem;

}

#top-header a:hover {
  text-decoration: none;
  color: #333;
}


.siteName {
  font-size: 1.5rem;
  font-weight: bold;
}

#my-account {
  font-size: 0.9rem;
}


/*********************
 * NAVIGATION STYLES
 *********************/

nav {
  display: flex;
  background-color: #333;
  border-radius: 5px;
  height: auto;
  margin: 5px;
  margin-bottom: 4rem;


}

.navLinks a {
  color: #fff;
}


.navLinks ul {
  display: flex;
  justify-content: space-between;


}

.navLinks ul li a {
  display: flex;
  padding: 10px;
  margin: 0 auto;
}

li {
  list-style-type: none;

}

a {
  color: #000;
  text-decoration: none;
}

.navLinks a:hover {
  text-decoration: none;
  color: gray;
}


/*********************
 * HERO IMAGE SECTION
 *********************/

.welcome {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

#hero {
  object-fit: cover;
  margin: 0 auto;
  cursor: pointer;


}

/*********************
 * WRAPPER
 *********************/

#wrapper {
  background-color: #fff;
  border-radius: 10px;
  max-width: 85vw;
  width: 100%;
  margin: 1rem;
  /* height: auto; */
  outline: 10px solid coral;
}


/*********************
 * MAIN STYLES 
 *********************/


main {
  display: flex;
  flex-direction: column;
  background-color: white;
  margin: 0;
  align-items: flex-start;
  width: 100%;
  max-width: 100vw;
}


main h2 {
  font-size: 1rem;

}

#welcome {
  margin-left: 30px;
}

main p {
  margin-left: 30px;
}


h1 {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0.5rem;
  padding: 0.5rem;
  font-size: 1.3rem;
  text-align: center;
}

.errormsg {
  color: firebrick;
  font-weight: bold;
  font-size: 1.2rem;
  margin: 2rem;
}

.featured-card h2 {
  color: white;

}


/*********************
 * DELOREAN FEATURES
 *********************/

.delorean-features {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "title"
    "feature1"
    "feature2"
    "feature3"
    "owntoday";
  gap: 1rem;

  font-family: Verdana, Arial, sans-serif;
  color: #000;
  background-color: #ccc;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.9);
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 16px;
  opacity: 0.8;
  width: 200px;
  max-width: 190px;
  height: 210px;
  margin: 2rem;
  transform: translateX(60%);
  transform: translateY(-140%);

}


.delorean-features .title {
  grid-area: title;
  color: black;
  font-size: 1rem;
  font-weight: bold;

}

.delorean-features li {
  font-size: 0.6rem;
}

.delorean-features li:nth-child(2) {
  grid-area: feature1;

}

.delorean-features li:nth-child(3) {
  grid-area: feature2;
}

.delorean-features li:nth-child(4) {
  grid-area: feature3;
}

.delorean-features li:nth-child(5) {
  grid-area: owntoday;

}

#owntoday {
  height: auto;
  font-family: Georgia, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 0.9rem;
  margin-left: 1.1rem;
  width: 130px;
  background-color: #ffcc00;
  color: #000;
  border-radius: 5px;
  height: 40px;
  flex: 1 1 1rem;
}

#owntoday:hover {
  transform: scale(1.01);
}




/*********************
 * DELOREAN UPGRADES
 *********************/


.upgrades-list h2 {
  text-align: center;
}


.upgrade-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100vw;

}

.upgrades-list {
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  max-width: 100vw;
  width: 100%;
}


.delorean-upgrades {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-upgrades {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.3rem;
  align-items: center;
  background-color: white;
  height: 100px;
  width: 120px;
  border: 2px solid coral;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  margin: 1rem;

  flex-wrap: wrap;


}


.card-upgrades a {

  text-decoration: underline;
  font-size: 0.8rem;

}

.img-upgrade {
  display: flex;
  width: 50px;
  height: 50px;
  margin: 0 auto;

}

.section-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}


/*********************
 * REVIEWS
 *********************/


.reviews-list h2 {
  margin-left: 2.5rem;
  text-align: left;
}


.delorean-reviews {
  display: flex;
  flex-direction: column;
  line-height: 2rem;

}

.delorean-reviews li {
  list-style-type: circle;
}

figure {
  margin: 0 auto;

}

figure img {
  object-fit: cover;
}

figcaption {
  margin-top: 10px;
  text-align: center;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  margin: 1rem;
  padding: 0.5rem;
}

footer {

  margin: 1rem;
  padding: 0.5rem;

}

.copyright {
  font-size: 0.9rem;
}

#server-error {
  color: navy;
  font-weight: bold;
  text-decoration: underline;
  font-size: 0.9rem;
  margin: 1rem;
}

#server-error:hover {
  color: gray;
  cursor: pointer;
}

/*********************
 * INVENTORY CARDS (VEHICLES)
 *********************/

#inv-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* background-color: #ccc; */
  gap: 1rem;
  padding: 1rem;
  margin: 0 auto;
  border-radius: 3px;
  border: 1px solid #ccc;
  box-shadow: 0 5px 10px rgb(0, 0, 0, 0.5);
  height: auto;
  width: 100%;
  max-width: 83vw;
}

#inv-display li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #f5f5f5;
  box-shadow: 0 5px 5px rgb(0, 0, 0, 0.2);
  width: 200px;

}

#inv-display hr {
  width: 80%;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0.5rem 0;
}

#inv-display h2 {
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

#inv-display img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  margin-top: 0.5rem;
}

.namePrice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  font-weight: bold;
  color: firebrick;
  margin: 0.5rem;
}

.namePrice a {
  margin-bottom: 1.5rem;
  padding: 0;
  font-size: 0.8rem;

}

.namePrice a:hover {
  text-decoration: underline;
  color: gray;
}

/***********************
 * VEHICLE DETAIL PAGE
 ***********************/
#inv-detail {
  display: flex;
  background-color: #ccc;
  margin: 1rem;
  padding: 1rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}

#inv-detail img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
  margin: 1rem;
}

.vehicle-details h2 {
  font-size: 1.1rem;
}

.vehicle-details h3 {
  color: firebrick;
  margin-left: 1.8rem;
  padding: 0;
}

.notice {
  color: green;
  font-weight: bold;
  font-size: 1rem;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;

}



.warnings {
  color: darkred;
  /* black */
  font-weight: bold;
  font-size: 1rem;
  margin: 1rem;
  padding: 0.25rem 0.5rem;
  border-left: 4px solid #8B0000;

  border-radius: 3px;
}



/*********************
* LOGIN / ACCOUNT UPDATE FORM STYLES
*********************/

.form-wrapper {
  display: flex;
  justify-content: center;
  background-color: #eee;
  border-radius: 5px;
  margin: 2rem;
  padding: 1rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  width: 300px;
  height: auto;
  max-width: 90vw;
  margin: 0 auto;
}

.form-wrapper h2 {
  text-align: center;
  font-size: 1rem;
}

#form-wrapper2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #eee;
  border-radius: 5px;
  /* padding: 1rem; */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  width: 350px;
  height: auto;
  max-width: 100vw;
  margin: 0 auto;
}

.update-forms h2 {
  padding: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1rem;
  padding: 1rem;
  /* background-color: #ccc; */
}

.form-group p {
  font-size: 0.8rem;
  color: firebrick;
  font-weight: bold;
  margin: 0.5rem 0;
}

.form-group hr {
  width: 90%;
  max-width: 90vw;
  border: 0;
  border-top: 1px solid #ccc;
  /* margin: 0.5rem 0; */
}

label {
  margin-top: 0.7rem;
}

.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 auto;
  margin-top: 1rem;
  padding: 0.5rem;
  width: 150px;
  background-color: coral;
  color: #000;
  font-weight: bold;
  border: none;
  border-radius: 5px;
}

#loginForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

#loginForm label {
  font-size: 0.9rem;
  /* margin: 0.5rem 0; */
}

#loginForm h2 {
  font-size: 1rem;
}

#loginForm hr {
  width: 80%;
  max-width: 80vw;
  border: 0;
  border-top: 1px solid #ccc;
  /* margin: 0.5rem 0; */
}


.signmeup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1rem;
}



.signmeup label {
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.signmeup h2 {
  font-size: 1rem;
}

.signmeup hr {
  width: 80%;
  max-width: 80vw;
  border: 0;
  border-top: 1px solid #ccc;
  /* margin: 0.5rem 0; */
}

.btn-password {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0.5rem auto;
  padding: 0.3rem;
  width: 130px;
  background-color: lightgray;
  color: #000;
  font-weight: bold;
  border: none;
  border-radius: 5px;
}

.noaccount {
  font-size: 0.8rem;
}

#register {
  margin-top: 1rem;
  text-align: center;
  color: navy;
  text-decoration: underline;
  cursor: pointer;
}

input,
textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  width: 250px;
  transition: border-color 0.3s, background-color 0.3s;
}

.classificationDiv, .inventoryDisplayDiv {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.classificationDiv table, .inventoryDisplayDiv table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.classificationDiv th,
.classificationDiv td,
.inventoryDisplayDiv th,
.inventoryDisplayDiv td {
  text-align: left;
  padding: 10px;
  border: 1px solid #ccc;
  word-wrap: break-word;
}


/* #classificationDisplay, #inventoryDisplay {
  display: flex;
  flex-direction: column;
  width: 80%;
  max-width: 80vw;
} */

input.classification-input {
  display: flex;
    
}

input:invalid,
textarea:invalid {
  background-color: #ffdddd;
  border: 2px solid red;
}

input:valid,
textarea:valid {
  background-color: #ddffdd;
  border: 2px solid green;
}

input:required:invalid:hover,
textarea:required:invalid:hover {
  border: 2px solid darkred;
}

input:required:valid,
textarea:required:valid {
  border: 2px solid green;
}

input:focus,
textarea:focus {
  outline: none;
  /* border: 2px solid #555; */
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  /* background-color: #f0f0f0; */
}

button:disabled {
  background-color: #ddd;
  color: #666;
  cursor: not-allowed;
}

small {
  font-size: 0.7rem;
  color: #000;
  margin-top: 0.5rem;
}

#welcomeuser {
  color: navy;
}

/*****************************
  * MANAGEMENT  STYLES
  *****************************/
.management-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  margin: 1rem;
  padding: 0.5rem;
}

.management-links a {
  text-decoration: underline;
  font-weight: bold;
  color: navy;
}

.management-links a:hover {
  color: gray;
  cursor: pointer;
}

#manage-inventory, #manage-classification {
  margin-left: 30px;
}

/*********************
 * ADD CLASSIFICATION FORM  STYLES
 *********************/

#alphanumeric {
  font-size: 0.7rem;
  color: firebrick;
  margin-top: 0.5rem;
}

/*********************
 * ADD INVENTORY FORM  STYLES
 *********************/

#classificationList {
  height: 40px;
  margin-left: 30px;
}

#classification_id {
  height: 40px;
}

#inventoryDisplay, #classificationDisplay {
  margin-left: 30px;
  width: 50%;
  /* Full width */
  border-collapse: collapse;
  /* Remove double borders */
  margin-top: 1rem;
  /* Space above the table */
  font-family: Arial, sans-serif;
}

#inventoryDisplay thead, #classificationDisplay thead {
  background-color: #004080;
  /* Dark blue header */
  color: #ffffff;
  /* White text */
}

#inventoryDisplay th, #classificationDisplay th,
#inventoryDisplay td, #classificationDisplay td {
  padding: 10px;
  text-align: left;
  border: 1px solid #cccccc;
}

#inventoryDisplay tbody tr:nth-child(even), #classificationDisplay tbody tr:nth-child(even) {
  background-color: #f2f2f2;
  /* Zebra stripes */
}

#inventoryDisplay tbody tr:hover,  #classificationDisplay tbody tr:hover {
  background-color: #e0f0ff;
  /* Highlight row on hover */
}

#inventoryDisplay a, #classificationDisplay a{
  color: #004080;
  text-decoration: none;
  font-weight: bold;
}

#inventoryDisplay a:hover, #classificationDisplay a:hover {
  text-decoration: underline;
}

/*****************************
  * ACCOUNT  STYLES
  *****************************/

#edit-account {
  color: navy;
  text-decoration: underline;
  margin-left: 30px;
}

#inventory-management {
  margin-top: 50px;
  margin-left: 30px;
}

/*********************
 * MEDIA QUERIES
 *********************/

@media (max-width: 1000px) {

  #hero {
    height: auto;
    width: 600px;
  }

  .delorean-features {
    width: 150px;
    max-width: 150px;
    height: 185px;
    font-size: 0.8rem;
  }

  .delorean-features .title {
    font-size: 0.8rem;
  }

  #owntoday {
    width: 100px;
    height: 35px;
    margin-left: 0.5rem;
  }


  .upgrade-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 100vw;
    align-items: flex-start;
  }

  .delorean-upgrades {
    display: flex;
    flex-direction: column;
    margin-right: 2rem;

  }


  .upgrades-list h2 {
    text-align: left;
    font-size: 1.2rem;
  }

  .section-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .reviews-list {
    display: flex;
    flex-direction: column;
    background-color: white;

  }


  .reviews-list {
    margin-bottom: 2rem;
  }

  .reviews-list h2 {
    text-align: left;
    font-size: 1.2rem;
  }

  .featured-card {

    width: 180px;
    height: 180px;
    font-size: 0.9rem;

  }

  
}

@media (max-width: 680px) {

  #wrapper {
    max-width: 100vw;
    width: 100%;
    height: auto;
  }

  body {
    background-image: none;
  }

  #top-header {
    flex-direction: column;
    gap: 2rem;
  }

  #hero {
    height: auto;
    width: 350px;
  }

  .navLinks ul {
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    align-items: center;

  }

  .navLinks ul li {
    padding: 0.4rem;
    font-size: 0.9rem;

  }

  figcaption {
    font-size: 0.8rem;
  }


  .welcome h1 {
    margin-top: 2rem;
    font-size: 1.2rem;
    /* text-align: center; */

  }

  .featured-card {

    width: 140px;
    height: 140px;
    padding: 0;

  }

  .delorean-features {

    height: 180px;
    font-size: 0.7rem;
    transform: translateX(60%);
    transform: translateY(-130%);

  }


  #owntoday {
    width: 80px;
    height: 30px;
    font-size: 0.6rem;
    margin-left: 1.2rem;
  }

  #inv-display {
    flex-direction: column;
    align-items: center;
    height: auto;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
  }

  #inv-display img {
    width: 100%;
    max-width: 100vw;
    height: auto;
    border-radius: 5px;
    /* object-fit: cover; */
    padding: 0.5rem;
    align-items: center;
  }

  #inv-display li {
    width: 90%;
    max-width: 80vw;
    height: auto;
  }



  #inv-detail img {
    width: 100%;
    max-width: 80vw;
    height: auto;
    object-fit: cover;
    border-radius: 5px;
    margin: 0 auto;
  }

 

  main h1 {
    font-size: 1.1rem;

  }

  #inv-detail {
    flex-direction: column;
    align-items: center;
    max-width: 80vw;
    width: 80vw;
    margin: 0 auto;
    padding: 1rem;

  }

  .notice {
    font-size: 0.9rem;
  }

  #inv-detail h2 {
    font-size: 1rem;
  }

  .vehicle-details h3 {
    font-size: 0.9rem;
    color: firebrick;
  }

  .vehicle-details p {
    font-size: 0.8rem;
  }

  footer p {
    font-size: 0.8rem;

  }

  #server-error {
    font-size: 0.8rem;
    margin: 0.5rem;
  }

  .form-wrapper {
    width: 90%;
    max-width: 90vw;
    height: auto;
  }

  .signmeup h2 {
    font-size: 1rem;
  }

  .signmeup label {
    font-size: 0.8rem;
  }

  #loginForm {
    width: 50%;
    max-width: 50vw;
  }


  input.classification-input {
    font-size: 0.8rem;
    width: 80px;
  }

}