/* styles.css */
/* Specifieke stijlen voor de homepage */

.container {
  display: flex;
  flex-direction: column;
  z-index: 900;
}

.welcome-message-container {
  margin-top: 20px;
  position: relative;
  left: 20%;
  animation: fadeInScaleUp 1s forwards ease-in-out;
  z-index: 900;
}

@keyframes fadeInScaleUp {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.welcome-message {
  position: relative;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  border-radius: 10px;
  color: white;
  max-width: 800px;
  text-align: center;
}

.welcome-message h2 {
  color: orange;
}

.welcome-message.active {
  transform: scale(1);
  opacity: 1;
}

/* Modal container */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  animation: fadeInScaleUp 0.5s forwards ease-in-out;
}

/* Modal content box */
.modal-content {
  background-color: rgba(0, 0, 0, 0.9);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border-radius: 10px;
  color: white;
  max-width: 600px;
  text-align: center;
  position: relative;
}

/* Close button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: orange;
  text-decoration: none;
  cursor: pointer;
}

/* Container for the arrow image */
.image-container {
  position: absolute;
  top: -90px; /* Adjusted to place the arrow image higher */
  right: -85px; /* Adjusted to place the arrow image further to the right */
}

.arrow-image {
  transform: rotate(120deg);
  width: 200px; /* Adjusted to be slightly smaller */
  height: auto;
}

.index-container {
  margin-top: 60px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 80%;
  border: 1px solid orange;
  padding: 10px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.7);
}

.index-container h2 {
  color: #fff;
  margin-bottom: 10px;
}

.index-container a {
  color: orange;
  text-decoration: none;
  font-weight: bold;
}

.index-container a:hover {
  text-decoration: underline;
}

.no-dashboard-message {
  color: #FFFFFF; /* Maakt de tekst wit */
  font-size: 16px; /* Optioneel: Pas het lettertype aan voor duidelijkheid */
  text-align: center; /* Optioneel: Centreer de tekst */
}

/* Algemene styling voor de grid */
.dashboard-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr); /* 2 kolommen */
  grid-auto-rows: auto; /* Laat elk item zijn eigen hoogte hebben op basis van de inhoud */
  margin-top: 40px;
  margin-left: 80px;
  margin-right: 30px;
}

.dashboard-item {
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid orange;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtiele schaduw, zoals een venster */
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 600px; /* Max hoogte indien inhoud te groot is */
  overflow: hidden;
  align-self: start; /* Zorgt ervoor dat elk venster zijn eigen hoogte behoudt */
}

.dashboard-titlebar {
  background-color: rgb(0, 0, 0); /* Donkere kleur zoals in Windows-vensters */
  color: white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid rgb(83, 55, 1); /* Geeft een scheiding tussen de titelbalk en de inhoud */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px; /* Vaste hoogte voor de titelbalk */
  display: flex;
  justify-content: left;
  align-items: left; /* Centraal uitlijnen van de titel in de balk */
}

.dashboard-content {
  padding: 20px;
  margin-top: 20px; /* Zorgt ervoor dat de inhoud onder de titelbalk begint */
  color: white; /* Maakt de tekst in het dashboard-item wit */
  overflow-y: auto; /* Scrollbalk indien inhoud groter is dan max-hoogte */
}

/* Zorgt voor 2 items naast elkaar op kleinere schermen */
@media (max-width: 1024px) {
  .dashboard-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 kolommen op middelgrote schermen */
  }
}

/* Zorgt voor 1 item per rij op kleine schermen */
@media (max-width: 768px) {
  .dashboard-grid {
      grid-template-columns: 1fr; /* 1 kolom op kleine schermen */
  }
}

/* Drag-icoon in de titelbalk */
.drag-handle {
  cursor: grab;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: white;
}
.drag-handle:active {
  cursor: grabbing;
}

/* ─────────────────────────────────────────────────
   ← UNIQUE PAGE WRAPPERS & COMPONENT STYLES →
────────────────────────────────────────────────── */

/* auth-page (sta-toegang.php) */
.auth-page {
  /*background-color: #121212;*/
  min-height: calc(100vh - 100px);
  padding-top: 60px;
}

