/* ========================== */
/* ROOT VARIABLES       */
/* ========================== */
:root {
  --bg: #edf2f7;
  --text: #1a202c;
  --accent: #0057AD;
  --accent-light: #41A0FF;
  --muted: #76818c;
  --card-bg: #fff;
  --bg-light: #f7fafc;
  --online: #2bca50;
  --maintenance: #d8a000;
  --unavailable: #e07b39; 
  --card-name: #1a202c;
  --offline: #d00000;
  --shadow: rgba(0,0,0,0.08);
  --radius: .25rem;

/* Nieuwe variabelen voor de banner achtergronden */
--online-bg-light: #dfffeb;       /* Lichtgroen voor banner */
--maintenance-bg-light: #fdf1c7;  /* Lichtgeel voor banner */
--offline-bg-light: #fddddd;      /* Lichtrood voor banner */
--unavailable-bg-light: #fdf3e0;  /* Lichtoranje voor banner */

}

/* ========================== */
/* BODY              */
/* ========================== */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

h1, h2 {
  color: var(--accent);
}

h1 {
  font-size: 25px;
}

h2 {
  font-size: 20px;
}

p {
  color: var(--text);
  margin-bottom: 1rem;
}

/* ========================== */
/* BANNER            */
/* ========================== */
.top-section {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1rem;
}

.top-banner {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.banner-style {
  width: 100%;
  border-radius: var(--radius);
  text-align: center;
  padding: 1rem;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Basisstijlen, de kleuren worden via de classes hieronder ingesteld */
}

.banner-svg {
  width: 1em;
  height: 1em;
  margin-right: 0.5rem;
}

/* === DYNAMISCHE BANNER STATUS STIJLEN (NIEUW) === */

/* Status: Online */
.top-banner.banner-style-online .banner-style {
  border: 1px solid var(--online);
  background-color: var(--online-bg-light); 
  color: var(--online);
}

/* Status: Maintenance */
.top-banner.banner-style-maintenance .banner-style {
  border: 1px solid var(--maintenance);
  background-color: var(--maintenance-bg-light); 
  color: var(--maintenance);
}

/* Status: Unav */
.top-banner.banner-style-unav .banner-style {
  border: 1px solid var(--unavailable);
  background-color: var(--maintenance-bg-light); 
  color: var(--unavailable);
}

/* Status: Offline */
.top-banner.banner-style-offline .banner-style {
  border: 1px solid var(--offline);
  background-color: var(--offline-bg-light); 
  color: var(--offline);
}

/* ========================== */
/* STATUS SECTIONS   */
/* ========================== */
.status-section {
  background: var(--card-bg);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 5px -1px rgba(74,85,104,.1),0 -1px 5px -1px rgba(74,85,104,.1)!important;
  margin-bottom: 1.5rem;
  
  /* Flexbox activeren */
  display: flex; 
  align-items: flex-start; /* Zorgt ervoor dat de titel bovenaan de rij begint */
  gap: 2rem; /* Ruimte tussen titel en boxes */
}

.status-section-title {
  /* display: inline-block; (mag weg) */
  font-size: 1rem;
  font-weight: 600;
  color: #60686f!important;
  margin-bottom: 0; /* Margin-bottom is niet nodig als het horizontaal is */
  
  /* Breedte en flexibiliteit instellen */
  min-width: 150px; 
  flex-shrink: 0; /* Zorgt ervoor dat de titel niet krimpt */
  padding-top: 0.2rem; /* Om de titel beter uit te lijnen met de boxes */
}

.status-box-container {
  /* Behoud de grid instellingen */
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 1rem;
  
  /* Laat de container alle resterende ruimte innemen */
  flex-grow: 1; 
}

.status-box {
  flex: 1 1 160px;
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .875em;
  font-weight: 400;
  transition: all 0.2s ease;

  /* Padding */
  padding-top: .50rem;
  padding-bottom: .50rem;
  padding-left: .85rem;
  padding-right: .25rem;

}

.status-box:hover {
  cursor: default;
}

.status-box svg {
  width: 1em;
  height: 1em;
}

.status-box.online svg {
  color: var(--online);
}

.status-box.status-box.maintenance svg {
  color: var(--maintenance);
}

.status-box.unav svg {
  color: var(--unavailable);
}

.status-box.offline svg {
  color: var(--offline);
}

.status-box.online svg {
  color: var(--online);
}

/* STATUS COLORS */
.status-box.online {
  border-color: var(--online);
  color: var(--text);
}

.status-box.maintenance {
  border-color: var(--maintenance);
  color: var(--text);
}

.status-box.unav {
  border-color: var(--unavailable);
  color: var(--text);
}

.status-box.offline {
  border-color: var(--offline);
  color: var(--text);
}

/* ========================== */
/* FOOTER            */
/* ========================== */
.portal-footer {
  width: 93%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid rgba(0,0,0,0.05);
  padding: 1rem 2rem;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 16px;
}

.footer-links a:hover {
  color: var(--accent);
}

/* ========================== */
/* RESPONSIVE          */
/* ========================== */
@media (max-width: 720px) {
  /* Update de grid om op mobiel 1 kolom te tonen */
  .status-box-container {
      grid-template-columns: 1fr;
  }
  .portal-header {
    padding: 12px 20px;
  }
  /* ... andere responsive stijlen ... */
}
/* --- AANGEPASTE STIJLEN VOOR DE CUSTOM TOOLTIP --- */

/* Maak de ouder (status-box) relatief voor de absolute positionering */
.status-box {
  /* behoud uw bestaande status-box stijlen */
  position: relative; /* CRUCIAAL voor de tooltip */
  /* De cursor: help mag weg als u de stippellijn ook weghaalt */
}

/* De daadwerkelijke tooltip container */
.tooltip-text {
  visibility: hidden; /* Standaard verborgen */
  opacity: 0;
  transition: opacity 0.2s ease-in-out; /* Maak de overgang net iets vloeiender */
  
  background-color: var(--text);
  color: var(--card-bg); /* Wit op donkergrijs */
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radius);
  
  /* Absolute positionering om direct boven de box te zweven */
  position: absolute;
  z-index: 10;
  bottom: 125%; /* Toon de tooltip boven de box (+25% marge) */
  left: 50%;
  transform: translateX(-50%); /* Centreer de tooltip horizontaal */
  
  width: 250px;
  max-width: max-content;
  font-size: 0.85rem;
  font-weight: 400;
  
  /* Pijl onderaan de tooltip */
  &::after {
      content: "";
      position: absolute;
      top: 100%; /* Plaats de pijl onderaan de tooltip */
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: var(--text) transparent transparent transparent;
      
  }
  /* Herstel de verticale opbouw op mobiel */
  .status-section {
    flex-direction: column;
    gap: 0;
  }

  /* Geef de titel weer zijn bodemruimte terug op mobiel */
  .status-section-title {
    min-width: auto;
    margin-bottom: 0.75rem;
  }
}

