/* ============================================================
   Warmtepomp Dashboard — design tokens & component styles
   Ported from design/Warmtepomp/styles.css + ui.css
   Fonts loaded via CDN in app.blade.php
   ============================================================ */

:root {
  --acc-h: 152;
  --acc-c: 0.155;
  --accent:        oklch(0.72 var(--acc-c) var(--acc-h));
  --accent-strong: oklch(0.63 calc(var(--acc-c) + 0.01) calc(var(--acc-h) - 2));
  --accent-deep:   oklch(0.50 0.12 calc(var(--acc-h) - 4));

  --warm:   oklch(0.74 0.155 58);
  --warm-2: oklch(0.66 0.165 42);
  --cool:   oklch(0.72 0.115 232);
  --danger: oklch(0.63 0.19 27);

  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 30px;
  --gap: 18px;

  --ff-display: "Clash Display", "General Sans", system-ui, sans-serif;
  --ff-body: "General Sans", system-ui, -apple-system, sans-serif;
  --ff-mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 12px 30px -18px rgba(0,0,0,0.22);
  --shadow-pop: 0 24px 60px -28px rgba(0,0,0,0.4);
  --maxw: 1280px;
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  --bg:        oklch(0.975 0.008 150);
  --bg-grad-a: oklch(0.98 0.012 150);
  --bg-grad-b: oklch(0.955 0.014 158);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.978 0.006 152);
  --surface-3: oklch(0.96 0.008 152);
  --border:    oklch(0.91 0.009 152);
  --border-2:  oklch(0.87 0.011 152);
  --text:      oklch(0.27 0.022 165);
  --text-2:    oklch(0.47 0.018 162);
  --text-3:    oklch(0.62 0.014 158);
  --on-accent: oklch(0.99 0.01 150);
  --accent-tint: oklch(0.95 0.045 152);
  --warm-tint: oklch(0.96 0.04 60);
  --cool-tint: oklch(0.96 0.035 232);
  --glow: 0 0 0 rgba(0,0,0,0);
  --grid-line: oklch(0.91 0.008 152);
  color-scheme: light;
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --bg:        oklch(0.165 0.014 168);
  --bg-grad-a: oklch(0.19 0.018 162);
  --bg-grad-b: oklch(0.145 0.012 172);
  --surface:   oklch(0.215 0.016 166);
  --surface-2: oklch(0.245 0.018 166);
  --surface-3: oklch(0.275 0.02 166);
  --border:    oklch(0.30 0.018 166);
  --border-2:  oklch(0.36 0.02 166);
  --text:      oklch(0.96 0.012 150);
  --text-2:    oklch(0.74 0.016 156);
  --text-3:    oklch(0.58 0.016 158);
  --on-accent: oklch(0.17 0.03 160);
  --accent-tint: oklch(0.30 0.05 152);
  --warm-tint: oklch(0.30 0.05 55);
  --cool-tint: oklch(0.30 0.045 232);
  --glow: 0 0 40px -10px;
  --grid-line: oklch(0.30 0.014 166);
  color-scheme: dark;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 16px 40px -22px rgba(0,0,0,0.7);
  --shadow-pop: 0 30px 70px -30px rgba(0,0,0,0.8);
}

/* ---------- STYLE DIRECTIONS ---------- */
[data-style="strak"] {
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
}
[data-style="speels"] {
  --radius: 28px;
  --radius-sm: 18px;
  --radius-lg: 38px;
}

/* ---------- BASE ---------- */
.wp-app * { box-sizing: border-box; }

.wp-app {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  min-height: 100vh;
}

.app-bg {
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 88% -8%, var(--accent-tint), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, var(--bg-grad-a), transparent 55%),
    linear-gradient(168deg, var(--bg-grad-a), var(--bg-grad-b));
  background-attachment: fixed;
  transition: background 0.4s ease;
}

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px 80px;
}

@media (max-width: 720px) {
  .shell { padding: 0 16px 64px; }
}

.wp-app ::selection { background: var(--accent); color: var(--on-accent); }

