/* Style Guide */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed&family=Young+Serif&display=swap');

:root {

  /* Main Pallet */
  --m-1:       #ffffff; /* white */
  --m-2:       #cccccc; /* light grey */
  --m-3:       #b4b4b4; /* lighter grey */
  --m-4:       #737373; /* grey */
  --m-5:       #4c4c4c; /* darker grey */
  --m-6:       #333333; /* dark grey */
  --m-7:       #000000; /* black */

 /* Danger Accent*/
  --dan:       #ff0000; /* red */
  --dan-da:    #8b0000; /* dark red */

  /* Warning Accent*/
  --war:       #ffcf00; /* yellow */
  --war-da:    #b47306; /* dark yellow */

  /* Success Accent*/
  --suc:       #7ed957; /* green */
  --suc-da:    #038d4a; /* dark green */

  /* Transparent Colors*/
  --log-bg:    rgba(0, 0, 0, 0.7);
 
  /* Fonts */
    --title: "Young Serif", serif;
    --body: "Fira Sans Condensed", sans-serif;;
    --h1: 32;
    --h2: 24px;
    --h3: 18.5px;
    --bod: 16px ;

  /* Rounded corner */
    --rc: 8px;

  /* Box Shadow */
    --box-shad: 0px 2px 15px rgba(0, 0, 0, 0.5);
    --box-ligsha:0px 2px 10px rgba(0, 0, 0, 0.1); 
}


/* BODY */
body {
  margin: 0;
  font-family: var(--body);
  background-color:  var(--m-1);
  min-height: 100dvh;
   overflow-x: hidden;
  display: flex;
  flex-direction: column;

}


/* TOP NAV */
.topnav {
  overflow: hidden;
  background-color: var(--m-6);
  min-height: 10dvh; /* i changed this from 100 to 10 */
  font-family: var(--title); 
}

  .topnav a {
  float: left;
  display: block;
  color: var(--m-2);
  text-align: center; 
  padding: 0 16px;
  text-decoration: none;
  font-size: 17px;
  height: 50px; /* match this to the logo height + padding */
  line-height: 50px; /* vertically center the text */
  }
    .topnav a:hover {
  background-color: var(--m-2);
  color: var(--m-7);
    }
    .topnav a.active { /* idk if this active works */
  background-color: var(--m-7);
  color: var(--m-1);
    }

  .topnav .icon {
  display: none;
}

.nav-logo {
  height: 40px; /* You can adjust this value to match your design */
  vertical-align: middle;
  display: inline-block;
  padding: 5px 10px; /* spacing around the image */
}


/* VIEW PORT */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* CONTAINER */
.container {
  width: 80%;
  margin: 20px auto;
}

/* SECTION BOX */
.section-box {
  background-color: var(--m-1);
  padding: 20px;
  padding-top: 10px;
  position: relative;
  border-radius: var(--rc);
  border: 1px solid var(--m-6);
  box-shadow: var(--box-ligsha);
  margin-bottom: 20px;
  margin: 20px auto;
  width: 80%;
}

  .section-box h2 {
  margin-top: 0;
    font-family: var(--title);
  }

 .section-box h3 {
  margin-top: 0;
    color: var(--m-4);
  }

  .section-box table {
  width: 95%; /* Set the table width to 95% */
  margin: 0 auto; /* Center the table within the box */
  }
    .section-box table th, .section-box table td {
  padding: 10px; /* Add padding to table cells */
    }
      .section-box tbody tr:nth-child(even) { background-color: var(--m-2); }
      .section-box tbody tr:nth-child(odd) { background-color: var(--m-1);
      }
  .section-box table th {
      font-family: var(--title);
  }
  .section-box .minimize-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--m-7);
  color: var(--m-1);
  border: none;
  border-radius: var(--rc);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 10px;
  }
    .section-box .minimize-btn:hover {
  background-color: var(--m-5);
    }


/* A SECRET */
.hidden-content {
  display: none;
}

/* reports to do box */
#todo_box {grid-column: 1 / -1;}