/* Toon de tooltip zodra de mouseover class wordt toegevoegd door JS */
.status-box:hover .tooltip-text {
  visibility: visible;
  text-align: center;

  opacity: 1;
}

/* ========================== */
/* INCIDENTS LOG STIJLEN */
/* ========================== */

.incident-message {
  background: var(--bg-light);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 5px -1px rgba(74,85,104,.1),0 -1px 5px -1px rgba(74,85,104,.1);
  margin-bottom: 1.5rem;
  border-left: 5px solid; /* Dynamische kleurbalk aan de zijkant */
}

/* Dynamische kleurbalk op basis van de status van het incident */
.incident-message.online {
  border-left-color: var(--online);
}

.incident-message.maintenance {
  border-left-color: var(--maintenance);
}

.incident-message.unavailable {
  border-left-color: var(--unavailable);
}

.incident-message.offline {
  border-left-color: var(--offline);
}

.incident-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.incident-title {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text);
  margin: 0;
}

.incident-metadata {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap; /* Datum en tijd bij elkaar houden */
}

.incident-body p {
  font-size: 0.95rem;
  background: #fff;
  border-radius: .25rem;
  border: 1px solid #e2e8f0;
  padding: 0.5rem;
  color: var(--text);
  margin-bottom: 0;
}

.incident-status-tag {
    display: inline-block;
    cursor: default;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 3px;
    margin-top: 10px;
}

/* Stijl voor de status tags */
.incident-status-tag.online {
    background-color: var(--online-bg-light);
    color: var(--online);
}
.incident-status-tag.maintenance {
    background-color: var(--maintenance-bg-light);
    color: var(--maintenance);
}
/* Voeg vergelijkbare regels toe voor 'unavailable' en 'offline' */
.incident-status-tag.unavailable {
    background-color: var(--unavailable-bg-light); /* U moet deze toevoegen aan :root in uw css */
    color: var(--unavailable);
}
.incident-status-tag.offline {
    background-color: var(--offline-bg-light);
    color: var(--offline);
}