.mono { font-family: var(--ff-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }

.metric-num {
  font-family: var(--ff-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: background .35s, border-color .35s, transform .25s, box-shadow .25s;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.section-title {
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* ---------- ANIMATIONS ---------- */
@keyframes riseIn {
  from { transform: translateY(16px); }
  to   { transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes breathe {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c) 60%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--c) 0%, transparent); }
}
@keyframes pulseDot { 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.rise { animation: riseIn .55s cubic-bezier(.2,.7,.2,1); }
.anim-ready .rise { animation: riseIn .55s cubic-bezier(.2,.7,.2,1), fadeIn .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  .rise, .anim-ready .rise { animation: none; }
}

.focus-ring:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wp-app button { font-family: inherit; cursor: pointer; }

/* ---------------- HEADER ---------------- */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.hdr-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px; padding-bottom: 14px;
}
.hdr-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  box-shadow: var(--glow) var(--accent);
}
.brand-name { font-family: var(--ff-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; line-height: 1.1; }
.brand-sub { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.hdr-center { flex: 0 0 auto; }
.hdr-right { display: flex; align-items: center; gap: 10px; }
.hdr-nav { display: flex; align-items: center; gap: 14px; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--border); }
.hdr-nav a, .hdr-nav button {
  font-size: 12px; color: var(--text-3); background: none; border: none;
  cursor: pointer; padding: 0; transition: color .2s;
  font-family: inherit;
}
.hdr-nav a:hover, .hdr-nav button:hover { color: var(--text); }

.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-2); font-weight: 500;
  padding: 7px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 24%, transparent);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.live-dot.offline { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 24%, transparent); }
.live-clock { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  transition: background .2s, color .2s, transform .15s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); transform: translateY(-1px); }

/* alarm chip in header */
.alarm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--danger) 14%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
  color: var(--danger);
  animation: pulseDot 2.4s ease-in-out infinite;
}

/* ---------------- SEGMENTED ---------------- */
.seg {
  display: inline-flex; gap: 3px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px;
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: transparent; color: var(--text-2);
  font-weight: 500; border-radius: 999px; transition: all .2s;
  white-space: nowrap;
}
.seg-md .seg-btn { padding: 9px 18px; font-size: 14px; }
.seg-sm .seg-btn { padding: 6px 13px; font-size: 12.5px; }
.seg-btn:hover { color: var(--text); }
.seg-btn.on {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px -4px rgba(0,0,0,.25);
}
[data-theme="dark"] .seg-btn.on { background: var(--accent); color: var(--on-accent); }

/* ---------------- SECTION HEAD ---------------- */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.sec-head-l { display: flex; align-items: center; gap: 12px; }
.sec-ic {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-tint); color: var(--accent-strong);
}

.trend-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------- BEWONER GRID ---------------- */
.grid-bewoner {
  display: grid; gap: var(--gap); padding-top: 26px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "hero hero hero hero hero hero hero hero cop cop cop cop"
    "tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles"
    "savings savings savings savings savings savings settings settings settings settings settings settings"
    "trend trend trend trend trend trend trend trend trend trend trend trend";
}
.b-hero { grid-area: hero; } .b-cop { grid-area: cop; }
.b-tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.b-savings { grid-area: savings; } .b-settings { grid-area: settings; }
.b-trend { grid-area: trend; }

