<style>
/* --- Grid --- */
.flat {
    display: grid !important;
    grid-template-columns: repeat(14, 100px) !important;
    grid-auto-rows: 80px !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
}

.flat div {
    /*padding: 6px;*/
    font-size: 0.9em;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.15s;
}

.flat > div:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


/* --- Popup --- */
.unit-popup {
    display: none;
    position: fixed;
    top:50%; left:50%;
    transform: translate(-50%, -50%);
    width: 90%; max-width: 550px;
    padding: 20px;
    background:#fff;
    border:2px solid #4CAF50;
    border-radius:12px;
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    overflow-y:auto; max-height:90vh;
    z-index:1000;
}
.unit-popup h3 { margin-top:0; text-align:center; }
.unit-popup input, .unit-popup button, .unit-popup select { width:100%; margin-bottom:10px; padding:10px; font-size:1em; box-sizing:border-box; }
.unit-popup button { cursor:pointer; }
.unit-popup .close-btn { position:absolute; top:10px; right:12px; font-size:22px; cursor:pointer; color:#555; }

/* --- Overlay --- */
.overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999; }

/* --- Info boxes --- */
.info-under-model, .info-box { border-radius:8px; padding:10px; margin-top:15px; font-size:0.9em; }
.info-under-model { background:#f0f8ff; border:1px solid #4CAF50; }
.info-box { background:#f9fff9; border:1px solid #4CAF50; color:#333; }

/* --- Tables --- */
table { border-collapse: collapse; width: 100%; margin-top:5px; font-size:0.85em; }
table, th, td { border:1px solid #999; padding:4px; text-align:center; }
th { background:#eee; }

/* --- Checkbox label --- */
.checkbox-label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin-bottom:10px; }

/* --- Responsive --- */
@media (max-width:1024px) { .flat { grid-template-columns: repeat(14, 80px); grid-auto-rows:70px; } .flat div{ font-size:0.8em; } }
@media (max-width:768px) { .flat { grid-template-columns: repeat(14,60px); grid-auto-rows:60px; } .flat div{ font-size:0.7em; } .unit-popup { padding:15px; } }
@media (max-width:480px) { .flat { grid-template-columns: repeat(14,50px); grid-auto-rows:50px; } .flat div{ font-size:0.6em; } .unit-popup h3{ font-size:1em; } .info-box, .info-under-model{ font-size:0.75em; } }

#roomChartContainer {
    display: flex;
    justify-content: center; /* horizontaal centreren */
    align-items: center;     /* verticaal centreren */
    width: 100%;
    max-height: 250px;       /* zelfde als canvas max-height */
    margin-bottom: 15px;
}

#saveUnit {
    background-color: #4CAF50; /* groen */
    color: white;               /* witte tekst */
    border: none;               /* geen rand */
    padding: 10px 20px;         /* wat ruimte rondom de tekst */
    border-radius: 8px;         /* afgeronde hoeken */
    cursor: pointer;            /* muiscursor verandert bij hover */
    font-size: 1em;             /* tekstgrootte */
    transition: background 0.2s; /* smooth hover */
}

#saveUnit:hover {
    background-color: #45a049; /* iets donkerder groen bij hover */
}

#showAdminLogin:hover {
    background-color: #45a049;
    border-color: #45a049;
}
#showAdminLogin:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(76,175,80,0.3);
}


/* Zorg dat alleen de checkbox in .checkbox-wrapper niet full-width wordt */
.unit-popup .checkbox-wrapper input[type="checkbox"] {
    width: auto; /* overschrijft de 100% */
}

/* Checkbox links boven */
.unit .select-overlay {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
}

/* Geaccordeerd rechts boven */
.unit .accredited-check {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 1.2em;
    pointer-events: none;
}

/* Checkbox stijl */
.compare-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#compareChartsContainer {
    display: flex;
    gap: 20px;
    justify-content: center; /* horizontaal centreren */
    align-items: flex-start;
    flex-wrap: nowrap;       /* geen wrap! */
}

#compareChartsContainer canvas {
    width: calc((100% - 60px)/4); /* max 4 grafieken, gap = 20px x3 */
    max-width: 250px;
    height: 250px !important;    /* zelfde hoogte */
}

/* Popup voor vergelijken van woningen */
.compare-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 1200px;   /* breder dan unit popup */
  padding: 25px;
  background: #fff;
  border: 2px solid #4CAF50;
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(0,0,0,0.35);
  z-index: 1100;
}

/* Container voor diagrammen */
#compareChartsContainer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}

.overlay {
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    background-color: rgba(0,0,0,0.4);
    z-index: 999;
    display: none;
}

.unit-popup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    max-width: 600px;
    width: 90%;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;
    display: none;
}

#notification {
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    display: none;
    min-width: 200px;
}

#notification.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#notification.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}




</style>