:root {
  --main-text: #4b4b4b;
  --bg-table: rgb(149, 199, 149);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
  font-family: "Nunito", sans-serif !important;
}

main {
  flex: 1;
}

/* NAVBAR */
.navbar {
  color: #2e2e2e !important;
  background-color: white !important;
}

.navbar-brand {
  color: #2e2e2e !important;
}

.offcanvas-title {
  color: var(--main-text);
  font-weight: bold;
}

/* Custom Offcanvas Hover Effecten */
.offcanvas .nav-link {
  transition: all 0.2s ease-in-out;
  border-radius: 0.375rem; /* Rond de hoekjes netjes af */
}

/* Hover-effect op normale links */
.offcanvas .nav-link-custom {
  color: var(--main-text) !important;
}

.offcanvas .nav-link-custom:hover {
  color: red !important;

  background-color: var(
    --bs-light
  ); /* Gebruikt de Bootstrap primaire kleur (blauw) */
  padding-left: 1rem !important; /* Lichte verschuiving naar rechts */
}

.offcanvas .nav-link-custom:hover i {
  color: #ffffff !important; /* Zorgt dat eventuele gekleurde iconen ook wit worden op hover */
}

/* Specifiek hover-effect voor Logout (Rood/Oranje accent) */
.offcanvas .nav-link-logout {
  color: var(--bs-warning) !important;
}

.offcanvas .nav-link-logout:hover {
  color: #ffffff !important;
  background-color: var(--bs-danger);
  padding-left: 1rem !important;
}

.offcanvas .nav-link-logout:hover i {
  color: #ffffff !important;
}

/* User Dropdown Hover & Styling */
.user-dropdown .dropdown-toggle::after {
  vertical-align: middle;
  margin-left: 0.4em;
}

/* Subtiele achtergrond op hover van de trigger-knop */
.user-dropdown .dropdown-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Open de dropdown automatisch bij hooveren (op desktop schermen) */
@media (min-width: 768px) {
  .user-dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Zorgt dat de cursor vloeiend naar de dropdown beweegt */
  }
}

/* Styling van het uitlog-item */
.user-dropdown .dropdown-item.text-danger:hover {
  background-color: #dc3545;
  color: #ffffff !important;
}

.user-dropdown .dropdown-item.text-danger:hover i {
  color: #ffffff !important;
}

/* CARD */

/* Card hover-effect met lichte schaalvergroting en schaduw */
.card-hover {
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.card-hover:hover {
  transform: translateY(-1px) scale(1.01); /* Beweegt iets omhoog en vergroot 2% */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Maakt de schaduw dieper */
  background-color: rgb(245, 245, 245);
}

/* Zorg dat de titel responsief schaalt tussen 18px en 28px */
.card-title.fs-3 {
  font-size: clamp(1.1rem, 1.8vw, 1.75rem) !important;
}

/* Zorg dat de pijl niet kan krimpen of wegedrukt kan worden */
.card-title a.stretched-link {
  flex-shrink: 0;
}

/* Zorg dat de tekst en het icoon netjes mee-krimpen */
.card-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hero Banner styling (achtergrond afbeelding top) */
.hero-header {
  position: relative;
  width: 100%;
  height: 260px;
  background-image: url("/public/assets/images/skyline.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Een donkere overlay over de afbeelding voor beter contrast */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(
    0,
    0,
    0,
    0.5
  ); /* Maakt de skyline iets donkerder/sfeervoller */
}

/* ZOEKVELDEN */

/* Verwijder de standaard focus-outline van het zoekveld */
.input-group #searchInput:focus {
  box-shadow: none !important;
  border-color: #dee2e6 !important; /* Standaard Bootstrap border kleur */
}

/* Optioneel: Laat de gehele input-group als één geheel oplichten bij focus */
.input-group:focus-within {
  border-radius: 0.375rem; /* Bootstrap rounded-3 match */
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; /* Bootstrap blauwe gloed om de hele groep */
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control,
.input-group:focus-within .btn {
  border-color: #86b7fe !important; /* Blauwe randkleur voor alle onderdelen bij focus */
}