/* Apply blue focus style to buttons within #view-tab */
#view-tab button:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Apply focus style for all focusable elements within the view-tab */
#view-tab button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Existing styles for aria-selected */
#view-tab button[aria-selected="true"] {
  background-color: #065788; /* Your primary color */
  color: white; /* Active tab text color */
}

/* Styling for iframes */
.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 60%; /* Aspect ratio of 16:9 */
  height: 0;
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Specific styles for date picker focus and hover states */
.datepicker .day:hover,
.datepicker .day.focused {
  border: 2px solid #065788 !important; /* Ensure important to override existing styles */
  background-color: #065788 !important; /* Ensure important to override existing styles */
  color: white !important;
}

/* Additional styles if needed for other focusable elements within the date picker */
.datepicker .day.selected {
  border: 1.5px solid #065788 !important;
  background-color: #065788 !important;
  color: white !important;
}

/* Focus and hover when the background is bg-primary */
button.bg-primary:focus,
button.bg-primary:hover {
  outline: 2px solid 007bff; /* Optional: Set focus ring */
  outline-offset: 2px;
}

/* Focus and hover when the background is bg-primary */
button.bg-complementairy_primary:focus,
button.bg-complementairy_primary:hover {
  outline: 2px solid 007bff; /* Optional: Set focus ring */
  outline-offset: 2px;
}

/* Focus and hover when the background is NOT bg-primary */
.focusable:focus:not(.bg-primary),
.focusable:hover:not(.bg-primary) {
  color: white; /* Optional: Change text color */
  outline: 2px solid #065788; /* Optional: Set focus ring to bg-primary color */
  outline-offset: 2px;
}

/* Globale Stijl Aanpassingen */
.Button {
  font-size: 0.9rem;
  padding: 0.2rem 0.4rem;
  border-radius: 10px; /* Aangepaste border-radius voor afgeronde hoeken */
  cursor: pointer;
  border: 1px solid #007bff; /* Blauwe rand */
  color: #007bff; /* Blauwe tekstkleur */
  background-color: white; /* Witte achtergrond */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

.Button:hover {
  background-color: #007bff; /* Blauwe achtergrond bij hover */
  color: white; /* Witte tekstkleur bij hover */
}

.Button--view-tab {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid transparent;
  color: #007bff;
  background-color: white;
  font-weight: normal;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.Button--view-tab:hover {
  background-color: #007bff;
  color: white;
}

/* Active (selected) tab */
.Button--view-tab[aria-selected="true"] {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

/* Container zorgt voor 1 border */
#view-tab {
  border: 1px solid #007bff;
  border-radius: 10px;
  overflow: hidden;
}

/* Dunne lijn tussen de twee knoppen */
.Button--view-tab:not(:first-child) {
  border-left: 1px solid #007bff;
}

.Button--header-share {
  background-color: transparent !important;
  color: inherit; /* Zelfde kleur als omliggende tekst */
  border: none !important;
  font-weight: normal !important;
  border-radius: 0 !important;
  padding: 0.2rem 0.3rem; /* optioneel, net als .Button */
  font-size: 1rem; /* optioneel, gelijk aan standaard */
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.Button--header-share:hover {
  color: #007bff;
}

[aria-selected="true"].Button {
  background-color: #007bff !important;
  color: white !important;
  border-color: #007bff !important;
}

[aria-selected="true"].Button:hover {
  background-color: #007bff !important;
  color: white !important;
}

[aria-selected="false"].Button:hover {
  background-color: #007bff !important; /* Blauwe achtergrond bij hover */
  color: white; /* Witte tekstkleur bij hover */
}

.mr-2 {
  margin-right: 0.75rem;
}

.mt-3 {
  margin-top: 0.5rem;
}

/* Style aanpassing document icoon */
.document-icon i {
  color: #007bff; /* Blauwe kleur voor document icoon */
  font-size: 1.2rem; /* iets groter */
}

/* Stijl aanpassing modal header sluiten button */
.Modal-close {
  background-color: transparent;
  border: none;
  color: #6c757d;
  font-size: 1.5rem;
  cursor: pointer;
}

.section {
  padding: 0.25rem 0.5rem 0.25rem;
  border-radius: 0.15rem;
}

.section:hover {
  background-color: rgba(0, 0, 0, 0.03); /* zachte grijze hover */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* subtiele schaduw */
}

.list-space-y {
  list-style: disc inside;
  padding-left: 1rem;
}
.list-space-y > * + * {
  margin-top: 0.25rem;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-right: 0.125rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(0, 123, 255);
  background-color: rgba(0, 123, 255, 0.1);
  border-radius: 9999px;
}

.card {
  padding: 0.25rem;
}

/* Flexible grids */
.grid {
  display: grid;
  gap: 0.5rem;
  max-width: 100%;
}

.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-fill-250 {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media (min-width: 1024px) {
  .grid-4-cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

summary {
  list-style: none; /* verwijder standaard driehoek */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

details[open] summary svg {
  transform: rotate(180deg);
}

details summary svg {
  transition: transform 0.3s ease;
}

/* Styling for Duotone user avatar */
.user-avatar-duotone {
  font-size: 3rem;
  --fa-primary-color: #007bff;
  --fa-secondary-color: #d7eaff;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

/* Timeline positioning and appearance */
#timeline_container {
  position: relative;
}

/* Continuous vertical timeline line */
#timeline_container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px; /* Aligns with the center of the bullet points */
  width: 2px;
  background-color: #e5e7eb; /* Light gray line color */
  z-index: 1;
}

/* Enhancement for bullet points */
#timeline_container li span:first-child {
  position: relative;
  z-index: 2; /* Ensures bullet appears above the line */
  background-color: #fff; /* White center */
  /* border: 2px solid #3b82f6; Blue border */
}

/* Remove unwanted markers */
li.timeline_result::marker {
  content: none;
}

/* Meeting header positioning next to bullet */
.meeting-header {
  color: #ffffff;
  position: relative;
  margin-left: -5px; /* Pull back toward the bullet */
  z-index: 2; /* Ensures title appears above the line */
}

/* Color coding for different meeting types */
.timeline_result.council-meeting .items-center {
  border-left-color: #3b82f6; /* Blue */
}

.timeline_result.committee-meeting .items-center {
  border-left-color: #10b981; /* Green */
}

/* Match bullet colors with the meeting type */
.timeline_result.council-meeting span:first-child {
  border-color: #3b82f6;
}

.timeline_result.committee-meeting span:first-child {
  border-color: #10b981;
}

/* Highlight active/current timeline points */
.timeline_result.active span:first-child {
  background-color: #3b82f6;
  width: 14px;
  height: 14px;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #3b82f6;
}

/* Mobile responsive design */
@media (max-width: 640px) {
  /* Create a more compact timeline on mobile */
  .timeline_result {
    padding-left: 25px;
    margin-bottom: 1.5rem;
  }

  #timeline::before {
    left: 5px;
  }

  .timeline_result span:first-child {
    width: 10px;
    height: 10px;
    -start-2px;
  }

  /* Adjust meeting header on mobile */
  .meeting-header {
    margin-left: -25px;
  }
}