:root{
  --bg:#ffffff;
  --fg:#000000;
  --line:#dddddd;
  --green:#1e7f3b;
  --orange:#ff9500;
  --red:#d70015;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--fg);
}

/* ===== HEADER ===== */
header{
  position:sticky;
  top:0;
  z-index:10;
  padding:14px 16px;
  font-size:clamp(18px,4vw,22px);
  font-weight:800;
  background:var(--bg);
  border-bottom:2px solid var(--fg);
}

/* ===== TABLE (STANDAARD / DESKTOP) ===== */
table{
  width:100%;
  border-collapse:collapse;
}

th, td{
  padding:10px;
  border-bottom:1px solid var(--line);
}

th{
  text-align:left;
}

.right{
  text-align:right;
}

.closed{
  color:var(--red);
  font-weight:700;
}

/* ======================================================
   MOBIEL & SMALLE CONTAINERS
   - Werkt ook in iframe
   - Geen vaste breedtes
====================================================== */
@media (max-width:520px){

  table,
  thead,
  tbody,
  tr,
  th,
  td{
    display:block;
  }

  thead{
    display:none;
  }

  tr{
    margin:12px;
    padding:14px;
    border-radius:14px;
    background:var(--bg);
    border:1px solid var(--line);
    box-shadow:0 2px 6px rgba(0,0,0,.08);
  }

  tr.closed{
    opacity:.55;
  }

  td{
    padding:0;
    border:none;
  }

  .name{
    font-size:clamp(17px,5vw,20px);
    font-weight:700;
    margin-bottom:6px;
  }

  .status{
    font-size:14px;
    margin-bottom:10px;
  }

  .free{
    font-size:clamp(26px,8vw,32px);
    font-weight:900;
  }

  .free span{
    font-size:clamp(16px,4.5vw,20px);
    font-weight:700;
    margin-left:6px;
    color:#555;
  }

  .prefix{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#555;
    margin-bottom:4px;
  }
}

/* ===== KLEUREN ===== */
.free.green{ color:var(--green); }
.free.orange{ color:var(--orange); }
.free.red{ color:var(--red); }

/* ===== KNIPPEREN ===== */
.blink{
  animation:blink 1s infinite;
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:.50;}
  100%{opacity:100;}
}

/* ===== POPUP ===== */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.popup{
  background:var(--bg);
  color:var(--fg);
  padding:22px;
  border-radius:12px;
  max-width:420px;
  width:90%;
}

.hint{
  margin:8px 16px 12px;
  font-size:14px;
  color:#555;
}

.popup .buttons{
  display:flex;
  gap:12px;
  margin-top:20px;
}

.popup button{
  flex:1;
  padding:12px;
  font-size:16px;
  border:none;
  border-radius:6px;
  cursor:pointer;
}

#popupCancel{
  background:#ccc;
}

#popupConfirm{
  background:var(--red);
  color:#fff;
}

.hidden{
  display:none;
}