/* General reset */

@font-face {
  font-family: 'MyCustomFont';
  src: url('../website/static/website/font/JupiteroidRegular-8Oeg0.ttf') format('truetype'); /* Path to your font file */
  font-weight: normal;
  font-style: normal;
}

body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'MyCustomFont', sans-serif;
  background-color: #f2f2f2;
  height: 100%;
  overflow-x: hidden;
}

/* Header styling */
h1 {
  color: #070707;
}

/* Navigation bar and footer styling */
.navbar, .footer {
  background-color: #38444d;
  position: fixed;
  width: 100%;
  z-index: 1000;
  text-align: center;
}

.navbar {
  top: 0;
}

.footer {
  bottom: 0;
}

/* Navigation bar and footer styling */
.navbar, .footer {
  background-color: #38444d;
  position: fixed;
  width: 100%;
  z-index: 1000;
  text-align: center;
}

.navbar {
  top: 0;
}

.footer {
  bottom: 0;
}

/* Navbar and footer list */
.navbar ul, .footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

/* Navbar and footer items */
.navbar li, .footer li {
  float: left;
}

/* Logo image styling */
.navbar li img {
  height: 20px; /* Adjust height */
  width: 118px; /* Maintain aspect ratio */
  margin: 8px 16px; /* Space around the image */
  vertical-align: middle;
}

/* Regular links in the navbar and footer (excluding dropdowns) */
.navbar li a, .footer li a {
  display: inline-block;
  color: white; /* Keep white color for navbar and footer links */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Hover effects for regular navbar and footer links */
.navbar li a:hover, .footer li a:hover {
  background-color: #5c6974; /* Subtle hover effect */
  transition: background-color 0.3s ease;
}

/* Dropdown button styling (separated from regular links) */
.dropbtn {
  display: inline-block;
  color: black; /* Black text for dropdown button */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Hover effect for dropdown button */
.dropdown:hover .dropbtn {
  color: white; /* Turn white on hover */
  background-color: #5c6974; /* Same hover background as regular links */
}

/* Dropdown container */
.navbar li.dropdown, .footer li.dropdown {
  display: inline-block;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #7690a3;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Reset dropdown content link styles */
.dropdown-content a {
  color: black; /* Black text for dropdown links */
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Hover effect for dropdown content links */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Show dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}





/* Grid container for main content */
.grid-container-main {
  display: grid;
  grid-template-rows: 1fr auto; /* main content, footer */
  grid-template-columns: 1fr;
  
  padding-top: 80px; /* Space for the fixed navbar */
  padding-bottom: 60px; /* Space for the fixed footer */
}

/* Main content area */
.grid-item-main {
  background-color: #f2f2f2;
  padding: 20px;
  font-size: 24px;
  text-align: center;
}

/* Override any conflicting styles for the logo */
.navbar li img {
  height: 20px !important;
  width: 118px !important;
  margin: 8px 16px !important;
}

/* Table Styling */
#parts-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 1em;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

#parts-table th,
#parts-table td {
  padding: 12px 15px;
  text-align: left;
}

/* Header Styling */
#parts-table thead tr {
  background-color: #38444d;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

/* Body Styling */
#parts-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

#parts-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

#parts-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

/* Hover effect for rows */
#parts-table tbody tr:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Quantity column highlighting */
#parts-table .quantity {
  font-weight: bold;
  color: #009879;
}

/* Add responsive styling */
@media screen and (max-width: 768px) {
  #parts-table {
      width: 100%;
      border: 0;
  }

  #parts-table thead {
      display: none;
  }

  #parts-table tbody tr {
      display: block;
      margin-bottom: 10px;
      border-bottom: 2px solid #009879;
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }

  #parts-table tbody tr:last-of-type {
      border-bottom: 2px solid #009879;
  }

  #parts-table td {
      display: block;
      text-align: right;
      font-size: 0.8em;
      border-bottom: 1px solid #ddd;
      position: relative;
      padding-left: 50%;
  }

  #parts-table td:before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      width: calc(50% - 10px);
      padding-right: 10px;
      text-align: left;
      font-weight: bold;
  }

  #parts-table .quantity {
      font-weight: bold;
      color: #009879;
      text-align: left;
      padding-left: 20px;
  }
}

/* Ensure the pagination in the table footer is centered */
tfoot td {
  text-align: center;  /* Center the content in the table cell */
}

.pagination {
  display: inline-block;  /* Keep pagination as an inline block */
}

.pagination .step-links {
  display: inline-block;  /* Ensure the pagination links are centered */
}


/* General form styling */
form {
  max-width: 100%;
  width: 100%;
  max-width: 600px; /* Adjust form size */
  margin: 20px auto;
  padding: 20px;


}

/* Styling for the form fields */
form input[type="text"],
form input[type="password"], /* Added for password field */
form select,
form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 8px; /* More rounded corners */
  box-sizing: border-box;
  font-size: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth interaction */
  text-align: center;
}

/* Remove background from form fields */
form input[type="text"],
form input[type="password"], /* Ensure password field background is also removed */
form select,
form textarea {
  background-color: transparent; /* Remove background color */
}

/* Focus effects for form fields */
form input[type="text"]:focus,
form input[type="password"]:focus, /* Added for password field */
form select:focus,
form textarea:focus {
  border-color: #007bff; /* A more vibrant color for focus */
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.25);
  outline: none; /* Remove the default outline */
}

