/*
 * Stijlen voor het infobord.  Dit bestand bevat de basale opmaak voor
 * alle componenten en maakt gebruik van thema‑klassen om eenvoudig
 * tussen verschillende kleuren en achtergronden te wisselen.  Voor
 * animaties en thema's worden CSS keyframes gebruikt.
 */

/* Resetten van marges en algemene lettertype‑instellingen */
body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", sans-serif;
  min-height: 100vh;
  position: relative;
  color: #fff;
  overflow-x: hidden;
}

/* Algemene overlay om contrast te verhogen, ongeacht thema */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(50, 50, 50, 0.15);
  pointer-events: none;
  z-index: 0;
}

/* Thema's: default, dark en animated.  Een thema kan op de body
 * toegepast worden (via PHP in index.php) om kleuren te kiezen. */
body.theme-default {
  background: linear-gradient(135deg, #007a33 0%, #0057a4 100%);
  background-attachment: fixed;
}

body.theme-dark {
  background: linear-gradient(135deg, #222 0%, #000 100%);
  background-attachment: fixed;
}

body.theme-animated {
  background: linear-gradient(135deg, #007a33, #0057a4, #007a33);
  background-size: 400% 400%;
  animation: gradientMove 30s ease infinite;
  background-attachment: fixed;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Container spacing */
.container-fluid {
  padding: 40px 60px;
}

/* Glasachtige kaart, hergebruikt voor meerdere widgets */
.card-glass {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.6);
  border: none;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  color: #000;
}

/* Stoplicht widget */
# Modified stoplicht to align height with weather card
/* Stoplicht in realistische vormgeving */
#stoplight-container {
  /* optioneel: container class voor extra styling */
}

/*
 * Stoplicht container
 *
 * De stoplicht‑widget wordt gecentreerd binnen zijn omringende kaart.  Het
 * gebruik van `margin: 0 auto` centreert het element horizontaal
 * wanneer de container een vaste breedte heeft.  In sommige browsers
 * gedraagt een flexbox‑container met een vaste breedte zich anders,
 * daarom gebruiken we ook `align-self: center` om de stoplicht
 * expliciet in het midden te plaatsen wanneer het element zelf deel
 * uitmaakt van een flexbox (bijvoorbeeld binnen Bootstrap kolommen).
 */
.stoplicht {
  width: 100px;
  height: 240px;
  background: #2b2b2b;
  border-radius: 18px;
  padding: 15px 10px;
  margin: 0 auto;
  align-self: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  border: 2px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.lamp {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, #555, #222);
  border: 3px solid #111;
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.1), inset 0 -3px 6px rgba(0, 0, 0, 0.6);
  transition: background 0.3s, box-shadow 0.3s;
}
#lamp-rood.on {
  background: radial-gradient(circle at center, #ff6666 10%, #800000 80%);
  box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.6);
}
#lamp-oranje.on {
  background: radial-gradient(circle at center, #ffd966 10%, #b8860b 80%);
  box-shadow: 0 0 20px 5px rgba(255, 165, 0, 0.6);
}
#lamp-groen.on {
  background: radial-gradient(circle at center, #80ff80 10%, #006600 80%);
  box-shadow: 0 0 20px 5px rgba(50, 205, 50, 0.6);
}

/* Nieuws ticker onderin */
#news-ticker {
  position: fixed;
  bottom: 25px;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  padding: 12px;
  overflow: hidden;
  z-index: 9999;
  color: #fff;
  font-weight: 600;
}
#news-ticker span {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  font-size: 1.2rem;
  animation: ticker 60s linear infinite;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Weer & klok */
#clock {
  font-size: 2.4rem;
  margin: 0;
}
#date {
  margin: 0;
  font-size: 1.1rem;
}

/* Voorspelling dagen rij */
.forecast-day {
  flex: 1;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
}
.forecast-day:last-child { border-right: none; }

/* Nieuws carrousel */
#newsCarousel {
  max-height: calc(100vh - 220px);
  overflow: hidden;
  margin-bottom: 20px;
}
.carousel-item img {
  max-height: 350px;
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.carousel-caption-custom {
  padding: 15px;
  text-align: center;
}
.carousel-caption-custom a {
  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}
.carousel-caption-custom p {
  margin-top: 10px;
  color: #222;
  font-size: 1rem;
}
.carousel-caption-custom small {
  color: #555;
}

/* Roosterkaart en OV kaart */
.schedule-card ul,
.transport-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Roosterlijst stijlen */
.schedule-card li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 10px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}
.schedule-card li:last-child { margin-bottom: 0; }
.schedule-card .time {
  font-weight: bold;
  color: #000;
}
.schedule-card .subject {
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  margin-top: 2px;
}
.schedule-card .location {
  font-size: 0.9rem;
  color: #555;
  margin-top: 2px;
}

/* OV lijst stijlen */
.transport-card li {
  margin-bottom: 10px;
  padding: 10px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}
.transport-card li:last-child { margin-bottom: 0; }



/* Gamification card */
.gamification-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.gamification-card .score {
  font-size: 2rem;
  font-weight: bold;
}
.gamification-card button {
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  background: #0057a4;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}
.gamification-card button:hover {
  background: #004080;
}