/* ==============================
   basis.css (compact)
   ============================== */

/* Root-variabelen voor knoppengrid en raster */
:root{
  --BTN: 70px;
  --BTN-GAP: 8px;
  --COLUMNS: 10;
  --UNIT: calc(var(--BTN) / 2);
}

/* Globale indeling */
html, body{ height:100%; }
body{
  margin:0;
  padding:0;
  font-family: Arial, sans-serif;
  background:#000;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:100vh;
  max-width:2000px;
  margin-inline:auto;
  overflow-x:hidden;
}

/* Frames */
.frames-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:30px;
  width:100%;
}
.main-frame{ width:400px; box-sizing:border-box; }
.sub-frame{
  box-sizing:border-box;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
}

/* Titel balk */
.frame-title{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  width:100%;
  background:#031a40;
  color:#fff;
  padding:5px 10px;
  font-size:24px;
  font-weight:bold;
  border-radius:14px;
  margin:0;
  height:auto;
}
.zone-title{ margin-right:5px; white-space:nowrap; }
.temperature-display{ white-space:nowrap; margin-left:auto; }
.temperature-display span{ font-size:inherit; line-height:inherit; }
.presence-icon{ width:24px; height:24px; margin:0 6px; object-fit:contain; display:inline-block; vertical-align:middle; flex-shrink:0; }

/* ====================================
   RADIO (iframe wrapper) en schuifregelaars
   ==================================== */

#radio-container{
  position:relative;
/*  margin-top:5px; */
  height:560px;
  width:100%;
  background:#000;
  border-radius:10px;
  padding:10px;
  overflow:hidden;
}

/* Iframe in het radio-subframe vult de container volledig */
#radio-container .radio-iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
}
/* ==== WIDE SLIDERS (algemeen in sub-frame) ==== */
.sub-frame input[type="range"]{
  appearance:none;
  width: 100%; /*lengte slide */
  height:40px; /*hoogte slide */
  background:linear-gradient(#d9d9d9,#9a9a9a);
  border-radius:35px;
  outline:none;
  margin:20px 0;
  cursor:pointer;
}
.sub-frame input[type="range"]::-webkit-slider-runnable-track{ height:70px; border-radius:35px; }
.sub-frame input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:70px; height:70px;
  border-radius:20%;
  background:#0b63ff;
  border:2px solid #fff;
  box-shadow:0 0 6px rgba(0,0,0,.35);
  cursor:pointer;
}
.sub-frame input[type="range"]::-moz-range-track{ height:70px; border-radius:35px; }
.sub-frame input[type="range"]::-moz-range-thumb{
  width:70px; height:50px;
  border-radius:20%;
  background:#0b63ff;
  border:2px solid #fff;
  box-shadow:0 0 6px rgba(0,0,0,.35);
  cursor:pointer;
}
.sub-frame input[type="range"]::-ms-track{
  height:70px; border-color:transparent; color:transparent; background:transparent;
}

/* ====================================
   knoppen & grid (KNOP / PILL / BAS)
   ==================================== */

/* Grid container */
.button-container{
  display:grid;
  grid-template-columns: repeat(var(--COLUMNS), 1fr);
  grid-auto-rows: var(--UNIT);
  gap: var(--BTN-GAP);
  align-content:start;
  width:100%;
}
.button-container.ordered{ grid-auto-flow: row; }

/* Items vullen cel – fallback = KNOP */
.button-container > *{
  width:100%;
  height:100%;
  min-width:0; min-height:0;
  box-sizing:border-box;
  grid-column: span 2;
  grid-row: span 2;
}

/* Maten (½-unit raster) */
.KNOP { grid-column: span 2; grid-row: span 2; }  /* 1×1 */
.PILL { grid-column: span 2; grid-row: span 1; }  /* 1×0,5 (breed & laag) */  /* 0,5×1 (smal & hoog) */