/* ---------------- HERO CARD ---------------- */
.hero-card { position: relative; overflow: hidden; padding: 26px 28px; display: flex; flex-direction: column; }
.hero-glow {
  position: absolute; inset: -40% 30% auto -10%; height: 70%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 30%, transparent), transparent);
  filter: blur(20px); opacity: .5; pointer-events: none;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--c); background: color-mix(in oklab, var(--c) 14%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--c) 30%, transparent);
}
.breathe {
  width: 9px; height: 9px; border-radius: 50%; background: var(--c);
  animation: breathe 2.6s ease-in-out infinite;
}
.hero-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex: 1; position: relative; z-index: 1; margin: 22px 0; }
.hero-temp { display: flex; align-items: baseline; gap: 6px; }
.hero-temp .metric-num { font-size: clamp(64px, 9vw, 104px); }
.hero-unit { font-size: 30px; color: var(--text-3); font-weight: 500; }
.hero-sub { color: var(--text-2); max-width: 42ch; margin-top: 14px; font-size: 15px; }
.hero-img { width: clamp(120px, 16vw, 190px); height: auto; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.28)); align-self: center; }
.hero-foot {
  display: flex; align-items: center; gap: 6px; position: relative; z-index: 1;
  border-top: 1px solid var(--border); padding-top: 18px;
}
.hf-item { flex: 1; }
.hf-num { font-size: 26px; color: var(--text); }
.hf-num small { font-size: 14px; color: var(--text-3); font-weight: 500; margin-left: 4px; }
.hf-lab { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.hf-sep { width: 1px; align-self: stretch; background: var(--border); }

/* ---------------- COP CARD ---------------- */
.cop-card { padding: 24px; display: flex; flex-direction: column; }
.cop-ring { display: grid; place-items: center; margin: 8px 0 4px; }
.cop-explain { text-align: center; color: var(--text-2); font-size: 14px; margin: 8px auto 14px; max-width: 30ch; }
.cop-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 0 6px; margin-top: auto; }

/* ---------------- LIVE TILES ---------------- */
.tile { padding: 18px 18px 14px; display: flex; flex-direction: column; min-height: 150px; }
.tile:hover { transform: translateY(-2px); }
.tile-head { display: flex; align-items: center; gap: 9px; }
.tile-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--c) 16%, var(--surface)); color: var(--c); }
.tile-label { font-size: 13.5px; color: var(--text-2); font-weight: 500; }
.tile-val { display: flex; align-items: baseline; gap: 4px; margin: 14px 0 2px; }
.tile-unit { font-size: 16px; color: var(--text-3); font-weight: 500; }
.tile-spark { margin: 4px -4px 0; flex: 1; display: flex; align-items: flex-end; overflow: hidden; }
.tile-note { font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* ---------------- SAVINGS CARD ---------------- */
.savings-card { padding: 24px; }
.sav-grid { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.sav-big .metric-num { color: var(--accent-strong); }
.sav-lab { font-size: 13px; color: var(--text-3); margin-top: 4px; max-width: 20ch; }
.sav-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-left: auto; }
.sav-stat .metric-num small { font-size: 14px; color: var(--text-3); font-weight: 500; margin-left: 3px; }
.sav-chart { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 16px 8px; }
.sav-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

/* ---------------- SETTINGS CARD ---------------- */
.settings-card { padding: 24px; }
.set-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.set-ctl { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; }
.set-ctl-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.set-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--c) 16%, var(--surface)); color: var(--c); flex-shrink: 0; }
.set-label { font-size: 14px; font-weight: 600; color: var(--text); }
.set-sub { font-size: 12px; color: var(--text-3); }
.set-val { display: flex; align-items: baseline; gap: 4px; margin: 6px 0 14px; }
.set-unit { font-size: 16px; color: var(--text-3); }
.set-stepper { display: flex; align-items: center; gap: 10px; }
.step-btn {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; font-size: 20px; line-height: 1;
  background: var(--surface); border: 1px solid var(--border-2); color: var(--text); font-weight: 500;
  transition: background .15s, transform .1s;
}
.step-btn:hover { background: var(--surface-3); }
.step-btn:active { transform: scale(.93); }
.set-track { position: relative; flex: 1; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: visible; }
.set-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; transition: width .25s; }

