/* css for folder openbaar */
/* header */
/* General styles for header */
.header-wrapper {
  margin: 0;
  padding: 8px 0 32px;
  overflow: hidden;
  position: relative;
  z-index: 10;
  font-family: 'Permanent Marker', cursive;
  background-color: #fff;
  color: white;
}

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-logo img {
  max-width: 200px;
  width: 100%;
  height: auto;
}

/* Navigation */
.top-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.top-nav li {
  margin-left: 20px;
}

.top-nav a {
  color: #009cdc;
  font-size: 20px;
  text-decoration: none;
  font-family: 'Permanent Marker', cursive;
}

/* Search Input */
.top-nav input[type="text"] {
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  width: auto;
  min-width: 250px;
  font-size: 16px;
  transition: width 0.3s ease;
}

/* Responsive styles */
@media (max-width: 1024px) {
  .header-inner {
    flex-direction: column; /* Stack items vertically for medium screens (tablets) */
    align-items: flex-start;
  }

  .top-nav ul {
    flex-direction: column; /* Stack navigation links vertically */
    margin-top: 10px;
  }

  .top-nav li {
    margin-left: 0;
    margin-bottom: 10px; /* Add space between nav items */
  }

  .top-nav input[type="text"] {
    min-width: 200px; /* Reduce min-width for medium screens */
  }
}

@media (max-width: 768px) {
  .header-inner {
    align-items: center; /* Center logo and nav for smaller screens */
    padding: 10px 12px;
  }

  .menu-logo img {
    max-width: 150px; /* Smaller logo on small screens */
  }

  .top-nav ul {
    flex-direction: column; /* Stack nav items vertically */
    align-items: center;
  }

  .top-nav li {
    margin-left: 0;
    margin-bottom: 10px;
  }

  .top-nav input[type="text"] {
    min-width: 180px; /* Reduce the size of the search input */
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: 8px 10px;
  }

  .menu-logo img {
    max-width: 120px; /* Even smaller logo on very small screens */
  }

  .top-nav ul {
    flex-direction: column; /* Stack nav items */
    align-items: center;
  }

  .top-nav li {
    margin-left: 0;
    margin-bottom: 8px;
  }

  .top-nav input[type="text"] {
    min-width: 150px; /* Further reduce search input width on very small screens */
  }
}

/* footer */
.footer-wrapper {
  background-color: rgb(0, 115, 162);
  color: white;
  padding: 32px 0;
  font-family: 'Permanent Marker', cursive;
}

