:root{
  --bg0:#06070c;
  --bg1:#0b0d15;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.10);
  --text: #eaf1ff;
  --muted: rgba(234,241,255,.68);
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --r: 14px;
  --gap: 10px;
  --blur: 12px;
  --good:#33ffb1;
  --warn:#ffb020;
  --bad:#ff4b6e;
  --accent:#65d6ff;
  --accent2:#b06cff;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(600px 400px at 15% 10%, rgba(117, 79, 255,.18), transparent 55%),
    radial-gradient(500px 350px at 85% 15%, rgba(0, 255, 209,.12), transparent 55%),
    radial-gradient(500px 400px at 20% 95%, rgba(255, 140, 0,.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app{ 
  min-height:100%; 
  display:flex; 
  flex-direction:column; 
  padding: 10px; 
  padding-bottom: env(safe-area-inset-bottom, 10px);
  gap: 10px; 
}

/* ===== TOPBAR (Compact voor mobiel) ===== */
.topbar{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap: 8px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  position: sticky;
  top: 0;
  z-index: 20;
}

.clockWrap{ 
  min-width: 70px; 
  display:flex; 
  flex-direction:column; 
  gap:1px; 
}
.time{ font-size: 20px; font-weight: 950; letter-spacing:.2px; line-height:1; }
.date{ font-size: 9px; color: var(--muted); white-space: nowrap; }

.chips{
  flex:1;
  display:flex; 
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar{ display:none; }

.chip{
  flex: 0 0 auto;
  display:flex; 
  align-items:center; 
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
  backdrop-filter: blur(var(--blur));
  cursor:pointer; 
  user-select:none;
  transition: transform .12s ease, background .12s ease;
  min-height: 36px;
  max-width: 140px;
}
.chip:active{ transform: scale(0.97); background: rgba(255,255,255,.14); }
.chip .ic{
  width: 22px; 
  height: 22px; 
  border-radius: 8px;
  display:grid; 
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
}
.chip .meta{ min-width: 0; display:flex; flex-direction:column; }
.chip .t1{ font-weight: 900; font-size: 11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip .t2{ font-size: 9px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.conn{
  display:flex; 
  align-items:center; 
  gap: 5px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(var(--blur));
  color: var(--muted);
  font-size: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  min-width: 60px;
  justify-content:center;
}
.dot{
  width: 6px; 
  height: 6px; 
  border-radius:999px;
  background: var(--bad);
  box-shadow: 0 0 8px rgba(255,75,110,.60);
}
.dot.ok{ background: var(--good); box-shadow: 0 0 8px rgba(51,255,177,.60); }

/* ===== TABS (Horizontaal scrollbaar) ===== */
.tabs{
  display:flex; 
  gap: 6px;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar{ display:none; }

.tab{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(var(--blur));
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  cursor:pointer; 
  user-select:none;
  transition: transform .12s ease, background .12s ease;
  text-decoration: none;
  white-space: nowrap;
}
.tab:active{ transform: scale(0.97); background: rgba(255,255,255,.10); }
.tab.active{ 
  color: var(--text); 
  background: rgba(255,255,255,.12); 
  border-color: rgba(101,214,255,.30); 
}

/* ===== MAIN CONTENT ===== */
.main{
  flex:1;
  overflow: visible;
  padding: 2px 0 10px;
}

.view{ display:none; }
.view.active{ display:block; }

/* ===== HOME GRID (Verticaal gestapeld) ===== */
.homeGrid{
  display:flex;
  flex-direction: column;
  gap: var(--gap);
}

.panel{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panelBody{ padding: 10px; display:flex; flex-direction:column; gap: var(--gap); }

/* ===== CONTROLS (2 kolommen) ===== */
.controls{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.btnTile{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(var(--blur));
  padding: 10px;
  cursor:pointer; 
  user-select:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  min-height: 70px;
  display:flex; 
  flex-direction:column; 
  justify-content:space-between;
}
.btnTile:active{ transform: scale(0.98); background: rgba(255,255,255,.10); }
.btnTop{ display:flex; align-items:center; justify-content:space-between; gap: 6px; }
.btnName{ font-weight: 950; font-size: 11px; letter-spacing:.1px; }
.btnBig{ font-weight: 1000; font-size: 14px; }

.btnTile.on{
  border-color: rgba(51,255,177,.28);
  box-shadow: 0 10px 28px rgba(51,255,177,.06), 0 10px 28px rgba(0,0,0,.28);
  background: rgba(51,255,177,.08);
}

.btnTile.acOff{
  border-color: rgba(255,75,110,.40);
  box-shadow: 0 10px 28px rgba(255,75,110,.06), 0 10px 28px rgba(0,0,0,.28);
  background: rgba(255,75,110,.08);
}

.btnTile.alarm-off{
  border-color: rgba(51,255,177,.35);
  box-shadow: 0 10px 28px rgba(51,255,177,.08), 0 10px 28px rgba(0,0,0,.28);
}
.btnTile.alarm-on{
  border-color: rgba(255,75,110,.45);
  box-shadow: 0 10px 28px rgba(255,75,110,.10), 0 10px 28px rgba(0,0,0,.28);
}

.alarmBtn .btnBig{
  font-size: 11px;
  line-height: 1.1;
  white-space: normal;
}

/* ===== METRICS GRID (2 kolommen) ===== */
.metricsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

/* ===== ENERGY TOP GRID (Verticaal) ===== */
.energyTopGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items:end;
}

/* ===== CARDS ===== */
.cards2{
  display:flex;
  flex-direction: column;
  gap: var(--gap);
}

.card{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  padding: 10px;
  min-height: auto;
}
.card h3{ 
  margin:0 0 8px; 
  font-size: 10px; 
  color: var(--muted); 
  font-weight: 950; 
  letter-spacing:.3px; 
}

.bigNum{ font-size: 24px; font-weight: 1000; letter-spacing:.1px; line-height:1.05; }
.row{ display:flex; gap: 10px; flex-wrap:wrap; align-items:baseline; }
.kv{ display:flex; flex-direction:column; gap:2px; min-width: 0; flex: 1; }
.k{ color: var(--muted); font-size: 10px; }
.v{ font-weight: 950; font-size: 13px; }

.list{ display:flex; flex-direction:column; gap: 6px; }
.item{
  display:flex; 
  justify-content:space-between; 
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.item .left{ min-width:0; flex: 1; }
.item .t{ font-weight: 950; font-size: 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item .s{ color: var(--muted); font-size: 10px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item .right{ font-weight: 950; font-size: 11px; color: rgba(234,241,255,.85); flex-shrink: 0; }

.mini{ font-size: 10px; color: var(--muted); }

.agendaRed, .agendaRed .t, .agendaRed .s, .agendaRed .mini{ color: var(--bad) !important; }

.climateSmall{ padding: 10px; min-height: auto; }
.climateSmall .bigNum{ font-size: 20px; }

.rightColStack{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

.weatherBig{
  min-height: auto;
}

/* ===== KEYPAD (Alarm) ===== */
.keypadWrap{
  max-width: 100%;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.keypadDots{
  letter-spacing: 6px;
  font-size: 16px;
  opacity: .9;
  text-align:right;
  white-space:nowrap;
}
.keypadGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.keypadBtn{
  height: 52px;
  font-size: 16px;
  font-weight: 950;
  border-radius: 14px;
  width: 100%;
}
.keypadActions{
  display:flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ===== PV GISTEREN COMPACT ===== */
.pvYdayCompact{
  padding-top: 8px;
  padding-bottom: 8px;
}
.pvYdayCompact .row{ gap: 8px; }
.pvYdayCompact .kv{ min-width: 0; }

/* ===== WEATHER CARD ===== */
.wxCard{
  position: relative;
  overflow: hidden;
}
.wxCard::before,
.wxCard::after{
  content:"";
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: 0;
  transition: opacity 800ms ease;
}
.wxCard::before{ background-image: var(--bgA); opacity: 1; }
.wxCard::after{ background-image: var(--bgB); opacity: 0; }
.wxFade::after{ opacity: 1; }
.wxOverlay{
  position:absolute; 
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.70));
  z-index: 1;
}
.wxInner{ position: relative; z-index: 2; }

.wxTop{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.wxNow{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.wxTemp{
  font-size: 36px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .1px;
}
.wxCond{
  font-weight: 950;
  font-size: 13px;
  color: rgba(234,241,255,.9);
}
.wxHiLo{
  color: rgba(234,241,255,.75);
  font-size: 11px;
  margin-top: 2px;
}
.wxMeta{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.wxPill{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  color: rgba(234,241,255,.86);
  white-space:nowrap;
}

.wxDaily{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.wxDay{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius: 12px;
  padding: 6px 4px;
  display:flex;
  flex-direction:column;
  gap: 4px;
  align-items:center;
  text-align:center;
  min-height: auto;
}
.wxDayName{ font-weight: 950; font-size: 10px; color: rgba(234,241,255,.85); }
.wxDayIcon{ font-size: 14px; }
.wxDayTemp{ font-weight: 1000; font-size: 11px; }
.wxDayTemp span{ color: rgba(234,241,255,.75); font-weight: 900; }

/* ===== CAMERA ===== */
.camWrap{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.camFrame{
  width: 100%;
  height: 180px;
  border: 0;
  display: block;
  background: rgba(0,0,0,.22);
}

/* ===== MODAL ===== */
.modalBack{
  position:fixed; 
  inset:0;
  display:none;
  place-items:center;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(8px);
  z-index: 50;
  padding: 10px;
}
.modal{
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20,20,30,.90);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  padding: 12px;
}
.modal header{
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  gap: 8px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.modal header h3{ margin:0; font-size: 13px; }
.xbtn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor:pointer;
  user-select:none;
  font-size: 13px;
  font-weight: 700;
}
.xbtn:active{ background: rgba(255,255,255,.12); }

/* ===== ENERGIE PAGINA ===== */
.energieGrid{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

#view-energie .card{
  min-height: auto;
}
#view-energie .card h3{
  margin-bottom: 10px;
}

#view-energie .panel:last-child .panelBody{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
#view-energie .panel:last-child .cards2{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ===== VERLICHTING PAGINA ===== */
.vlRow{
  touch-action: manipulation;
}

/* ===== BEVEILIGING PAGINA ===== */
.securityGrid{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ===== PV GRAFIEK (Responsive) ===== */
#pvChartCombined{
  touch-action: pan-y pinch-zoom;
}

#pvChartTip{
  font-size: 11px;
  padding: 6px 8px;
  max-width: 140px;
}

/* Grafiek legenda compact */
.chartLegend{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
}
.chartLegend .legendItem{
  display: flex;
  align-items: center;
  gap: 6px;
}
.chartLegend .legendDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

/* ===== VERLICHTING STANDEN ===== */
.standenGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.standTile{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(var(--blur));
  padding: 10px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, background .12s ease;
  min-height: 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap: 4px;
}
.standTile:active{ transform: scale(0.98); background: rgba(255,255,255,.10); }
.standTile.on{
  border-color: rgba(51,255,177,.28);
  background: rgba(51,255,177,.08);
}
.standTile .standIcon{ font-size: 18px; }
.standTile .standLabel{ font-size: 11px; font-weight: 900; }

/* ===== HUIS PAGINA ===== */
.huisGrid{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ===== SLIDER (voor helderheid) ===== */
input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.12);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.3);
}
input[type="range"]::-moz-range-thumb{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.3);
}

/* ===== UTILITY CLASSES ===== */
.hide-mobile{ display: none !important; }

/* Verbeterde touch feedback */
.btnTile, .chip, .tab, .item, .standTile, .xbtn{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Safe area voor notch/home indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .app {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* Landscape mode aanpassingen */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar{ padding: 6px 8px; }
  .time{ font-size: 16px; }
  .date{ font-size: 8px; }
  .chip{ padding: 4px 6px; min-height: 30px; }
  .tabs{ gap: 4px; }
  .tab{ padding: 8px 12px; font-size: 11px; }
  .controls{ gap: 8px; }
  .btnTile{ min-height: 55px; padding: 8px; }
  .btnName{ font-size: 10px; }
  .btnBig{ font-size: 12px; }
}

/* Grote telefoons (iPhone Pro Max, Galaxy Ultra etc) */
@media (min-width: 414px) {
  .controls{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .btnTile{ min-height: 75px; }
  .bigNum{ font-size: 28px; }
  .wxTemp{ font-size: 42px; }
}

/* Kleine telefoons */
@media (max-width: 359px) {
  .topbar{ padding: 6px 8px; }
  .time{ font-size: 18px; }
  .clockWrap{ min-width: 60px; }
  .chip{ padding: 5px 6px; gap: 4px; }
  .chip .ic{ width: 18px; height: 18px; font-size: 10px; }
  .chip .t1{ font-size: 10px; }
  .chip .t2{ font-size: 8px; }
  .conn{ padding: 5px 6px; min-width: 50px; font-size: 9px; }
  .tab{ padding: 8px 10px; font-size: 11px; }
  .btnTile{ min-height: 60px; padding: 8px; }
  .btnName{ font-size: 10px; }
  .btnBig{ font-size: 12px; }
  .bigNum{ font-size: 20px; }
  .card{ padding: 8px; }
  .card h3{ font-size: 9px; }
  .k{ font-size: 9px; }
  .v{ font-size: 12px; }
  .wxTemp{ font-size: 32px; }
  .wxDaily{ gap: 4px; }
  .wxDay{ padding: 4px 2px; }
  .wxDayName{ font-size: 9px; }
  .wxDayIcon{ font-size: 12px; }
  .wxDayTemp{ font-size: 10px; }
}