/* SEARCH CONTAINER */
.search-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.search-container select {
  padding: 10px;
  border: 1px solid var(--m-2);
  border-radius: var(--rc);
  font-size: 16px;
  margin-left: 10px;
}

  .search-container input[type="text"] {
  padding: 10px;
  border: 1px solid var(--m-2);
  border-radius: var(--rc);
  font-size: 16px;
  margin-right: 10px;
  }

  .search-container input[type="submit"], .search-container button {
  padding: 10px 20px;
  background-color: var(--m-7);
  color: var(--m-1);
  border: none;
  border-radius: var(--rc);
  cursor: pointer;
  font-size: 16px;
  }

  .search-container input[type="submit"]:hover, .search-container button:hover {
  background-color: var(--m-5);
  }

.search-container a {
  text-decoration: none;
}

.search-container button {
  margin-left: 10px;
}


/* RIGHT */
.right {
    float:right;
}


/* PAGINATION */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

  .pagination a, .pagination span {
  padding: 10px 15px;
  margin: 0 5px;
  text-decoration: none;
  background-color: var(--m-7);
  color: var(--m-1);
  border-radius: var(--rc);
  }
    .pagination a:hover {
  background-color: var(--m-5);
    }

  .pagination .current { 
  background-color: var(--m-5);
  }


/* EDIT ICON */
.edit-icon {
    text-align: center;
    font-size:2rem;
    color:var(--m-7);
} 
  .edit-icon:hover {
    color: var(--m-5);
  }

/* BUTTON */
.button {
  background-color: var(--m-7);
  color: var(--m-1);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border: none;
  border-radius: var(--rc);
}
  .button:hover {
  background-color: var(--m-5);
  }

/*run button*/
.btn-primary {
    background: var(--m-6)!important;
    color: var(--m-1)!important;
    border-color: var(--m-6)!important;
}

/* DELETE BUTTON */
.delete-button {
    background-color: var(--dan);
}
  .delete-button:hover  {
    background-color: var(--dan-da);
  }

/* Close button styles */
.close {
    color: var(--m-3);
    float: right;
    font-size: 28px;
    font-weight: bold;
}
  .close:hover,
  .close:focus {
    color: var(--m-7);
    text-decoration: none;
    cursor: pointer;
  }

/* FORM */
.flex-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.form-group {
    flex: 1 1 calc(33.333% - 20px);
    display: flex;
    flex-direction: column;
}

  .form-group.full-width {
    flex: 1 1 100%;
    text-align: center;
  }

  .form-group label {
    margin-bottom: 5px;
    font-weight: bold;
  }
    .form-group input[type="text"],
    .form-group input[type="date"],
    .form-group input[type="number"],
    .form-group select,
    .form-group textarea {
    padding: 8px;
    border: 1px solid var(--m-2);
    border-radius: var(--rc);
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
/* i removed height:100px from this line */
    }


/* WALTUH, IM A WHITE BACKGROUND, WALTUH */
.white-background {
    background-color: var(--m-1);
}


/* CUSTOM FILE */
.custom-file-input {
    display: none;
}

.custom-file-input + label {
    background-color: var(--m-7);
    color: var(--m-1);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: var(--rc);
}
  .custom-file-input + label:hover {
    background-color: var(--m-5);
  }


/* CUSTOM LOGIN */
/* Modal container styles */
.custom-login-modal {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--log-bg);
}

/* Modal dialog styles */
.custom-login-dialog {
    background-color: var(--m-1);
    margin: 15% auto; /* Center the modal vertically */
    padding: 20px;
    border: 1px solid #888;
    width: 30%; /* Adjust as necessary */
    border-radius: var(--rc);
    box-shadow: var(--box-shad);
}

/* Form field styles */
#customLoginForm label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

#customLoginForm input {
    width: 100%;
    padding: 8px;
    margin: 5px 0 10px 0;
    display: inline-block;
    border: 1px solid var(--m-2);
    border-radius: var(--rc);
    box-sizing: border-box;
}

#customLoginForm button {
    background-color: var(--m-7);
    color: var(--m-1);
    padding: 10px 20px;
    border: none;
    border-radius: var(--rc);
    cursor: pointer;
    width: 100%;
}
  #customLoginForm button:hover {
    background-color: var(--m-5);
  }

/* FOOTER */
footer {
  text-align: center;
  padding: 3px;
  background-color: var(--m-6);
  color: var(--m-1);

 bottom: 0;
 width: 100%;
 margin-top: auto;
  position: static;
}