/* Styling for labels */
form label {
  font-weight: bold;
  margin-bottom: 8px; /* Improved spacing */
  display: block;
  color: #333; /* Slightly darker for better contrast */
  font-size: 24px; /* Better label font size */
}

/* Styling for buttons */
form button[type="submit"],
form button[type="button"] {
  background-color: #38444d;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
  width: 50%; /* Make buttons full-width */
}

/* For button type "button" */
form button[type="button"] {
  background-color: #007bff;
  margin-right: 10px;
}

/* Hover effects for buttons */
form button[type="submit"]:hover,
form button[type="button"]:hover {
  background-color: #7690a3; /* Darker shade on hover */
}

form button[type="button"]:hover {
  background-color: #0069d9;
}

/* Responsive Button Focus Effect */
form button[type="submit"]:focus,
form button[type="button"]:focus {
  outline: none;
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.4);
}

/* Dynamic forms container */
#formset-container {
  border: 1px solid #38444d;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #38444d;
  color: white;
}

/* Dynamic form styles */
.dynamic-form {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #ffffff;
}

/* Styling for errors (if any) */
form .errorlist {
  color: red;
  margin-bottom: 20px;
}

form .errorlist li {
  margin-bottom: 5px;
}

/* Media Query for Small Screens */
@media (max-width: 768px) {
  form {
    padding: 15px;
  }

  form input[type="text"],
  form input[type="password"], /* Ensure consistency for password field */
  form select,
  form textarea {
    padding: 10px;
    font-size: 14px;
  }

  form button[type="submit"],
  form button[type="button"] {
    margin-bottom: 10px;
    font-size: 14px;
  }
}

/* Responsive design */
@media (max-width: 600px) {
  form {
      padding: 15px;
  }
  
  form button[type="submit"],
  form button[type="button"] {
      width: 100%;
      margin-bottom: 10px;
  }
}

.container-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full height of the viewport to center content */
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 2 columns */
  grid-gap: 20px; /* Space between buttons */
  justify-content: center; /* Horizontally center the grid */
  align-content: center; /* Vertically center the grid */
  width: 100%;
  /*max-width: 800px; */
  padding: 20px;
}

.nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #7690a3;
  color: white;
  text-decoration: none;
  width: 100%;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-image: linear-gradient(to right, #38444d, #7690a3); /* Gradient Background */
}

.nav-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.icon-container {
  width: 80px;
  height: 80px;
  margin-top: 10px; /* Spacing between icon and header */
}

.icon-container img {
  width: 100%;
  height: 100%;
}

h2 {
  font-size: 22px;
  margin-bottom: 10px; /* Space between title and icon */
  text-align: center;
}

.report-dashboard {
  max-width: 1200px;
  margin: var(--space-xl) auto;
  padding: 0 var(--space-lg) var(--space-xl);
}


.report-dashboard h1 {
  text-align: center;
  margin-bottom: 30px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}


.stat-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  text-align: center;
}


.stat-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: #009879;
  margin-bottom: 6px;
}

.stat-subtitle {
  font-size: 0.85rem;
  color: #777;
}

.report-section {
  background-color: #ffffff;
  border-radius: 12px;
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.report-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid #e6e6e6;
}

/* Center tables inside report sections */
.report-section .reports-table {
  margin-left: auto;
  margin-right: auto;
}


.report-section-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.report-section-range {
  font-size: 0.85rem;
  color: #666;
}

.reports-table {
  margin-top: var(--space-md);
  border-collapse: separate;
  border-spacing: 0 8px;
}

.reports-table tbody tr {
  background-color: #ffffff;
}


.report-empty {
  margin-top: var(--space-md);
  font-size: 0.9rem;
  color: #777;
}

#imports-range-form {
  margin: var(--space-md) auto var(--space-lg);
  max-width: 600px;
}

#imports-range-form label {
  margin-top: var(--space-sm);
  display: block;
}

@media (max-width: 768px) {
  .report-dashboard {
    margin: var(--space-lg) auto;
    padding: 0 var(--space-md) var(--space-lg);
  }

  .report-section {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
  }

  .stat-cards {
    gap: var(--space-md);
  }
}


/* Custom form actions alignment */
.report-form-actions {
  text-align: center;
  margin-top: 10px;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .report-dashboard {
    margin: 20px auto 30px;
    padding: 0 10px 20px;
  }

  .report-section {
    padding: 15px;
  }

  .stat-card {
    padding: 14px 15px;
  }
}

/* Dashboard spacing scale */
:root {
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
}


@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; /* Single column on smaller screens */
  }

  .nav-button {
    height: 180px;
  }
}

    /* Styling the asset filter form container */
    #asset-filter-form {
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
      display: flex;
      flex-wrap: wrap;
      gap: 15px; /* Spacing between form fields */
      align-items: center;
      justify-content: flex-start;
  }

  /* Label styling specific to the asset filter form */
  #asset-filter-form label {
      font-weight: bold;
      margin-right: 10px;
      font-size: 14px;
  }

  /* Input fields specific to the asset filter form */
  #asset-filter-form input[type="date"] {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 14px;
  }

  /* Styling for the filter button */
  #asset-filter-form button {
      padding: 10px 20px;
      background-color: #38444d; /* Green color for the button */
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin: auto;
  }

  /* Button hover effect */
  #asset-filter-form button:hover {
      background-color: #7690a3;
  }

  ul.no-bullets {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li.alert {
    border: 1px solid #ddd; /* Add a thin border to each list item */
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6; /* Add a grey background color */
    padding: 12px; /* Add some padding */
  }