.toggle-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.sw-row {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 15px; color: var(--text-2); transition: all .2s;
  cursor: pointer;
}
.sw-row.on { color: var(--text); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); background: var(--accent-tint); }
.sw-ic { color: var(--text-3); display: flex; }
.sw-row.on .sw-ic { color: var(--accent-strong); }
.sw-label { font-size: 13.5px; font-weight: 500; flex: 1; }
.sw { width: 40px; height: 23px; border-radius: 999px; background: var(--surface-3); position: relative; transition: background .2s; flex-shrink: 0; }
.sw-row.on .sw { background: var(--accent); }
.sw-knob { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.sw-row.on .sw-knob { transform: translateX(17px); }

/* ---------------- TREND CARD ---------------- */
.trend-card { padding: 24px; }
.legend { display: inline-flex; gap: 16px; margin-bottom: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---------------- MONTEUR BANNER ---------------- */
.monteur-banner {
  display: flex; align-items: center; gap: 11px; margin-top: 22px;
  padding: 13px 18px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-2);
  background: var(--accent-tint); border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
}
.mb-ic { color: var(--accent-strong); display: flex; }
.monteur-banner b { color: var(--text); }

/* ---------------- MONTEUR GRID ---------------- */
.grid-monteur {
  display: grid; gap: var(--gap); padding-top: 18px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "strip strip strip strip strip strip strip strip strip strip strip strip"
    "a a a a b b b b c c c c"
    "charts charts charts charts charts charts charts charts charts charts charts charts"
    "comp comp comp comp comp comp comp comp info info info info"
    "docs docs docs docs docs docs docs docs info info info info";
}
.m-strip { grid-area: strip; } .m-a { grid-area: a; } .m-b { grid-area: b; } .m-c { grid-area: c; }
.m-power { grid-area: charts; }
.m-comp { grid-area: comp; } .m-info { grid-area: info; } .m-docs { grid-area: docs; }

.metric-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.ms-cell { padding: 18px 20px; border-right: 1px solid var(--border); }
.ms-cell:last-child { border-right: none; }
.ms-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 600; margin-bottom: 8px; }
.ms-val { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.ms-unit { font-size: 13px; color: var(--text-3); font-weight: 500; }

.m-card { padding: 22px; }
.chip-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); font-weight: 500;
  padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); opacity: .5; display: inline-block; flex-shrink: 0; }
.dot.on { opacity: 1; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); }

.m-bars { display: flex; flex-direction: column; gap: 15px; }
.bar-row-top { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; font-size: 13px; color: var(--text-2); margin-bottom: 7px; }
.bar-track { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.7,.2,1); min-width: 3px; }
.m-foot { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 6px; }

.data-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.data-row:last-child { border-bottom: none; }
.dr-label { font-size: 13.5px; color: var(--text-2); }
.dr-val { font-size: 14px; color: var(--text); white-space: nowrap; }
.dr-unit { color: var(--text-3); font-size: 12px; }
.dr-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }

.m-list { display: flex; flex-direction: column; }
.press-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.press-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.press-cell .metric-num small { margin-left: 5px; }

.comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.comp-cell { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
.comp-cell.on { color: var(--text); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); background: var(--accent-tint); }

.info-top { display: flex; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.info-img { width: 78px; height: 100px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 14px 20px rgba(0,0,0,.22)); }
.info-list { display: flex; flex-direction: column; }

.docs-list { display: flex; flex-direction: column; gap: 8px; }
.doc-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 13px 15px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); transition: all .18s; text-decoration: none; }
.doc-row:hover { background: var(--surface-3); transform: translateX(2px); border-color: var(--border-2); }
.doc-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-tint); color: var(--accent-strong); }
.doc-meta { flex: 1; display: flex; flex-direction: column; }
.doc-name { font-size: 14px; font-weight: 500; }
.doc-sub { font-size: 12px; color: var(--text-3); }

/* ---------------- FOOTER ---------------- */
.ftr { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding-top: 28px; margin-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-3); }
.ftr .live-dot { display: inline-block; margin-right: 6px; }

/* chart wrapper */
.chart-wrap { width: 100%; overflow: hidden; }
.chart-wrap svg { display: block; overflow: visible; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1040px) {
  .grid-bewoner {
    grid-template-areas:
      "hero hero hero hero hero hero hero hero hero hero hero hero"
      "cop cop cop cop cop cop tiles tiles tiles tiles tiles tiles"
      "savings savings savings savings savings savings savings savings savings savings savings savings"
      "settings settings settings settings settings settings settings settings settings settings settings settings"
      "trend trend trend trend trend trend trend trend trend trend trend trend";
  }
  .b-tiles { grid-template-columns: repeat(2, 1fr); }
  .grid-monteur {
    grid-template-areas:
      "strip strip strip strip strip strip strip strip strip strip strip strip"
      "a a a a a a b b b b b b"
      "c c c c c c c c c c c c"
      "charts charts charts charts charts charts charts charts charts charts charts charts"
      "comp comp comp comp comp comp comp comp comp comp comp comp"
      "info info info info info info docs docs docs docs docs docs";
  }
  .metric-strip { grid-template-columns: repeat(3, 1fr); }
  .ms-cell:nth-child(3) { border-right: none; }
  .ms-cell:nth-child(n+4) { border-top: 1px solid var(--border); }
}