/* Stacks: 2 halve knoppen in 1 KNOP */
.contact-sensor-stack, .stack{
  display:grid;
  grid-template-rows: 1fr 1fr;
  gap: calc(var(--BTN-GAP)/2);
}
.contact-sensor-stack > *, .stack > *{ width:100%; height:100%; }


/* Alternatieve tegelmaat BAS (zelfde formaat als KNOP) */
.BAS { grid-column: span 2; grid-row: span 2; }

/* ====================================
   Knoppen: basisstijl, iconen en animaties
   ==================================== */
   
/* Basisknoppen */
.device-button, .button-text, .empty-button{
  border-radius:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  overflow:hidden;
}
.device-button{
  background: linear-gradient(to bottom, #a1a1a1, #333232);
  color:#fff;
  cursor:default;
  font-size:8px;
  font-weight:bold;
  border:none;
  transition: all .3s ease;
  flex-direction:column;
  position:relative; /* voor countdown-overlay */
}
.device-button:hover{ transform: translateY(-3px); box-shadow: 1px 6px 12px rgba(0,0,0,.3); }
.device-button:active{ transform: translateY(6px);  box-shadow: 1px 3px 6px rgba(0,0,0,.2); }

/* States */
.device-button.on{
  background: linear-gradient(to bottom, #a1a1a1, #333232);
  color:#F9C536;
  box-shadow: 0 0 10px 3px #F9C536;
  border:2px solid #F9C536;
}
.empty-button{ background:#333232; color:transparent; pointer-events:none; }
.button-text{
  background: linear-gradient(to bottom, #a1a1a1, #333232);
  color:#fff;
  font-size:12px;
  line-height:12px;
  margin:2px 0 4px; /* strakkere rijen */
  cursor:default;
}

/* Icon + label */
.device-button img{ width:55px; height:55px; }
.device-button span{ font-size:11px; line-height:11px; }

/* Contactsensor (compact) */
.device-button.contact-sensor{
  height:30px;
  flex-direction:row;
  font-size:10px;
  font-weight:bold;
  justify-content:center;
  align-items:center;
}
.device-button.contact-sensor img{ display:none; }
.device-button.contact-sensor span{ font-size:9px; line-height:10px; }

/* Countdown overlay (herbruikbaar) */
.countdown-overlay{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%, -50%) !important;
  font-size:3.4em !important;
  font-weight:900 !important;
  color:gray !important;
  background:rgba(0,0,0,.55) !important;
  text-shadow: 0 0 6px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1), 0 0 14px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.8) !important;
  padding:.2em .4em !important;
  border-radius:10px !important;
  pointer-events:none !important;
  z-index:20 !important;
}

/* Rotatie-animatie (fans e.d.) */
@keyframes spin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
.rotate{ animation: spin 1s linear infinite; }


/* Transparante placeholders */
.empty-button{
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ====================================
   PILL-tegels, stacks en contact-sensor op KNOP-formaat
   ==================================== */
/* Halve knoppen: ronding als 'pill' zodat chips mooi ogen */

/* ---- Strong size enforcement for half units ---- */
.button-container > .PILL,
.button-container .PILL{
  grid-row: span 1 !important;  /* half height */
  min-height: var(--UNIT) !important;
}

/* Make common label/value tiles use PILL correctly */
.button-container > .button-text.PILL,
.button-container > .device-button.PILL,
.button-container .stack > .PILL,
.button-container .contact-sensor-stack > .PILL{
  grid-row: span 1 !important;
}

/* When a KNOP cell contains a two-row stack, each child = PILL */
.stack > *,
.contact-sensor-stack > *{
  grid-row: span 1 !important;
  min-height: var(--UNIT) !important;
}

/* Override: brievenbus/contact-sensor op volledig KNOP-formaat */
.button-container > .device-button.contact-sensor.KNOP,
.button-container .device-button.contact-sensor.KNOP{
  height: 100% !important;
  min-height: calc(var(--UNIT) * 2) !important; /* 2 raster-rijen = 140px bij KNOP 140 */
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
/* ====================================
   P1 / energietegels, aliassen en badges
   ==================================== */
/* P1 / Power displays */
.device-button.isP1Display{
  background:none !important;
  min-height:70px;
  padding:6px 10px; /* compacter */
  font-size:12px;
  flex-direction:column;
}
.p1-display-value{ font-size:1.6em; font-weight:800; color:#fff; line-height:1.05; }
.p1-display-unit { font-size:1.1em; opacity:.85; color:#fff; line-height:1; }

/* Condities (kleur) */
.device-button.isP1Display.waarde-laag    { background:#28a745 !important; border:2px solid #28a745; color:#fff; }
.device-button.isP1Display.waarde-gemiddeld { background:#ffc107 !important; border:2px solid #ffc107; color:#000; }
.device-button.isP1Display.waarde-hoog   { background:#dc3545 !important; border:2px solid #dc3545; color:#fff; }

/* --- metric tiles are display-only --- */
.device-button.isP1Display { pointer-events: none; }
.device-button.isP1Display:active { filter: none; box-shadow: none; }
/* ====== Gedeelde stijl voor header-tegels ====== */
.p1-header-tile{
  background: linear-gradient(180deg, #174b7a 0%, #163b5c 100%);
  border:2px solid #3fa9f5;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(63,169,245,.25) inset;
}

/* === Generieke aliassen (neutrale klassennamen) === */
.isMetricDisplay { /* alias van isP1Display */ }
.metric-display-value { /* alias van p1-display-value */ }
.metric-display-unit  { /* alias van p1-display-unit  */ }
.energy-low    { /* alias van waarde-laag    */ }
.energy-medium { /* alias van waarde-gemiddeld */ }
.energy-high   { /* alias van waarde-hoog   */ }

/* Aliassen koppelen aan bestaande stijlen */
.isMetricDisplay, .device-button.isMetricDisplay { background:none !important; min-height:70px; padding:6px 10px; font-size:12px; flex-direction:column; }
.metric-display-value, .p1-display-value { font-size:1.6em; font-weight:800; color:#fff; line-height:1.05; }
.metric-display-unit, .p1-display-unit   { font-size:1.1em; opacity:.85; color:#fff; line-height:1; }

.device-button.isMetricDisplay.energy-low,
.device-button.isP1Display.waarde-laag    { background:#28a745 !important; border:2px solid #28a745; color:#fff; }
.device-button.isMetricDisplay.energy-medium,
.device-button.isP1Display.waarde-gemiddeld { background:#ffc107 !important; border:2px solid #ffc107; color:#000; }
.device-button.isMetricDisplay.energy-high,
.device-button.isP1Display.waarde-hoog   { background:#dc3545 !important; border:2px solid #dc3545; color:#fff; }

/* Algemene stijl voor header-tegels */
.metric-header-tile, .p1-header-tile {
  background: linear-gradient(180deg, #174b7a 0%, #163b5c 100%);
  border:2px solid #3fa9f5;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(63,169,245,.25) inset;
}

/* ===== Conditie-badges voor piek & tarief ===== */
.peak-badge{
  display:inline-flex;
  align-items:center;
  height:28px;
  line-height:28px;
  font-size:14px;
  padding:0 10px;
  margin-left:8px;
  border-radius:999px;
  border:2px solid transparent;
  background:rgba(255,255,255,.06);
  color:#fff;
  white-space:nowrap;
}

.badge-cold   { border-color:#60a5fa; background:rgba(59,130,246,.15);  color:#dbeafe; }
.badge-low    { border-color:#34d399; background:rgba(52,211,153,.15);  color:#e6fff2; }
.badge-medium { border-color:#fbbf24; background:rgba(251,191,36,.12);  color:#fff7da; }
.badge-high   { border-color:#ef4444; background:rgba(239,68,68,.12);   color:#ffe4e4; }

/* Optional subtle title tint when a frame shows a high state */
.frame-title.high   { box-shadow:0 0 0 2px rgba(239,68,68,.35) inset; }
.frame-title.medium { box-shadow:0 0 0 2px rgba(251,191,36,.30) inset; }
.frame-title.low    { box-shadow:0 0 0 2px rgba(52,211,153,.30) inset; }


/* == Gedeelde header-tegel opmaak (zoals energie-dashboard) == */
.button-text.p1-header-tile{
  background: linear-gradient(180deg, #174b7a 0%, #163b5c 100%) !important;
  border:2px solid #3fa9f5 !important;
  color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.5) !important;
  border-radius:10px !important;
  box-shadow:0 0 0 1px rgba(63,169,245,.25) inset !important;
  text-transform: uppercase;
  font-weight:700;
  letter-spacing: .5px;
}

/* ====================================
   Index-pagina: uitlijning en guardrails
   ==================================== */
/* Index marges*/
.page-index .sub-frame{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
.page-index .frame-title{ margin-bottom:6px; }
.page-index .button-container,
.page-index .widget-container{ width:100%; margin:0; }
.page-index .button-container.ordered{ grid-auto-flow:row; }
.page-index .button-container > *{ margin:0; }
.page-index .main-frame,
.page-index .sub-frame{ height:auto; }

/* ================================
   Index-only layout guardrails
   ================================ */
.page-index .sub-frame{
  /* knoppen strak onder de titelbalk, niet centreren */
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.page-index .frame-title{
  /* klein beetje ruimte tussen titel en grid en de knoppen er onder */
  margin-bottom: 6px !important;
  margin-top: 6px !important;
}

.page-index .button-container{
  /* volle breedte en geen “inspringen” */
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-index .widget-container{
  /* weer gelijk met de titelbalk */
  width: 100% !important;
}

/* Als er nog een grid-densification actief is, kun je
   voor index de DOM-volgorde afdwingen: */
.page-index .button-container.ordered{
  grid-auto-flow: row !important;
}

/* =========================================================
   INDEX-ONLY UITLIJNING — raakt GEEN andere pagina's
   ---------------------------------------------------------
   Vereist: body heeft class "page-index"
   ========================================================= */
.page-index .sub-frame{
  /* Doe de subframe-rij als kolom en strek de children */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;     /* niet centreren */
  justify-content: flex-start !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Zorg dat titel, widgets en grid exact dezelfde breedte aanhouden */
.page-index .sub-frame > .frame-title,
.page-index .sub-frame > .widget-container,
.page-index .sub-frame > .button-container{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Knoppengrid: volle breedte, geen inspringing, volgorde = DOM indien .ordered */
.page-index .button-container{
  width: 100% !important;
  margin: 0 !important;                 /* voorkom 95%/6px side-margins */
  justify-content: flex-start !important;
}

.page-index .button-container.ordered{
  grid-auto-flow: row !important;       /* geen “dense” terugsteken */
}

/* Voor het geval er nog rest-paddings op knoppen stonden */
.page-index .button-container > *{
  margin: 0 !important;
}

/* ===== Fix: index (page-index) — zorg dat frames hun eigen hoogte nemen ===== */
.page-index .main-frame{ height: auto !important; }

.page-index .sub-frame{ height: auto !important; min-height: 0 !important; }

/* Toon iconen op contact-sensor tegels die volledig KNOP-formaat gebruiken */
.device-button.contact-sensor.KNOP img{
  display: block !important;
}

/* Extra zekerheid: forceer dit ook specifiek op de brievenbus-knop */
#brievenbus.device-button.contact-sensor img{
  display: block !important;
}

/* Zorg dat label netjes blijft onder het icoon (optioneel) */
.device-button.contact-sensor.KNOP{
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ====================================
   Responsief gedrag (kleine schermen)
   ==================================== */
/* Responsive */
@media (max-width: 768px){
  .main-frame{ width:95%; margin-bottom:20px; }
  .device-button img{ width:40px; height:40px; }
}
@media (max-width: 480px){
  .main-frame{ width:95%; margin-bottom:20px; }
}