.auth-container {
  background: rgba(0, 0, 0, 0.8);    /* verhoogde doorschijnendheid */
  border: 2px solid orange;
  border-radius: 12px;
  padding: 20px 30px;                /* iets minder hoogte */
  max-width: 500px;
  margin: 20px auto 60px;            /* titel wat hoger zetten */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
  font-family: 'Century Gothic', sans-serif;
}

.auth-container h1 {
  text-align: center;
  margin-top: 0.5em;                 /* dichter bij de top */
  margin-bottom: 1em;
  font-size: 1.8rem;
  color: orange;
}

.auth-error {
  color: #ff6b6b;
  margin-bottom: 1em;
  text-align: center;
  font-size: 0.95rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-label {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.2em;
  font-size: 1rem;
  color: #ffffff;
}

.auth-input {
  font-size: 0.95rem;
  padding: 8px 15px;                 /* iets minder hoog */
  border: 1px solid #555;
  border-radius: 6px;
  background-color: #fafafa;
  color: #121212;
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.3s;
}

.auth-input:focus {
  outline: none;
  border-color: orange;
}

.auth-button {
  font-size: 1.1rem;
  padding: 14px;
  border: none;
  border-radius: 6px;
  background-color: orange;
  color: #121212;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.auth-button:hover {
  background-color: #e69500;
}

/* devices-page (trusted-devices.php) */
.devices-page { }
.devices-container {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid orange;
  border-radius: 10px;
  padding: 30px;
  max-width: 1000px;
  margin: 50px auto;
  color: #fff;
  font-family: 'Century Gothic', sans-serif;
}
.devices-table {
  width: 100%;
  border-collapse: collapse;
}
.devices-table th,
.devices-table td {
  padding: 10px;
  border: 1px solid #444;
}
.devices-table th {
  background: #1f1f1f;
}
.devices-table tr:nth-child(even) {
  background: rgba(255,255,255,0.05);
}
.devices-button {
  background-color: orange;
  color: #121212;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}
.devices-button:hover {
  background-color: #e69500;
}

/* ipconfirm-page (ip-confirm.php) */
.ipconfirm-page { }
.ipconfirm-container {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid orange;
  border-radius: 10px;
  padding: 30px;
  max-width: 600px;
  margin: 50px auto;
  color: #fff;
  font-family: 'Century Gothic', sans-serif;
}
.ipconfirm-message {
  font-size: 1.1em;
  margin-top: 10px;
}

/* ─────────────────────────────────────────────────
   IP-CHECK PAGINA COMPLETE STYLING
────────────────────────────────────────────────── */
.ipcheck-page {
  min-height: calc(100vh - 100px);
  padding-top: 60px;
}

.ipcheck-container {
  background: rgba(0, 0, 0, 0.8);    /* iets meer doorschijnend */
  border: 2px solid orange;
  border-radius: 12px;
  padding: 20px 30px;                /* iets minder padding */
  max-width: 500px;                  /* iets smaller */
  margin: 20px auto 60px;            /* hoger gezet */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: 'Century Gothic', sans-serif;
}

.ipcheck-title {
  text-align: center;
  font-size: 1.8rem;                 /* iets groter */
  margin-top: 0.5em;                 /* dichter bij top */
  margin-bottom: 1em;
  color: orange;
}

.ipcheck-message {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 1.5em;
  line-height: 1.4;
}

.ipcheck-form {
  display: flex;
  flex-direction: column;
  align-items: center;               /* knop in het midden */
}

.ipcheck-button {
  width: 90%;                        /* breder */
  max-width: 350px;
  box-sizing: border-box;
  font-size: 1.1rem;
  padding: 12px;                     /* iets meer padding */
  border: none;
  border-radius: 6px;
  background-color: orange;
  color: #121212;
  cursor: pointer;
  font-family: 'Century Gothic', sans-serif;
  transition: background-color 0.3s;
  margin-top: 0.5em;
  text-align: center;
}

.ipcheck-button:hover {
  background-color: #e69500;
}