*{
  padding: 0;
  margin: 0;
}
.admin_header{
  padding: 20px;
  background-color: lightblue;
}
.admin_header ul {
  list-style: none;
}
.admin_header ul li {
}
.admin_header ul li a{
  text-decoration: none;
  color: black;
}
.admin_header ul li a:hover{
  text-decoration: underline;
  font-weight: bold;
  color: blue;
}


.inventoryHeader{
  background: linear-gradient(lightblue, white);
  height: 100px;
  padding: 10px;
  padding-left: 10%;
}

.inventoryHeader form{
  float: left;
  padding: 10px;
  margin: 10px;
}
.inventoryHeader button{
  color: black;
  padding: 10px;
  border-radius: 10px;
}
.inventoryHeader button:hover{
  cursor: pointer;
  background-color: blue;
  color: white;
  font-weight: bold;
}


.usersHeader{
  background: linear-gradient(lightblue, white);
  height: 100px;
  padding: 10px;
  padding-left: 10%;
}

.usersHeader form{
  float: left;
  padding: 10px;
  margin: 10px;
}
.usersHeader button{
  color: black;
  padding: 10px;
  border-radius: 10px;
}
.usersHeader button:hover{
  cursor: pointer;
  background-color: blue;
  color: white;
  font-weight: bold;
}

#system_users {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#system_users td, #system_users th {
  border: 1px solid #ddd;
  padding: 8px;
}

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

#system_users tr:hover {background-color: #ddd;}

#system_users th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

.allUsers{
  width: 50%;
  padding: 10px;
  margin:auto;
}