@media (max-width: 680px) {
  .hdr-inner { flex-wrap: wrap; row-gap: 12px; }
  .hdr-center { order: 3; width: 100%; }
  .hdr-center .seg { width: 100%; }
  .hdr-center .seg-btn { flex: 1; justify-content: center; }
  .brand-sub { display: none; }
  .grid-bewoner {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "cop" "tiles" "savings" "settings" "trend";
  }
  .b-tiles { grid-template-columns: repeat(2, 1fr); }
  .hero-main { flex-direction: column; align-items: flex-start; }
  .hero-img { align-self: center; width: 130px; }
  .hero-foot { flex-wrap: wrap; }
  .sav-stats { margin-left: 0; gap: 18px; }
  .set-grid { grid-template-columns: 1fr; }
  .toggle-row { grid-template-columns: 1fr; }
  .grid-monteur {
    grid-template-columns: 1fr;
    grid-template-areas: "strip" "a" "b" "c" "power" "freq" "comp" "info" "docs";
  }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .ms-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .ms-cell:nth-child(odd) { border-right: 1px solid var(--border); }
  .comp-grid { grid-template-columns: 1fr 1fr; }
  .hdr-nav { display: none; }
}

/* Livewire component wrappers: fill grid cell height */
.b-savings > div,
.b-cop > div,
.b-settings > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Cards stretch to fill flex container */
.b-savings .card,
.b-settings .card,
.b-cop .card,
.b-hero .card {
    flex: 1;
}

/* Align-items stretch for all grid areas */
.grid-bewoner {
    align-items: stretch;
}

/* ── Koudemiddel kaart: max hoogte begrenzen ── */
.m-info .info-list,
.m-info .data-row {
  overflow: auto;
}

/* ── iPhone / Mobile verbeteringen ── */
@media (max-width: 480px) {
  /* Header */
  .hdr-inner { padding: 10px 16px; gap: 8px; flex-wrap: wrap; }
  .brand-sub { display: none; }
  .hdr-center { order: 3; width: 100%; }
  .hdr-center .seg { width: 100%; }
  .hdr-center .seg-btn { flex: 1; justify-content: center; padding: 10px 8px; font-size: 13px; }
  .hdr-nav { display: none; }
  .live-pill { font-size: 11px; padding: 5px 9px; }
  .live-clock { display: none; }

  /* Hero */
  .hero-main { flex-direction: column; }
  .hero-img { width: 140px !important; align-self: center; }
  .hero-temp .metric-num { font-size: clamp(48px, 14vw, 72px) !important; }

  /* Tiles: 2 kolommen */
  .b-tiles { grid-template-columns: repeat(2, 1fr) !important; }
  .tile { min-height: 120px; }

  /* Metric strip */
  .metric-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .ms-cell:nth-child(2n) { border-right: none; }
  .ms-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
  .ms-val .metric-num { font-size: 22px !important; }

  /* Cards padding */
  .card, .m-card { padding: 16px !important; }

  /* Settings grid */
  .set-grid { grid-template-columns: 1fr !important; }
  .toggle-row { grid-template-columns: 1fr !important; }

  /* Monteur grids */
  .grid-monteur {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "strip" "a" "b" "c" "charts" "comp" "docs" "info" !important;
  }
  .press-grid { grid-template-columns: 1fr !important; }
  .comp-grid { grid-template-columns: 1fr 1fr !important; }
  
  /* Savings */
  .b-savings > div > div { grid-template-columns: 1fr !important; }
}