.footer-container {
  max-width: 100dvw;
  margin: 0 auto;
  padding: 0 12px;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.footer-col {
  flex: 1 1 33%;
  padding: 12px;
}

.footer-col img {
  max-width: 25%;
  height: auto;
   margin-bottom: 12px; 
}

.footer-col h3 {
  margin-bottom: 8px;
  margin-left: 60dvw;
  margin-right: 5dvw;

}

.footer-times {
  display: flex;
  margin-left: 60dvw;
  margin-right: 5dvw;  
}

.footer-times div {
  margin-bottom: 8px;
}
.footer-creds {
  margin-top: 1em; 
  font-size: 0.8em; 
  color: #ccc; 
  text-align: center;
  max-width: 100%;
  padding: 0 12px;
  font-family: 'Permanent Marker', cursive;
}
/* Responsive Adjustments for smaller screens */
@media (max-width: 768px) {
  .footer-row {
    justify-content: center; /* Center columns on small screens */
    text-align: center; /* Ensure text inside columns is centered */
  }

  .footer-col {
    flex: 1 1 100%; /* Each column takes 100% width */
    padding: 10px;
    text-align: center; /* Align the content inside the column */
    display: flex;
    flex-direction: column; /* Stack the elements vertically */
    align-items: center; /* Center elements horizontally */
  }

  .footer-col img {
    max-width: 40%; /* Make image slightly bigger on mobile */
    height: auto;
    margin-bottom: 16px; /* Add space below the image */
  }

  .footer-col h3 {
    margin-bottom: 8px; /* Space between heading and times */
    margin-right: 2%;
  }

  .footer-times {
    margin-right: 2%;
    display: block; /* Stack the times vertically */
    margin-top: 16px; /* Add some space between image and times */
    text-align: center; /* Center times text */
  }

  .footer-times div {
    margin-right: 2%;
    margin-bottom: 12px; /* More space between the time items */
  }
    .footer-creds {
    font-size: 0.75em;
    margin-top: 1.5em;
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .footer-col img {
    
    max-width: 50%; /* Make image bigger on very small screens */
    margin-bottom: 12px; /* Space for better layout */
  }

  .footer-times div {
    margin-right: 2%;
    margin-bottom: 8px; /* Less margin between time items */
  }
  .footer-creds {
    font-size: 0.7em;
    margin-top: 1.5em;
    padding: 0 8px;
  }
  
}

/* Main page */
html, body {
    overflow: auto; 
}
.container {
    display: flex;
    height: 100dvh;
    margin-bottom: 1%;
    margin-top: 1%;
    flex-direction: row;  /* Default: Display items side by side */
    overflow-y: auto;
}

.box1 {
    background-color: #00b7ff;
    width: 20dvw;
    min-height: 100dvh;  /* Default box1 height */
    overflow-y: auto;  /* Scroll if content overflows */
    box-sizing: border-box; 
   /* Hide scrollbar in Firefox */
    scrollbar-width: none; 
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar in WebKit (Chrome, Safari, new Edge) */
.box1::-webkit-scrollbar {
    display: none;
}

.box2 {
    background-color: #00b7ff;
    margin-left: 2%;
    width: 78dvw;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
   /* Hide scrollbar in Firefox */
    scrollbar-width: none; 
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar in WebKit (Chrome, Safari, new Edge) */
.box2::-webkit-scrollbar {
    display: none;
}

/* Media Queries for Responsiveness */

/* For medium and smaller screens (Tablets and below) */
@media (max-width: 1024px) {
    .container {
        flex-direction: column;  /* Stack Box 1 and Box 2 vertically on smaller screens */
        align-items: center;  /* Center align the boxes */
    }

    .box1 {
        width: 90%;  /* Make box1 a bit smaller on smaller screens */
        min-height: 40dvh;  /* Set a smaller height for Box 1 */
        max-height: 50dvh;  /* Prevent Box 1 from becoming too tall */
        margin-bottom: 20px;  /* Add spacing between Box 1 and Box 2 */
        text-align: center;
    }

    .box2 {
        width: 90%;  /* Box 2 will take full width as well, but smaller than the original width */
    }
}

/* For mobile devices (portrait and smaller) */
@media (max-width: 768px) {
    .box1 {
        min-height: 30dvh;  /* Further reduce Box 1 height */
        max-height: 40dvh;  /* Box 1 should be even smaller */
        margin-bottom: 15px;  /* Add smaller spacing between the boxes */
        text-align: center;
    }
    
    .box2 {
        width: 90%;  /* Box 2 will still take full width */
    }
}

/* For very small screens (phones in portrait) */
@media (max-width: 480px) {
    .box1 {
        min-height: 25dvh;  /* Make Box 1 even smaller */
        max-height: 35dvh;  /* Prevent Box 1 from becoming too large */
        margin-bottom: 10px;  /* Smaller spacing between boxes */
        text-align: center;
    }
}





/* Grid layout for new comics (4*X) on openbaar/index */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* Create 4 equal columns on large screens */
  gap: 60px;  /* Space between grid items */
  height: auto;
  padding: 20px; /* Add padding to prevent grid from touching the edges */
  box-sizing: border-box; /* Include padding in the total width calculation */
}

/* Grid items (individual comic cards) */
.grid-item {
  margin-top: 20px;
  padding: 10px;
  text-align: center;
  width: 100%; /* Make the item take full width inside its grid cell */
  height: auto; /* Adjust based on image aspect ratio */
  display: block;
  margin: auto;
  box-sizing: border-box;
}

/* Images inside the grid items */
.grid-item img {
  width: 150px;  /* Fixed width */
  height: 200px; /* Fixed height */
  object-fit: contain; /* Ensure image does not stretch, maintains aspect ratio */
}

/* Responsive adjustments for tablets and small screens */
@media (max-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for medium screens (tablets) */
    gap: 30px; /* Reduce gap for medium screens */
  }
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for small screens (like phones in portrait mode) */
    gap: 20px; /* Reduce gap further */
  }

  .grid-item {
    height: auto; /* Ensure the height adjusts dynamically for small screens */
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr; /* 1 column for very small screens (phones in portrait mode) */
    gap: 15px; /* Smaller gap on very small screens */
  }

  .grid-item {
    height: auto; /* Adjust dynamically based on content */
  }
}


/* Table for search results in detail collection */
.grid-table {
  width: 70dvw; 
  border-collapse: collapse;
  border: 1px solid black;
  margin: 0 auto 2%; /* Center the table and add space at the bottom */
  margin-left: 2%;
  margin-right: 2%;
  padding: 20px; /* Add padding around the table to create space from the border */
  box-sizing: border-box; /* Include padding in the total width calculation */
}

/* Table header and cells */
.grid-table th,
.grid-table td {
  padding: 12px; /* Add padding inside the cells to space out content from borders */
  border: 1px solid black;
  text-align: left;
  word-wrap: break-word; /* Prevent long text from breaking the layout */
}

/* Optional wrapper to manage overflow on small screens */
.grid-table-wrapper {
  overflow-x: auto; /* Allow horizontal scrolling on smaller screens */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS devices */
}

/* Responsive adjustments for tablets and small screens */
@media (max-width: 768px) {
  .grid-table {
    width: 100%; /* Ensure table takes full width on smaller screens */
    margin-left: 0; /* Remove margin-left on smaller screens */
    padding: 10px; /* Adjust padding for smaller screens */
  }

  .grid-table th, 
  .grid-table td {
    padding: 8px; /* Adjust padding for smaller screens */
    font-size: 14px; /* Reduce font size for better fit */
  }

  /* Allow horizontal scrolling on very small screens */
  .grid-table-wrapper {
    overflow-x: auto; /* Ensure table can be scrolled horizontally */
  }
}

@media (max-width: 480px) {
  .grid-table th, 
  .grid-table td {
    padding: 6px; /* Less padding on very small screens */
    font-size: 12px; /* Further reduce font size */
  }

  .grid-table-wrapper {
    overflow-x: scroll; /* Ensure scrolling is enabled */
  }
}

/* css for admin*/

/* header admin */
.top-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.top-nav li {
  margin-left: 20px;
}

.top-nav a {
  color: #009cdc;
  font-size: 20px;
  text-decoration: none;
  font-family: 'Permanent Marker', cursive;
}

.top-nav input[type="text"] {
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  width: auto;
  min-width: 250px;
}

/* dropdown */
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* grid for admin dashboard*/ 
.containerDash {
  display: grid;
  grid-template-columns: 50% 50%; /* Two columns, each 50% width */
  grid-template-rows: 50% 50%; /* Two rows, each 50% height */
  margin-top: 1px;
  margin-left: 1px;
  margin-bottom: 1px;
  margin-right: 1px;
}

.box1Dash {
  background-color: #009cdc;
  min-height: 50dvh;
  min-width: 50dvw;
}

.box2Dash {
  background-color: hsl(268, 100%, 43%);
  min-height: 50dvh;
  min-width: 50dvw;

}

.box3Dash {
  background-color: hsl(32, 100%, 43%);
  min-height: 50dvh;
  min-width: 50dvw;
}

.box4Dash {
  background-color: hsl(56, 100%, 43%);
  min-height: 50dvh;
  min-width: 50dvw;
}

/* grid for tabel in admin */
/* table for search results */
/* full grid lines */
.grid-tableAdmin {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}

.grid-tableAdmin th,
.grid-tableAdmin td {
  padding: 8px;
  border: 1px solid black;
  text-align: left;
}

/* General styling for the form add serie */
form {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    justify-content: space-between;
}

.form-row div {
    flex: 1;
    min-width: 180px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.form-row div:last-child {
    margin-right: 0;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

input[type="text"],
input[type="number"],
input[type="date"] {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus {
    border-color: #5c8df2;
    outline: none;
}

input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

input[type="submit"]:hover {
    background-color: #45a049;
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
    .form-row div {
        min-width: 100%;
    }
}

/* css for count box in logs */
.device-count-box {
    position: fixed;
    top: 10px;
    right: 10px; 
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 1000;
    max-width: 200px;
}
.device-count-box h3 {
    margin-top: 0;
    font-size: 16px;
}
.device-count-box ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.device-count-box li {
    margin-bottom: 5px;
}