/* add users style start */
.add_Users{
  /* background-color: lightgreen; */
  background:linear-gradient(white, lightblue);
  width: 50%;
  padding: 10px;
  margin: auto;
  border: 2px solid black;
  border-radius: 20px;
  height: 350px;
}
.add_Users h1{
  text-align: center;
  text-decoration: underline;
}
.add_Users label{
  width: 30%;
  float: left;
  text-align: left;
  padding: 5px;
  padding-left: 100px;
  margin-top:5px;
}
.add_Users input[type=text]{
  width: 40%;
  padding: 5px;
  margin-top: 5px;
}
.add_Users select{
  width: 42%;
  padding: 5px;
  margin-top: 5px;
}
.add_Users input[type=email]{
  width: 40%;
  padding: 5px;
  margin-top: 5px;
}
.add_Users input[type=password]{
  width: 40%;
  padding: 5px;
  margin-top: 5px;
}
.add_Users input[type=submit]{
  padding: 10px;
  width: 50%;
  margin: 10px;
  margin-left: 25%;
  border-radius: 10px;
  border:2px solid black;
  font-weight: bold;
}
.add_Users input[type=submit]:hover{
  font-size: 105%;
  background:linear-gradient(#00C1FF, lightblue);
  cursor: pointer;
}


.add_Users input[type=reset]{
  padding: 5px;
}
.add_Users input[type=reset]:hover{
  background-color: lightblue;
  cursor: pointer;
}

/* add user style End */


.add_items{
  background:linear-gradient(white, lightblue);
  padding: 10px;
  width: 50%;
  clear: both;
  margin: auto;
  border:2px solid black;
  border-radius: 20px;
}

.add_items h1{
  text-align: center;
  text-decoration: underline;
}

.add_items label{
  width: 30%;
  float: left;
  text-align: left;
  padding: 5px;
  padding-left: 100px;
  margin-top:5px;
}
.add_items input[type=text]{
  width: 40%;
  padding: 5px;
  margin-top: 5px;
}
.add_items select{
  width: 42%;
  padding: 5px;
  margin-top: 5px;
}
.add_items input[type=email]{
  width: 40%;
  padding: 5px;
  margin-top: 5px;
}
.add_items input[type=date]{
  width: 40%;
  padding: 5px;
  margin-top: 5px;
}
.add_items textarea{
  width: 40%;
  padding: 5px;
  margin-top: 5px;
}

.add_items input[type=password]{
  width: 40%;
  padding: 5px;
  margin-top: 5px;
}
.add_items input[type=submit]{
  padding: 10px;
  width: 50%;
  margin: 10px;
  margin-left: 25%;
  border-radius: 10px;
  border:2px solid black;
  font-weight: bold;
}
.add_items input[type=submit]:hover{
  font-size: 105%;
  background:linear-gradient(#00C1FF, lightblue);
  cursor: pointer;
}


.add_items input[type=reset]{
  padding: 5px;
}
.add_items input[type=reset]:hover{
  background-color: lightblue;
  cursor: pointer;
}





.allocate_items{
  width: 30%;
  clear: both;
  border:2px solid black;
  border-radius: 10px;
  margin: 10px auto;
  padding: 20px;
}
.allocate_items label{
  width: 30%;
  float: left;
  text-align: left;
  padding: 5px;
  margin-top:5px;
}

.allocate_items select{
  width: 30%;
  padding: 5px;
  margin-top: 5px;
}

.allocate_items input[type=date]{
  width: 40%;
  padding: 5px;
  margin-top: 5px;
}

.allocate_items input[type=submit]{
  padding: 10px;
  width: 50%;
  margin: 10px;
  margin-left: 25%;
  border-radius: 10px;
  border:2px solid black;
  font-weight: bold;
}
.allocate_items input[type=submit]:hover{
  font-size: 105%;
  background:linear-gradient(#00C1FF, lightblue);
  cursor: pointer;
}


.allocate_items input[type=reset]{
  padding: 5px;
}
.allocate_items input[type=reset]:hover{
  background-color: lightblue;
  cursor: pointer;
}
.allocate_items textarea{
  width: 50%;
  padding: 5px;
  margin-top: 5px;
}

.allocate_items h1{
  text-align: center;
  text-decoration: underline;
  margin: 10px;
}



.view_items{
  padding: 20px;
  margin:20px auto;
  width: 80%;
  background-color: #E5FAF3;
}

.view_items h1{
  text-align: center;
  border-bottom: 2px double black;
  margin: 20px;
}
section{
  min-height:80vh ;
}

.adminfooter{
    padding-top: 70px;
    height: 40px;
    /* background-color: lightblue; */
    background:linear-gradient(white, lightblue);
    clear: both;
    text-align: center;
}


/* ================================
   RESPONSIVE – TABLETS (≤ 992px)
   ================================ */
@media (max-width: 992px) {

  .inventoryHeader,
  .usersHeader {
    height: auto;
    padding-left: 5%;
    text-align: center;
  }

  .inventoryHeader form,
  .usersHeader form {
    float: none;
    margin: 10px auto;
  }

  .allUsers {
    width: 80%;
  }

  .add_Users,
  .add_items {
    width: 70%;
    height: auto;
  }

  .add_Users label,
  .add_items label {
    padding-left: 20px;
    width: 40%;
  }

  .add_Users input[type=text],
  .add_Users input[type=email],
  .add_Users input[type=password],
  .add_Users select,
  .add_items input[type=text],
  .add_items input[type=email],
  .add_items input[type=password],
  .add_items select,
  .add_items input[type=date],
  .add_items textarea {
    width: 50%;
  }

  .allocate_items {
    width: 50%;
  }
}


/* ================================
   RESPONSIVE – MOBILE PHONES (≤ 600px)
   ================================ */
@media (max-width: 600px) {

  /* Header */
  .admin_header {
    padding: 15px;
    text-align: center;
  }
  .admin_header ul {
    padding: 0;
  }
  .admin_header ul li {
    display: block;
    margin: 8px 0;
    text-align: center;
  }

  /* Inventory & Users header */
  .inventoryHeader,
  .usersHeader {
    padding: 20px 10px;
    height: auto;
  }

  .inventoryHeader form,
  .usersHeader form {
    float: none;
    margin: 10px auto;
    text-align: center;
  }

  .inventoryHeader button,
  .usersHeader button {
    width: 80%;
    padding: 12px;
  }

  /* Table */
  #system_users td,
  #system_users th {
    padding: 6px;
    font-size: 14px;
  }

  .allUsers {
    width: 95%;
  }

  /* Add Users & Add Items forms */
  .add_Users,
  .add_items {
    width: 90%;
    padding: 15px;
    height: auto;
  }

  .add_Users label,
  .add_items label {
    width: 100%;
    float: none;
    padding-left: 0;
    text-align: left;
    margin-top: 10px;
  }

  .add_Users input[type=text],
  .add_Users input[type=email],
  .add_Users input[type=password],
  .add_Users select,
  .add_items input[type=text],
  .add_items input[type=email],
  .add_items input[type=password],
  .add_items input[type=date],
  .add_items textarea,
  .add_items select {
    width: 100%;
  }

  .add_Users input[type=submit],
  .add_items input[type=submit] {
    width: 90%;
    margin-left: 5%;
  }

  /* Allocate Items */
  .allocate_items {
    width: 90%;
    padding: 15px;
  }

  .allocate_items label {
    width: 100%;
    float: none;
    margin-top: 10px;
  }

  .allocate_items select,
  .allocate_items input[type=date],
  .allocate_items textarea {
    width: 100%;
  }

  .allocate_items input[type=submit] {
    width: 90%;
    margin-left: 5%;
  }

  /* View items */
  .view_items {
    width: 95%;
    padding: 10px;
  }

  .adminfooter {
    height: auto;
    padding: 20px;
    font-size: 14px;
  }
}